Hide composer and call buttons when the room is tombstoned

src/components/structures/RoomView.tsx

@@ -187,7 +187,8 @@ export interface IRoomState {
 
     upgradeRecommendation?: IRecommendedVersion;
     canReact: boolean;
-    canReply: boolean;
+    canSendMessages: boolean;
+    tombstone?: MatrixEvent;
     layout: Layout;
     lowBandwidth: boolean;
     alwaysShowTimestamps: boolean;
@@ -259,7 +260,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             showTopUnreadMessagesBar: false,
             statusBarVisible: false,
             canReact: false,
-            canReply: false,
+            canSendMessages: false,
             layout: SettingsStore.getValue("layout"),
             lowBandwidth: SettingsStore.getValue("lowBandwidth"),
             alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
@@ -371,12 +372,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             : MainSplitContentType.Timeline;
     };
 
-    private onReadReceiptsChange = () => {
-        this.setState({
-            showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
-        });
-    };
-
     private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
         if (this.unmounted) {
             return;
@@ -1033,10 +1028,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.checkWidgets(room);
 
         this.setState({
+            tombstone: this.getRoomTombstone(),
             liveTimeline: room.getLiveTimeline(),
         });
     };
 
+    private getRoomTombstone() {
+        return this.state.room?.currentState.getStateEvents(EventType.RoomTombstone, "");
+    }
+
     private async calculateRecommendedVersion(room: Room) {
         const upgradeRecommendation = await room.getRecommendedVersion();
         if (this.unmounted) return;
@@ -1167,17 +1167,23 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // ignore if we don't have a room yet
         if (!this.state.room || this.state.room.roomId !== state.roomId) return;
 
-        if (ev.getType() === EventType.RoomCanonicalAlias) {
-            // re-view the room so MatrixChat can manage the alias in the URL properly
-            dis.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                room_id: this.state.room.roomId,
-                metricsTrigger: undefined, // room doesn't change
-            });
-            return; // this event cannot affect permissions so bail
-        }
+        switch (ev.getType()) {
+            case EventType.RoomCanonicalAlias:
+                // re-view the room so MatrixChat can manage the alias in the URL properly
+                dis.dispatch<ViewRoomPayload>({
+                    action: Action.ViewRoom,
+                    room_id: this.state.room.roomId,
+                    metricsTrigger: undefined, // room doesn't change
+                });
+                break;
+
+            case EventType.RoomTombstone:
+                this.setState({ tombstone: this.getRoomTombstone() });
+                break;
 
-        this.updatePermissions(this.state.room);
+            default:
+                this.updatePermissions(this.state.room);
+        }
     };
 
     private onRoomStateUpdate = (state: RoomState) => {
@@ -1201,9 +1207,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (room) {
             const me = this.context.getUserId();
             const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
-            const canReply = room.maySendMessage();
+            const canSendMessages = room.maySendMessage();
 
-            this.setState({ canReact, canReply });
+            this.setState({ canReact, canSendMessages });
         }
     }
 

src/components/views/messages/MessageActionBar.tsx

