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

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,16 +169,19 @@ 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,
                         })}
                     >
-                        <Heading
-                            size="h2"
-                            className={classNames("mx_Dialog_title", this.props.titleClass)}
-                            id="mx_BaseDialog_title"
-                        >
-                            {headerImage}
-                            {this.props.title}
-                        </Heading>
+                        {!!(this.props.title || headerImage) && (
+                            <Heading
+                                size="h2"
+                                className={classNames("mx_Dialog_title", this.props.titleClass)}
+                                id="mx_BaseDialog_title"
+                            >
+                                {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,23 +67,25 @@ export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
     );
 
     return (
-        <BaseDialog title={title} onFinished={onFinished}>
-            <div className="mx_PollHistoryDialog_content">
-                {focusedPoll ? (
-                    <PollDetail poll={focusedPoll} permalinkCreator={permalinkCreator} requestModalClose={onFinished} />
-                ) : (
-                    <PollHistoryList
-                        onItemClick={setFocusedPollId}
-                        pollStartEvents={pollStartEvents}
-                        isLoading={isLoading || isLoadingPollResponses}
-                        oldestFetchedEventTimestamp={oldestEventTimestamp}
-                        polls={polls}
-                        filter={filter}
-                        onFilterChange={setFilter}
-                        loadMorePolls={loadMorePolls}
-                    />
-                )}
-            </div>
-        </BaseDialog>
+        <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} />
+            ) : (
+                <PollHistoryList
+                    onItemClick={setFocusedPollId}
+                    pollStartEvents={pollStartEvents}
+                    isLoading={isLoading || isLoadingPollResponses}
+                    oldestFetchedEventTimestamp={oldestEventTimestamp}
+                    polls={polls}
+                    filter={filter}
+                    onFilterChange={setFilter}
+                    loadMorePolls={loadMorePolls}
+                />
+            )}
+        </div>
     );
 };

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;