Poll history - access poll history from room settings (#10356)

* add poll history tab to room settings

* test poll history in room settings

* remove posthog tracking for poll his

* use consistent label for polls history

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -42,6 +42,10 @@ limitations under the License.
     mask-image: url("$(res)/img/feather-customised/bridge.svg");
 }
 
+.mx_RoomSettingsDialog_pollsIcon::before {
+    mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
+}
+
 .mx_RoomSettingsDialog_warningIcon::before {
     mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
 }

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -35,6 +35,7 @@ import { Action } from "../../../dispatcher/actions";
 import { VoipRoomSettingsTab } from "../settings/tabs/room/VoipRoomSettingsTab";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { NonEmptyArray } from "../../../@types/common";
+import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
 export const ROOM_VOIP_TAB = "ROOM_VOIP_TAB";
@@ -43,6 +44,7 @@ export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
 export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
 export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
 export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
+export const ROOM_POLL_HISTORY_TAB = "ROOM_POLL_HISTORY_TAB";
 
 interface IProps {
     roomId: string;
@@ -162,6 +164,17 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
             );
         }
 
+        if (SettingsStore.getValue("feature_poll_history")) {
+            tabs.push(
+                new Tab(
+                    ROOM_POLL_HISTORY_TAB,
+                    _td("Polls history"),
+                    "mx_RoomSettingsDialog_pollsIcon",
+                    <PollHistoryTab roomId={this.props.roomId} onFinished={() => this.props.onFinished(true)} />,
+                ),
+            );
+        }
+
         if (SettingsStore.getValue(UIFeature.AdvancedSettings)) {
             tabs.push(
                 new Tab(

src/components/views/settings/tabs/room/PollHistoryTab.tsx

@@ -0,0 +1,46 @@
+/*
+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, { useContext } from "react";
+
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import { PollHistory } from "../../../polls/pollHistory/PollHistory";
+import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
+
+interface IProps {
+    roomId: string;
+    onFinished: () => void;
+}
+
+export const PollHistoryTab: React.FC<IProps> = ({ roomId, onFinished }) => {
+    const matrixClient = useContext(MatrixClientContext);
+    const room = matrixClient.getRoom(roomId);
+    if (!room) {
+        return null;
+    }
+    const permalinkCreator = new RoomPermalinkCreator(room, roomId);
+
+    return (
+        <div className="mx_SettingsTab">
+            <PollHistory
+                room={room}
+                permalinkCreator={permalinkCreator}
+                matrixClient={matrixClient}
+                onFinished={onFinished}
+            />
+        </div>
+    );
+};

test/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -0,0 +1,111 @@
+/*
+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, screen } from "@testing-library/react";
+import { Room, Visibility } from "matrix-js-sdk/src/matrix";
+
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
+import RoomSettingsDialog from "../../../../src/components/views/dialogs/RoomSettingsDialog";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { UIFeature } from "../../../../src/settings/UIFeature";
+
+describe("<RoomSettingsDialog />", () => {
+    const userId = "@alice:server.org";
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        isRoomEncrypted: jest.fn().mockReturnValue(false),
+        getRoom: jest.fn(),
+        getDomain: jest.fn().mockReturnValue("server.org"),
+        getLocalAliases: jest.fn().mockResolvedValue({ aliases: [] }),
+        getRoomDirectoryVisibility: jest.fn().mockResolvedValue({ visibility: Visibility.Private }),
+        getOrCreateFilter: jest.fn(),
+    });
+
+    const roomId = "!room:server.org";
+    const room = new Room(roomId, mockClient, userId);
+
+    jest.spyOn(SettingsStore, "getValue");
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        mockClient.getRoom.mockReturnValue(room);
+
+        jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
+    });
+
+    const getComponent = (onFinished = jest.fn()) =>
+        render(<RoomSettingsDialog roomId={roomId} onFinished={onFinished} />, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
+            ),
+        });
+
+    describe("Settings tabs", () => {
+        it("renders default tabs correctly", () => {
+            const { container } = getComponent();
+            expect(container.querySelectorAll(".mx_TabbedView_tabLabel")).toMatchSnapshot();
+        });
+
+        it("renders voip settings tab when enabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (settingName) => settingName === "feature_group_calls",
+            );
+            getComponent();
+            expect(screen.getByTestId("settings-tab-ROOM_VOIP_TAB")).toBeInTheDocument();
+        });
+
+        it("renders bridges settings tab when enabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (settingName) => settingName === "feature_bridge_state",
+            );
+            getComponent();
+            expect(screen.getByTestId("settings-tab-ROOM_BRIDGES_TAB")).toBeInTheDocument();
+        });
+
+        it("renders advanced settings tab when enabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (settingName) => settingName === UIFeature.AdvancedSettings,
+            );
+            getComponent();
+            expect(screen.getByTestId("settings-tab-ROOM_ADVANCED_TAB")).toBeInTheDocument();
+        });
+    });
+
+    describe("poll history", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (settingName) => settingName === "feature_poll_history",
+            );
+
+            mockClient.getOrCreateFilter.mockResolvedValue("filterId");
+        });
+        it("renders poll history tab", () => {
+            getComponent();
+            expect(screen.getByTestId("settings-tab-ROOM_POLL_HISTORY_TAB")).toBeInTheDocument();
+        });
+
+        it("displays poll history when tab clicked", () => {
+            const { container } = getComponent();
+
+            fireEvent.click(screen.getByText("Polls history"));
+
+            expect(container.querySelector(".mx_SettingsTab")).toMatchSnapshot();
+        });
+    });
+});

test/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoomSettingsDialog /> Settings tabs renders default tabs correctly 1`] = `
+NodeList [
+  <div
+    class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
+    data-testid="settings-tab-ROOM_GENERAL_TAB"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_settingsIcon"
+    />
+    <span
+      class="mx_TabbedView_tabLabel_text"
+    >
+      General
+    </span>
+  </div>,
+  <div
+    class="mx_AccessibleButton mx_TabbedView_tabLabel "
+    data-testid="settings-tab-ROOM_SECURITY_TAB"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_securityIcon"
+    />
+    <span
+      class="mx_TabbedView_tabLabel_text"
+    >
+      Security & Privacy
+    </span>
+  </div>,
+  <div
+    class="mx_AccessibleButton mx_TabbedView_tabLabel "
+    data-testid="settings-tab-ROOM_ROLES_TAB"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_rolesIcon"
+    />
+    <span
+      class="mx_TabbedView_tabLabel_text"
+    >
+      Roles & Permissions
+    </span>
+  </div>,
+  <div
+    class="mx_AccessibleButton mx_TabbedView_tabLabel "
+    data-testid="settings-tab-ROOM_NOTIFICATIONS_TAB"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_notificationsIcon"
+    />
+    <span
+      class="mx_TabbedView_tabLabel_text"
+    >
+      Notifications
+    </span>
+  </div>,
+]
+`;
+
+exports[`<RoomSettingsDialog /> poll history displays poll history when tab clicked 1`] = `
+<div
+  class="mx_SettingsTab"
+>
+  <div
+    class="mx_PollHistory_content"
+  >
+    <h2
+      class="mx_Heading_h2 mx_PollHistory_header"
+    >
+      Polls history
+    </h2>
+    <div
+      class="mx_PollHistoryList"
+    >
+      <fieldset
+        class="mx_FilterTabGroup"
+      >
+        <label
+          data-testid="filter-tab-PollHistory_filter-ACTIVE"
+        >
+          <input
+            checked=""
+            name="PollHistory_filter"
+            type="radio"
+            value="ACTIVE"
+          />
+          <span>
+            Active polls
+          </span>
+        </label>
+        <label
+          data-testid="filter-tab-PollHistory_filter-ENDED"
+        >
+          <input
+            name="PollHistory_filter"
+            type="radio"
+            value="ENDED"
+          />
+          <span>
+            Past polls
+          </span>
+        </label>
+      </fieldset>
+      <div
+        class="mx_PollHistoryList_loading mx_PollHistoryList_noResultsYet"
+      >
+        <div
+          class="mx_InlineSpinner"
+        >
+          <div
+            aria-label="Loading…"
+            class="mx_InlineSpinner_icon mx_Spinner_icon"
+            style="width: 16px; height: 16px;"
+          />
+        </div>
+        Loading polls
+      </div>
+    </div>
+  </div>
+</div>
+`;