Hide composer and call buttons when the room is tombstoned

src/components/views/rooms/MessageComposer.tsx

@@ -374,7 +374,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             menuPosition = aboveLeftOf(contentRect);
         }
 
-        if (!this.state.tombstone && this.state.canSendMessages) {
+        const canSendMessages = this.state.canSendMessages && !this.state.tombstone;
+        if (canSendMessages) {
             controls.push(
                 <SendMessageComposer
                     ref={this.messageComposerInput}
@@ -467,7 +468,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}

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

@@ -0,0 +1,94 @@
+/*
+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 '../../../skinned-sdk'; // Must be first for skinning to work
+import { createTestClient, mkEvent, mkStubRoom, mockStateEventImplementation, 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", () => {
+        room.maySendMessage.mockReturnValue(false);
+        const wrapper = wrapAndRender((
+            <MessageComposer room={room} resizeNotifier={jest.fn()} permalinkCreator={jest.fn()} />
+        ));
+
+        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", () => {
+        room.maySendMessage.mockReturnValue(true);
+        room.currentState.getStateEvents.mockImplementation(mockStateEventImplementation([
+            mkEvent({
+                event: true,
+                type: "m.room.tombstone",
+                room: room.roomId,
+                user: "@user1:server",
+                skey: "",
+                content: {},
+                ts: Date.now(),
+            }),
+        ]));
+        const wrapper = wrapAndRender((
+            <MessageComposer room={room} resizeNotifier={jest.fn()} permalinkCreator={jest.fn()} />
+        ));
+
+        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): 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 }}>
+                { component }
+            </RoomContext.Provider>
+        </MatrixClientContext.Provider>,
+    );
+}

test/test-utils/test-utils.ts

@@ -13,6 +13,7 @@ import {
     RoomState,
     EventType,
     IEventRelation,
+    IUnsigned,
 } from 'matrix-js-sdk/src/matrix';
 
 import { MatrixClientPeg as peg } from '../../src/MatrixClientPeg';
@@ -132,6 +133,7 @@ export function createTestClient() {
         setPusher: jest.fn().mockResolvedValue(),
         setPushRuleEnabled: jest.fn().mockResolvedValue(),
         setPushRuleActions: jest.fn().mockResolvedValue(),
+        isCryptoEnabled: jest.fn().mockReturnValue(false),
     };
 }
 
@@ -147,6 +149,7 @@ type MakeEventProps = MakeEventPassThruProps & {
     room: Room["roomId"];
     // eslint-disable-next-line camelcase
     prev_content?: IContent;
+    unsigned?: IUnsigned;
 };
 
 /**
@@ -176,13 +179,13 @@ export function mkEvent(opts: MakeEventProps): MatrixEvent {
         origin_server_ts: opts.ts ?? 0,
         unsigned: opts.unsigned,
     };
-    if (opts.skey) {
+    if (opts.skey !== undefined) {
         event.state_key = opts.skey;
     } else if ([
         "m.room.name", "m.room.topic", "m.room.create", "m.room.join_rules",
         "m.room.power_levels", "m.room.topic", "m.room.history_visibility",
         "m.room.encryption", "m.room.member", "com.example.state",
-        "m.room.guest_access",
+        "m.room.guest_access", "m.room.tombstone",
     ].indexOf(opts.type) !== -1) {
         event.state_key = "";
     }