Poll history - make poll history independent from dialogs (#10349)

* move pollhistory from dialogs to polls directory

* rename PollHistoryDialog -> PollHistory

* rename references to PollHistoryDialog

* move title to PollHistory

* add option to collapse empty dialog header

res/css/_common.pcss

@@ -460,6 +460,11 @@ legend {
     padding-right: 20px; /* leave space for the 'X' cancel button */
 }
 
+.mx_Dialog_header.mx_Dialog_headerWithCancelOnly {
+    padding: 0 20px 0 0;
+    margin: 0;
+}
+
 .mx_Dialog_title.danger {
     color: $alert;
 }

res/css/_components.pcss

@@ -166,8 +166,6 @@
 @import "./views/dialogs/_UserSettingsDialog.pcss";
 @import "./views/dialogs/_VerifyEMailDialog.pcss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
-@import "./views/dialogs/polls/_PollHistoryDialog.pcss";
-@import "./views/dialogs/polls/_PollHistoryList.pcss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
 @import "./views/dialogs/security/_CreateKeyBackupDialog.pcss";
@@ -256,6 +254,8 @@
 @import "./views/messages/_UnknownBody.pcss";
 @import "./views/messages/_ViewSourceEvent.pcss";
 @import "./views/messages/_common_CryptoEvent.pcss";
+@import "./views/polls/pollHistory/_PollHistory.pcss";
+@import "./views/polls/pollHistory/_PollHistoryList.pcss";
 @import "./views/right_panel/_BaseCard.pcss";
 @import "./views/right_panel/_EncryptionInfo.pcss";
 @import "./views/right_panel/_PinnedMessagesCard.pcss";

res/css/views/polls/pollHistory/_PollHistory.pcss

@@ -14,10 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_PollHistoryDialog_content {
+.mx_PollHistory_content {
     height: 600px;
     width: 100%;
 
     display: flex;
     flex-direction: column;
 }
+
+.mx_PollHistory_header.mx_Heading_h2 {
+    margin-bottom: $spacing-16;
+}

src/components/views/dialogs/BaseDialog.tsx

@@ -151,6 +151,9 @@ export default class BaseDialog extends React.Component<IProps> {
             lockProps["aria-labelledby"] = "mx_BaseDialog_title";
         }
 
+        const isHeaderWithCancelOnly =
+            !!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage;
+
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
                 {this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
@@ -166,8 +169,10 @@ export default class BaseDialog extends React.Component<IProps> {
                         className={classNames("mx_Dialog_header", {
                             mx_Dialog_headerWithButton: !!this.props.headerButton,
                             mx_Dialog_headerWithCancel: !!cancelButton,
+                            mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
                         })}
                     >
+                        {!!(this.props.title || headerImage) && (
                             <Heading
                                 size="h2"
                                 className={classNames("mx_Dialog_title", this.props.titleClass)}
@@ -176,6 +181,7 @@ export default class BaseDialog extends React.Component<IProps> {
                                 {headerImage}
                                 {this.props.title}
                             </Heading>
+                        )}
                         {this.props.headerButton}
                         {cancelButton}
                     </div>

src/components/views/dialogs/PollHistoryDialog.tsx

@@ -0,0 +1,49 @@
+/*
+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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { PollHistory } from "../polls/pollHistory/PollHistory";
+import BaseDialog from "./BaseDialog";
+
+type PollHistoryDialogProps = {
+    room: Room;
+    matrixClient: MatrixClient;
+    permalinkCreator: RoomPermalinkCreator;
+    onFinished(): void;
+};
+
+export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
+    room,
+    matrixClient,
+    permalinkCreator,
+    onFinished,
+}) => {
+    // @TODO hide dialog title somehow
+    return (
+        <BaseDialog onFinished={onFinished}>
+            <PollHistory
+                room={room}
+                matrixClient={matrixClient}
+                permalinkCreator={permalinkCreator}
+                onFinished={onFinished}
+            />
+        </BaseDialog>
+    );
+};

src/components/views/polls/pollHistory/PollDetail.tsx

@@ -35,7 +35,7 @@ interface Props {
 const NOOP = (): void => {};
 
 /**
- * Content of the PollHistoryDialog when a specific poll is selected
+ * Content of PollHistory when a specific poll is selected
  */
 export const PollDetail: React.FC<Props> = ({ poll, permalinkCreator, requestModalClose }) => {
     // link to end event for ended polls

src/components/views/polls/pollHistory/PollHistory.tsx

@@ -19,7 +19,6 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../../languageHandler";
-import BaseDialog from "../BaseDialog";
 import { PollHistoryList } from "./PollHistoryList";
 import { PollHistoryFilter } from "./types";
 import { PollDetailHeader } from "./PollDetailHeader";
@@ -27,8 +26,9 @@ import { PollDetail } from "./PollDetail";
 import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
 import { usePollsWithRelations } from "./usePollHistory";
 import { useFetchPastPolls } from "./fetchPastPolls";
+import Heading from "../../typography/Heading";
 
-type PollHistoryDialogProps = {
+type PollHistoryProps = {
     room: Room;
     matrixClient: MatrixClient;
     permalinkCreator: RoomPermalinkCreator;
@@ -50,12 +50,7 @@ const filterAndSortPolls = (polls: Map<string, Poll>, filter: PollHistoryFilter)
         .sort(sortEventsByLatest);
 };
 
-export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
-    room,
-    matrixClient,
-    permalinkCreator,
-    onFinished,
-}) => {
+export const PollHistory: React.FC<PollHistoryProps> = ({ room, matrixClient, permalinkCreator, onFinished }) => {
     const { polls } = usePollsWithRelations(room.roomId, matrixClient);
     const { isLoading, loadMorePolls, oldestEventTimestamp } = useFetchPastPolls(room, matrixClient);
     const [filter, setFilter] = useState<PollHistoryFilter>("ACTIVE");
@@ -72,8 +67,11 @@ export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
     );
 
     return (
-        <BaseDialog title={title} onFinished={onFinished}>
-            <div className="mx_PollHistoryDialog_content">
+        <div className="mx_PollHistory_content">
+            {/* @TODO this probably needs some style */}
+            <Heading className="mx_PollHistory_header" size="h2">
+                {title}
+            </Heading>
             {focusedPoll ? (
                 <PollDetail poll={focusedPoll} permalinkCreator={permalinkCreator} requestModalClose={onFinished} />
             ) : (
@@ -89,6 +87,5 @@ export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
                 />
             )}
         </div>
-        </BaseDialog>
     );
 };

src/components/views/polls/pollHistory/PollHistoryList.tsx

@@ -129,7 +129,7 @@ export const PollHistoryList: React.FC<PollHistoryListProps> = ({
     return (
         <div className="mx_PollHistoryList">
             <FilterTabGroup<PollHistoryFilter>
-                name="PollHistoryDialog_filter"
+                name="PollHistory_filter"
                 value={filter}
                 onFilterChange={onFilterChange}
                 tabs={[

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -52,7 +52,7 @@ import ExportDialog from "../dialogs/ExportDialog";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { PollHistoryDialog } from "../dialogs/polls/PollHistoryDialog";
+import { PollHistoryDialog } from "../dialogs/PollHistoryDialog";
 
 interface IProps {
     room: Room;

src/i18n/strings/en_EN.json

@@ -2319,6 +2319,22 @@
     "Verification cancelled": "Verification cancelled",
     "%(count)s votes|other": "%(count)s votes",
     "%(count)s votes|one": "%(count)s vote",
+    "View poll in timeline": "View poll in timeline",
+    "Active polls": "Active polls",
+    "Past polls": "Past polls",
+    "Loading polls": "Loading polls",
+    "Load more polls": "Load more polls",
+    "There are no active polls in this room": "There are no active polls in this room",
+    "There are no past polls in this room": "There are no past polls in this room",
+    "There are no active polls. Load more polls to view polls for previous months": "There are no active polls. Load more polls to view polls for previous months",
+    "There are no past polls. Load more polls to view polls for previous months": "There are no past polls. Load more polls to view polls for previous months",
+    "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months",
+    "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no active polls for the past day. Load more polls to view polls for previous months",
+    "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months",
+    "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no past polls for the past day. Load more polls to view polls for previous months",
+    "View poll": "View poll",
+    "Final result based on %(count)s votes|other": "Final result based on %(count)s votes",
+    "Final result based on %(count)s votes|one": "Final result based on %(count)s vote",
     "%(name)s started a video call": "%(name)s started a video call",
     "Video call ended": "Video call ended",
     "Sunday": "Sunday",
@@ -2412,8 +2428,6 @@
     "Vote not registered": "Vote not registered",
     "Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.",
     "Due to decryption errors, some votes may not be counted": "Due to decryption errors, some votes may not be counted",
-    "Final result based on %(count)s votes|other": "Final result based on %(count)s votes",
-    "Final result based on %(count)s votes|one": "Final result based on %(count)s vote",
     "Results will be visible when the poll is ended": "Results will be visible when the poll is ended",
     "No votes cast": "No votes cast",
     "%(count)s votes cast. Vote to see the results|other": "%(count)s votes cast. Vote to see the results",
@@ -3129,20 +3143,6 @@
     "Not a valid Security Key": "Not a valid Security Key",
     "Access your secure message history and set up secure messaging by entering your Security Key.": "Access your secure message history and set up secure messaging by entering your Security Key.",
     "If you've forgotten your Security Key you can <button>set up new recovery options</button>": "If you've forgotten your Security Key you can <button>set up new recovery options</button>",
-    "View poll in timeline": "View poll in timeline",
-    "Active polls": "Active polls",
-    "Past polls": "Past polls",
-    "Loading polls": "Loading polls",
-    "Load more polls": "Load more polls",
-    "There are no active polls in this room": "There are no active polls in this room",
-    "There are no past polls in this room": "There are no past polls in this room",
-    "There are no active polls. Load more polls to view polls for previous months": "There are no active polls. Load more polls to view polls for previous months",
-    "There are no past polls. Load more polls to view polls for previous months": "There are no past polls. Load more polls to view polls for previous months",
-    "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months",
-    "There are no active polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no active polls for the past day. Load more polls to view polls for previous months",
-    "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months",
-    "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months|one": "There are no past polls for the past day. Load more polls to view polls for previous months",
-    "View poll": "View poll",
     "Send custom account data event": "Send custom account data event",
     "Send custom room account data event": "Send custom room account data event",
     "Event Type": "Event Type",

test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<PollHistoryDialog /> Poll detail displays poll detail on active poll list item click 1`] = `
-<h2
-  data-testid="pollQuestion"
->
-  Question?
-</h2>
-`;
-
-exports[`<PollHistoryDialog /> Poll detail displays poll detail on past poll list item click 1`] = `
-<h2
-  data-testid="pollQuestion"
->
-  What?
-</h2>
-`;
-
-exports[`<PollHistoryDialog /> Poll detail navigates back to poll list from detail view on header click 1`] = `
-<div
-  class="mx_AccessibleButton mx_PollDetailHeader mx_AccessibleButton_hasKind mx_AccessibleButton_kind_content_inline"
-  role="button"
-  tabindex="0"
->
-  <div
-    class="mx_PollDetailHeader_icon"
-  />
-  Active polls
-</div>
-`;
-
-exports[`<PollHistoryDialog /> renders a list of active polls when there are polls in the room 1`] = `
-<div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-labelledby="mx_BaseDialog_title"
-    class="mx_Dialog_fixedWidth"
-    data-focus-lock-disabled="false"
-    role="dialog"
-  >
-    <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
-    >
-      <h2
-        class="mx_Heading_h2 mx_Dialog_title"
-        id="mx_BaseDialog_title"
-      >
-        Polls history
-      </h2>
-      <div
-        aria-label="Close dialog"
-        class="mx_AccessibleButton mx_Dialog_cancelButton"
-        role="button"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="mx_PollHistoryDialog_content"
-    >
-      <div
-        class="mx_PollHistoryList"
-      >
-        <fieldset
-          class="mx_FilterTabGroup"
-        >
-          <label
-            data-testid="filter-tab-PollHistoryDialog_filter-ACTIVE"
-          >
-            <input
-              checked=""
-              name="PollHistoryDialog_filter"
-              type="radio"
-              value="ACTIVE"
-            />
-            <span>
-              Active polls
-            </span>
-          </label>
-          <label
-            data-testid="filter-tab-PollHistoryDialog_filter-ENDED"
-          >
-            <input
-              name="PollHistoryDialog_filter"
-              type="radio"
-              value="ENDED"
-            />
-            <span>
-              Past polls
-            </span>
-          </label>
-        </fieldset>
-        <ol
-          class="mx_PollHistoryList_list mx_PollHistoryList_list_ACTIVE"
-        >
-          <li
-            class="mx_PollListItem"
-            data-testid="pollListItem-$2"
-          >
-            <div
-              tabindex="0"
-            >
-              <div
-                class="mx_PollListItem_content"
-              >
-                <span>
-                  02/02/23
-                </span>
-                <div
-                  class="mx_PollListItem_icon"
-                />
-                <span
-                  class="mx_PollListItem_question"
-                >
-                  Where?
-                </span>
-              </div>
-            </div>
-          </li>
-          <li
-            class="mx_PollListItem"
-            data-testid="pollListItem-$1"
-          >
-            <div
-              tabindex="0"
-            >
-              <div
-                class="mx_PollListItem_content"
-              >
-                <span>
-                  02/02/23
-                </span>
-                <div
-                  class="mx_PollListItem_icon"
-                />
-                <span
-                  class="mx_PollListItem_question"
-                >
-                  Question?
-                </span>
-              </div>
-            </div>
-          </li>
-        </ol>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</div>
-`;
-
-exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 1`] = `
-<div
-  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-  role="button"
-  tabindex="0"
->
-  Load more polls
-  <div
-    class="mx_InlineSpinner"
-  >
-    <div
-      aria-label="Loading…"
-      class="mx_InlineSpinner_icon mx_Spinner_icon"
-      style="width: 16px; height: 16px;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<PollHistoryDialog /> renders a no polls message and a load more button when not at end of timeline 2`] = `
-<div
-  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-  role="button"
-  tabindex="0"
->
-  Load more polls
-</div>
-`;

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -20,7 +20,7 @@ import { Filter } from "matrix-js-sdk/src/filter";
 import { EventTimeline, Room } from "matrix-js-sdk/src/matrix";
 import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
 
-import { PollHistoryDialog } from "../../../../../src/components/views/dialogs/polls/PollHistoryDialog";
+import { PollHistory } from "../../../../../src/components/views/polls/pollHistory/PollHistory";
 import {
     flushPromises,
     getMockClientWithEventEmitter,
@@ -34,8 +34,9 @@ import {
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
-describe("<PollHistoryDialog />", () => {
+describe("<PollHistory />", () => {
     // 14.03.2022 16:15
     const now = 1647270879403;
     const userId = "@alice:domain.org";
@@ -65,7 +66,12 @@ describe("<PollHistoryDialog />", () => {
         permalinkCreator: new RoomPermalinkCreator(room),
         onFinished: jest.fn(),
     };
-    const getComponent = () => render(<PollHistoryDialog {...defaultProps} />);
+    const getComponent = () =>
+        render(<PollHistory {...defaultProps} />, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
+            ),
+        });
 
     beforeAll(() => {
         mockIntlDateTimeFormat();
@@ -239,7 +245,7 @@ describe("<PollHistoryDialog />", () => {
         // flush relations calls for polls
         await flushPromises();
 
-        expect(getByTestId("filter-tab-PollHistoryDialog_filter-ACTIVE").firstElementChild).toBeChecked();
+        expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
 
         expect(container).toMatchSnapshot();
         // this poll is ended, and default filter is ACTIVE
@@ -288,7 +294,7 @@ describe("<PollHistoryDialog />", () => {
         expect(queryByText("What?")).not.toBeInTheDocument();
 
         fireEvent.click(getByText("Past polls"));
-        expect(getByTestId("filter-tab-PollHistoryDialog_filter-ENDED").firstElementChild).toBeChecked();
+        expect(getByTestId("filter-tab-PollHistory_filter-ENDED").firstElementChild).toBeChecked();
 
         // active polls no longer shown
         expect(queryByText("Question?")).not.toBeInTheDocument();
@@ -396,7 +402,7 @@ describe("<PollHistoryDialog />", () => {
             // main list header displayed again
             expect(getByText("Polls history")).toBeInTheDocument();
             // active filter still active
-            expect(getByTestId("filter-tab-PollHistoryDialog_filter-ACTIVE").firstElementChild).toBeChecked();
+            expect(getByTestId("filter-tab-PollHistory_filter-ACTIVE").firstElementChild).toBeChecked();
             // list displayed
             expect(container.getElementsByClassName("mx_PollHistoryList_list").length).toBeTruthy();
         });

test/components/views/polls/pollHistory/PollListItem-test.tsx

@@ -18,7 +18,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import { PollListItem } from "../../../../../src/components/views/dialogs/polls/PollListItem";
+import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
 import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
 
 describe("<PollListItem />", () => {

test/components/views/polls/pollHistory/PollListItemEnded-test.tsx

@@ -19,7 +19,7 @@ import { render } from "@testing-library/react";
 import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
 import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
 
-import { PollListItemEnded } from "../../../../../src/components/views/dialogs/polls/PollListItemEnded";
+import { PollListItemEnded } from "../../../../../src/components/views/polls/pollHistory/PollListItemEnded";
 import {
     flushPromises,
     getMockClientWithEventEmitter,

test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = `
+<h2
+  data-testid="pollQuestion"
+>
+  Question?
+</h2>
+`;
+
+exports[`<PollHistory /> Poll detail displays poll detail on past poll list item click 1`] = `
+<h2
+  data-testid="pollQuestion"
+>
+  What?
+</h2>
+`;
+
+exports[`<PollHistory /> Poll detail navigates back to poll list from detail view on header click 1`] = `
+<div
+  class="mx_AccessibleButton mx_PollDetailHeader mx_AccessibleButton_hasKind mx_AccessibleButton_kind_content_inline"
+  role="button"
+  tabindex="0"
+>
+  <div
+    class="mx_PollDetailHeader_icon"
+  />
+  Active polls
+</div>
+`;
+
+exports[`<PollHistory /> renders a list of active polls when there are polls in the room 1`] = `
+<div>
+  <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>
+      <ol
+        class="mx_PollHistoryList_list mx_PollHistoryList_list_ACTIVE"
+      >
+        <li
+          class="mx_PollListItem"
+          data-testid="pollListItem-$2"
+        >
+          <div
+            tabindex="0"
+          >
+            <div
+              class="mx_PollListItem_content"
+            >
+              <span>
+                02/02/23
+              </span>
+              <div
+                class="mx_PollListItem_icon"
+              />
+              <span
+                class="mx_PollListItem_question"
+              >
+                Where?
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="mx_PollListItem"
+          data-testid="pollListItem-$1"
+        >
+          <div
+            tabindex="0"
+          >
+            <div
+              class="mx_PollListItem_content"
+            >
+              <span>
+                02/02/23
+              </span>
+              <div
+                class="mx_PollListItem_icon"
+              />
+              <span
+                class="mx_PollListItem_question"
+              >
+                Question?
+              </span>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<PollHistory /> renders a no polls message and a load more button when not at end of timeline 1`] = `
+<div
+  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+  role="button"
+  tabindex="0"
+>
+  Load more polls
+  <div
+    class="mx_InlineSpinner"
+  >
+    <div
+      aria-label="Loading…"
+      class="mx_InlineSpinner_icon mx_Spinner_icon"
+      style="width: 16px; height: 16px;"
+    />
+  </div>
+</div>
+`;
+
+exports[`<PollHistory /> renders a no polls message and a load more button when not at end of timeline 2`] = `
+<div
+  class="mx_AccessibleButton mx_PollHistoryList_loadMorePolls mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+  role="button"
+  tabindex="0"
+>
+  Load more polls
+</div>
+`;

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -29,7 +29,7 @@ import Modal from "../../../../src/Modal";
 import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
-import { PollHistoryDialog } from "../../../../src/components/views/dialogs/polls/PollHistoryDialog";
+import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 
 describe("<RoomSummaryCard />", () => {