@@ -334,7 +334,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // Like the resend button, the react and reply buttons need to appear before the edit.
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
-                if (this.context.canReply) {
+                if (this.context.canSendMessages) {
                     if (this.showReplyInThreadAction) {
                         toolbarOpts.splice(0, 0, threadTooltipButton);
                     }

src/components/views/rooms/MessageComposer.tsx

@@ -20,7 +20,6 @@ import { IEventRelation, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
-import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { Optional } from "matrix-events-sdk";
 
 import { _t } from '../../../languageHandler';
@@ -81,8 +80,6 @@ interface IProps {
 }
 
 interface IState {
-    tombstone: MatrixEvent;
-    canSendMessages: boolean;
     isComposerEmpty: boolean;
     haveRecording: boolean;
     recordingTimeLeftSeconds?: number;
@@ -114,8 +111,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
 
         this.state = {
-            tombstone: this.getRoomTombstone(),
-            canSendMessages: this.props.room.maySendMessage(),
             isComposerEmpty: true,
             haveRecording: false,
             recordingTimeLeftSeconds: null, // when set to a number, shows a toast
@@ -154,7 +149,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
         this.waitForOwnMember();
         UIStore.instance.trackElementDimensions(`MessageComposer${this.instanceId}`, this.ref.current);
         UIStore.instance.on(`MessageComposer${this.instanceId}`, this.onResize);
@@ -217,9 +211,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
         VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
         UIStore.instance.stopTrackingElementDimensions(`MessageComposer${this.instanceId}`);
@@ -229,33 +220,18 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         this.voiceRecording = null;
     }
 
-    private onRoomStateEvents = (ev: MatrixEvent) => {
-        if (ev.getRoomId() !== this.props.room.roomId) return;
-
-        if (ev.getType() === EventType.RoomTombstone) {
-            this.setState({ tombstone: this.getRoomTombstone() });
-        }
-        if (ev.getType() === EventType.RoomPowerLevels) {
-            this.setState({ canSendMessages: this.props.room.maySendMessage() });
-        }
-    };
-
-    private getRoomTombstone() {
-        return this.props.room.currentState.getStateEvents(EventType.RoomTombstone, '');
-    }
-
     private onTombstoneClick = (ev) => {
         ev.preventDefault();
 
-        const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
+        const replacementRoomId = this.context.tombstone.getContent()['replacement_room'];
         const replacementRoom = MatrixClientPeg.get().getRoom(replacementRoomId);
         let createEventId = null;
         if (replacementRoom) {
             const createEvent = replacementRoom.currentState.getStateEvents(EventType.RoomCreate, '');
             if (createEvent && createEvent.getId()) createEventId = createEvent.getId();
         }
 
-        const viaServers = [this.state.tombstone.getSender().split(':').slice(1).join(':')];
+        const viaServers = [this.context.tombstone.getSender().split(':').slice(1).join(':')];
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             highlighted: true,
@@ -374,7 +350,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             menuPosition = aboveLeftOf(contentRect);
         }
 
-        if (!this.state.tombstone && this.state.canSendMessages) {
+        const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
+        if (canSendMessages) {
             controls.push(
                 <SendMessageComposer
                     ref={this.messageComposerInput}
@@ -393,8 +370,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 key="controls_voice_record"
                 ref={this.voiceRecordingButton}
                 room={this.props.room} />);
-        } else if (this.state.tombstone) {
-            const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
+        } else if (this.context.tombstone) {
+            const replacementRoomId = this.context.tombstone.getContent()['replacement_room'];
 
             const continuesLink = replacementRoomId ? (
                 <a href={makeRoomPermalink(replacementRoomId)}
@@ -467,7 +444,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                         permalinkCreator={this.props.permalinkCreator} />
                     <div className="mx_MessageComposer_row">
                         { controls }
-                        { this.state.canSendMessages && <MessageComposerButtons
+                        { canSendMessages && <MessageComposerButtons
                             addEmoji={this.addEmoji}
                             haveRecording={this.state.haveRecording}
                             isMenuOpen={this.state.isMenuOpen}

src/components/views/rooms/RoomHeader.tsx

@@ -40,6 +40,7 @@ import { contextMenuBelow } from './RoomTile';
 import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore';
 import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
+import RoomContext from "../../../contexts/RoomContext";
 
 export interface ISearchInfo {
     searchTerm: string;
@@ -73,6 +74,9 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         excludedRightPanelPhaseButtons: [],
     };
 
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
+
     constructor(props, context) {
         super(props, context);
         const notiStore = RoomNotificationStateStore.instance.getRoomState(props.room);
@@ -200,7 +204,10 @@ export default class RoomHeader extends React.Component<IProps, IState> {
 
         const buttons: JSX.Element[] = [];
 
-        if (this.props.inRoom && SettingsStore.getValue("showCallButtonsInComposer")) {
+        if (this.props.inRoom &&
+            !this.context.tombstone &&
+            SettingsStore.getValue("showCallButtonsInComposer")
+        ) {
             const voiceCallButton = <AccessibleTooltipButton
                 className="mx_RoomHeader_button mx_RoomHeader_voiceCallButton"
                 onClick={() => this.props.onCallPlaced(CallType.Voice)}

src/contexts/RoomContext.ts

@@ -46,7 +46,7 @@ const RoomContext = createContext<IRoomState>({
     showTopUnreadMessagesBar: false,
     statusBarVisible: false,
     canReact: false,
-    canReply: false,
+    canSendMessages: false,
     layout: Layout.Group,
     lowBandwidth: false,
     alwaysShowTimestamps: false,

test/components/structures/MessagePanel-test.js

@@ -50,7 +50,7 @@ class WrappedMessagePanel extends React.Component {
             room,
             roomId: room.roomId,
             canReact: true,
-            canReply: true,
+            canSendMessages: true,
             showReadReceipts: true,
             showRedactions: false,
             showJoinLeaves: false,

test/components/views/rooms/MessageComposer-test.tsx

@@ -0,0 +1,90 @@
+/*
+Copyright 2022 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 * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import '../../../skinned-sdk'; // Must be first for skinning to work
+import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../test-utils";
+import MessageComposer from "../../../../src/components/views/rooms/MessageComposer";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import RoomContext from "../../../../src/contexts/RoomContext";
+
+describe("MessageComposer", () => {
+    stubClient();
+    const cli = createTestClient();
+    const room = mkStubRoom("!roomId:server", "Room 1", cli);
+
+    it("Renders a SendMessageComposer and MessageComposerButtons by default", () => {
+        const wrapper = wrapAndRender((
+            <MessageComposer room={room} resizeNotifier={jest.fn()} permalinkCreator={jest.fn()} />
+        ));
+
+        expect(wrapper.find("SendMessageComposer")).toHaveLength(1);
+        expect(wrapper.find("MessageComposerButtons")).toHaveLength(1);
+    });
+
+    it("Does not render a SendMessageComposer or MessageComposerButtons when user has no permission", () => {
+        const wrapper = wrapAndRender((
+            <MessageComposer room={room} resizeNotifier={jest.fn()} permalinkCreator={jest.fn()} />
+        ), false);
+
+        expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
+        expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
+        expect(wrapper.find(".mx_MessageComposer_noperm_error")).toHaveLength(1);
+    });
+
+    it("Does not render a SendMessageComposer or MessageComposerButtons when room is tombstoned", () => {
+        const wrapper = wrapAndRender((
+            <MessageComposer room={room} resizeNotifier={jest.fn()} permalinkCreator={jest.fn()} />
+        ), true, mkEvent({
+            event: true,
+            type: "m.room.tombstone",
+            room: room.roomId,
+            user: "@user1:server",
+            skey: "",
+            content: {},
+            ts: Date.now(),
+        }));
+
+        expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
+        expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
+        expect(wrapper.find(".mx_MessageComposer_roomReplaced_header")).toHaveLength(1);
+    });
+});
+
+function wrapAndRender(component: React.ReactElement, canSendMessages = true, tombstone?: MatrixEvent): ReactWrapper {
+    const mockClient = MatrixClientPeg.get();
+    const roomId = "myroomid";
+    const room: any = {
+        currentState: undefined,
+        roomId,
+        client: mockClient,
+        getMember: function(userId: string): RoomMember {
+            return new RoomMember(roomId, userId);
+        },
+    };
+    return mount(
+        <MatrixClientContext.Provider value={mockClient}>
+            <RoomContext.Provider value={{ room, canSendMessages, tombstone }}>
+                { component }
+            </RoomContext.Provider>
+        </MatrixClientContext.Provider>,
+    );
+}

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -160,7 +160,7 @@ function createRoomState(room: Room, narrow: boolean): IRoomState {
         showTopUnreadMessagesBar: false,
         statusBarVisible: false,
         canReact: false,
-        canReply: false,
+        canSendMessages: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,