Prepare room components for local rooms (#9082)

weeman1337 · web-flow · commit 9edd49818c4a · 2022-07-20T15:07:06.000+02:00
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
@@ -100,7 +100,7 @@ limitations under the License.
     display: flex;
     user-select: none;
 
-    &:hover {
+    &:not(.mx_RoomHeader_name--textonly):hover {
         background-color: $quinary-content;
     }
 
@@ -139,7 +139,7 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_name,
+.mx_RoomHeader_name:not(.mx_RoomHeader_name--textonly),
 .mx_RoomHeader_avatar {
     cursor: pointer;
 }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
@@ -80,6 +80,7 @@ import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../event
 import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
 import { ReadReceiptGroup } from './ReadReceiptGroup';
 import { useTooltip } from "../../../utils/useTooltip";
+import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
 
 export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations;
 
@@ -766,6 +767,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
     private renderE2EPadlock() {
         const ev = this.props.mxEvent;
 
+        // no icon for local rooms
+        if (isLocalRoom(ev.getRoomId())) return;
+
         // event could not be decrypted
         if (ev.getContent().msgtype === 'm.bad.encrypted') {
             return <E2ePadlockUndecryptable />;
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
@@ -38,6 +38,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
+import { LocalRoom } from "../../../models/LocalRoom";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -49,11 +50,19 @@ const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
     const { room, roomId } = useContext(RoomContext);
 
-    const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
+    const isLocalRoom = room instanceof LocalRoom;
+    const dmPartner = isLocalRoom
+        ? room.targets[0]?.userId
+        : DMRoomMap.shared().getUserIdForRoomId(roomId);
+
     let body;
     if (dmPartner) {
+        let introMessage = _t("This is the beginning of your direct message history with <displayName/>.");
         let caption;
-        if ((room.getJoinedMemberCount() + room.getInvitedMemberCount()) === 2) {
+
+        if (isLocalRoom) {
+            introMessage = _t("Send your first message to invite <displayName/> to chat");
+        } else if ((room.getJoinedMemberCount() + room.getInvitedMemberCount()) === 2) {
             caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
         }
 
@@ -75,7 +84,7 @@ const NewRoomIntro = () => {
 
             <h2>{ room.name }</h2>
 
-            <p>{ _t("This is the beginning of your direct message history with <displayName/>.", {}, {
+            <p>{ _t(introMessage, {}, {
                 displayName: () => <b>{ displayName }</b>,
             }) }</p>
             { caption && <p>{ caption }</p> }
@@ -200,7 +209,7 @@ const NewRoomIntro = () => {
     );
 
     let subButton;
-    if (room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, MatrixClientPeg.get())) {
+    if (room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, MatrixClientPeg.get()) && !isLocalRoom) {
         subButton = (
             <AccessibleButton kind='link_inline' onClick={openRoomSettings}>{ _t("Enable encryption in settings.") }</AccessibleButton>
         );
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
@@ -65,6 +65,8 @@ interface IProps {
     appsShown: boolean;
     searchInfo: ISearchInfo;
     excludedRightPanelPhaseButtons?: Array<RightPanelPhases>;
+    showButtons?: boolean;
+    enableRoomOptionsMenu?: boolean;
 }
 
 interface IState {
@@ -76,6 +78,8 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         editing: false,
         inRoom: false,
         excludedRightPanelPhaseButtons: [],
+        showButtons: true,
+        enableRoomOptionsMenu: true,
     };
 
     static contextType = RoomContext;
@@ -130,81 +134,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         this.setState({ contextMenuPosition: null });
     };
 
-    public render() {
-        let searchStatus = null;
-
-        // don't display the search count until the search completes and
-        // gives us a valid (possibly zero) searchCount.
-        if (this.props.searchInfo &&
-            this.props.searchInfo.searchCount !== undefined &&
-            this.props.searchInfo.searchCount !== null) {
-            searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;
-                { _t("(~%(count)s results)", { count: this.props.searchInfo.searchCount }) }
-            </div>;
-        }
-
-        // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
-        let settingsHint = false;
-        const members = this.props.room ? this.props.room.getJoinedMembers() : undefined;
-        if (members) {
-            if (members.length === 1 && members[0].userId === MatrixClientPeg.get().credentials.userId) {
-                const nameEvent = this.props.room.currentState.getStateEvents('m.room.name', '');
-                if (!nameEvent || !nameEvent.getContent().name) {
-                    settingsHint = true;
-                }
-            }
-        }
-
-        let oobName = _t("Join Room");
-        if (this.props.oobData && this.props.oobData.name) {
-            oobName = this.props.oobData.name;
-        }
-
-        let contextMenu: JSX.Element;
-        if (this.state.contextMenuPosition && this.props.room) {
-            contextMenu = (
-                <RoomContextMenu
-                    {...contextMenuBelow(this.state.contextMenuPosition)}
-                    room={this.props.room}
-                    onFinished={this.onContextMenuCloseClick}
-                />
-            );
-        }
-
-        const textClasses = classNames('mx_RoomHeader_nametext', { mx_RoomHeader_settingsHint: settingsHint });
-        const name = (
-            <ContextMenuTooltipButton
-                className="mx_RoomHeader_name"
-                onClick={this.onContextMenuOpenClick}
-                isExpanded={!!this.state.contextMenuPosition}
-                title={_t("Room options")}
-            >
-                <RoomName room={this.props.room}>
-                    { (name) => {
-                        const roomName = name || oobName;
-                        return <div dir="auto" className={textClasses} title={roomName}>{ roomName }</div>;
-                    } }
-                </RoomName>
-                { this.props.room && <div className="mx_RoomHeader_chevron" /> }
-                { contextMenu }
-            </ContextMenuTooltipButton>
-        );
-
-        const topicElement = <RoomTopic
-            room={this.props.room}
-            className="mx_RoomHeader_topic"
-        />;
-
-        let roomAvatar;
-        if (this.props.room) {
-            roomAvatar = <DecoratedRoomAvatar
-                room={this.props.room}
-                avatarSize={24}
-                oobData={this.props.oobData}
-                viewAvatarOnClick={true}
-            />;
-        }
-
+    private renderButtons(): JSX.Element[] {
         const buttons: JSX.Element[] = [];
 
         if (this.props.inRoom &&
@@ -269,10 +199,105 @@ export default class RoomHeader extends React.Component<IProps, IState> {
             buttons.push(inviteButton);
         }
 
-        const rightRow =
-            <div className="mx_RoomHeader_buttons">
-                { buttons }
+        return buttons;
+    }
+
+    private renderName(oobName) {
+        let contextMenu: JSX.Element;
+        if (this.state.contextMenuPosition && this.props.room) {
+            contextMenu = (
+                <RoomContextMenu
+                    {...contextMenuBelow(this.state.contextMenuPosition)}
+                    room={this.props.room}
+                    onFinished={this.onContextMenuCloseClick}
+                />
+            );
+        }
+
+        // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
+        let settingsHint = false;
+        const members = this.props.room ? this.props.room.getJoinedMembers() : undefined;
+        if (members) {
+            if (members.length === 1 && members[0].userId === MatrixClientPeg.get().credentials.userId) {
+                const nameEvent = this.props.room.currentState.getStateEvents('m.room.name', '');
+                if (!nameEvent || !nameEvent.getContent().name) {
+                    settingsHint = true;
+                }
+            }
+        }
+
+        const textClasses = classNames('mx_RoomHeader_nametext', { mx_RoomHeader_settingsHint: settingsHint });
+        const roomName = <RoomName room={this.props.room}>
+            { (name) => {
+                const roomName = name || oobName;
+                return <div dir="auto" className={textClasses} title={roomName}>{ roomName }</div>;
+            } }
+        </RoomName>;
+
+        if (this.props.enableRoomOptionsMenu) {
+            return (
+                <ContextMenuTooltipButton
+                    className="mx_RoomHeader_name"
+                    onClick={this.onContextMenuOpenClick}
+                    isExpanded={!!this.state.contextMenuPosition}
+                    title={_t("Room options")}
+                >
+                    { roomName }
+                    { this.props.room && <div className="mx_RoomHeader_chevron" /> }
+                    { contextMenu }
+                </ContextMenuTooltipButton>
+            );
+        }
+
+        return <div className="mx_RoomHeader_name mx_RoomHeader_name--textonly">
+            { roomName }
+        </div>;
+    }
+
+    public render() {
+        let searchStatus = null;
+
+        // don't display the search count until the search completes and
+        // gives us a valid (possibly zero) searchCount.
+        if (this.props.searchInfo &&
+            this.props.searchInfo.searchCount !== undefined &&
+            this.props.searchInfo.searchCount !== null) {
+            searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;
+                { _t("(~%(count)s results)", { count: this.props.searchInfo.searchCount }) }
             </div>;
+        }
+
+        let oobName = _t("Join Room");
+        if (this.props.oobData && this.props.oobData.name) {
+            oobName = this.props.oobData.name;
+        }
+
+        const name = this.renderName(oobName);
+
+        const topicElement = <RoomTopic
+            room={this.props.room}
+            className="mx_RoomHeader_topic"
+        />;
+
+        let roomAvatar;
+        if (this.props.room) {
+            roomAvatar = <DecoratedRoomAvatar
+                room={this.props.room}
+                avatarSize={24}
+                oobData={this.props.oobData}
+                viewAvatarOnClick={true}
+            />;
+        }
+
+        let buttons;
+        if (this.props.showButtons) {
+            buttons = <React.Fragment>
+                <div className="mx_RoomHeader_buttons">
+                    { this.renderButtons() }
+                </div>
+                <RoomHeaderButtons room={this.props.room} excludedRightPanelPhaseButtons={this.props.excludedRightPanelPhaseButtons} />
+            </React.Fragment>;
+        }
 
         const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
 
@@ -294,8 +319,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     { searchStatus }
                     { topicElement }
                     { betaPill }
-                    { rightRow }
-                    <RoomHeaderButtons room={this.props.room} excludedRightPanelPhaseButtons={this.props.excludedRightPanelPhaseButtons} />
+                    { buttons }
                 </div>
                 <RoomLiveShareWarning roomId={this.props.room.roomId} />
             </div>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -1730,8 +1730,9 @@
     "Code block": "Code block",
     "Quote": "Quote",
     "Insert link": "Insert link",
-    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Only the two of you are in this conversation, unless either of you invites anyone to join.",
     "This is the beginning of your direct message history with <displayName/>.": "This is the beginning of your direct message history with <displayName/>.",
+    "Send your first message to invite <displayName/> to chat": "Send your first message to invite <displayName/> to chat",
+    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Only the two of you are in this conversation, unless either of you invites anyone to join.",
     "Topic: %(topic)s (<a>edit</a>)": "Topic: %(topic)s (<a>edit</a>)",
     "Topic: %(topic)s ": "Topic: %(topic)s ",
     "<a>Add a topic</a> to help people know what it is about.": "<a>Add a topic</a> to help people know what it is about.",
@@ -1771,15 +1772,15 @@
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",
-    "(~%(count)s results)|other": "(~%(count)s results)",
-    "(~%(count)s results)|one": "(~%(count)s result)",
-    "Join Room": "Join Room",
-    "Room options": "Room options",
     "Forget room": "Forget room",
     "Hide Widgets": "Hide Widgets",
     "Show Widgets": "Show Widgets",
     "Search": "Search",
     "Invite": "Invite",
+    "Room options": "Room options",
+    "(~%(count)s results)|other": "(~%(count)s results)",
+    "(~%(count)s results)|one": "(~%(count)s result)",
+    "Join Room": "Join Room",
     "Video rooms are a beta feature": "Video rooms are a beta feature",
     "Video room": "Video room",
     "Public space": "Public space",
diff --git a/test/components/views/rooms/NewRoomIntro-test.tsx b/test/components/views/rooms/NewRoomIntro-test.tsx
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ limitations under the License.`
`100`	`100`	`display: flex;`
`101`	`101`	`user-select: none;`
`102`	`102`
`103`		`- &:hover {`
	`103`	`+ &:not(.mx_RoomHeader_name--textonly):hover {`
`104`	`104`	`background-color: $quinary-content;`
`105`	`105`	`}`
`106`	`106`
`@@ -139,7 +139,7 @@ limitations under the License.`
`139`	`139`	`opacity: 0.6;`
`140`	`140`	`}`
`141`	`141`
`142`		`-.mx_RoomHeader_name,`
	`142`	`+.mx_RoomHeader_name:not(.mx_RoomHeader_name--textonly),`
`143`	`143`	`.mx_RoomHeader_avatar {`
`144`	`144`	`cursor: pointer;`
`145`	`145`	`}`