Add jump to related event context menu item (#6775)

res/css/views/context_menus/_MessageContextMenu.scss

@@ -109,4 +109,8 @@ limitations under the License.
     .mx_MessageContextMenu_iconViewInRoom::before {
         mask-image: url('$(res)/img/element-icons/view-in-room.svg');
     }
+
+    .mx_MessageContextMenu_jumpToEvent::before {
+        mask-image: url('$(res)/img/element-icons/left-arrow.svg');
+    }
 }

res/img/element-icons/left-arrow.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="M7.138 3.53c.26.26.26.682 0 .942L4.276 7.334h9.057a.667.667 0 1 1 0 1.333H4.276l2.862 2.862a.667.667 0 0 1-.943.943l-4-4a.667.667 0 0 1 0-.943l4-4c.26-.26.683-.26.943 0Z" clip-rule="evenodd"/></svg>

src/components/views/context_menus/MessageContextMenu.tsx

@@ -155,6 +155,15 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
+    private onJumpToRelatedEventClick = (relatedEventId: string): void => {
+        dis.dispatch({
+            action: "view_room",
+            room_id: this.props.mxEvent.getRoomId(),
+            event_id: relatedEventId,
+            highlighted: true,
+        });
+    };
+
     private onReportEventClick = (): void => {
         dis.dispatch<OpenReportEventDialogPayload>({
             action: Action.OpenReportEventDialog,
@@ -488,6 +497,18 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
+        let jumpToRelatedEventButton: JSX.Element;
+        const relatedEventId = mxEvent.getWireContent()?.["m.relates_to"]?.event_id;
+        if (relatedEventId) {
+            jumpToRelatedEventButton = (
+                <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_jumpToEvent"
+                    label={_t("View related event")}
+                    onClick={() => this.onJumpToRelatedEventClick(relatedEventId)}
+                />
+            );
+        }
+
         let reportEventButton: JSX.Element;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
@@ -608,6 +629,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 { permalinkButton }
                 { reportEventButton }
                 { externalURLButton }
+                { jumpToRelatedEventButton }
                 { unhidePreviewButton }
                 { viewSourceButton }
                 { resendReactionsButton }

src/i18n/strings/en_EN.json

@@ -2922,6 +2922,7 @@
     "Show preview": "Show preview",
     "Source URL": "Source URL",
     "Collapse reply thread": "Collapse reply thread",
+    "View related event": "View related event",
     "Report": "Report",
     "Copy link": "Copy link",
     "Forget": "Forget",