Poll history - filter by active or ended (#10098)

* wip

* remove dupe

* use poll model relations in all cases

* update mpollbody tests to use poll instance

* update poll fetching login in pinned messages card

* add pinned polls to room polls state

* add spinner while relations are still loading

* handle no poll in end poll dialog

* strict errors

* render a poll body that errors for poll end events

* add fetching logic to pollend tile

* extract poll testing utilities

* test mpollend

* strict fix

* more strict fix

* strict fix for forwardref

* add filter component

* update poll test utils

* add unstyled filter tab group

* filtertabgroup snapshot

* lint

* update test util setupRoomWithPollEvents to allow testing multiple polls in one room

* style filter tabs

* test error message for past polls

* sort polls list by latest

* move FilterTabGroup into generic components

* comments

* Update src/components/views/dialogs/polls/types.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

test/components/views/elements/FilterTabGroup-test.tsx

@@ -0,0 +1,54 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+
+import { FilterTabGroup } from "../../../../src/components/views/elements/FilterTabGroup";
+
+describe("<FilterTabGroup />", () => {
+    enum TestOption {
+        Apple = "Apple",
+        Banana = "Banana",
+        Orange = "Orange",
+    }
+    const defaultProps = {
+        "name": "test",
+        "value": TestOption.Apple,
+        "onFilterChange": jest.fn(),
+        "tabs": [
+            { id: TestOption.Apple, label: `Label for ${TestOption.Apple}` },
+            { id: TestOption.Banana, label: `Label for ${TestOption.Banana}` },
+            { id: TestOption.Orange, label: `Label for ${TestOption.Orange}` },
+        ],
+        "data-testid": "test",
+    };
+    const getComponent = (props = {}) => <FilterTabGroup<TestOption> {...defaultProps} {...props} />;
+
+    it("renders options", () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it("calls onChange handler on selection", () => {
+        const onFilterChange = jest.fn();
+        const { getByText } = render(getComponent({ onFilterChange }));
+
+        fireEvent.click(getByText("Label for Banana"));
+
+        expect(onFilterChange).toHaveBeenCalledWith(TestOption.Banana);
+    });
+});

test/components/views/elements/__snapshots__/FilterTabGroup-test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterTabGroup /> renders options 1`] = `
+<div>
+  <fieldset
+    class="mx_FilterTabGroup"
+    data-testid="test"
+  >
+    <label
+      data-testid="filter-tab-test-Apple"
+    >
+      <input
+        checked=""
+        name="test"
+        type="radio"
+        value="Apple"
+      />
+      <span>
+        Label for Apple
+      </span>
+    </label>
+    <label
+      data-testid="filter-tab-test-Banana"
+    >
+      <input
+        name="test"
+        type="radio"
+        value="Banana"
+      />
+      <span>
+        Label for Banana
+      </span>
+    </label>
+    <label
+      data-testid="filter-tab-test-Orange"
+    >
+      <input
+        name="test"
+        type="radio"
+        value="Orange"
+      />
+      <span>
+        Label for Orange
+      </span>
+    </label>
+  </fieldset>
+</div>
+`;