Add view in room to action bar in thread list (#7519)

res/css/views/messages/_MessageActionBar.scss

@@ -127,6 +127,14 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/collapse-message.svg');
 }
 
+.mx_MessageActionBar_viewInRoom::after {
+    mask-image: url('$(res)/img/element-icons/view-in-room.svg');
+}
+
+.mx_MessageActionBar_copyLinkToThread::after {
+    mask-image: url('$(res)/img/element-icons/link.svg');
+}
+
 .mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after {
     background-color: transparent; // hide the download icon mask
 }

src/components/views/rooms/EventTile.tsx

@@ -67,13 +67,13 @@ import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import Toolbar from '../../../accessibility/Toolbar';
 import { RovingAccessibleTooltipButton } from '../../../accessibility/roving/RovingAccessibleTooltipButton';
-import { RovingThreadListContextMenu } from '../context_menus/ThreadListContextMenu';
 import { ThreadNotificationState } from '../../../stores/notifications/ThreadNotificationState';
 import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore';
 import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
 import { NotificationColor } from '../../../stores/notifications/NotificationColor';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import { CardContext } from '../right_panel/BaseCard';
+import { copyPlaintext } from '../../../utils/strings';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -706,6 +706,23 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
+    private viewInRoom = (evt: ButtonEvent): void => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        dis.dispatch({
+            action: Action.ViewRoom,
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+    };
+
+    private copyLinkToThread = async (evt: ButtonEvent): Promise<void> => {
+        const { permalinkCreator, mxEvent } = this.props;
+        const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId());
+        await copyPlaintext(matrixToUrl);
+    };
+
     private onRoomReceipt = (ev: MatrixEvent, room: Room): void => {
         // ignore events for other rooms
         const tileRoom = this.context.getRoom(this.props.mxEvent.getRoomId());
@@ -1469,15 +1486,16 @@ export default class EventTile extends React.Component<IProps, IState> {
                         </div>
                         <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
                             <RovingAccessibleTooltipButton
-                                className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                                className="mx_MessageActionBar_maskButton mx_MessageActionBar_viewInRoom"
-                                title={_t("Reply in thread")}
+                                onClick={this.viewInRoom}
-                                onClick={() => showThread({ rootEvent: this.props.mxEvent, push: true })}
+                                title={_t("View in room")}
-                                key="thread"
+                                key="view_in_room"
                             />
-                            <RovingThreadListContextMenu
+                            <RovingAccessibleTooltipButton
-                                mxEvent={this.props.mxEvent}
+                                className="mx_MessageActionBar_maskButton mx_MessageActionBar_copyLinkToThread"
-                                permalinkCreator={this.props.permalinkCreator}
+                                onClick={this.copyLinkToThread}
-                                onMenuToggle={this.onActionBarFocusChange}
+                                title={_t("Copy link to thread")}
+                                key="copy_link_to_thread"
                             />
                         </Toolbar>
                         { msgOption }

src/i18n/strings/en_EN.json

@@ -1677,7 +1677,8 @@
     "Key request sent.": "Key request sent.",
     "<requestLink>Re-request encryption keys</requestLink> from your other sessions.": "<requestLink>Re-request encryption keys</requestLink> from your other sessions.",
     "Message Actions": "Message Actions",
-    "Reply in thread": "Reply in thread",
+    "View in room": "View in room",
+    "Copy link to thread": "Copy link to thread",
     "This message cannot be decrypted": "This message cannot be decrypted",
     "Encrypted by an unverified session": "Encrypted by an unverified session",
     "Unencrypted": "Unencrypted",
@@ -2094,6 +2095,7 @@
     "Error processing audio message": "Error processing audio message",
     "React": "React",
     "Edit": "Edit",
+    "Reply in thread": "Reply in thread",
     "Reply": "Reply",
     "Collapse quotes │ ⇧+click": "Collapse quotes │ ⇧+click",
     "Expand quotes │ ⇧+click": "Expand quotes │ ⇧+click",
@@ -2886,7 +2888,6 @@
     "Source URL": "Source URL",
     "Collapse reply thread": "Collapse reply thread",
     "Report": "Report",
-    "View in room": "View in room",
     "Forget": "Forget",
     "Mentions only": "Mentions only",
     "See room timeline (devtools)": "See room timeline (devtools)",
@@ -2897,7 +2898,6 @@
     "Move down": "Move down",
     "View Community": "View Community",
     "Thread options": "Thread options",
-    "Copy link to thread": "Copy link to thread",
     "Unable to start audio streaming.": "Unable to start audio streaming.",
     "Failed to start livestream": "Failed to start livestream",
     "Start audio stream": "Start audio stream",