Skip to content

Commit

Permalink
Hide composer and call buttons when the room is tombstoned (#7975)
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy committed Mar 4, 2022
1 parent 675b427 commit 0e60ad9
Show file tree
Hide file tree
Showing 11 changed files with 196 additions and 93 deletions.
46 changes: 26 additions & 20 deletions src/components/structures/RoomView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,8 @@ export interface IRoomState {

upgradeRecommendation?: IRecommendedVersion;
canReact: boolean;
canReply: boolean;
canSendMessages: boolean;
tombstone?: MatrixEvent;
layout: Layout;
lowBandwidth: boolean;
alwaysShowTimestamps: boolean;
Expand Down Expand Up @@ -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"),
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand All @@ -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 });
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/messages/MessageActionBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
37 changes: 7 additions & 30 deletions src/components/views/rooms/MessageComposer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -81,8 +80,6 @@ interface IProps {
}

interface IState {
tombstone: MatrixEvent;
canSendMessages: boolean;
isComposerEmpty: boolean;
haveRecording: boolean;
recordingTimeLeftSeconds?: number;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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}`);
Expand All @@ -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,
Expand Down Expand Up @@ -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}
Expand All @@ -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)}
Expand Down Expand Up @@ -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}
Expand Down
9 changes: 8 additions & 1 deletion src/components/views/rooms/RoomHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)}
Expand Down
2 changes: 1 addition & 1 deletion src/contexts/RoomContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion test/components/structures/MessagePanel-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
90 changes: 90 additions & 0 deletions test/components/views/rooms/MessageComposer-test.tsx
Original file line number Diff line number Diff line change
@@ -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>,
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 0e60ad9

Please sign in to comment.