Allow ending polls (#7305)

Co-authored-by: Michael Telatynski <[email protected]>

Author: andybalaam

res/css/views/context_menus/_MessageContextMenu.scss

@@ -54,6 +54,10 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
     }
 
+    .mx_MessageContextMenu_iconEndPoll::before {
+        mask-image: url('$(res)/img/element-icons/check-white.svg');
+    }
+
     .mx_MessageContextMenu_iconForward::before {
         mask-image: url('$(res)/img/element-icons/message/fwd.svg');
     }

res/css/views/messages/_MPollBody.scss

@@ -45,16 +45,17 @@ limitations under the License.
         border: 1px solid $quinary-content;
         border-radius: 8px;
         margin-bottom: 16px;
-        padding: 6px;
+        padding: 6px 12px;
         max-width: 550px;
         background-color: $background;
 
-        .mx_StyledRadioButton {
+        .mx_StyledRadioButton, .mx_MPollBody_endedOption {
             margin-bottom: 8px;
         }
 
-        .mx_StyledRadioButton_content {
+        .mx_StyledRadioButton_content, .mx_MPollBody_endedOption {
             padding-top: 2px;
+            margin-right: 0px;
         }
 
         .mx_StyledRadioButton_spacer {
@@ -73,7 +74,7 @@ limitations under the License.
         }
 
         .mx_MPollBody_popularityBackground {
-            width: calc(100% - 6px);
+            width: 100%;
             height: 8px;
             margin-right: 12px;
             border-radius: 8px;
@@ -102,20 +103,37 @@ limitations under the License.
         }
     }
 
-    .mx_StyledRadioButton_checked input[type="radio"] + div {
-        border-width: 2px;
-        border-color: $accent;
-        background-color: $accent;
-        background-image: url('$(res)/img/element-icons/check-white.svg');
-        background-size: 12px;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        div {
-            visibility: hidden;
+    .mx_StyledRadioButton_checked, .mx_MPollBody_endedOptionWinner {
+        input[type="radio"] + div {
+            border-width: 2px;
+            border-color: $accent;
+            background-color: $accent;
+            background-image: url('$(res)/img/element-icons/check-white.svg');
+            background-size: 12px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            div {
+                visibility: hidden;
+            }
         }
     }
 
+    .mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
+        content: '';
+        position: relative;
+        display: inline-block;
+        margin-right: 4px;
+        top: 2px;
+        height: 12px;
+        width: 12px;
+        background-color: $accent;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        mask-image: url('$(res)/img/element-icons/trophy.svg');
+    }
+
     .mx_MPollBody_totalVotes {
         color: $secondary-content;
         font-size: $font-12px;

res/img/element-icons/trophy.svg

@@ -41,6 +41,10 @@ import { IPosition, ChevronFace } from '../../structures/ContextMenu';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
+import { POLL_START_EVENT_TYPE } from '../../../polls/consts';
+import EndPollDialog from '../dialogs/EndPollDialog';
+import { Relations } from 'matrix-js-sdk/src/models/relations';
+import { isPollEnded } from '../messages/MPollBody';
 
 export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -68,6 +72,11 @@ interface IProps extends IPosition {
     onFinished(): void;
     /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
     onCloseDialog?(): void;
+    getRelationsForEvent?: (
+        eventId: string,
+        relationType: string,
+        eventType: string
+    ) => Relations;
 }
 
 interface IState {
@@ -123,6 +132,14 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     }
 
+    private canEndPoll(mxEvent: MatrixEvent): boolean {
+        return (
+            mxEvent.getType() === POLL_START_EVENT_TYPE.name &&
+            this.state.canRedact &&
+            !isPollEnded(mxEvent, MatrixClientPeg.get(), this.props.getRelationsForEvent)
+        );
+    }
+
     private onResendReactionsClick = (): void => {
         for (const reaction of this.getUnsentReactions()) {
             Resend.resend(reaction);
@@ -215,6 +232,16 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
+    private onEndPollClick = (): void => {
+        const matrixClient = MatrixClientPeg.get();
+        Modal.createTrackedDialog('End Poll', '', EndPollDialog, {
+            matrixClient,
+            event: this.props.mxEvent,
+            getRelationsForEvent: this.props.getRelationsForEvent,
+        }, 'mx_Dialog_endPoll');
+        this.closeMenu();
+    };
+
     private getReactions(filter: (e: MatrixEvent) => boolean): MatrixEvent[] {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
@@ -250,6 +277,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         const eventStatus = mxEvent.status;
         const unsentReactionsCount = this.getUnsentReactions().length;
 
+        let endPollButton: JSX.Element;
         let resendReactionsButton: JSX.Element;
         let redactButton: JSX.Element;
         let forwardButton: JSX.Element;
@@ -345,6 +373,16 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             />
         );
 
+        if (this.canEndPoll(mxEvent)) {
+            endPollButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconEndPoll"
+                    label={_t("End Poll")}
+                    onClick={this.onEndPollClick}
+                />
+            );
+        }
+
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
                 <IconizedContextMenuOption
@@ -415,6 +453,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                     label={_t("View in room")}
                     onClick={this.viewInRoom}
                 /> }
+                { endPollButton }
                 { quoteButton }
                 { forwardButton }
                 { pinButton }

src/components/views/context_menus/MessageContextMenu.tsx

@@ -0,0 +1,103 @@
+/*
+Copyright 2021 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/models/event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Relations } from "matrix-js-sdk/src/models/relations";
+
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import QuestionDialog from "./QuestionDialog";
+import { IPollEndContent, POLL_END_EVENT_TYPE, TEXT_NODE_TYPE } from "../../../polls/consts";
+import { findTopAnswer } from "../messages/MPollBody";
+import Modal from "../../../Modal";
+import ErrorDialog from "./ErrorDialog";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    event: MatrixEvent;
+    onFinished: (success: boolean) => void;
+    getRelationsForEvent?: (
+        eventId: string,
+        relationType: string,
+        eventType: string
+    ) => Relations;
+}
+
+export default class EndPollDialog extends React.Component<IProps> {
+    private onFinished = (endPoll: boolean) => {
+        const topAnswer = findTopAnswer(
+            this.props.event,
+            this.props.matrixClient,
+            this.props.getRelationsForEvent,
+        );
+
+        const message = (
+            (topAnswer === "")
+                ? _t("The poll has ended. No votes were cast.")
+                : _t(
+                    "The poll has ended. Top answer: %(topAnswer)s",
+                    { topAnswer },
+                )
+        );
+
+        if (endPoll) {
+            const endContent: IPollEndContent = {
+                [POLL_END_EVENT_TYPE.name]: {},
+                "m.relates_to": {
+                    "event_id": this.props.event.getId(),
+                    "rel_type": "m.reference",
+                },
+                [TEXT_NODE_TYPE.name]: message,
+            };
+
+            this.props.matrixClient.sendEvent(
+                this.props.event.getRoomId(), POLL_END_EVENT_TYPE.name, endContent,
+            ).catch((e: any) => {
+                console.error("Failed to submit poll response event:", e);
+                Modal.createTrackedDialog(
+                    'Failed to end poll',
+                    '',
+                    ErrorDialog,
+                    {
+                        title: _t("Failed to end poll"),
+                        description: _t(
+                            "Sorry, the poll did not end. Please try again."),
+                    },
+                );
+            });
+        }
+        this.props.onFinished(endPoll);
+    };
+
+    render() {
+        return (
+            <QuestionDialog
+                title={_t("End Poll")}
+                description={
+                    _t(
+                        "Are you sure you want to end this poll? " +
+                        "This will show the final results of the poll and " +
+                        "stop people from being able to vote.",
+                    )
+                }
+                button={_t("End Poll")}
+                onFinished={(endPoll: boolean) => this.onFinished(endPoll)}
+            />
+        );
+    }
+}