From 1d6c9fa8dac2be158b82e385037a17d988648050 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <3636685+Palid@users.noreply.github.com>
Date: Mon, 18 Oct 2021 14:09:01 +0200
Subject: [PATCH] Add threads ViewInRoom context button (#18955) (#6947)

---
 .../context_menus/_MessageContextMenu.scss    |  4 +++
 res/img/element-icons/view-in-room.svg        |  1 +
 .../context_menus/MessageContextMenu.tsx      | 26 ++++++++++++++++++-
 src/i18n/strings/en_EN.json                   |  1 +
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 res/img/element-icons/view-in-room.svg

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index 5af748e28d..47646c3820 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -81,4 +81,8 @@ limitations under the License.
     .mx_MessageContextMenu_iconUnpin::before {
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
     }
+
+    .mx_MessageContextMenu_iconViewInRoom::before {
+        mask-image: url('$(res)/img/element-icons/view-in-room.svg');
+    }
 }
diff --git a/res/img/element-icons/view-in-room.svg b/res/img/element-icons/view-in-room.svg
new file mode 100644
index 0000000000..27758b10f6
--- /dev/null
+++ b/res/img/element-icons/view-in-room.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#17191C" fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h.005a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75ZM1 6.75A.75.75 0 0 1 1.75 6h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 1 6.75ZM1 9.75A.75.75 0 0 1 1.75 9h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 1 9.75ZM1 13.75a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx
index 22dd3ac438..44bc48b21d 100644
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -38,6 +38,7 @@ import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
 import ShareDialog from '../dialogs/ShareDialog';
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { IPosition, ChevronFace } from '../../structures/ContextMenu';
+import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 
 export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -74,6 +75,8 @@ interface IState {
 
 @replaceableComponent("views.context_menus.MessageContextMenu")
 export default class MessageContextMenu extends React.Component<IProps, IState> {
+    static contextType = RoomContext;
+
     state = {
         canRedact: false,
         canPin: false,
@@ -226,6 +229,16 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         return this.getReactions(e => e.status === EventStatus.NOT_SENT);
     }
 
+    private viewInRoom = () => {
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+        this.closeMenu();
+    };
+
     render() {
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
@@ -381,8 +394,20 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
+        const { timelineRenderingType } = this.context;
+        const isThread = (
+            timelineRenderingType === TimelineRenderingType.Thread ||
+            timelineRenderingType === TimelineRenderingType.ThreadsList
+        );
+        const isThreadRootEvent = isThread && this.props.mxEvent?.getThread()?.rootEvent === this.props.mxEvent;
+
         const commonItemsList = (
             <IconizedContextMenuOptionList>
+                { isThreadRootEvent && <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconViewInRoom"
+                    label={_t("View in room")}
+                    onClick={this.viewInRoom}
+                /> }
                 { quoteButton }
                 { forwardButton }
                 { pinButton }
@@ -403,7 +428,6 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 </IconizedContextMenuOptionList>
             );
         }
-
         return (
             <IconizedContextMenu
                 {...this.props}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 42c840d91d..1eeee39162 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2702,6 +2702,7 @@
     "Source URL": "Source URL",
     "Collapse reply thread": "Collapse reply thread",
     "Report": "Report",
+    "View in room": "View in room",
     "Add space": "Add space",
     "Manage & explore rooms": "Manage & explore rooms",
     "Clear status": "Clear status",