Poll history - read only list of polls in current timeline (#10055)

* add settings while under development

* very basic tests for roomsummarycard

* empty poll history dialog and option in room summary

* pollS history in settings

* render an ugly list of polls in current timeline

* readonly poll history list items

* fix scroll window

* use short year code in date format, tidy

* no results message + tests

* strict fix

* mock intldatetimeformat for stable date formatting

* extract date format fn into date-utils

* jsdoc

Author: Kerry

res/css/_components.pcss

@@ -17,6 +17,7 @@
 @import "./components/views/beacon/_ShareLatestLocation.pcss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.pcss";
 @import "./components/views/context_menus/_KebabContextMenu.pcss";
+@import "./components/views/dialogs/polls/_PollListItem.pcss";
 @import "./components/views/elements/_FilterDropdown.pcss";
 @import "./components/views/elements/_LearnMore.pcss";
 @import "./components/views/location/_EnableLiveShare.pcss";
@@ -161,6 +162,8 @@
 @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";

res/css/components/views/dialogs/polls/_PollListItem.pcss

@@ -0,0 +1,40 @@
+/*
+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.
+*/
+
+.mx_PollListItem {
+    width: 100%;
+    display: grid;
+    justify-content: left;
+    align-items: center;
+    grid-gap: $spacing-8;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto;
+
+    color: $primary-content;
+}
+
+.mx_PollListItem_icon {
+    height: 14px;
+    width: 14px;
+    color: $quaternary-content;
+    padding-left: $spacing-8;
+}
+
+.mx_PollListItem_question {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

res/css/views/dialogs/polls/_PollHistoryDialog.pcss

@@ -0,0 +1,23 @@
+/*
+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.
+*/
+
+.mx_PollHistoryDialog_content {
+    height: 600px;
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+}

res/css/views/dialogs/polls/_PollHistoryList.pcss

@@ -0,0 +1,44 @@
+/*
+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.
+*/
+
+.mx_PollHistoryList {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    max-height: 100%;
+}
+
+.mx_PollHistoryList_list {
+    overflow: auto;
+    list-style: none;
+    margin-block: 0;
+    padding-inline: 0;
+    flex: 1 1 0;
+    align-content: flex-start;
+    display: grid;
+    grid-gap: $spacing-20;
+    padding-right: $spacing-64;
+    margin: $spacing-32 0;
+}
+
+.mx_PollHistoryList_noResults {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $secondary-content;
+}

src/DateUtils.ts

@@ -269,3 +269,16 @@ export function formatPreciseDuration(durationMs: number): string {
     }
     return _t("%(value)ss", { value: seconds });
 }
+
+/**
+ * Formats a timestamp to a short date
+ * (eg 25/12/22 in uk locale)
+ * localised by system locale
+ * @param timestamp - epoch timestamp
+ * @returns {string} formattedDate
+ */
+export const formatLocalDateShort = (timestamp: number): string =>
+    new Intl.DateTimeFormat(
+        undefined, // locales
+        { day: "2-digit", month: "2-digit", year: "2-digit" },
+    ).format(timestamp);

src/components/views/dialogs/polls/PollHistoryDialog.tsx

@@ -15,19 +15,26 @@ limitations under the License.
 */
 
 import React from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { _t } from "../../../../languageHandler";
 import BaseDialog from "../BaseDialog";
 import { IDialogProps } from "../IDialogProps";
+import { PollHistoryList } from "./PollHistoryList";
+import { getPolls } from "./usePollHistory";
 
 type PollHistoryDialogProps = Pick<IDialogProps, "onFinished"> & {
     roomId: string;
+    matrixClient: MatrixClient;
 };
+export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ roomId, matrixClient, onFinished }) => {
+    const pollStartEvents = getPolls(roomId, matrixClient);
 
-export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ onFinished }) => {
     return (
         <BaseDialog title={_t("Polls history")} onFinished={onFinished}>
-            {/* @TODO(kerrya) to be implemented in PSG-906 */}
+            <div className="mx_PollHistoryDialog_content">
+                <PollHistoryList pollStartEvents={pollStartEvents} />
+            </div>
         </BaseDialog>
     );
 };

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

@@ -0,0 +1,40 @@
+/*
+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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import PollListItem from "./PollListItem";
+import { _t } from "../../../../languageHandler";
+
+type PollHistoryListProps = {
+    pollStartEvents: MatrixEvent[];
+};
+export const PollHistoryList: React.FC<PollHistoryListProps> = ({ pollStartEvents }) => {
+    return (
+        <div className="mx_PollHistoryList">
+            {!!pollStartEvents.length ? (
+                <ol className="mx_PollHistoryList_list">
+                    {pollStartEvents.map((pollStartEvent) => (
+                        <PollListItem key={pollStartEvent.getId()!} event={pollStartEvent} />
+                    ))}
+                </ol>
+            ) : (
+                <span className="mx_PollHistoryList_noResults">{_t("There are no polls in this room")}</span>
+            )}
+        </div>
+    );
+};

src/components/views/dialogs/polls/PollListItem.tsx

@@ -0,0 +1,43 @@
+/*
+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 { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
+import { formatLocalDateShort } from "../../../../DateUtils";
+
+interface Props {
+    event: MatrixEvent;
+}
+
+const PollListItem: React.FC<Props> = ({ event }) => {
+    const pollEvent = event.unstableExtensibleEvent as unknown as PollStartEvent;
+    if (!pollEvent) {
+        return null;
+    }
+    const formattedDate = formatLocalDateShort(event.getTs());
+    return (
+        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem">
+            <span>{formattedDate}</span>
+            <PollIcon className="mx_PollListItem_icon" />
+            <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
+        </li>
+    );
+};
+
+export default PollListItem;

src/components/views/dialogs/polls/usePollHistory.ts

@@ -0,0 +1,40 @@
+/*
+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 { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+/**
+ * Get poll start events in a rooms live timeline
+ * @param roomId - id of room to retrieve polls for
+ * @param matrixClient - client
+ * @returns {MatrixEvent[]} - array fo poll start events
+ */
+export const getPolls = (roomId: string, matrixClient: MatrixClient): MatrixEvent[] => {
+    const room = matrixClient.getRoom(roomId);
+
+    if (!room) {
+        throw new Error("Cannot find room");
+    }
+
+    // @TODO(kerrya) poll history will be actively fetched in PSG-1043
+    // for now, just display polls that are in the current timeline
+    const timelineEvents = room.getLiveTimeline().getEvents();
+    const pollStartEvents = timelineEvents.filter((event) => M_POLL_START.matches(event.getType()));
+
+    return pollStartEvents;
+};

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -286,6 +286,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
     const onRoomPollHistoryClick = (): void => {
         Modal.createDialog(PollHistoryDialog, {
             roomId: room.roomId,
+            matrixClient: cli,
         });
     };
 
@@ -353,7 +354,11 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
                         {_t("Export chat")}
                     </Button>
                 )}
-                <Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
+                <Button
+                    data-testid="shareRoomButton"
+                    className="mx_RoomSummaryCard_icon_share"
+                    onClick={onShareRoomClick}
+                >
                     {_t("Share room")}
                 </Button>
                 <Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>

src/i18n/strings/en_EN.json

@@ -3141,6 +3141,7 @@
     "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Warning</b>: You should only set up key backup from a trusted computer.",
     "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>",
+    "There are no polls in this room": "There are no polls in this room",
     "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",