From ee8d1f51c2733e1e2550fc06868fc50266f69d0f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 3 Nov 2020 15:51:23 +0000 Subject: [PATCH 001/142] Fix onPaste handler to work with copying files from Finder --- src/components/views/rooms/SendMessageComposer.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 9438cceef5..c816c84c9d 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -445,13 +445,11 @@ export default class SendMessageComposer extends React.Component { _onPaste = (event) => { const {clipboardData} = event; - // Prioritize text on the clipboard over files as Office on macOS puts a bitmap - // in the clipboard as well as the content being copied. - if (clipboardData.files.length && !clipboardData.types.some(t => t === "text/plain")) { - // This actually not so much for 'files' as such (at time of writing - // neither chrome nor firefox let you paste a plain file copied - // from Finder) but more images copied from a different website - // / word processor etc. + // Prioritize text on the clipboard over files if RTF is present as Office on macOS puts a bitmap + // in the clipboard as well as the content being copied. Modern versions of Office seem to not do this anymore. + // We check text/rtf instead of text/plain as when copy+pasting a file from Finder it puts the filename + // in as text/plain which we want to ignore. + if (clipboardData.files.length && !clipboardData.types.includes("text/rtf")) { ContentMessages.sharedInstance().sendContentListToRoom( Array.from(clipboardData.files), this.props.room.roomId, this.context, ); From 73b9ad41da12e1092a850efa32c4e6a296342103 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 5 May 2021 12:38:44 +0530 Subject: [PATCH 002/142] Navigate to room with maximum notifications when clicked on already selected space --- src/stores/SpaceStore.tsx | 15 +++++++++++++-- .../notifications/SpaceNotificationState.ts | 5 +++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 43822007c9..7c0f8cf59b 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -120,8 +120,19 @@ export class SpaceStoreClass extends AsyncStoreWithClient { * should not be done when the space switch is done implicitly due to another event like switching room. */ public async setActiveSpace(space: Room | null, contextSwitch = true) { - if (space === this.activeSpace || (space && !space?.isSpaceRoom())) return; - + if (space && !space?.isSpaceRoom()) return; + if (space === this.activeSpace) { + const notificationState = this.getNotificationState(space.roomId); + if (notificationState.count) { + const roomId = notificationState.getRoomWithMaxNotifications(); + defaultDispatcher.dispatch({ + action: "view_room", + room_id: roomId, + context_switch: true, + }); + } + return; + } this._activeSpace = space; this.emit(UPDATE_SELECTED_SPACE, this.activeSpace); this.emit(SUGGESTED_ROOMS, this._suggestedRooms = []); diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts index 61a9701a07..fb04648a2a 100644 --- a/src/stores/notifications/SpaceNotificationState.ts +++ b/src/stores/notifications/SpaceNotificationState.ts @@ -53,6 +53,11 @@ export class SpaceNotificationState extends NotificationState { this.calculateTotalState(); } + public getRoomWithMaxNotifications() { + return this.rooms.reduce((prev, curr) => + (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId; + } + public destroy() { super.destroy(); for (const state of Object.values(this.states)) { From bcd1005e3c2ef17e8d6b9212a72d238a639ecbfa Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 5 May 2021 13:01:14 +0530 Subject: [PATCH 003/142] Check truthiness of space --- src/stores/SpaceStore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 7c0f8cf59b..d72ee93956 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -121,7 +121,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { */ public async setActiveSpace(space: Room | null, contextSwitch = true) { if (space && !space?.isSpaceRoom()) return; - if (space === this.activeSpace) { + if (space && space === this.activeSpace) { const notificationState = this.getNotificationState(space.roomId); if (notificationState.count) { const roomId = notificationState.getRoomWithMaxNotifications(); From d3fc047b584836cc2a272c521a6a859eacf89290 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 5 May 2021 13:24:06 +0530 Subject: [PATCH 004/142] Handle home space --- src/stores/SpaceStore.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index d72ee93956..5e6d4c8488 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -132,7 +132,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient { }); } return; - } + } else if (space === this.activeSpace) return; + this._activeSpace = space; this.emit(UPDATE_SELECTED_SPACE, this.activeSpace); this.emit(SUGGESTED_ROOMS, this._suggestedRooms = []); From 49b61d512f26182e5992b3f2b24193e5e16ff70f Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 5 May 2021 13:46:11 +0530 Subject: [PATCH 005/142] Replicate same behaviour for the home space --- src/stores/SpaceStore.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 5e6d4c8488..d307c56889 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -121,8 +121,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient { */ public async setActiveSpace(space: Room | null, contextSwitch = true) { if (space && !space?.isSpaceRoom()) return; - if (space && space === this.activeSpace) { - const notificationState = this.getNotificationState(space.roomId); + if (space === this.activeSpace) { + const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE); if (notificationState.count) { const roomId = notificationState.getRoomWithMaxNotifications(); defaultDispatcher.dispatch({ @@ -132,7 +132,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { }); } return; - } else if (space === this.activeSpace) return; + } this._activeSpace = space; this.emit(UPDATE_SELECTED_SPACE, this.activeSpace); From 14f94c388306c64d6ee47aed6e5f2b7ee482720d Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 11 May 2021 10:41:31 +0530 Subject: [PATCH 006/142] Remove excessive null check Co-authored-by: Travis Ralston --- src/stores/SpaceStore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index d307c56889..d906157435 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -120,7 +120,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { * should not be done when the space switch is done implicitly due to another event like switching room. */ public async setActiveSpace(space: Room | null, contextSwitch = true) { - if (space && !space?.isSpaceRoom()) return; + if (!space?.isSpaceRoom()) return; if (space === this.activeSpace) { const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE); if (notificationState.count) { From 07a952a1bbca35fcd57e130d45ddc5e45d13fde6 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 11 May 2021 11:01:28 +0530 Subject: [PATCH 007/142] Update src/stores/SpaceStore.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Šimon Brandner --- src/stores/SpaceStore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index d906157435..2f52061783 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -120,7 +120,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { * should not be done when the space switch is done implicitly due to another event like switching room. */ public async setActiveSpace(space: Room | null, contextSwitch = true) { - if (!space?.isSpaceRoom()) return; + if (space && !space.isSpaceRoom()) return; if (space === this.activeSpace) { const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE); if (notificationState.count) { From 3e8863fc9af0d5932c3393d0156ab6063baee524 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Tue, 11 May 2021 13:00:42 +0530 Subject: [PATCH 008/142] Adjust behaviour for the home space --- src/stores/SpaceStore.tsx | 5 ++++- .../notifications/SummarizedNotificationState.ts | 12 +++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index edc6bbef77..b1993d9625 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -118,7 +118,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient { public async setActiveSpace(space: Room | null, contextSwitch = true) { if (space && !space.isSpaceRoom()) return; if (space === this.activeSpace) { - const notificationState = this.getNotificationState(space ? space.roomId : HOME_SPACE); + const notificationState = space + ? this.getNotificationState(space.roomId) + : RoomNotificationStateStore.instance.globalState; + if (notificationState.count) { const roomId = notificationState.getRoomWithMaxNotifications(); defaultDispatcher.dispatch({ diff --git a/src/stores/notifications/SummarizedNotificationState.ts b/src/stores/notifications/SummarizedNotificationState.ts index 372da74f36..4a3473792a 100644 --- a/src/stores/notifications/SummarizedNotificationState.ts +++ b/src/stores/notifications/SummarizedNotificationState.ts @@ -16,6 +16,8 @@ limitations under the License. import { NotificationColor } from "./NotificationColor"; import { NotificationState } from "./NotificationState"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { RoomNotificationState } from "./RoomNotificationState"; /** * Summarizes a number of states into a unique snapshot. To populate, call @@ -25,11 +27,13 @@ import { NotificationState } from "./NotificationState"; */ export class SummarizedNotificationState extends NotificationState { private totalStatesWithUnread = 0; + unreadRooms: Room[]; constructor() { super(); this._symbol = null; this._count = 0; + this.unreadRooms = []; this._color = NotificationColor.None; } @@ -37,6 +41,11 @@ export class SummarizedNotificationState extends NotificationState { return this.totalStatesWithUnread; } + public getRoomWithMaxNotifications() { + return this.unreadRooms.reduce((prev, curr) => + (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId; + } + /** * Append a notification state to this snapshot, taking the loudest NotificationColor * of the two. By default this will not adopt the symbol of the other notification @@ -45,7 +54,7 @@ export class SummarizedNotificationState extends NotificationState { * @param includeSymbol If true, the notification state's symbol will be taken if one * is present. */ - public add(other: NotificationState, includeSymbol = false) { + public add(other: RoomNotificationState, includeSymbol = false) { if (other.symbol && includeSymbol) { this._symbol = other.symbol; } @@ -56,6 +65,7 @@ export class SummarizedNotificationState extends NotificationState { this._color = other.color; } if (other.hasUnreadCount) { + this.unreadRooms.push(other.room); this.totalStatesWithUnread++; } } From bf2d26ef21664e427540ff4cb29c89c7f14dcb70 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Thu, 20 May 2021 10:55:22 +0530 Subject: [PATCH 009/142] Modify to navigate only on notification dots click --- src/components/views/spaces/SpacePanel.tsx | 6 +++- .../views/spaces/SpaceTreeLevel.tsx | 6 +++- src/stores/SpaceStore.tsx | 35 ++++++++++--------- .../notifications/SpaceNotificationState.ts | 5 ++- .../SummarizedNotificationState.ts | 12 +++---- 5 files changed, 36 insertions(+), 28 deletions(-) diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 411b0f9b5e..74fd01954d 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -74,7 +74,11 @@ const SpaceButton: React.FC = ({ let notifBadge; if (notificationState) { notifBadge =
- + SpaceStore.instance.setActiveRoomInSpace(space)} + forceCount={false} + notification={notificationState} + />
; } diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index e48e1d5dc2..d8569a0387 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -326,7 +326,11 @@ export class SpaceItem extends React.PureComponent { let notifBadge; if (notificationState) { notifBadge =
- + SpaceStore.instance.setActiveRoomInSpace(space)} + forceCount={false} + notification={notificationState} + />
; } diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index b1993d9625..e154463408 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -108,6 +108,24 @@ export class SpaceStoreClass extends AsyncStoreWithClient { return this._suggestedRooms; } + public async setActiveRoomInSpace(space: Room | null) { + if (space && !space.isSpaceRoom()) return; + if (space !== this.activeSpace) await this.setActiveSpace(space); + + const notificationState = space + ? this.getNotificationState(space.roomId) + : RoomNotificationStateStore.instance.globalState; + + if (notificationState.count) { + const roomId = notificationState.getFirstRoomWithNotifications(); + defaultDispatcher.dispatch({ + action: "view_room", + room_id: roomId, + context_switch: true, + }); + } + } + /** * Sets the active space, updates room list filters, * optionally switches the user's room back to where they were when they last viewed that space. @@ -116,22 +134,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { * should not be done when the space switch is done implicitly due to another event like switching room. */ public async setActiveSpace(space: Room | null, contextSwitch = true) { - if (space && !space.isSpaceRoom()) return; - if (space === this.activeSpace) { - const notificationState = space - ? this.getNotificationState(space.roomId) - : RoomNotificationStateStore.instance.globalState; - - if (notificationState.count) { - const roomId = notificationState.getRoomWithMaxNotifications(); - defaultDispatcher.dispatch({ - action: "view_room", - room_id: roomId, - context_switch: true, - }); - } - return; - } + if (space === this.activeSpace || (space && !space.isSpaceRoom())) return; this._activeSpace = space; this.emit(UPDATE_SELECTED_SPACE, this.activeSpace); diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts index fb04648a2a..cdb9f2d06a 100644 --- a/src/stores/notifications/SpaceNotificationState.ts +++ b/src/stores/notifications/SpaceNotificationState.ts @@ -53,9 +53,8 @@ export class SpaceNotificationState extends NotificationState { this.calculateTotalState(); } - public getRoomWithMaxNotifications() { - return this.rooms.reduce((prev, curr) => - (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId; + public getFirstRoomWithNotifications() { + return this.rooms.find((room) => room._notificationCounts.total > 0).roomId; } public destroy() { diff --git a/src/stores/notifications/SummarizedNotificationState.ts b/src/stores/notifications/SummarizedNotificationState.ts index 4a3473792a..ec6db1015d 100644 --- a/src/stores/notifications/SummarizedNotificationState.ts +++ b/src/stores/notifications/SummarizedNotificationState.ts @@ -16,7 +16,6 @@ limitations under the License. import { NotificationColor } from "./NotificationColor"; import { NotificationState } from "./NotificationState"; -import { Room } from "matrix-js-sdk/src/models/room"; import { RoomNotificationState } from "./RoomNotificationState"; /** @@ -27,13 +26,13 @@ import { RoomNotificationState } from "./RoomNotificationState"; */ export class SummarizedNotificationState extends NotificationState { private totalStatesWithUnread = 0; - unreadRooms: Room[]; + private unreadRoomId: string; constructor() { super(); this._symbol = null; this._count = 0; - this.unreadRooms = []; + this.unreadRoomId = null; this._color = NotificationColor.None; } @@ -41,9 +40,8 @@ export class SummarizedNotificationState extends NotificationState { return this.totalStatesWithUnread; } - public getRoomWithMaxNotifications() { - return this.unreadRooms.reduce((prev, curr) => - (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId; + public getFirstRoomWithNotifications() { + return this.unreadRoomId; } /** @@ -65,7 +63,7 @@ export class SummarizedNotificationState extends NotificationState { this._color = other.color; } if (other.hasUnreadCount) { - this.unreadRooms.push(other.room); + this.unreadRoomId = !this.unreadRoomId ? other.room.roomId : this.unreadRoomId; this.totalStatesWithUnread++; } } From bf66a720546cbc549a74dddabc9e303e3d41e51f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 10:05:46 +0100 Subject: [PATCH 010/142] Move JoinRule, GuestAccess, HistoryVisibility enums into the js-sdk --- .../tabs/room/SecurityRoomSettingsTab.tsx | 30 ++++--------------- 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 02bbcfb751..e0add2cd05 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -15,39 +15,21 @@ limitations under the License. */ import React from 'react'; +import { JoinRule, GuestAccess, HistoryVisibility } from "matrix-js-sdk/src/@types/partials"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import {_t} from "../../../../../languageHandler"; -import {MatrixClientPeg} from "../../../../../MatrixClientPeg"; + +import { _t } from "../../../../../languageHandler"; +import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; import * as sdk from "../../../../.."; import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import Modal from "../../../../../Modal"; import QuestionDialog from "../../../dialogs/QuestionDialog"; import StyledRadioGroup from '../../../elements/StyledRadioGroup'; -import {SettingLevel} from "../../../../../settings/SettingLevel"; +import { SettingLevel } from "../../../../../settings/SettingLevel"; import SettingsStore from "../../../../../settings/SettingsStore"; -import {UIFeature} from "../../../../../settings/UIFeature"; +import { UIFeature } from "../../../../../settings/UIFeature"; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; -// Knock and private are reserved keywords which are not yet implemented. -enum JoinRule { - Public = "public", - Knock = "knock", - Invite = "invite", - Private = "private", -} - -enum GuestAccess { - CanJoin = "can_join", - Forbidden = "forbidden", -} - -enum HistoryVisibility { - Invited = "invited", - Joined = "joined", - Shared = "shared", - WorldReadable = "world_readable", -} - interface IProps { roomId: string; } From 18cafeb2211aa897bd3137386710d7355f2c6427 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 11:40:02 +0100 Subject: [PATCH 011/142] Add ability to disable entire StyledRadioGroup --- .../views/elements/StyledRadioGroup.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx index 6b9e992f92..40ba0212dc 100644 --- a/src/components/views/elements/StyledRadioGroup.tsx +++ b/src/components/views/elements/StyledRadioGroup.tsx @@ -19,7 +19,7 @@ import classNames from "classnames"; import StyledRadioButton from "./StyledRadioButton"; -interface IDefinition { +export interface IDefinition { value: T; className?: string; disabled?: boolean; @@ -34,10 +34,19 @@ interface IProps { definitions: IDefinition[]; value?: T; // if not provided no options will be selected outlined?: boolean; + disabled?: boolean; onChange(newValue: T): void; } -function StyledRadioGroup({name, definitions, value, className, outlined, onChange}: IProps) { +function StyledRadioGroup({ + name, + definitions, + value, + className, + outlined, + disabled, + onChange, +}: IProps) { const _onChange = e => { onChange(e.target.value); }; @@ -50,7 +59,7 @@ function StyledRadioGroup({name, definitions, value, className checked={d.checked !== undefined ? d.checked : d.value === value} name={name} value={d.value} - disabled={d.disabled} + disabled={d.disabled ?? disabled} outlined={outlined} > {d.label} From e508ff003be378c0291496b1ba618b0aab0d61c3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Jun 2021 11:43:36 +0100 Subject: [PATCH 012/142] Clean up typing to Security Room Settings --- .../tabs/room/SecurityRoomSettingsTab.tsx | 135 ++++++++++-------- 1 file changed, 72 insertions(+), 63 deletions(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index e0add2cd05..a9dfd67ca9 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -15,8 +15,10 @@ limitations under the License. */ import React from 'react'; -import { JoinRule, GuestAccess, HistoryVisibility } from "matrix-js-sdk/src/@types/partials"; +import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { IRoomVersionsCapability } from 'matrix-js-sdk/src/client'; +import { EventType } from 'matrix-js-sdk/src/@types/event'; import { _t } from "../../../../../languageHandler"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; @@ -24,7 +26,7 @@ import * as sdk from "../../../../.."; import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import Modal from "../../../../../Modal"; import QuestionDialog from "../../../dialogs/QuestionDialog"; -import StyledRadioGroup from '../../../elements/StyledRadioGroup'; +import StyledRadioGroup, { IDefinition } from '../../../elements/StyledRadioGroup'; import { SettingLevel } from "../../../../../settings/SettingLevel"; import SettingsStore from "../../../../../settings/SettingsStore"; import { UIFeature } from "../../../../../settings/UIFeature"; @@ -42,6 +44,12 @@ interface IState { encrypted: boolean; } +enum RoomVisibility { + InviteOnly = "invite_only", + PublicNoGuests = "public_no_guests", + PublicWithGuests = "public_with_guests", +} + @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab") export default class SecurityRoomSettingsTab extends React.Component { constructor(props) { @@ -57,31 +65,33 @@ export default class SecurityRoomSettingsTab extends React.Component this.setState({ hasAliases })); } private pullContentPropertyFromEvent(event: MatrixEvent, key: string, defaultValue: T): T { @@ -94,13 +104,13 @@ export default class SecurityRoomSettingsTab extends React.Component { - const refreshWhenTypes = [ - 'm.room.join_rules', - 'm.room.guest_access', - 'm.room.history_visibility', - 'm.room.encryption', + const refreshWhenTypes: EventType[] = [ + EventType.RoomJoinRules, + EventType.RoomGuestAccess, + EventType.RoomHistoryVisibility, + EventType.RoomEncryption, ]; - if (refreshWhenTypes.includes(e.getType())) this.forceUpdate(); + if (refreshWhenTypes.includes(e.getType() as EventType)) this.forceUpdate(); }; private onEncryptionChange = (e: React.ChangeEvent) => { @@ -126,7 +136,7 @@ export default class SecurityRoomSettingsTab extends React.Component { console.error(e); @@ -140,25 +150,21 @@ export default class SecurityRoomSettingsTab extends React.Component { - console.error(e); - this.setState({joinRule: beforeJoinRule}); - }); - client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => { + client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, { + guest_access: guestAccess, + }, "").catch((e) => { console.error(e); this.setState({guestAccess: beforeGuestAccess}); }); }; - private onRoomAccessRadioToggle = (roomAccess: string) => { + private onRoomAccessRadioToggle = (roomAccess: RoomVisibility) => { // join_rule // INVITE | PUBLIC // ----------------------+---------------- @@ -176,14 +182,14 @@ export default class SecurityRoomSettingsTab extends React.Component { + client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, { + join_rule: joinRule, + }, "").catch((e) => { console.error(e); this.setState({joinRule: beforeJoinRule}); }); - client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => { + client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, { + guest_access: guestAccess, + }, "").catch((e) => { console.error(e); this.setState({guestAccess: beforeGuestAccess}); }); @@ -207,7 +217,7 @@ export default class SecurityRoomSettingsTab extends React.Component { const beforeHistory = this.state.history; this.setState({history: history}); - MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", { + MatrixClientPeg.get().sendStateEvent(this.props.roomId, EventType.RoomHistoryVisibility, { history_visibility: history, }, "").catch((e) => { console.error(e); @@ -227,7 +237,7 @@ export default class SecurityRoomSettingsTab extends React.Component (ev.getContent().aliases || []).length > 0); return hasAliases; } @@ -239,11 +249,11 @@ export default class SecurityRoomSettingsTab extends React.Component @@ -256,7 +266,7 @@ export default class SecurityRoomSettingsTab extends React.Component @@ -267,34 +277,33 @@ export default class SecurityRoomSettingsTab extends React.Component[] = [ + { + value: RoomVisibility.InviteOnly, + label: _t('Only people who have been invited'), + checked: joinRule !== JoinRule.Public && joinRule !== JoinRule.Restricted, + }, + { + value: RoomVisibility.PublicNoGuests, + label: _t('Anyone who knows the room\'s link, apart from guests'), + checked: joinRule === JoinRule.Public && guestAccess !== GuestAccess.CanJoin, + }, + { + value: RoomVisibility.PublicWithGuests, + label: _t("Anyone who knows the room's link, including guests"), + checked: joinRule === JoinRule.Public && guestAccess === GuestAccess.CanJoin, + }, + ]; + return (
- {guestWarning} - {aliasWarning} + { guestWarning } + { aliasWarning }
); @@ -304,7 +313,7 @@ export default class SecurityRoomSettingsTab extends React.Component @@ -349,7 +358,7 @@ export default class SecurityRoomSettingsTab extends React.Component Date: Fri, 18 Jun 2021 12:18:23 +0100 Subject: [PATCH 013/142] Initial support for MSC3083 via MSC3244 --- .../tabs/room/SecurityRoomSettingsTab.tsx | 33 +++++++++++++++---- src/createRoom.ts | 28 +++++++++++++--- 2 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index a9dfd67ca9..2913fb1036 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -42,12 +42,14 @@ interface IState { history: HistoryVisibility; hasAliases: boolean; encrypted: boolean; + roomVersionsCapability?: IRoomVersionsCapability; } enum RoomVisibility { InviteOnly = "invite_only", PublicNoGuests = "public_no_guests", PublicWithGuests = "public_with_guests", + Restricted = "restricted", } @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab") @@ -92,6 +94,9 @@ export default class SecurityRoomSettingsTab extends React.Component this.setState({ hasAliases })); + cli.getCapabilities().then(capabilities => this.setState({ + roomVersionsCapability: capabilities["m.room_versions"], + })); } private pullContentPropertyFromEvent(event: MatrixEvent, key: string, defaultValue: T): T { @@ -166,12 +171,12 @@ export default class SecurityRoomSettingsTab extends React.Component { // join_rule - // INVITE | PUBLIC - // ----------------------+---------------- - // guest CAN_JOIN | inv_only | pub_with_guest - // access ----------------------+---------------- - // FORBIDDEN | inv_only | pub_no_guest - // ----------------------+---------------- + // INVITE | PUBLIC | RESTRICTED + // -----------+----------+----------------+------------- + // guest CAN_JOIN | inv_only | pub_with_guest | restricted + // access -----------+----------+----------------+------------- + // FORBIDDEN | inv_only | pub_no_guest | restricted + // -----------+----------+----------------+------------- // we always set guests can_join here as it makes no sense to have // an invite-only room that guests can't join. If you explicitly @@ -185,6 +190,9 @@ export default class SecurityRoomSettingsTab extends React.Component { guestWarning } diff --git a/src/createRoom.ts b/src/createRoom.ts index 2641492588..0b51613846 100644 --- a/src/createRoom.ts +++ b/src/createRoom.ts @@ -18,6 +18,8 @@ limitations under the License. import { MatrixClient } from "matrix-js-sdk/src/client"; import { Room } from "matrix-js-sdk/src/models/room"; import { EventType } from "matrix-js-sdk/src/@types/event"; +import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests"; +import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; import { MatrixClientPeg } from './MatrixClientPeg'; import Modal from './Modal'; @@ -35,8 +37,6 @@ import { VIRTUAL_ROOM_EVENT_TYPE } from "./CallHandler"; import SpaceStore from "./stores/SpaceStore"; import { makeSpaceParentEvent } from "./utils/space"; import { Action } from "./dispatcher/actions" -import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests"; -import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; // we define a number of interfaces which take their names from the js-sdk /* eslint-disable camelcase */ @@ -72,7 +72,7 @@ export interface IOpts { * @returns {Promise} which resolves to the room id, or null if the * action was aborted or failed. */ -export default function createRoom(opts: IOpts): Promise { +export default async function createRoom(opts: IOpts): Promise { opts = opts || {}; if (opts.spinner === undefined) opts.spinner = true; if (opts.guestAccess === undefined) opts.guestAccess = true; @@ -86,7 +86,7 @@ export default function createRoom(opts: IOpts): Promise { const client = MatrixClientPeg.get(); if (client.isGuest()) { dis.dispatch({action: 'require_registration'}); - return Promise.resolve(null); + return null; } const defaultPreset = opts.dmUserId ? Preset.TrustedPrivateChat : Preset.PrivateChat; @@ -150,6 +150,26 @@ export default function createRoom(opts: IOpts): Promise { "history_visibility": opts.createOpts.preset === Preset.PublicChat ? "world_readable" : "invited", }, }); + + if (opts.parentSpace.getJoinRule() !== JoinRule.Public && opts.createOpts.preset !== Preset.PublicChat) { + const serverCapabilities = await client.getCapabilities(); + const roomCapabilities = serverCapabilities?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]; + if (roomCapabilities?.["restricted"]) { + opts.createOpts.room_version = roomCapabilities?.["restricted"].preferred; + + opts.createOpts.initial_state.push({ + type: EventType.RoomJoinRules, + content: { + "join_rule": JoinRule.Restricted, + "allow": [{ + "type": "m.room_membership", + "room_id": opts.parentSpace.roomId, + }], + "authorised_servers": [client.getDomain()], // TODO this might want tweaking + }, + }) + } + } } let modal; From d0dc5cf347f596fc7919ef0f4d88bd1b00aaf463 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 16:07:05 +0100 Subject: [PATCH 014/142] Update early MSC3083 support --- src/createRoom.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/createRoom.ts b/src/createRoom.ts index 0b51613846..6a14dc005d 100644 --- a/src/createRoom.ts +++ b/src/createRoom.ts @@ -19,7 +19,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client"; import { Room } from "matrix-js-sdk/src/models/room"; import { EventType } from "matrix-js-sdk/src/@types/event"; import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests"; -import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; +import { JoinRule, Preset, RestrictedAllowType, Visibility } from "matrix-js-sdk/src/@types/partials"; import { MatrixClientPeg } from './MatrixClientPeg'; import Modal from './Modal'; @@ -162,10 +162,9 @@ export default async function createRoom(opts: IOpts): Promise { content: { "join_rule": JoinRule.Restricted, "allow": [{ - "type": "m.room_membership", + "type": RestrictedAllowType.RoomMembership, "room_id": opts.parentSpace.roomId, }], - "authorised_servers": [client.getDomain()], // TODO this might want tweaking }, }) } From d466d1a7eef753ba41ee81ddaa4d7f52b423d3ea Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Thu, 24 Jun 2021 11:28:16 -0400 Subject: [PATCH 015/142] Add alwaysShowTimestamps and others to RoomView setting watchers to allow them to update on the fly. This also modifies the setting watchers to avoid an unnecessary settings lookup. Signed-off-by: Robin Townsend --- src/components/structures/RoomView.tsx | 58 ++++++++++++--------- src/components/structures/TimelinePanel.tsx | 12 +++-- src/contexts/RoomContext.ts | 4 ++ 3 files changed, 46 insertions(+), 28 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 338da29875..59d2bc3e71 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -177,6 +177,10 @@ export interface IState { canReply: boolean; layout: Layout; lowBandwidth: boolean; + alwaysShowTimestamps: boolean; + showTwelveHourTimestamps: boolean; + readMarkerInViewThresholdMs: number; + readMarkerOutOfViewThresholdMs: number; showReadReceipts: boolean; showRedactions: boolean; showJoinLeaves: boolean; @@ -240,6 +244,10 @@ export default class RoomView extends React.Component { canReply: false, layout: SettingsStore.getValue("layout"), lowBandwidth: SettingsStore.getValue("lowBandwidth"), + alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"), + showTwelveHourTimestamps: SettingsStore.getValue("showTwelveHourTimestamps"), + readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"), + readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"), showReadReceipts: true, showRedactions: true, showJoinLeaves: true, @@ -272,11 +280,23 @@ export default class RoomView extends React.Component { WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate); this.settingWatchers = [ - SettingsStore.watchSetting("layout", null, () => - this.setState({ layout: SettingsStore.getValue("layout") }), + SettingsStore.watchSetting("layout", null, (...[,,, value]) => + this.setState({ layout: value as Layout }), ), - SettingsStore.watchSetting("lowBandwidth", null, () => - this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }), + SettingsStore.watchSetting("lowBandwidth", null, (...[,,, value]) => + this.setState({ lowBandwidth: value as boolean }), + ), + SettingsStore.watchSetting("alwaysShowTimestamps", null, (...[,,, value]) => + this.setState({ alwaysShowTimestamps: value as boolean }), + ), + SettingsStore.watchSetting("showTwelveHourTimestamps", null, (...[,,, value]) => + this.setState({ showTwelveHourTimestamps: value as boolean }), + ), + SettingsStore.watchSetting("readMarkerInViewThresholdMs", null, (...[,,, value]) => + this.setState({ readMarkerInViewThresholdMs: value as number }), + ), + SettingsStore.watchSetting("readMarkerOutOfViewThresholdMs", null, (...[,,, value]) => + this.setState({ readMarkerOutOfViewThresholdMs: value as number }), ), ]; } @@ -343,30 +363,20 @@ export default class RoomView extends React.Component { // Add watchers for each of the settings we just looked up this.settingWatchers = this.settingWatchers.concat([ - SettingsStore.watchSetting("showReadReceipts", null, () => - this.setState({ - showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId), - }), + SettingsStore.watchSetting("showReadReceipts", roomId, (...[,,, value]) => + this.setState({ showReadReceipts: value as boolean }), ), - SettingsStore.watchSetting("showRedactions", null, () => - this.setState({ - showRedactions: SettingsStore.getValue("showRedactions", roomId), - }), + SettingsStore.watchSetting("showRedactions", roomId, (...[,,, value]) => + this.setState({ showRedactions: value as boolean }), ), - SettingsStore.watchSetting("showJoinLeaves", null, () => - this.setState({ - showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId), - }), + SettingsStore.watchSetting("showJoinLeaves", roomId, (...[,,, value]) => + this.setState({ showJoinLeaves: value as boolean }), ), - SettingsStore.watchSetting("showAvatarChanges", null, () => - this.setState({ - showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId), - }), + SettingsStore.watchSetting("showAvatarChanges", roomId, (...[,,, value]) => + this.setState({ showAvatarChanges: value as boolean }), ), - SettingsStore.watchSetting("showDisplaynameChanges", null, () => - this.setState({ - showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId), - }), + SettingsStore.watchSetting("showDisplaynameChanges", roomId, (...[,,, value]) => + this.setState({ showDisplaynameChanges: value as boolean }), ), ]); diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index c2e7a6f346..1a19c2c0ca 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -699,8 +699,8 @@ class TimelinePanel extends React.Component { private readMarkerTimeout(readMarkerPosition: number): number { return readMarkerPosition === 0 ? - this.state.readMarkerInViewThresholdMs : - this.state.readMarkerOutOfViewThresholdMs; + this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs : + this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs; } private async updateReadMarkerOnUserActivity(): Promise { @@ -1520,8 +1520,12 @@ class TimelinePanel extends React.Component { onUserScroll={this.props.onUserScroll} onFillRequest={this.onMessageListFillRequest} onUnfillRequest={this.onMessageListUnfillRequest} - isTwelveHour={this.state.isTwelveHour} - alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.alwaysShowTimestamps} + isTwelveHour={this.context?.showTwelveHourTimestamps ?? this.state.isTwelveHour} + alwaysShowTimestamps={ + this.props.alwaysShowTimestamps ?? + this.context?.alwaysShowTimestamps ?? + this.state.alwaysShowTimestamps + } className={this.props.className} tileShape={this.props.tileShape} resizeNotifier={this.props.resizeNotifier} diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts index 3464f952a6..495350c7f3 100644 --- a/src/contexts/RoomContext.ts +++ b/src/contexts/RoomContext.ts @@ -41,6 +41,10 @@ const RoomContext = createContext({ canReply: false, layout: Layout.Group, lowBandwidth: false, + alwaysShowTimestamps: false, + showTwelveHourTimestamps: false, + readMarkerInViewThresholdMs: 3000, + readMarkerOutOfViewThresholdMs: 30000, showReadReceipts: true, showRedactions: true, showJoinLeaves: true, From 1b21c8f7328478a56262a9e5dc2dbcbfe1f947c1 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 30 Jun 2021 10:53:46 +0530 Subject: [PATCH 016/142] Remove unreadRoomId from summarized notification state --- src/components/views/rooms/RoomList.tsx | 2 +- src/stores/SpaceStore.tsx | 34 ++++++++++++++----- .../notifications/SpaceNotificationState.ts | 2 +- .../SummarizedNotificationState.ts | 6 ---- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index eb50224a60..6511c12372 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -68,7 +68,7 @@ interface IState { suggestedRooms: ISuggestedRoom[]; } -const TAG_ORDER: TagID[] = [ +export const TAG_ORDER: TagID[] = [ DefaultTagID.Invite, DefaultTagID.Favourite, DefaultTagID.DM, diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index c8144902c9..105d98a8e0 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -38,6 +38,7 @@ import { arrayHasDiff } from "../utils/arrays"; import { objectDiff } from "../utils/objects"; import { arrayHasOrderChange } from "../utils/arrays"; import { reorderLexicographically } from "../utils/stringOrderField"; +import { TAG_ORDER } from "../components/views/rooms/RoomList"; type SpaceKey = string | symbol; @@ -128,16 +129,33 @@ export class SpaceStoreClass extends AsyncStoreWithClient { if (space && !space.isSpaceRoom()) return; if (space !== this.activeSpace) await this.setActiveSpace(space); - const notificationState = space - ? this.getNotificationState(space.roomId) - : RoomNotificationStateStore.instance.globalState; - - if (notificationState.count) { + if (space) { + const notificationState = this.getNotificationState(space.roomId) const roomId = notificationState.getFirstRoomWithNotifications(); defaultDispatcher.dispatch({ - action: "view_room", - room_id: roomId, - context_switch: true, + action: "view_room", + room_id: roomId, + context_switch: true, + }); + } else { + const lists = RoomListStore.instance.unfilteredLists; + TAG_ORDER.every(t => { + const listRooms = lists[t]; + const unreadRoom = listRooms.find((r: Room)=> { + if (this.showInHomeSpace(r)) { + const state = RoomNotificationStateStore.instance.getRoomState(r); + return state.isUnread; + } + }); + if (unreadRoom) { + defaultDispatcher.dispatch({ + action: "view_room", + room_id: unreadRoom.roomId, + context_switch: true, + }); + return false; + } + return true; }); } } diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts index cdb9f2d06a..4c0a582f3f 100644 --- a/src/stores/notifications/SpaceNotificationState.ts +++ b/src/stores/notifications/SpaceNotificationState.ts @@ -54,7 +54,7 @@ export class SpaceNotificationState extends NotificationState { } public getFirstRoomWithNotifications() { - return this.rooms.find((room) => room._notificationCounts.total > 0).roomId; + return this.rooms.find((room) => room.getUnreadNotificationCount() > 0).roomId; } public destroy() { diff --git a/src/stores/notifications/SummarizedNotificationState.ts b/src/stores/notifications/SummarizedNotificationState.ts index ec6db1015d..6b69e1d470 100644 --- a/src/stores/notifications/SummarizedNotificationState.ts +++ b/src/stores/notifications/SummarizedNotificationState.ts @@ -32,7 +32,6 @@ export class SummarizedNotificationState extends NotificationState { super(); this._symbol = null; this._count = 0; - this.unreadRoomId = null; this._color = NotificationColor.None; } @@ -40,10 +39,6 @@ export class SummarizedNotificationState extends NotificationState { return this.totalStatesWithUnread; } - public getFirstRoomWithNotifications() { - return this.unreadRoomId; - } - /** * Append a notification state to this snapshot, taking the loudest NotificationColor * of the two. By default this will not adopt the symbol of the other notification @@ -63,7 +58,6 @@ export class SummarizedNotificationState extends NotificationState { this._color = other.color; } if (other.hasUnreadCount) { - this.unreadRoomId = !this.unreadRoomId ? other.room.roomId : this.unreadRoomId; this.totalStatesWithUnread++; } } From f50604db784d043b1ba749bf7a7eb2eb9c3b7946 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Wed, 30 Jun 2021 12:13:39 +0530 Subject: [PATCH 017/142] missing semicolon --- src/stores/SpaceStore.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index c5227b4f8a..514f8418b8 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -130,7 +130,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { if (space !== this.activeSpace) await this.setActiveSpace(space); if (space) { - const notificationState = this.getNotificationState(space.roomId) + const notificationState = this.getNotificationState(space.roomId); const roomId = notificationState.getFirstRoomWithNotifications(); defaultDispatcher.dispatch({ action: "view_room", @@ -141,7 +141,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { const lists = RoomListStore.instance.unfilteredLists; TAG_ORDER.every(t => { const listRooms = lists[t]; - const unreadRoom = listRooms.find((r: Room)=> { + const unreadRoom = listRooms.find((r: Room) => { if (this.showInHomeSpace(r)) { const state = RoomNotificationStateStore.instance.getRoomState(r); return state.isUnread; From e8f0412fe30abe28036e421f22ea12079f0332ca Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 2 Jul 2021 14:51:55 +0100 Subject: [PATCH 018/142] Add way to manage Restricted join rule in Room Settings --- res/css/_components.scss | 1 + .../_ManageRestrictedJoinRuleDialog.scss | 147 +++++++ res/css/views/settings/tabs/_SettingsTab.scss | 4 +- .../tabs/room/_SecurityRoomSettingsTab.scss | 86 +++- src/SlashCommands.tsx | 49 +-- src/components/views/avatars/RoomAvatar.tsx | 21 +- .../ManageRestrictedJoinRuleDialog.tsx | 182 ++++++++ ...Dialog.js => RoomUpgradeWarningDialog.tsx} | 97 +++-- .../views/elements/StyledRadioGroup.tsx | 6 +- .../tabs/room/SecurityRoomSettingsTab.tsx | 396 +++++++++++------- src/createRoom.ts | 16 +- src/i18n/strings/en_EN.json | 43 +- src/utils/RoomUpgrade.ts | 74 ++++ 13 files changed, 857 insertions(+), 265 deletions(-) create mode 100644 res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss create mode 100644 src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx rename src/components/views/dialogs/{RoomUpgradeWarningDialog.js => RoomUpgradeWarningDialog.tsx} (59%) create mode 100644 src/utils/RoomUpgrade.ts diff --git a/res/css/_components.scss b/res/css/_components.scss index 1517527034..7463f92037 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -87,6 +87,7 @@ @import "./views/dialogs/_IncomingSasDialog.scss"; @import "./views/dialogs/_InviteDialog.scss"; @import "./views/dialogs/_KeyboardShortcutsDialog.scss"; +@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_ModalWidgetDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss"; diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss new file mode 100644 index 0000000000..6606f78a8a --- /dev/null +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss @@ -0,0 +1,147 @@ +/* +Copyright 2021 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. +*/ + +.mx_ManageRestrictedJoinRuleDialog_wrapper { + .mx_Dialog { + display: flex; + flex-direction: column; + } +} + +.mx_ManageRestrictedJoinRuleDialog { + width: 480px; + color: $primary-fg-color; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + min-height: 0; + height: 60vh; + + .mx_SearchBox { + // To match the space around the title + margin: 0 0 15px 0; + flex-grow: 0; + } + + .mx_ManageRestrictedJoinRuleDialog_content { + flex-grow: 1; + } + + .mx_ManageRestrictedJoinRuleDialog_noResults { + display: block; + margin-top: 24px; + } + + .mx_ManageRestrictedJoinRuleDialog_section { + &:not(:first-child) { + margin-top: 24px; + } + + > h3 { + margin: 0; + color: $secondary-fg-color; + font-size: $font-12px; + font-weight: $font-semi-bold; + line-height: $font-15px; + } + + .mx_ManageRestrictedJoinRuleDialog_entry { + display: flex; + margin-top: 12px; + + > div { + flex-grow: 1; + } + + img.mx_RoomAvatar_isSpaceRoom, + .mx_RoomAvatar_isSpaceRoom img { + border-radius: 4px; + } + + .mx_ManageRestrictedJoinRuleDialog_entry_name { + margin: 0 8px; + font-size: $font-15px; + line-height: 30px; + flex-grow: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .mx_ManageRestrictedJoinRuleDialog_entry_description { + margin-top: 8px; + font-size: $font-12px; + line-height: $font-15px; + color: $tertiary-fg-color; + } + + .mx_Checkbox { + align-items: center; + } + } + } + + .mx_ManageRestrictedJoinRuleDialog_section_spaces { + .mx_BaseAvatar { + margin-right: 12px; + } + + .mx_BaseAvatar_image { + border-radius: 8px; + } + } + + .mx_ManageRestrictedJoinRuleDialog_section_experimental { + position: relative; + border-radius: 8px; + margin: 12px 0; + padding: 8px 8px 8px 42px; + background-color: $header-panel-bg-color; + + font-size: $font-12px; + line-height: $font-15px; + color: $secondary-fg-color; + + &::before { + content: ''; + position: absolute; + left: 10px; + top: calc(50% - 8px); // vertical centering + height: 16px; + width: 16px; + background-color: $secondary-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); + mask-position: center; + } + } + + .mx_ManageRestrictedJoinRuleDialog_footer { + display: flex; + margin-top: 20px; + align-self: end; + + .mx_AccessibleButton { + display: inline-block; + align-self: center; + + & + .mx_AccessibleButton { + margin-left: 24px; + } + } + } +} diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 892f5fe744..0d679af4e5 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -47,14 +47,14 @@ limitations under the License. color: $settings-subsection-fg-color; font-size: $font-14px; display: block; - margin: 10px 100px 10px 0; // Align with the rest of the view + margin: 10px 80px 10px 0; // Align with the rest of the view } .mx_SettingsTab_section { margin-bottom: 24px; .mx_SettingsFlag { - margin-right: 100px; + margin-right: 80px; margin-bottom: 10px; } diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss index 23dcc532b2..2aab201352 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss @@ -14,6 +14,44 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_SecurityRoomSettingsTab { + .mx_SettingsTab_showAdvanced { + padding: 0; + margin-bottom: 16px; + } + + .mx_SecurityRoomSettingsTab_spacesWithAccess { + > h4 { + color: $secondary-fg-color; + font-weight: $font-semi-bold; + font-size: $font-12px; + line-height: $font-15px; + text-transform: uppercase; + } + + > span { + font-weight: 500; + font-size: $font-14px; + line-height: 32px; // matches height of avatar for v-align + color: $secondary-fg-color; + display: inline-block; + + img.mx_RoomAvatar_isSpaceRoom, + .mx_RoomAvatar_isSpaceRoom img { + border-radius: 8px; + } + + .mx_BaseAvatar { + margin-right: 8px; + } + + & + span { + margin-left: 16px; + } + } + } +} + .mx_SecurityRoomSettingsTab_warning { display: block; @@ -26,5 +64,51 @@ limitations under the License. } .mx_SecurityRoomSettingsTab_encryptionSection { - margin-bottom: 25px; + padding-bottom: 24px; + border-bottom: 1px solid $menu-border-color; + margin-bottom: 32px; +} + +.mx_SecurityRoomSettingsTab_upgradeRequired { + margin-left: 16px; + padding: 4px 16px; + border: 1px solid $accent-color; + border-radius: 8px; + color: $accent-color; + font-size: $font-12px; + line-height: $font-15px; +} + +.mx_SecurityRoomSettingsTab_joinRule { + .mx_RadioButton { + padding-top: 16px; + margin-bottom: 8px; + + .mx_RadioButton_content { + margin-left: 14px; + font-weight: $font-semi-bold; + font-size: $font-15px; + line-height: $font-24px; + color: $primary-fg-color; + display: block; + } + } + + > span { + display: inline-block; + margin-left: 34px; + margin-bottom: 16px; + font-size: $font-15px; + line-height: $font-24px; + color: $secondary-fg-color; + + & + .mx_RadioButton { + border-top: 1px solid $menu-border-color; + } + } + + .mx_AccessibleButton_kind_link { + padding: 0; + font-size: inherit; + } } diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 128ca9e5e2..b8f500ba84 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -35,7 +35,6 @@ import { getAddressType } from './UserAddress'; import { abbreviateUrl } from './utils/UrlUtils'; import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/IdentityServerUtils'; import { isPermalinkHost, parsePermalink } from "./utils/permalinks/Permalinks"; -import { inviteUsersToRoom } from "./RoomInvite"; import { WidgetType } from "./widgets/WidgetType"; import { Jitsi } from "./widgets/Jitsi"; import { parseFragment as parseHtml, Element as ChildElement } from "parse5"; @@ -50,6 +49,7 @@ import { UIFeature } from "./settings/UIFeature"; import { CHAT_EFFECTS } from "./effects"; import CallHandler from "./CallHandler"; import { guessAndSetDMRoom } from "./Rooms"; +import { upgradeRoom } from './utils/RoomUpgrade'; // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816 interface HTMLInputEvent extends Event { @@ -276,51 +276,8 @@ export const Commands = [ /*isPriority=*/false, /*isStatic=*/true); return success(finished.then(async ([resp]) => { - if (!resp.continue) return; - - let checkForUpgradeFn; - try { - const upgradePromise = cli.upgradeRoom(roomId, args); - - // We have to wait for the js-sdk to give us the room back so - // we can more effectively abuse the MultiInviter behaviour - // which heavily relies on the Room object being available. - if (resp.invite) { - checkForUpgradeFn = async (newRoom) => { - // The upgradePromise should be done by the time we await it here. - const { replacement_room: newRoomId } = await upgradePromise; - if (newRoom.roomId !== newRoomId) return; - - const toInvite = [ - ...room.getMembersWithMembership("join"), - ...room.getMembersWithMembership("invite"), - ].map(m => m.userId).filter(m => m !== cli.getUserId()); - - if (toInvite.length > 0) { - // Errors are handled internally to this function - await inviteUsersToRoom(newRoomId, toInvite); - } - - cli.removeListener('Room', checkForUpgradeFn); - }; - cli.on('Room', checkForUpgradeFn); - } - - // We have to await after so that the checkForUpgradesFn has a proper reference - // to the new room's ID. - await upgradePromise; - } catch (e) { - console.error(e); - - if (checkForUpgradeFn) cli.removeListener('Room', checkForUpgradeFn); - - const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); - Modal.createTrackedDialog('Slash Commands', 'room upgrade error', ErrorDialog, { - title: _t('Error upgrading room'), - description: _t( - 'Double check that your server supports the room version chosen and try again.'), - }); - } + if (!resp?.continue) return; + await upgradeRoom(room, args, resp.invite); })); } return reject(this.getUsage()); diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index 8ac8de8233..bd776953a6 100644 --- a/src/components/views/avatars/RoomAvatar.tsx +++ b/src/components/views/avatars/RoomAvatar.tsx @@ -13,9 +13,11 @@ 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 React, { ComponentProps } from 'react'; import { Room } from 'matrix-js-sdk/src/models/room'; import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials'; +import classNames from "classnames"; import BaseAvatar from './BaseAvatar'; import ImageView from '../elements/ImageView'; @@ -31,11 +33,14 @@ interface IProps extends Omit, "name" | "idNam // oobData.avatarUrl should be set (else there // would be nowhere to get the avatar from) room?: Room; - oobData?: IOOBData; + oobData?: IOOBData & { + roomId?: string; + }; width?: number; height?: number; resizeMethod?: ResizeMethod; viewAvatarOnClick?: boolean; + className?: string; onClick?(): void; } @@ -128,14 +133,16 @@ export default class RoomAvatar extends React.Component { }; public render() { - const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props; - - const roomName = room ? room.name : oobData.name; + const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props; return ( - diff --git a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx new file mode 100644 index 0000000000..79a6fb7f24 --- /dev/null +++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx @@ -0,0 +1,182 @@ +/* +Copyright 2021 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 React, { useMemo, useState } from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; + +import { _t } from '../../../languageHandler'; +import { IDialogProps } from "./IDialogProps"; +import BaseDialog from "./BaseDialog"; +import SearchBox from "../../structures/SearchBox"; +import SpaceStore from "../../../stores/SpaceStore"; +import RoomAvatar from "../avatars/RoomAvatar"; +import AccessibleButton from "../elements/AccessibleButton"; +import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; +import StyledCheckbox from "../elements/StyledCheckbox"; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; + +interface IProps extends IDialogProps { + room: Room; + selected?: string[]; +} + +const Entry = ({ room, checked, onChange }) => { + const localRoom = room instanceof Room; + + let description; + if (localRoom) { + description = _t("%(count)s members", { count: room.getJoinedMemberCount() }); + const numChildRooms = SpaceStore.instance.getChildRooms(room.roomId).length; + if (numChildRooms > 0) { + description += " · " + _t("%(count)s rooms", { count: numChildRooms }); + } + } + + return ; +}; + +const ManageRestrictedJoinRuleDialog: React.FC = ({ room, selected = [], onFinished }) => { + const cli = room.client; + const [newSelected, setNewSelected] = useState(new Set(selected)); + const [query, setQuery] = useState(""); + const lcQuery = query.toLowerCase().trim(); + + const [spacesContainingRoom, otherEntries] = useMemo(() => { + const spaces = cli.getVisibleRooms().filter(r => r.getMyMembership() === "join" && r.isSpaceRoom()); + return [ + spaces.filter(r => SpaceStore.instance.getSpaceFilteredRoomIds(r).has(room.roomId)), + selected.map(roomId => { + const room = cli.getRoom(roomId); + if (!room) { + return { roomId, name: roomId } as Room; + } + if (room.getMyMembership() !== "join" || !room.isSpaceRoom()) { + return room; + } + }).filter(Boolean), + ]; + }, [cli, selected, room.roomId]); + + const [filteredSpacesContainingRooms, filteredOtherEntries] = useMemo(() => [ + spacesContainingRoom.filter(r => r.name.toLowerCase().includes(lcQuery)), + otherEntries.filter(r => r.name.toLowerCase().includes(lcQuery)), + ], [spacesContainingRoom, otherEntries, lcQuery]); + + const onChange = (checked: boolean, room: Room): void => { + if (checked) { + newSelected.add(room.roomId); + } else { + newSelected.delete(room.roomId); + } + setNewSelected(new Set(newSelected)); + }; + + return +

+ { _t("Decide which spaces can access this room. " + + "If a space is selected its members will be able to find and join .", {}, { + RoomName: () => { room.name }, + })} +

+ + + + { filteredSpacesContainingRooms.length > 0 ? ( +
+

{ _t("Spaces you know that contain this room") }

+ { filteredSpacesContainingRooms.map(space => { + return { + onChange(checked, space); + }} + />; + }) } +
+ ) : undefined } + + { filteredOtherEntries.length > 0 ? ( +
+

{ _t("Other spaces or rooms you might not know") }

+
+
{ _t("These are likely ones other room admins are a part of.") }
+
+ { filteredOtherEntries.map(space => { + return { + onChange(checked, space); + }} + />; + }) } +
+ ) : null } + + { filteredSpacesContainingRooms.length + filteredOtherEntries.length < 1 + ? + { _t("No results") } + + : undefined + } + + +
+ onFinished()}> + { _t("Cancel") } + + onFinished(Array.from(newSelected))}> + { _t("Confirm") } + +
+ + ; +}; + +export default ManageRestrictedJoinRuleDialog; + diff --git a/src/components/views/dialogs/RoomUpgradeWarningDialog.js b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx similarity index 59% rename from src/components/views/dialogs/RoomUpgradeWarningDialog.js rename to src/components/views/dialogs/RoomUpgradeWarningDialog.tsx index c73edcd871..6bc770c05b 100644 --- a/src/components/views/dialogs/RoomUpgradeWarningDialog.js +++ b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019, 2020 The Matrix.org Foundation C.I.C. +Copyright 2019 - 2021 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. @@ -14,86 +14,95 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { ReactNode } from 'react'; +import { EventType } from 'matrix-js-sdk/src/@types/event'; +import { JoinRule } from 'matrix-js-sdk/src/@types/partials'; + import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; -import * as sdk from "../../../index"; import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import Modal from "../../../Modal"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { IDialogProps } from "./IDialogProps"; +import BugReportDialog from './BugReportDialog'; +import BaseDialog from "./BaseDialog"; +import DialogButtons from "../elements/DialogButtons"; + +interface IProps extends IDialogProps { + roomId: string; + targetVersion: string; + description?: ReactNode; +} + +interface IState { + inviteUsersToNewRoom: boolean; +} @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog") -export default class RoomUpgradeWarningDialog extends React.Component { - static propTypes = { - onFinished: PropTypes.func.isRequired, - roomId: PropTypes.string.isRequired, - targetVersion: PropTypes.string.isRequired, - }; +export default class RoomUpgradeWarningDialog extends React.Component { + private readonly isPrivate: boolean; + private readonly currentVersion: string; constructor(props) { super(props); const room = MatrixClientPeg.get().getRoom(this.props.roomId); - const joinRules = room ? room.currentState.getStateEvents("m.room.join_rules", "") : null; - const isPrivate = joinRules ? joinRules.getContent()['join_rule'] !== 'public' : true; + const joinRules = room?.currentState.getStateEvents(EventType.RoomJoinRules, ""); + this.isPrivate = joinRules?.getContent()['join_rule'] !== JoinRule.Public ?? true; + this.currentVersion = room?.getVersion() || "1"; + this.state = { - currentVersion: room ? room.getVersion() : "1", - isPrivate, inviteUsersToNewRoom: true, }; } - _onContinue = () => { - this.props.onFinished({ continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom }); + private onContinue = () => { + this.props.onFinished({ continue: true, invite: this.isPrivate && this.state.inviteUsersToNewRoom }); }; - _onCancel = () => { + private onCancel = () => { this.props.onFinished({ continue: false, invite: false }); }; - _onInviteUsersToggle = (newVal) => { - this.setState({ inviteUsersToNewRoom: newVal }); + private onInviteUsersToggle = (inviteUsersToNewRoom: boolean) => { + this.setState({ inviteUsersToNewRoom }); }; - _openBugReportDialog = (e) => { + private openBugReportDialog = (e) => { e.preventDefault(); e.stopPropagation(); - const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog"); Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {}); }; render() { const brand = SdkConfig.get().brand; - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); let inviteToggle = null; - if (this.state.isPrivate) { + if (this.isPrivate) { inviteToggle = ( + onChange={this.onInviteUsersToggle} + label={_t("Automatically invite members from this room to the new one")} /> ); } - const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room"); + const title = this.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room"); let bugReports = (

- {_t( + { _t( "This usually only affects how the room is processed on the server. If you're " + "having problems with your %(brand)s, please report a bug.", { brand }, - )} + ) }

); if (SdkConfig.get().bug_report_endpoint_url) { bugReports = (

- {_t( + { _t( "This usually only affects how the room is processed on the server. If you're " + "having problems with your %(brand)s, please report a bug.", { @@ -101,10 +110,10 @@ export default class RoomUpgradeWarningDialog extends React.Component { }, { "a": (sub) => { - return {sub}; + return {sub}; }, }, - )} + ) }

); } @@ -119,29 +128,37 @@ export default class RoomUpgradeWarningDialog extends React.Component { >

- {_t( + { this.props.description || _t( "Upgrading a room is an advanced action and is usually recommended when a room " + "is unstable due to bugs, missing features or security vulnerabilities.", - )} + ) }

- {bugReports} +

+ { _t( + "Please note upgrading will make a new version of the room. " + + "All current messages will stay in this archived room.", {}, { + b: sub => { sub }, + }, + ) } +

+ { bugReports }

{_t( "You'll upgrade this room from to .", {}, { - oldVersion: () => {this.state.currentVersion}, - newVersion: () => {this.props.targetVersion}, + oldVersion: () => { this.currentVersion }, + newVersion: () => { this.props.targetVersion }, }, )}

- {inviteToggle} + { inviteToggle }
); diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx index af152b82da..efd278c991 100644 --- a/src/components/views/elements/StyledRadioGroup.tsx +++ b/src/components/views/elements/StyledRadioGroup.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactNode } from "react"; import classNames from "classnames"; import StyledRadioButton from "./StyledRadioButton"; @@ -23,8 +23,8 @@ export interface IDefinition { value: T; className?: string; disabled?: boolean; - label: React.ReactChild; - description?: React.ReactChild; + label: ReactNode; + description?: ReactNode; checked?: boolean; // If provided it will override the value comparison done in the group } diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 2c2c336d24..34f5b8c94c 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -15,9 +15,8 @@ limitations under the License. */ import React from 'react'; -import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import { IRoomVersionsCapability } from 'matrix-js-sdk/src/client'; +import { GuestAccess, HistoryVisibility, JoinRule, RestrictedAllowType } from "matrix-js-sdk/src/@types/partials"; +import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event"; import { EventType } from 'matrix-js-sdk/src/@types/event'; import { _t } from "../../../../../languageHandler"; @@ -31,6 +30,12 @@ import { SettingLevel } from "../../../../../settings/SettingLevel"; import SettingsStore from "../../../../../settings/SettingsStore"; import { UIFeature } from "../../../../../settings/UIFeature"; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; +import AccessibleButton from "../../../elements/AccessibleButton"; +import SpaceStore from "../../../../../stores/SpaceStore"; +import RoomAvatar from "../../../avatars/RoomAvatar"; +import ManageRestrictedJoinRuleDialog from '../../../dialogs/ManageRestrictedJoinRuleDialog'; +import RoomUpgradeWarningDialog from '../../../dialogs/RoomUpgradeWarningDialog'; +import { upgradeRoom } from "../../../../../utils/RoomUpgrade"; interface IProps { roomId: string; @@ -38,18 +43,14 @@ interface IProps { interface IState { joinRule: JoinRule; + restrictedAllowRoomIds?: string[]; guestAccess: GuestAccess; history: HistoryVisibility; hasAliases: boolean; encrypted: boolean; - roomVersionsCapability?: IRoomVersionsCapability; -} - -enum RoomVisibility { - InviteOnly = "invite_only", - PublicNoGuests = "public_no_guests", - PublicWithGuests = "public_with_guests", - Restricted = "restricted", + roomSupportsRestricted?: boolean; + preferredRestrictionVersion?: string; + showAdvancedSection: boolean; } @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab") @@ -59,10 +60,11 @@ export default class SecurityRoomSettingsTab extends React.Component( + joinRuleEvent, 'join_rule', JoinRule.Invite, ); - const guestAccess: GuestAccess = this.pullContentPropertyFromEvent( + const restrictedAllowRoomIds = joinRule === JoinRule.Restricted + ? joinRuleEvent?.getContent().allow + ?.filter(a => a.type === RestrictedAllowType.RoomMembership) + ?.map(a => a.room_id) + : undefined; + + const guestAccess: GuestAccess = this.pullContentPropertyFromEvent( state.getStateEvents(EventType.RoomGuestAccess, ""), 'guest_access', GuestAccess.Forbidden, ); - const history: HistoryVisibility = this.pullContentPropertyFromEvent( + const history: HistoryVisibility = this.pullContentPropertyFromEvent( state.getStateEvents(EventType.RoomHistoryVisibility, ""), 'history_visibility', HistoryVisibility.Shared, ); const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId); - this.setState({ joinRule, guestAccess, history, encrypted }); + this.setState({ joinRule, restrictedAllowRoomIds, guestAccess, history, encrypted }); this.hasAliases().then(hasAliases => this.setState({ hasAliases })); - cli.getCapabilities().then(capabilities => this.setState({ - roomVersionsCapability: capabilities["m.room_versions"], - })); + cli.getCapabilities().then(capabilities => { + const roomCapabilities = capabilities["org.matrix.msc3244.room_capabilities"]; + const roomSupportsRestricted = roomCapabilities && Array.isArray(roomCapabilities["restricted"]?.support) && + roomCapabilities["restricted"].support.includes(room.getVersion()); + const preferredRestrictionVersion = roomSupportsRestricted + ? roomCapabilities?.["restricted"].preferred + : undefined; + + this.setState({ roomSupportsRestricted, preferredRestrictionVersion }); + }); } private pullContentPropertyFromEvent(event: MatrixEvent, key: string, defaultValue: T): T { - if (!event || !event.getContent()) return defaultValue; - return event.getContent()[key] || defaultValue; + return event?.getContent()[key] || defaultValue; } componentWillUnmount() { @@ -151,81 +166,80 @@ export default class SecurityRoomSettingsTab extends React.Component { - e.preventDefault(); - e.stopPropagation(); + private onJoinRuleChange = (joinRule: JoinRule) => { + if (joinRule === JoinRule.Restricted && + !this.state.roomSupportsRestricted && + this.state.preferredRestrictionVersion + ) { + const cli = MatrixClientPeg.get(); + const roomId = this.props.roomId; + const room = cli.getRoom(roomId); + const targetVersion = this.state.preferredRestrictionVersion; + const activeSpace = SpaceStore.instance.activeSpace; + Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, { + roomId, + targetVersion, + description: _t("This upgrade will allow members of selected spaces " + + "access to this room without an invite."), + onFinished: async (resp) => { + if (!resp?.continue) return; + const { replacement_room: newRoomId } = await upgradeRoom(room, targetVersion, resp.invite); - const guestAccess = GuestAccess.CanJoin; + const content: IContent = { + join_rule: JoinRule.Restricted, + }; + if (activeSpace) { + content.allow = [{ + "type": RestrictedAllowType.RoomMembership, + "room_id": activeSpace.roomId, + }]; + } + + cli.sendStateEvent(newRoomId, EventType.RoomJoinRules, content); + }, + }); + return; + } + + const beforeJoinRule = this.state.joinRule; + this.setState({ joinRule }); + + const client = MatrixClientPeg.get(); + client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, { + join_rule: joinRule, + }, "").catch((e) => { + console.error(e); + this.setState({ joinRule: beforeJoinRule }); + }); + }; + + private onRestrictedRoomIdsChange = (restrictedAllowRoomIds: string[]) => { + const beforeRestrictedAllowRoomIds = this.state.restrictedAllowRoomIds; + this.setState({ restrictedAllowRoomIds }); + + const client = MatrixClientPeg.get(); + client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, { + join_rule: JoinRule.Restricted, + allow: restrictedAllowRoomIds.map(roomId => ({ + "type": RestrictedAllowType.RoomMembership, + "room_id": roomId, + })), + }, "").catch((e) => { + console.error(e); + this.setState({ restrictedAllowRoomIds: beforeRestrictedAllowRoomIds }); + }); + }; + + private onGuestAccessChange = (allowed: boolean) => { + const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden; const beforeGuestAccess = this.state.guestAccess; this.setState({ guestAccess }); const client = MatrixClientPeg.get(); - client.sendStateEvent( - this.props.roomId, - EventType.RoomGuestAccess, - { guest_access: guestAccess, }, - "", - ).catch((e) => { - console.error(e); - this.setState({ guestAccess: beforeGuestAccess }); - }); - }; - - private onRoomAccessRadioToggle = (roomAccess: RoomVisibility) => { - // join_rule - // INVITE | PUBLIC | RESTRICTED - // -----------+----------+----------------+------------- - // guest CAN_JOIN | inv_only | pub_with_guest | restricted - // access -----------+----------+----------------+------------- - // FORBIDDEN | inv_only | pub_no_guest | restricted - // -----------+----------+----------------+------------- - - // we always set guests can_join here as it makes no sense to have - // an invite-only room that guests can't join. If you explicitly - // invite them, you clearly want them to join, whether they're a - // guest or not. In practice, guest_access should probably have - // been implemented as part of the join_rules enum. - let joinRule = JoinRule.Invite; - let guestAccess = GuestAccess.CanJoin; - - switch (roomAccess) { - case RoomVisibility.InviteOnly: - // no change - use defaults above - break; - case RoomVisibility.Restricted: - joinRule = JoinRule.Restricted; - break; - case RoomVisibility.PublicNoGuests: - joinRule = JoinRule.Public; - guestAccess = GuestAccess.Forbidden; - break; - case RoomVisibility.PublicWithGuests: - joinRule = JoinRule.Public; - guestAccess = GuestAccess.CanJoin; - break; - } - - const beforeJoinRule = this.state.joinRule; - const beforeGuestAccess = this.state.guestAccess; - this.setState({ joinRule, guestAccess }); - - const client = MatrixClientPeg.get(); - client.sendStateEvent( - this.props.roomId, - EventType.RoomJoinRules, { - join_rule: joinRule, - }, "", - ).catch((e) => { - console.error(e); - this.setState({ joinRule: beforeJoinRule }); - }); - client.sendStateEvent( - this.props.roomId, - EventType.RoomGuestAccess, { + client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, { guest_access: guestAccess, - }, "", - ).catch((e) => { + }, "").catch((e) => { console.error(e); this.setState({ guestAccess: beforeGuestAccess }); }); @@ -260,27 +274,25 @@ export default class SecurityRoomSettingsTab extends React.Component { + const matrixClient = MatrixClientPeg.get(); + Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, { + matrixClient, + room: matrixClient.getRoom(this.props.roomId), + selected: this.state.restrictedAllowRoomIds, + onFinished: (restrictedAllowRoomIds?: string[]) => { + if (!Array.isArray(restrictedAllowRoomIds)) return; + this.onRestrictedRoomIdsChange(restrictedAllowRoomIds); + }, + }, "mx_ManageRestrictedJoinRuleDialog_wrapper"); + }; + + private renderJoinRule() { const client = MatrixClientPeg.get(); const room = client.getRoom(this.props.roomId); const joinRule = this.state.joinRule; - const guestAccess = this.state.guestAccess; - const canChangeAccess = room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, client) - && room.currentState.mayClientSendStateEvent(EventType.RoomGuestAccess, client); - - let guestWarning = null; - if (joinRule !== JoinRule.Public && guestAccess === GuestAccess.Forbidden) { - guestWarning = ( -
- - - {_t("Guests cannot join this room even if explicitly invited.")}  - {_t("Click here to fix")} - -
- ); - } + const canChangeJoinRule = room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, client); let aliasWarning = null; if (joinRule === JoinRule.Public && !this.state.hasAliases) { @@ -294,46 +306,98 @@ export default class SecurityRoomSettingsTab extends React.Component[] = [ - { - value: RoomVisibility.InviteOnly, - label: _t('Only people who have been invited'), - checked: joinRule !== JoinRule.Public && joinRule !== JoinRule.Restricted, - }, - { - value: RoomVisibility.PublicNoGuests, - label: _t('Anyone who knows the room\'s link, apart from guests'), - checked: joinRule === JoinRule.Public && guestAccess !== GuestAccess.CanJoin, - }, - { - value: RoomVisibility.PublicWithGuests, - label: _t("Anyone who knows the room's link, including guests"), - checked: joinRule === JoinRule.Public && guestAccess === GuestAccess.CanJoin, - }, - ]; + const radioDefinitions: IDefinition[] = [{ + value: JoinRule.Invite, + label: _t("Private (invite only)"), + description: _t("Only invited people can join."), + }, { + value: JoinRule.Public, + label: _t("Public (anyone)"), + description: _t("Anyone can find and join."), + }]; - const roomCapabilities = this.state.roomVersionsCapability?.["org.matrix.msc3244.room_capabilities"]; - if (roomCapabilities?.["restricted"]) { - if (Array.isArray(roomCapabilities["restricted"]?.support) && - roomCapabilities["restricted"].support.includes(room.getVersion() ?? "1") - ) { - radioDefinitions.unshift({ - value: RoomVisibility.Restricted, - label: _t("Only people in certain spaces or those who have been invited (TODO copy)"), - checked: joinRule === JoinRule.Restricted, - }); + if (this.state.roomSupportsRestricted || + this.state.preferredRestrictionVersion || + joinRule === JoinRule.Restricted + ) { + let upgradeRequiredPill; + if (this.state.preferredRestrictionVersion) { + upgradeRequiredPill = + { _t("Upgrade required") } + ; } + + let description; + if (joinRule === JoinRule.Restricted) { + let spacesWhichCanAccess; + if (this.state.restrictedAllowRoomIds?.length) { + const shownSpaces = this.state.restrictedAllowRoomIds + .map(roomId => client.getRoom(roomId)) + .filter(Boolean) + .slice(0, 4); + + spacesWhichCanAccess =
+

{ _t("Spaces with access") }

+ { shownSpaces.map(room => { + return + + { room.name } + ; + })} + { shownSpaces.length < this.state.restrictedAllowRoomIds.length && + { _t("& %(count)s more", { + count: this.state.restrictedAllowRoomIds.length - shownSpaces.length, + }) } + } +
; + } + + description =
+ + { _t("Anyone in a space can find and join. Edit which spaces can access here.", {}, { + a: sub => + { sub } + , + }) } + + { spacesWhichCanAccess } +
; + } else if (SpaceStore.instance.activeSpace) { + description = _t("Anyone in %(spaceName)s can find and join. You can select other spaces too.", { + spaceName: SpaceStore.instance.activeSpace.name, + }); + } else { + description = _t("Anyone in a space can find and join. You can select multiple spaces."); + } + + radioDefinitions.splice(1, 0, { + value: JoinRule.Restricted, + label: <> + { _t("Space members") } + { upgradeRequiredPill } + , + description, + }); } return ( -
- { guestWarning } +
+
+ { _t("Decide who can view and join %(roomName)s.", { + roomName: client.getRoom(this.props.roomId)?.name, + }) } +
{ aliasWarning }
); @@ -382,6 +446,30 @@ export default class SecurityRoomSettingsTab extends React.Component { + this.setState({ showAdvancedSection: !this.state.showAdvancedSection }); + }; + + private renderAdvanced() { + const client = MatrixClientPeg.get(); + const guestAccess = this.state.guestAccess; + const state = client.getRoom(this.props.roomId).currentState; + const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client); + + return <> + +

+ { _t("People with supported clients will be able to join " + + "the room without having a registered account.") } +

+ ; + } + render() { const SettingsFlag = sdk.getComponent("elements.SettingsFlag"); @@ -413,27 +501,39 @@ export default class SecurityRoomSettingsTab extends React.Component -
{_t("Security & Privacy")}
+
{ _t("Security & Privacy") }
- {_t("Encryption")} + { _t("Encryption") }
- {_t("Once enabled, encryption cannot be disabled.")} + { _t("Once enabled, encryption cannot be disabled.") }
-
- {encryptionSettings} + { encryptionSettings }
- {_t("Who can access this room?")} + {_t("Access")}
- {this.renderRoomAccess()} + { this.renderJoinRule() }
- {historySection} + + { this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") } + + { this.state.showAdvancedSection && this.renderAdvanced() } + + { historySection }
); } diff --git a/src/createRoom.ts b/src/createRoom.ts index f8a2665704..0a88e2cef7 100644 --- a/src/createRoom.ts +++ b/src/createRoom.ts @@ -37,8 +37,6 @@ import { VIRTUAL_ROOM_EVENT_TYPE } from "./CallHandler"; import SpaceStore from "./stores/SpaceStore"; import { makeSpaceParentEvent } from "./utils/space"; import { Action } from "./dispatcher/actions"; -import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests"; -import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; // we define a number of interfaces which take their names from the js-sdk /* eslint-disable camelcase */ @@ -53,6 +51,7 @@ export interface IOpts { andView?: boolean; associatedWithCommunity?: string; parentSpace?: Room; + joinRule?: JoinRule; } /** @@ -153,10 +152,10 @@ export default async function createRoom(opts: IOpts): Promise { }, }); - if (opts.parentSpace.getJoinRule() !== JoinRule.Public && opts.createOpts.preset !== Preset.PublicChat) { + if (opts.joinRule === JoinRule.Restricted) { const serverCapabilities = await client.getCapabilities(); const roomCapabilities = serverCapabilities?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]; - if (roomCapabilities?.["restricted"]) { + if (roomCapabilities?.["restricted"]?.preferred) { opts.createOpts.room_version = roomCapabilities?.["restricted"].preferred; opts.createOpts.initial_state.push({ @@ -168,11 +167,18 @@ export default async function createRoom(opts: IOpts): Promise { "room_id": opts.parentSpace.roomId, }], }, - }) + }); } } } + if (opts.joinRule !== JoinRule.Restricted) { + opts.createOpts.initial_state.push({ + type: EventType.RoomJoinRules, + content: { join_rule: opts.joinRule }, + }); + } + let modal; if (opts.spinner) modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner'); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 618d5763fa..860fea32d8 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -434,8 +434,6 @@ "To use it, just wait for autocomplete results to load and tab through them.": "To use it, just wait for autocomplete results to load and tab through them.", "Upgrades a room to a new version": "Upgrades a room to a new version", "You do not have the required permissions to use this command.": "You do not have the required permissions to use this command.", - "Error upgrading room": "Error upgrading room", - "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.", "Changes your display nickname": "Changes your display nickname", "Changes your display nickname in the current room only": "Changes your display nickname in the current room only", "Changes the avatar of the current room": "Changes the avatar of the current room", @@ -728,6 +726,8 @@ "Common names and surnames are easy to guess": "Common names and surnames are easy to guess", "Straight rows of keys are easy to guess": "Straight rows of keys are easy to guess", "Short keyboard patterns are easy to guess": "Short keyboard patterns are easy to guess", + "Error upgrading room": "Error upgrading room", + "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.", "Invite to %(spaceName)s": "Invite to %(spaceName)s", "Share your public space": "Share your public space", "Unknown App": "Unknown App", @@ -1435,22 +1435,31 @@ "Select the roles required to change various parts of the room": "Select the roles required to change various parts of the room", "Enable encryption?": "Enable encryption?", "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.", - "Guests cannot join this room even if explicitly invited.": "Guests cannot join this room even if explicitly invited.", - "Click here to fix": "Click here to fix", + "This upgrade will allow members of selected spaces access to this room without an invite.": "This upgrade will allow members of selected spaces access to this room without an invite.", "To link to this room, please add an address.": "To link to this room, please add an address.", - "Only people who have been invited": "Only people who have been invited", - "Anyone who knows the room's link, apart from guests": "Anyone who knows the room's link, apart from guests", - "Anyone who knows the room's link, including guests": "Anyone who knows the room's link, including guests", + "Private (invite only)": "Private (invite only)", + "Only invited people can join.": "Only invited people can join.", + "Public (anyone)": "Public (anyone)", + "Anyone can find and join.": "Anyone can find and join.", + "Upgrade required": "Upgrade required", + "Spaces with access": "Spaces with access", + "& %(count)s more|other": "& %(count)s more", + "Anyone in a space can find and join. Edit which spaces can access here.": "Anyone in a space can find and join. Edit which spaces can access here.", + "Anyone in %(spaceName)s can find and join. You can select other spaces too.": "Anyone in %(spaceName)s can find and join. You can select other spaces too.", + "Anyone in a space can find and join. You can select multiple spaces.": "Anyone in a space can find and join. You can select multiple spaces.", + "Space members": "Space members", + "Decide who can view and join %(roomName)s.": "Decide who can view and join %(roomName)s.", "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.", "Anyone": "Anyone", "Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)", "Members only (since they were invited)": "Members only (since they were invited)", "Members only (since they joined)": "Members only (since they joined)", + "People with supported clients will be able to join the room without having a registered account.": "People with supported clients will be able to join the room without having a registered account.", "Who can read history?": "Who can read history?", "Security & Privacy": "Security & Privacy", "Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.", "Encrypted": "Encrypted", - "Who can access this room?": "Who can access this room?", + "Access": "Access", "Unable to revoke sharing for email address": "Unable to revoke sharing for email address", "Unable to share email address": "Unable to share email address", "Your email address hasn't been verified yet": "Your email address hasn't been verified yet", @@ -2331,6 +2340,16 @@ "Manually export keys": "Manually export keys", "You'll lose access to your encrypted messages": "You'll lose access to your encrypted messages", "Are you sure you want to sign out?": "Are you sure you want to sign out?", + "%(count)s members|other": "%(count)s members", + "%(count)s members|one": "%(count)s member", + "%(count)s rooms|other": "%(count)s rooms", + "%(count)s rooms|one": "%(count)s room", + "Select spaces": "Select spaces", + "Decide which spaces can access this room. If a space is selected its members will be able to find and join .": "Decide which spaces can access this room. If a space is selected its members will be able to find and join .", + "Search spaces": "Search spaces", + "Spaces you know that contain this room": "Spaces you know that contain this room", + "Other spaces or rooms you might not know": "Other spaces or rooms you might not know", + "These are likely ones other room admins are a part of.": "These are likely ones other room admins are a part of.", "Confirm by comparing the following with the User Settings in your other session:": "Confirm by comparing the following with the User Settings in your other session:", "Confirm this user's session by comparing the following with their User Settings:": "Confirm this user's session by comparing the following with their User Settings:", "Session name": "Session name", @@ -2374,12 +2393,13 @@ "Update any local room aliases to point to the new room": "Update any local room aliases to point to the new room", "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room": "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room", "Put a link back to the old room at the start of the new room so people can see old messages": "Put a link back to the old room at the start of the new room so people can see old messages", - "Automatically invite users": "Automatically invite users", + "Automatically invite members from this room to the new one": "Automatically invite members from this room to the new one", "Upgrade private room": "Upgrade private room", "Upgrade public room": "Upgrade public room", "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.", "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.", "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.", + "Please note upgrading will make a new version of the room. All current messages will stay in this archived room.": "Please note upgrading will make a new version of the room. All current messages will stay in this archived room.", "You'll upgrade this room from to .": "You'll upgrade this room from to .", "Resend": "Resend", "You're all caught up.": "You're all caught up.", @@ -2636,6 +2656,7 @@ "You are an administrator of this community": "You are an administrator of this community", "You are a member of this community": "You are a member of this community", "Who can join this community?": "Who can join this community?", + "Only people who have been invited": "Only people who have been invited", "Everyone": "Everyone", "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", @@ -2733,10 +2754,6 @@ "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.", "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.", "You don't have permission": "You don't have permission", - "%(count)s members|other": "%(count)s members", - "%(count)s members|one": "%(count)s member", - "%(count)s rooms|other": "%(count)s rooms", - "%(count)s rooms|one": "%(count)s room", "This room is suggested as a good one to join": "This room is suggested as a good one to join", "Suggested": "Suggested", "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.", diff --git a/src/utils/RoomUpgrade.ts b/src/utils/RoomUpgrade.ts new file mode 100644 index 0000000000..7330b23863 --- /dev/null +++ b/src/utils/RoomUpgrade.ts @@ -0,0 +1,74 @@ +/* +Copyright 2021 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 { Room } from "matrix-js-sdk/src/models/room"; + +import { inviteUsersToRoom } from "../RoomInvite"; +import Modal from "../Modal"; +import { _t } from "../languageHandler"; +import ErrorDialog from "../components/views/dialogs/ErrorDialog"; + +export async function upgradeRoom( + room: Room, + targetVersion: string, + inviteUsers = false, + // eslint-disable-next-line camelcase +): Promise<{ replacement_room: string }> { + const cli = room.client; + + let checkForUpgradeFn: (room: Room) => Promise; + try { + const upgradePromise = cli.upgradeRoom(room.roomId, targetVersion); + + // We have to wait for the js-sdk to give us the room back so + // we can more effectively abuse the MultiInviter behaviour + // which heavily relies on the Room object being available. + if (inviteUsers) { + checkForUpgradeFn = async (newRoom: Room) => { + // The upgradePromise should be done by the time we await it here. + const { replacement_room: newRoomId } = await upgradePromise; + if (newRoom.roomId !== newRoomId) return; + + const toInvite = [ + ...room.getMembersWithMembership("join"), + ...room.getMembersWithMembership("invite"), + ].map(m => m.userId).filter(m => m !== cli.getUserId()); + + if (toInvite.length > 0) { + // Errors are handled internally to this function + await inviteUsersToRoom(newRoomId, toInvite); + } + + cli.removeListener('Room', checkForUpgradeFn); + }; + cli.on('Room', checkForUpgradeFn); + } + + // We have to await after so that the checkForUpgradesFn has a proper reference + // to the new room's ID. + return upgradePromise; + } catch (e) { + console.error(e); + + if (checkForUpgradeFn) cli.removeListener('Room', checkForUpgradeFn); + + Modal.createTrackedDialog('Slash Commands', 'room upgrade error', ErrorDialog, { + title: _t('Error upgrading room'), + description: _t('Double check that your server supports the room version chosen and try again.'), + }); + throw e; + } +} From 912e192dc64f780b091cca9cccacf9bb4fcf7240 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 2 Jul 2021 15:18:27 +0100 Subject: [PATCH 019/142] Tweak behaviour of setting restricted join rule --- .../views/elements/MiniAvatarUploader.tsx | 2 +- .../tabs/room/SecurityRoomSettingsTab.tsx | 96 ++++++++++++------- .../spaces/SpaceSettingsVisibilityTab.tsx | 2 +- src/settings/handlers/RoomSettingsHandler.ts | 4 +- 4 files changed, 63 insertions(+), 41 deletions(-) diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx index 83fc1ebefd..b38e21977c 100644 --- a/src/components/views/elements/MiniAvatarUploader.tsx +++ b/src/components/views/elements/MiniAvatarUploader.tsx @@ -32,7 +32,7 @@ interface IProps { hasAvatar: boolean; noAvatarLabel?: string; hasAvatarLabel?: string; - setAvatarUrl(url: string): Promise; + setAvatarUrl(url: string): Promise; } const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => { diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 34f5b8c94c..ceb7dd21bd 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -36,6 +36,7 @@ import RoomAvatar from "../../../avatars/RoomAvatar"; import ManageRestrictedJoinRuleDialog from '../../../dialogs/ManageRestrictedJoinRuleDialog'; import RoomUpgradeWarningDialog from '../../../dialogs/RoomUpgradeWarningDialog'; import { upgradeRoom } from "../../../../../utils/RoomUpgrade"; +import { arrayHasDiff } from "../../../../../utils/arrays"; interface IProps { roomId: string; @@ -166,56 +167,73 @@ export default class SecurityRoomSettingsTab extends React.Component { - if (joinRule === JoinRule.Restricted && - !this.state.roomSupportsRestricted && - this.state.preferredRestrictionVersion - ) { - const cli = MatrixClientPeg.get(); + private onJoinRuleChange = async (joinRule: JoinRule) => { + const beforeJoinRule = this.state.joinRule; + if (beforeJoinRule === joinRule) return; + + if (joinRule === JoinRule.Restricted) { + const matrixClient = MatrixClientPeg.get(); const roomId = this.props.roomId; - const room = cli.getRoom(roomId); - const targetVersion = this.state.preferredRestrictionVersion; - const activeSpace = SpaceStore.instance.activeSpace; - Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, { - roomId, - targetVersion, - description: _t("This upgrade will allow members of selected spaces " + - "access to this room without an invite."), - onFinished: async (resp) => { - if (!resp?.continue) return; - const { replacement_room: newRoomId } = await upgradeRoom(room, targetVersion, resp.invite); + const room = matrixClient.getRoom(roomId); - const content: IContent = { - join_rule: JoinRule.Restricted, - }; + if (this.state.roomSupportsRestricted) { + // Have the user pick which spaces to allow joins from + const { finished } = Modal.createTrackedDialog('Set restricted', '', ManageRestrictedJoinRuleDialog, { + matrixClient, + room, + // if they have are viewing this room from the context of a space then default to that + selected: SpaceStore.instance.activeSpace ? [SpaceStore.instance.activeSpace.roomId] : [], + }, "mx_ManageRestrictedJoinRuleDialog_wrapper"); - if (activeSpace) { - content.allow = [{ - "type": RestrictedAllowType.RoomMembership, - "room_id": activeSpace.roomId, - }]; - } - - cli.sendStateEvent(newRoomId, EventType.RoomJoinRules, content); - }, - }); - return; + const [restrictedAllowRoomIds] = await finished; + if (!Array.isArray(restrictedAllowRoomIds)) return; + } else if (this.state.preferredRestrictionVersion) { + // Block this action on a room upgrade otherwise it'd make their room unjoinable + const targetVersion = this.state.preferredRestrictionVersion; + Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, { + roomId, + targetVersion, + description: _t("This upgrade will allow members of selected spaces " + + "access to this room without an invite."), + onFinished: (resp) => { + if (!resp?.continue) return; + upgradeRoom(room, targetVersion, resp.invite); + }, + }); + return; + } } - const beforeJoinRule = this.state.joinRule; - this.setState({ joinRule }); + const content: IContent = { + join_rule: joinRule, + }; + + let restrictedAllowRoomIds: string[]; + // pre-set the accepted spaces with the currently viewed one as per the microcopy + if (joinRule === JoinRule.Restricted && SpaceStore.instance.activeSpace) { + const spaceRoomId = SpaceStore.instance.activeSpace.roomId; + restrictedAllowRoomIds = [spaceRoomId]; + content.allow = [{ + "type": RestrictedAllowType.RoomMembership, + "room_id": spaceRoomId, + }]; + } + + this.setState({ joinRule, restrictedAllowRoomIds }); const client = MatrixClientPeg.get(); - client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, { - join_rule: joinRule, - }, "").catch((e) => { + client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, content, "").catch((e) => { console.error(e); - this.setState({ joinRule: beforeJoinRule }); + this.setState({ + joinRule: beforeJoinRule, + restrictedAllowRoomIds: undefined, + }); }); }; private onRestrictedRoomIdsChange = (restrictedAllowRoomIds: string[]) => { const beforeRestrictedAllowRoomIds = this.state.restrictedAllowRoomIds; + if (!arrayHasDiff(beforeRestrictedAllowRoomIds || [], restrictedAllowRoomIds)) return; this.setState({ restrictedAllowRoomIds }); const client = MatrixClientPeg.get(); @@ -234,6 +252,8 @@ export default class SecurityRoomSettingsTab extends React.Component { const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden; const beforeGuestAccess = this.state.guestAccess; + if (beforeGuestAccess === guestAccess) return; + this.setState({ guestAccess }); const client = MatrixClientPeg.get(); @@ -247,6 +267,8 @@ export default class SecurityRoomSettingsTab extends React.Component { const beforeHistory = this.state.history; + if (beforeHistory === history) return; + this.setState({ history: history }); MatrixClientPeg.get().sendStateEvent(this.props.roomId, EventType.RoomHistoryVisibility, { history_visibility: history, diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index 5d76f7d2c2..3257ce8fb0 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -39,7 +39,7 @@ enum SpaceVisibility { const useLocalEcho = ( currentFactory: () => T, - setterFn: (value: T) => Promise, + setterFn: (value: T) => Promise, errorFn: (error: Error) => void, ): [value: T, handler: (value: T) => void] => { const [value, setValue] = useState(currentFactory); diff --git a/src/settings/handlers/RoomSettingsHandler.ts b/src/settings/handlers/RoomSettingsHandler.ts index 3315e40a65..b8db07f6bb 100644 --- a/src/settings/handlers/RoomSettingsHandler.ts +++ b/src/settings/handlers/RoomSettingsHandler.ts @@ -92,12 +92,12 @@ export default class RoomSettingsHandler extends MatrixClientBackedSettingsHandl if (settingName === "urlPreviewsEnabled") { const content = this.getSettings(roomId, "org.matrix.room.preview_urls") || {}; content['disable'] = !newValue; - return MatrixClientPeg.get().sendStateEvent(roomId, "org.matrix.room.preview_urls", content); + return MatrixClientPeg.get().sendStateEvent(roomId, "org.matrix.room.preview_urls", content).then(); } const content = this.getSettings(roomId) || {}; content[settingName] = newValue; - return MatrixClientPeg.get().sendStateEvent(roomId, "im.vector.web.settings", content, ""); + return MatrixClientPeg.get().sendStateEvent(roomId, "im.vector.web.settings", content, "").then(); } public canSetValue(settingName: string, roomId: string): boolean { From 89949bd884ee39d131d51d38a1b8861da2e82549 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 2 Jul 2021 16:07:17 +0100 Subject: [PATCH 020/142] Add new in the spaces beta toast & explanatory modal --- src/components/structures/SpaceRoomView.tsx | 9 ++- .../dialogs/AddExistingToSpaceDialog.tsx | 10 ++- .../dialogs/{InfoDialog.js => InfoDialog.tsx} | 35 +++++----- src/components/views/rooms/RoomList.tsx | 4 +- .../views/spaces/SpaceTreeLevel.tsx | 8 +-- src/i18n/strings/en_EN.json | 15 ++-- src/stores/SpaceStore.tsx | 70 +++++++++++++++++++ src/utils/space.tsx | 17 +++-- 8 files changed, 119 insertions(+), 49 deletions(-) rename src/components/views/dialogs/{InfoDialog.js => InfoDialog.tsx} (77%) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 3880e014aa..cb440ca576 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -307,7 +307,6 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => }; const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => { - const cli = useContext(MatrixClientContext); const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); let contextMenu; @@ -330,7 +329,7 @@ const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => { e.stopPropagation(); closeMenu(); - if (await showCreateNewRoom(cli, space)) { + if (await showCreateNewRoom(space)) { onNewRoomAdded(); } }} @@ -343,7 +342,7 @@ const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => { e.stopPropagation(); closeMenu(); - const [added] = await showAddExistingRooms(cli, space); + const [added] = await showAddExistingRooms(space); if (added) { onNewRoomAdded(); } @@ -397,11 +396,11 @@ const SpaceLanding = ({ space }) => { } let settingsButton; - if (shouldShowSpaceSettings(cli, space)) { + if (shouldShowSpaceSettings(space)) { settingsButton = { - showSpaceSettings(cli, space); + showSpaceSettings(space); }} title={_t("Settings")} />; diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index c09097c4b4..adb36485a7 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -17,7 +17,6 @@ limitations under the License. import React, { ReactNode, useContext, useMemo, useState } from "react"; import classNames from "classnames"; import { Room } from "matrix-js-sdk/src/models/room"; -import { MatrixClient } from "matrix-js-sdk/src/client"; import { _t } from '../../../languageHandler'; import { IDialogProps } from "./IDialogProps"; @@ -44,9 +43,8 @@ import EntityTile from "../rooms/EntityTile"; import BaseAvatar from "../avatars/BaseAvatar"; interface IProps extends IDialogProps { - matrixClient: MatrixClient; space: Room; - onCreateRoomClick(cli: MatrixClient, space: Room): void; + onCreateRoomClick(space: Room): void; } const Entry = ({ room, checked, onChange }) => { @@ -295,7 +293,7 @@ export const AddExistingToSpace: React.FC = ({ ; }; -const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => { +const AddExistingToSpaceDialog: React.FC = ({ space, onCreateRoomClick, onFinished }) => { const [selectedSpace, setSelectedSpace] = useState(space); const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId); @@ -344,13 +342,13 @@ const AddExistingToSpaceDialog: React.FC = ({ matrixClient: cli, space, onFinished={onFinished} fixedWidth={false} > - +
{ _t("Want to add a new room instead?") }
- onCreateRoomClick(cli, space)} kind="link"> + onCreateRoomClick(space)} kind="link"> { _t("Create a new room") } } diff --git a/src/components/views/dialogs/InfoDialog.js b/src/components/views/dialogs/InfoDialog.tsx similarity index 77% rename from src/components/views/dialogs/InfoDialog.js rename to src/components/views/dialogs/InfoDialog.tsx index 8207d334d3..8570f46d27 100644 --- a/src/components/views/dialogs/InfoDialog.js +++ b/src/components/views/dialogs/InfoDialog.tsx @@ -1,7 +1,6 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2017 New Vector Ltd. Copyright 2019 Bastian Masanek, Noxware IT +Copyright 2015 - 2021 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. @@ -16,31 +15,31 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; -import * as sdk from '../../../index'; -import { _t } from '../../../languageHandler'; +import React, { ReactNode, KeyboardEvent } from 'react'; import classNames from "classnames"; -export default class InfoDialog extends React.Component { - static propTypes = { - className: PropTypes.string, - title: PropTypes.string, - description: PropTypes.node, - button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - onFinished: PropTypes.func, - hasCloseButton: PropTypes.bool, - onKeyDown: PropTypes.func, - fixedWidth: PropTypes.bool, - }; +import { _t } from '../../../languageHandler'; +import * as sdk from '../../../index'; +import { IDialogProps } from "./IDialogProps"; +interface IProps extends IDialogProps { + title?: string; + description?: ReactNode; + className?: string; + button?: boolean | string; + hasCloseButton?: boolean; + fixedWidth?: boolean; + onKeyDown?(event: KeyboardEvent): void; +} + +export default class InfoDialog extends React.Component { static defaultProps = { title: '', description: '', hasCloseButton: false, }; - onFinished = () => { + private onFinished = () => { this.props.onFinished(); }; diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index c94256800d..5c683711fc 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -140,7 +140,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = { e.preventDefault(); e.stopPropagation(); onFinished(); - showCreateNewRoom(MatrixClientPeg.get(), SpaceStore.instance.activeSpace); + showCreateNewRoom(SpaceStore.instance.activeSpace); }} disabled={!canAddRooms} tooltip={canAddRooms ? undefined @@ -153,7 +153,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = { e.preventDefault(); e.stopPropagation(); onFinished(); - showAddExistingRooms(MatrixClientPeg.get(), SpaceStore.instance.activeSpace); + showAddExistingRooms(SpaceStore.instance.activeSpace); }} disabled={!canAddRooms} tooltip={canAddRooms ? undefined diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index 486a988b93..908506aa3a 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -203,7 +203,7 @@ export class SpaceItem extends React.PureComponent { ev.preventDefault(); ev.stopPropagation(); - showSpaceSettings(this.context, this.props.space); + showSpaceSettings(this.props.space); this.setState({ contextMenuPosition: null }); // also close the menu }; @@ -222,7 +222,7 @@ export class SpaceItem extends React.PureComponent { ev.preventDefault(); ev.stopPropagation(); - showCreateNewRoom(this.context, this.props.space); + showCreateNewRoom(this.props.space); this.setState({ contextMenuPosition: null }); // also close the menu }; @@ -230,7 +230,7 @@ export class SpaceItem extends React.PureComponent { ev.preventDefault(); ev.stopPropagation(); - showAddExistingRooms(this.context, this.props.space); + showAddExistingRooms(this.props.space); this.setState({ contextMenuPosition: null }); // also close the menu }; @@ -285,7 +285,7 @@ export class SpaceItem extends React.PureComponent { let settingsOption; let leaveSection; - if (shouldShowSpaceSettings(this.context, this.props.space)) { + if (shouldShowSpaceSettings(this.props.space)) { settingsOption = ( { window.localStorage.removeItem(ACTIVE_SPACE_LS_KEY); } + // New in Spaces beta toast for Restricted Join Rule + (async () => { + const lsKey = "mx_SpaceBeta_restrictedJoinRuleToastSeen"; + if (contextSwitch && space?.getJoinRule() === JoinRule.Invite && shouldShowSpaceSettings(space) && + space.getJoinedMemberCount() > 1 && !localStorage.getItem(lsKey) /*&& + (await this.matrixClient.getCapabilities()) + ?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]?.["restricted"]?.preferred*/ + ) { + const toastKey = "restrictedjoinrule"; + ToastStore.sharedInstance().addOrReplaceToast({ + key: toastKey, + title: _t("New in the Spaces beta"), + props: { + description: _t("Help people in spaces to find and join private rooms"), + acceptLabel: _t("Learn more"), + onAccept: () => { + localStorage.setItem(lsKey, "true"); + ToastStore.sharedInstance().dismissToast(toastKey); + + Modal.createTrackedDialog("New in the Spaces beta", "restricted join rule", InfoDialog, { + title: _t("Help space members find private rooms"), + description: <> +

{ _t("To help space members find and join a private room, " + + "go to that room's Security & Privacy settings.") }

+ + { /* Reuses classes from TabbedView for simplicity, non-interactive */ } +
+
+ + { _t("General") } +
+
+ + { _t("Security & Privacy") } +
+
+ + { _t("Roles & Permissions") } +
+
+ +

{ _t("This make it easy for rooms to stay private to a space, " + + "while letting people in the space find and join them. " + + "All new rooms in a space will have this option available.")}

+ , + button: _t("OK"), + hasCloseButton: false, + fixedWidth: true, + }); + }, + rejectLabel: _t("Skip"), + onReject: () => { + localStorage.setItem(lsKey, "true"); + ToastStore.sharedInstance().dismissToast(toastKey); + }, + }, + component: GenericToast, + priority: 35, + }); + } + })().then(); + if (space) { const suggestedRooms = await this.fetchSuggestedRooms(space); if (this._activeSpace === space) { diff --git a/src/utils/space.tsx b/src/utils/space.tsx index 38f6e348d7..c238a83bc2 100644 --- a/src/utils/space.tsx +++ b/src/utils/space.tsx @@ -16,10 +16,9 @@ limitations under the License. import React from "react"; import { Room } from "matrix-js-sdk/src/models/room"; -import { MatrixClient } from "matrix-js-sdk/src/client"; import { EventType } from "matrix-js-sdk/src/@types/event"; -import { calculateRoomVia } from "../utils/permalinks/Permalinks"; +import { calculateRoomVia } from "./permalinks/Permalinks"; import Modal from "../Modal"; import SpaceSettingsDialog from "../components/views/dialogs/SpaceSettingsDialog"; import AddExistingToSpaceDialog from "../components/views/dialogs/AddExistingToSpaceDialog"; @@ -30,8 +29,8 @@ import SpacePublicShare from "../components/views/spaces/SpacePublicShare"; import InfoDialog from "../components/views/dialogs/InfoDialog"; import { showRoomInviteDialog } from "../RoomInvite"; -export const shouldShowSpaceSettings = (cli: MatrixClient, space: Room) => { - const userId = cli.getUserId(); +export const shouldShowSpaceSettings = (space: Room) => { + const userId = space.client.getUserId(); return space.getMyMembership() === "join" && (space.currentState.maySendStateEvent(EventType.RoomAvatar, userId) || space.currentState.maySendStateEvent(EventType.RoomName, userId) @@ -48,20 +47,20 @@ export const makeSpaceParentEvent = (room: Room, canonical = false) => ({ state_key: room.roomId, }); -export const showSpaceSettings = (cli: MatrixClient, space: Room) => { +export const showSpaceSettings = (space: Room) => { Modal.createTrackedDialog("Space Settings", "", SpaceSettingsDialog, { - matrixClient: cli, + matrixClient: space.client, space, }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); }; -export const showAddExistingRooms = async (cli: MatrixClient, space: Room) => { +export const showAddExistingRooms = async (space: Room) => { return Modal.createTrackedDialog( "Space Landing", "Add Existing", AddExistingToSpaceDialog, { - matrixClient: cli, + matrixClient: space.client, onCreateRoomClick: showCreateNewRoom, space, }, @@ -69,7 +68,7 @@ export const showAddExistingRooms = async (cli: MatrixClient, space: Room) => { ).finished; }; -export const showCreateNewRoom = async (cli: MatrixClient, space: Room) => { +export const showCreateNewRoom = async (space: Room) => { const modal = Modal.createTrackedDialog<[boolean, IOpts]>( "Space Landing", "Create Room", From 44bbf609732e4169e2c6e979f8d17d750c40ff38 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 09:56:02 +0100 Subject: [PATCH 021/142] Convert Dropdown to Typescript --- .../elements/{Dropdown.js => Dropdown.tsx} | 239 ++++++++---------- 1 file changed, 108 insertions(+), 131 deletions(-) rename src/components/views/elements/{Dropdown.js => Dropdown.tsx} (68%) diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.tsx similarity index 68% rename from src/components/views/elements/Dropdown.js rename to src/components/views/elements/Dropdown.tsx index f95247e9ae..c2ff59a2d3 100644 --- a/src/components/views/elements/Dropdown.js +++ b/src/components/views/elements/Dropdown.tsx @@ -1,7 +1,6 @@ /* -Copyright 2017 Vector Creations Ltd Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2017 - 2021 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. @@ -16,34 +15,38 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; +import React, { ChangeEvent, createRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react'; import classnames from 'classnames'; + import AccessibleButton from './AccessibleButton'; import { _t } from '../../../languageHandler'; import { Key } from "../../../Keyboard"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -class MenuOption extends React.Component { - constructor(props) { - super(props); - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onClick = this._onClick.bind(this); - } +interface IMenuOptionProps { + children: ReactElement; + highlighted?: boolean; + dropdownKey: string; + id?: string; + inputRef?: Ref; + onClick(dropdownKey: string): void; + onMouseEnter(dropdownKey: string): void; +} +class MenuOption extends React.Component { static defaultProps = { disabled: false, }; - _onMouseEnter() { + private onMouseEnter = () => { this.props.onMouseEnter(this.props.dropdownKey); - } + }; - _onClick(e) { + private onClick = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); this.props.onClick(this.props.dropdownKey); - } + }; render() { const optClasses = classnames({ @@ -54,8 +57,8 @@ class MenuOption extends React.Component { return
{ + private readonly buttonRef = createRef(); + private dropdownRootElement: HTMLDivElement = null; + private ignoreEvent: MouseEvent = null; + private childrenByKey: Record = {}; + + constructor(props: IProps) { super(props); - this.dropdownRootElement = null; - this.ignoreEvent = null; + this.reindexChildren(this.props.children); - this._onInputClick = this._onInputClick.bind(this); - this._onRootClick = this._onRootClick.bind(this); - this._onDocumentClick = this._onDocumentClick.bind(this); - this._onMenuOptionClick = this._onMenuOptionClick.bind(this); - this._onInputChange = this._onInputChange.bind(this); - this._collectRoot = this._collectRoot.bind(this); - this._collectInputTextBox = this._collectInputTextBox.bind(this); - this._setHighlightedOption = this._setHighlightedOption.bind(this); - - this.inputTextBox = null; - - this._reindexChildren(this.props.children); - - const firstChild = React.Children.toArray(props.children)[0]; + const firstChild = React.Children.toArray(props.children)[0] as ReactElement; this.state = { // True if the menu is dropped-down expanded: false, // The key of the highlighted option // (the option that would become selected if you pressed enter) - highlightedOption: firstChild ? firstChild.key : null, + highlightedOption: firstChild ? firstChild.key as string : null, // the current search query searchQuery: '', }; - } - // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs - UNSAFE_componentWillMount() { // eslint-disable-line camelcase - this._button = createRef(); // Listen for all clicks on the document so we can close the // menu when the user clicks somewhere else - document.addEventListener('click', this._onDocumentClick, false); + document.addEventListener('click', this.onDocumentClick, false); } componentWillUnmount() { - document.removeEventListener('click', this._onDocumentClick, false); + document.removeEventListener('click', this.onDocumentClick, false); } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -135,21 +144,21 @@ export default class Dropdown extends React.Component { if (!nextProps.children || nextProps.children.length === 0) { return; } - this._reindexChildren(nextProps.children); + this.reindexChildren(nextProps.children); const firstChild = nextProps.children[0]; this.setState({ highlightedOption: firstChild ? firstChild.key : null, }); } - _reindexChildren(children) { + private reindexChildren(children: ReactElement[]): void { this.childrenByKey = {}; React.Children.forEach(children, (child) => { this.childrenByKey[child.key] = child; }); } - _onDocumentClick(ev) { + private onDocumentClick = (ev: MouseEvent) => { // Close the dropdown if the user clicks anywhere that isn't // within our root element if (ev !== this.ignoreEvent) { @@ -157,9 +166,9 @@ export default class Dropdown extends React.Component { expanded: false, }); } - } + }; - _onRootClick(ev) { + private onRootClick = (ev: MouseEvent) => { // This captures any clicks that happen within our elements, // such that we can then ignore them when they're seen by the // click listener on the document handler, ie. not close the @@ -167,9 +176,9 @@ export default class Dropdown extends React.Component { // NB. We can't just stopPropagation() because then the event // doesn't reach the React onClick(). this.ignoreEvent = ev; - } + }; - _onInputClick(ev) { + private onInputClick = (ev: React.MouseEvent) => { if (this.props.disabled) return; if (!this.state.expanded) { @@ -178,24 +187,24 @@ export default class Dropdown extends React.Component { }); ev.preventDefault(); } - } + }; - _close() { + private close() { this.setState({ expanded: false, }); // their focus was on the input, its getting unmounted, move it to the button - if (this._button.current) { - this._button.current.focus(); + if (this.buttonRef.current) { + this.buttonRef.current.focus(); } } - _onMenuOptionClick(dropdownKey) { - this._close(); + private onMenuOptionClick = (dropdownKey: string) => { + this.close(); this.props.onOptionChange(dropdownKey); - } + }; - _onInputKeyDown = (e) => { + private onInputKeyDown = (e: React.KeyboardEvent) => { let handled = true; // These keys don't generate keypress events and so needs to be on keyup @@ -204,16 +213,16 @@ export default class Dropdown extends React.Component { this.props.onOptionChange(this.state.highlightedOption); // fallthrough case Key.ESCAPE: - this._close(); + this.close(); break; case Key.ARROW_DOWN: this.setState({ - highlightedOption: this._nextOption(this.state.highlightedOption), + highlightedOption: this.nextOption(this.state.highlightedOption), }); break; case Key.ARROW_UP: this.setState({ - highlightedOption: this._prevOption(this.state.highlightedOption), + highlightedOption: this.prevOption(this.state.highlightedOption), }); break; default: @@ -224,53 +233,46 @@ export default class Dropdown extends React.Component { e.preventDefault(); e.stopPropagation(); } - } + }; - _onInputChange(e) { + private onInputChange = (e: ChangeEvent) => { this.setState({ - searchQuery: e.target.value, + searchQuery: e.currentTarget.value, }); if (this.props.onSearchChange) { - this.props.onSearchChange(e.target.value); + this.props.onSearchChange(e.currentTarget.value); } - } + }; - _collectRoot(e) { + private collectRoot = (e: HTMLDivElement) => { if (this.dropdownRootElement) { - this.dropdownRootElement.removeEventListener( - 'click', this._onRootClick, false, - ); + this.dropdownRootElement.removeEventListener('click', this.onRootClick, false); } if (e) { - e.addEventListener('click', this._onRootClick, false); + e.addEventListener('click', this.onRootClick, false); } this.dropdownRootElement = e; - } + }; - _collectInputTextBox(e) { - this.inputTextBox = e; - if (e) e.focus(); - } - - _setHighlightedOption(optionKey) { + private setHighlightedOption = (optionKey: string) => { this.setState({ highlightedOption: optionKey, }); - } + }; - _nextOption(optionKey) { + private nextOption(optionKey: string): string { const keys = Object.keys(this.childrenByKey); const index = keys.indexOf(optionKey); return keys[(index + 1) % keys.length]; } - _prevOption(optionKey) { + private prevOption(optionKey: string): string { const keys = Object.keys(this.childrenByKey); const index = keys.indexOf(optionKey); return keys[(index - 1) % keys.length]; } - _scrollIntoView(node) { + private scrollIntoView(node: Element) { if (node) { node.scrollIntoView({ block: "nearest", @@ -279,18 +281,18 @@ export default class Dropdown extends React.Component { } } - _getMenuOptions() { + private getMenuOptions() { const options = React.Children.map(this.props.children, (child) => { const highlighted = this.state.highlightedOption === child.key; return ( { child } @@ -307,7 +309,7 @@ export default class Dropdown extends React.Component { render() { let currentValue; - const menuStyle = {}; + const menuStyle: CSSProperties = {}; if (this.props.menuWidth) menuStyle.width = this.props.menuWidth; let menu; @@ -316,10 +318,10 @@ export default class Dropdown extends React.Component { currentValue = ( - { this._getMenuOptions() } + { this.getMenuOptions() }
); } @@ -356,14 +358,14 @@ export default class Dropdown extends React.Component { // Note the menu sits inside the AccessibleButton div so it's anchored // to the input, but overflows below it. The root contains both. - return
+ return
@@ -374,28 +376,3 @@ export default class Dropdown extends React.Component {
; } } - -Dropdown.propTypes = { - id: PropTypes.string.isRequired, - // The width that the dropdown should be. If specified, - // the dropped-down part of the menu will be set to this - // width. - menuWidth: PropTypes.number, - // Called when the selected option changes - onOptionChange: PropTypes.func.isRequired, - // Called when the value of the search field changes - onSearchChange: PropTypes.func, - searchEnabled: PropTypes.bool, - // Function that, given the key of an option, returns - // a node representing that option to be displayed in the - // box itself as the currently-selected option (ie. as - // opposed to in the actual dropped-down part). If - // unspecified, the appropriate child element is used as - // in the dropped-down menu. - getShortOption: PropTypes.func, - value: PropTypes.string, - // negative for consistency with HTML - disabled: PropTypes.bool, - // ARIA label - label: PropTypes.string.isRequired, -}; From 82100df9eaf22d07e3de4d8e605bb277c287c4ef Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:08:57 +0100 Subject: [PATCH 022/142] Bring dropdown styling into closer line with rest of our styling --- res/css/views/elements/_Dropdown.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 2a2508c17c..3b67e0191e 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -27,7 +27,7 @@ limitations under the License. display: flex; align-items: center; position: relative; - border-radius: 3px; + border-radius: 4px; border: 1px solid $strong-input-border-color; font-size: $font-12px; user-select: none; @@ -109,7 +109,7 @@ input.mx_Dropdown_option:focus { z-index: 2; margin: 0; padding: 0px; - border-radius: 3px; + border-radius: 4px; border: 1px solid $input-focused-border-color; background-color: $primary-bg-color; max-height: 200px; From 692347843d485ab1d990d29658be1f61741d4adc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:09:35 +0100 Subject: [PATCH 023/142] Track restricted join rule support in the SpaceStore for sync access --- src/stores/SpaceStore.tsx | 120 ++++++++++++++++++++------------------ 1 file changed, 64 insertions(+), 56 deletions(-) diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index e6fc793c4f..9a2dc027c2 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -19,6 +19,8 @@ import { ListIteratee, Many, sortBy, throttle } from "lodash"; import { EventType, RoomType } from "matrix-js-sdk/src/@types/event"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { JoinRule } from "matrix-js-sdk/src/@types/partials"; +import { IRoomCapability } from "matrix-js-sdk/src/client"; import { AsyncStoreWithClient } from "./AsyncStoreWithClient"; import defaultDispatcher from "../dispatcher/dispatcher"; @@ -45,7 +47,6 @@ import { _t } from "../languageHandler"; import GenericToast from "../components/views/toasts/GenericToast"; import Modal from "../Modal"; import InfoDialog from "../components/views/dialogs/InfoDialog"; -import { JoinRule } from "../../../matrix-js-sdk/src/@types/partials"; type SpaceKey = string | symbol; @@ -115,6 +116,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { private _suggestedRooms: ISuggestedRoom[] = []; private _invitedSpaces = new Set(); private spaceOrderLocalEchoMap = new Map(); + private _restrictedJoinRuleSupport?: IRoomCapability; public get invitedSpaces(): Room[] { return Array.from(this._invitedSpaces); @@ -132,6 +134,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient { return this._suggestedRooms; } + public get restrictedJoinRuleSupport(): IRoomCapability { + return this._restrictedJoinRuleSupport; + } + /** * Sets the active space, updates room list filters, * optionally switches the user's room back to where they were when they last viewed that space. @@ -182,66 +188,63 @@ export class SpaceStoreClass extends AsyncStoreWithClient { } // New in Spaces beta toast for Restricted Join Rule - (async () => { - const lsKey = "mx_SpaceBeta_restrictedJoinRuleToastSeen"; - if (contextSwitch && space?.getJoinRule() === JoinRule.Invite && shouldShowSpaceSettings(space) && - space.getJoinedMemberCount() > 1 && !localStorage.getItem(lsKey) /*&& - (await this.matrixClient.getCapabilities()) - ?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]?.["restricted"]?.preferred*/ - ) { - const toastKey = "restrictedjoinrule"; - ToastStore.sharedInstance().addOrReplaceToast({ - key: toastKey, - title: _t("New in the Spaces beta"), - props: { - description: _t("Help people in spaces to find and join private rooms"), - acceptLabel: _t("Learn more"), - onAccept: () => { - localStorage.setItem(lsKey, "true"); - ToastStore.sharedInstance().dismissToast(toastKey); + const lsKey = "mx_SpaceBeta_restrictedJoinRuleToastSeen"; + if (contextSwitch && space?.getJoinRule() === JoinRule.Invite && shouldShowSpaceSettings(space) && + space.getJoinedMemberCount() > 1 && !localStorage.getItem(lsKey) + && this.restrictedJoinRuleSupport?.preferred + ) { + const toastKey = "restrictedjoinrule"; + ToastStore.sharedInstance().addOrReplaceToast({ + key: toastKey, + title: _t("New in the Spaces beta"), + props: { + description: _t("Help people in spaces to find and join private rooms"), + acceptLabel: _t("Learn more"), + onAccept: () => { + localStorage.setItem(lsKey, "true"); + ToastStore.sharedInstance().dismissToast(toastKey); - Modal.createTrackedDialog("New in the Spaces beta", "restricted join rule", InfoDialog, { - title: _t("Help space members find private rooms"), - description: <> -

{ _t("To help space members find and join a private room, " + - "go to that room's Security & Privacy settings.") }

+ Modal.createTrackedDialog("New in the Spaces beta", "restricted join rule", InfoDialog, { + title: _t("Help space members find private rooms"), + description: <> +

{ _t("To help space members find and join a private room, " + + "go to that room's Security & Privacy settings.") }

- { /* Reuses classes from TabbedView for simplicity, non-interactive */ } -
-
- - { _t("General") } -
-
- - { _t("Security & Privacy") } -
-
- - { _t("Roles & Permissions") } -
+ { /* Reuses classes from TabbedView for simplicity, non-interactive */ } +
+
+ + { _t("General") }
+
+ + { _t("Security & Privacy") } +
+
+ + { _t("Roles & Permissions") } +
+
-

{ _t("This make it easy for rooms to stay private to a space, " + - "while letting people in the space find and join them. " + - "All new rooms in a space will have this option available.")}

- , - button: _t("OK"), - hasCloseButton: false, - fixedWidth: true, - }); - }, - rejectLabel: _t("Skip"), - onReject: () => { - localStorage.setItem(lsKey, "true"); - ToastStore.sharedInstance().dismissToast(toastKey); - }, +

{ _t("This make it easy for rooms to stay private to a space, " + + "while letting people in the space find and join them. " + + "All new rooms in a space will have this option available.")}

+ , + button: _t("OK"), + hasCloseButton: false, + fixedWidth: true, + }); }, - component: GenericToast, - priority: 35, - }); - } - })().then(); + rejectLabel: _t("Skip"), + onReject: () => { + localStorage.setItem(lsKey, "true"); + ToastStore.sharedInstance().dismissToast(toastKey); + }, + }, + component: GenericToast, + priority: 35, + }); + } if (space) { const suggestedRooms = await this.fetchSuggestedRooms(space); @@ -709,6 +712,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient { this.matrixClient.on("accountData", this.onAccountData); } + this.matrixClient.getCapabilities().then(capabilities => { + this._restrictedJoinRuleSupport = capabilities + ?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]?.["restricted"]; + }); + await this.onSpaceUpdate(); // trigger an initial update // restore selected state from last session if any and still valid From c5ca98a3ad090d38e9fcd840ffbea585afa973b7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:10:25 +0100 Subject: [PATCH 024/142] Iterate SecurityRoomSettingsTab and ManageRestrictedJoinRuleDialog --- .../_ManageRestrictedJoinRuleDialog.scss | 19 +-- .../ManageRestrictedJoinRuleDialog.tsx | 24 +++- .../tabs/room/SecurityRoomSettingsTab.tsx | 128 ++++++++++-------- src/i18n/strings/en_EN.json | 11 +- 4 files changed, 106 insertions(+), 76 deletions(-) diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss index 6606f78a8a..91df76675a 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss @@ -104,7 +104,7 @@ limitations under the License. } } - .mx_ManageRestrictedJoinRuleDialog_section_experimental { + .mx_ManageRestrictedJoinRuleDialog_section_info { position: relative; border-radius: 8px; margin: 12px 0; @@ -131,16 +131,19 @@ limitations under the License. } .mx_ManageRestrictedJoinRuleDialog_footer { - display: flex; margin-top: 20px; - align-self: end; - .mx_AccessibleButton { - display: inline-block; - align-self: center; + .mx_ManageRestrictedJoinRuleDialog_footer_buttons { + display: flex; + width: max-content; + margin-left: auto; - & + .mx_AccessibleButton { - margin-left: 24px; + .mx_AccessibleButton { + display: inline-block; + + & + .mx_AccessibleButton { + margin-left: 24px; + } } } } diff --git a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx index 79a6fb7f24..ff08ae5d28 100644 --- a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx +++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx @@ -102,6 +102,13 @@ const ManageRestrictedJoinRuleDialog: React.FC = ({ room, selected = [], setNewSelected(new Set(newSelected)); }; + let inviteOnlyWarning; + if (newSelected.size < 1) { + inviteOnlyWarning =
+ { _t("You're removing all spaces. Access will default to invite only") } +
; + } + return = ({ room, selected = [], { filteredOtherEntries.length > 0 ? (

{ _t("Other spaces or rooms you might not know") }

-
+
{ _t("These are likely ones other room admins are a part of.") }
{ filteredOtherEntries.map(space => { @@ -167,12 +174,15 @@ const ManageRestrictedJoinRuleDialog: React.FC = ({ room, selected = [],
- onFinished()}> - { _t("Cancel") } - - onFinished(Array.from(newSelected))}> - { _t("Confirm") } - + { inviteOnlyWarning } +
+ onFinished()}> + { _t("Cancel") } + + onFinished(Array.from(newSelected))}> + { _t("Confirm") } + +
; diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index ceb7dd21bd..a05bae30c2 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -101,19 +101,14 @@ export default class SecurityRoomSettingsTab extends React.Component this.setState({ hasAliases })); - cli.getCapabilities().then(capabilities => { - const roomCapabilities = capabilities["org.matrix.msc3244.room_capabilities"]; - const roomSupportsRestricted = roomCapabilities && Array.isArray(roomCapabilities["restricted"]?.support) && - roomCapabilities["restricted"].support.includes(room.getVersion()); - const preferredRestrictionVersion = roomSupportsRestricted - ? roomCapabilities?.["restricted"].preferred - : undefined; - - this.setState({ roomSupportsRestricted, preferredRestrictionVersion }); - }); } private pullContentPropertyFromEvent(event: MatrixEvent, key: string, defaultValue: T): T { @@ -169,23 +164,16 @@ export default class SecurityRoomSettingsTab extends React.Component { const beforeJoinRule = this.state.joinRule; - if (beforeJoinRule === joinRule) return; + let restrictedAllowRoomIds: string[]; if (joinRule === JoinRule.Restricted) { const matrixClient = MatrixClientPeg.get(); const roomId = this.props.roomId; const room = matrixClient.getRoom(roomId); - if (this.state.roomSupportsRestricted) { + if (beforeJoinRule === JoinRule.Restricted || this.state.roomSupportsRestricted) { // Have the user pick which spaces to allow joins from - const { finished } = Modal.createTrackedDialog('Set restricted', '', ManageRestrictedJoinRuleDialog, { - matrixClient, - room, - // if they have are viewing this room from the context of a space then default to that - selected: SpaceStore.instance.activeSpace ? [SpaceStore.instance.activeSpace.roomId] : [], - }, "mx_ManageRestrictedJoinRuleDialog_wrapper"); - - const [restrictedAllowRoomIds] = await finished; + restrictedAllowRoomIds = await this.editRestrictedRoomIds(); if (!Array.isArray(restrictedAllowRoomIds)) return; } else if (this.state.preferredRestrictionVersion) { // Block this action on a room upgrade otherwise it'd make their room unjoinable @@ -204,19 +192,18 @@ export default class SecurityRoomSettingsTab extends React.Component ({ "type": RestrictedAllowType.RoomMembership, - "room_id": spaceRoomId, - }]; + "room_id": roomId, + })); } this.setState({ joinRule, restrictedAllowRoomIds }); @@ -296,17 +283,31 @@ export default class SecurityRoomSettingsTab extends React.Component { + private editRestrictedRoomIds = async (): Promise => { + let selected = this.state.restrictedAllowRoomIds; + if (!selected?.length && SpaceStore.instance.activeSpace) { + selected = [SpaceStore.instance.activeSpace.roomId]; + } + const matrixClient = MatrixClientPeg.get(); - Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, { + const { finished } = Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, { matrixClient, room: matrixClient.getRoom(this.props.roomId), - selected: this.state.restrictedAllowRoomIds, - onFinished: (restrictedAllowRoomIds?: string[]) => { - if (!Array.isArray(restrictedAllowRoomIds)) return; - this.onRestrictedRoomIdsChange(restrictedAllowRoomIds); - }, + selected, }, "mx_ManageRestrictedJoinRuleDialog_wrapper"); + + const [restrictedAllowRoomIds] = await finished; + return restrictedAllowRoomIds; + }; + + private onEditRestrictedClick = async () => { + const restrictedAllowRoomIds = await this.editRestrictedRoomIds(); + if (!Array.isArray(restrictedAllowRoomIds)) return; + if (restrictedAllowRoomIds.length > 0) { + this.onRestrictedRoomIdsChange(restrictedAllowRoomIds); + } else { + this.onJoinRuleChange(JoinRule.Invite); + } }; private renderJoinRule() { @@ -332,6 +333,8 @@ export default class SecurityRoomSettingsTab extends React.Component client.getRoom(roomId)) - .filter(Boolean) - .slice(0, 4); + if (joinRule === JoinRule.Restricted && this.state.restrictedAllowRoomIds?.length) { + const shownSpaces = this.state.restrictedAllowRoomIds + .map(roomId => client.getRoom(roomId)) + .filter(room => room?.isSpaceRoom()) + .slice(0, 4); - spacesWhichCanAccess =
-

{ _t("Spaces with access") }

- { shownSpaces.map(room => { - return - - { room.name } - ; - })} - { shownSpaces.length < this.state.restrictedAllowRoomIds.length && - { _t("& %(count)s more", { - count: this.state.restrictedAllowRoomIds.length - shownSpaces.length, - }) } - } -
; + let moreText; + if (shownSpaces.length < this.state.restrictedAllowRoomIds.length) { + if (shownSpaces.length > 0) { + moreText = _t("& %(count)s more", { + count: this.state.restrictedAllowRoomIds.length - shownSpaces.length, + }); + } else { + moreText = _t("Currently, %(count)s spaces have access", { + count: this.state.restrictedAllowRoomIds.length, + }); + } } description =
@@ -386,7 +384,17 @@ export default class SecurityRoomSettingsTab extends React.Component, }) } - { spacesWhichCanAccess } + +
+

{ _t("Spaces with access") }

+ { shownSpaces.map(room => { + return + + { room.name } + ; + })} + { moreText && { moreText } } +
; } else if (SpaceStore.instance.activeSpace) { description = _t("Anyone in %(spaceName)s can find and join. You can select other spaces too.", { @@ -403,6 +411,8 @@ export default class SecurityRoomSettingsTab extends React.Component, description, + // if there are 0 allowed spaces then render it as invite only instead + checked: this.state.joinRule === JoinRule.Restricted && !!this.state.restrictedAllowRoomIds?.length, }); } @@ -478,7 +488,7 @@ export default class SecurityRoomSettingsTab extends React.Component + return
- ; +
; } render() { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7d0f863b7f..12b0c40d75 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1455,9 +1455,12 @@ "Public (anyone)": "Public (anyone)", "Anyone can find and join.": "Anyone can find and join.", "Upgrade required": "Upgrade required", - "Spaces with access": "Spaces with access", "& %(count)s more|other": "& %(count)s more", + "& %(count)s more|one": "& %(count)s more", + "Currently, %(count)s spaces have access|other": "Currently, %(count)s spaces have access", + "Currently, %(count)s spaces have access|one": "Currently, %(count)s space has access", "Anyone in a space can find and join. Edit which spaces can access here.": "Anyone in a space can find and join. Edit which spaces can access here.", + "Spaces with access": "Spaces with access", "Anyone in %(spaceName)s can find and join. You can select other spaces too.": "Anyone in %(spaceName)s can find and join. You can select other spaces too.", "Anyone in a space can find and join. You can select multiple spaces.": "Anyone in a space can find and join. You can select multiple spaces.", "Space members": "Space members", @@ -2187,8 +2190,11 @@ "Community ID": "Community ID", "example": "example", "Please enter a name for the room": "Please enter a name for the room", - "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.", "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.", + "Everyone in will be able to find and join this room.": "Everyone in will be able to find and join this room.", + "You can change this at any time from room settings.": "You can change this at any time from room settings.", + "Anyone will be able to find and join this room, not just members of .": "Anyone will be able to find and join this room, not just members of .", + "Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.", "You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.", "Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.", "Enable end-to-end encryption": "Enable end-to-end encryption", @@ -2355,6 +2361,7 @@ "%(count)s members|one": "%(count)s member", "%(count)s rooms|other": "%(count)s rooms", "%(count)s rooms|one": "%(count)s room", + "You're removing all spaces. Access will default to invite only": "You're removing all spaces. Access will default to invite only", "Select spaces": "Select spaces", "Decide which spaces can access this room. If a space is selected its members will be able to find and join .": "Decide which spaces can access this room. If a space is selected its members will be able to find and join .", "Search spaces": "Search spaces", From eb9f4c609a22c8493c9021d20958ccdf4286529c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:10:47 +0100 Subject: [PATCH 025/142] Make CreateRoomDialog capable of creating restricted rooms in spaces --- res/css/views/dialogs/_CreateRoomDialog.scss | 18 ++- .../views/dialogs/CreateRoomDialog.tsx | 117 ++++++++++++++---- src/createRoom.ts | 6 +- src/i18n/strings/en_EN.json | 8 +- 4 files changed, 111 insertions(+), 38 deletions(-) diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 2678f7b4ad..adba58cbb9 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -65,7 +65,7 @@ limitations under the License. .mx_CreateRoomDialog_aliasContainer { display: flex; // put margin on container so it can collapse with siblings - margin: 10px 0; + margin: 24px 0 10px; .mx_RoomAliasField { margin: 0; @@ -101,10 +101,6 @@ limitations under the License. margin-left: 30px; } - .mx_CreateRoomDialog_topic { - margin-bottom: 36px; - } - .mx_Dialog_content > .mx_SettingsFlag { margin-top: 24px; } @@ -113,5 +109,17 @@ limitations under the License. margin: 0 85px 0 0; font-size: $font-12px; } + + .mx_Dropdown { + margin-bottom: 8px; + font-weight: normal; + font-family: $font-family; + font-size: $font-14px; + color: $primary-fg-color; + + .mx_Dropdown_input { + border: 1px solid $input-border-color; + } + } } diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx index b5c0096771..eecddf7f31 100644 --- a/src/components/views/dialogs/CreateRoomDialog.tsx +++ b/src/components/views/dialogs/CreateRoomDialog.tsx @@ -17,6 +17,7 @@ limitations under the License. import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; +import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; import SdkConfig from '../../../SdkConfig'; import withValidation, { IFieldState } from '../elements/Validation'; @@ -31,7 +32,8 @@ import RoomAliasField from "../elements/RoomAliasField"; import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; import DialogButtons from "../elements/DialogButtons"; import BaseDialog from "../dialogs/BaseDialog"; -import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; +import Dropdown from "../elements/Dropdown"; +import SpaceStore from "../../../stores/SpaceStore"; interface IProps { defaultPublic?: boolean; @@ -41,7 +43,7 @@ interface IProps { } interface IState { - isPublic: boolean; + joinRule: JoinRule; isEncrypted: boolean; name: string; topic: string; @@ -54,15 +56,25 @@ interface IState { @replaceableComponent("views.dialogs.CreateRoomDialog") export default class CreateRoomDialog extends React.Component { + private readonly supportsRestricted: boolean; private nameField = createRef(); private aliasField = createRef(); constructor(props) { super(props); + this.supportsRestricted = this.props.parentSpace && !!SpaceStore.instance.restrictedJoinRuleSupport?.preferred; + + let joinRule = JoinRule.Invite; + if (this.props.defaultPublic) { + joinRule = JoinRule.Public; + } else if (this.supportsRestricted) { + joinRule = JoinRule.Restricted; + } + const config = SdkConfig.get(); this.state = { - isPublic: this.props.defaultPublic || false, + joinRule, isEncrypted: privateShouldBeEncrypted(), name: this.props.defaultName || "", topic: "", @@ -81,7 +93,7 @@ export default class CreateRoomDialog extends React.Component { const opts: IOpts = {}; const createOpts: IOpts["createOpts"] = opts.createOpts = {}; createOpts.name = this.state.name; - if (this.state.isPublic) { + if (this.state.joinRule === JoinRule.Public) { createOpts.visibility = Visibility.Public; createOpts.preset = Preset.PublicChat; opts.guestAccess = false; @@ -95,7 +107,7 @@ export default class CreateRoomDialog extends React.Component { createOpts.creation_content = { 'm.federate': false }; } - if (!this.state.isPublic) { + if (this.state.joinRule !== JoinRule.Public) { if (this.state.canChangeEncryption) { opts.encryption = this.state.isEncrypted; } else { @@ -109,8 +121,9 @@ export default class CreateRoomDialog extends React.Component { opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId(); } - if (this.props.parentSpace) { + if (this.props.parentSpace && this.state.joinRule === JoinRule.Restricted) { opts.parentSpace = this.props.parentSpace; + opts.joinRule = JoinRule.Restricted; } return opts; @@ -172,8 +185,8 @@ export default class CreateRoomDialog extends React.Component { this.setState({ topic: ev.target.value }); }; - private onPublicChange = (isPublic: boolean) => { - this.setState({ isPublic }); + private onJoinRuleChange = (joinRule: JoinRule) => { + this.setState({ joinRule }); }; private onEncryptedChange = (isEncrypted: boolean) => { @@ -210,7 +223,7 @@ export default class CreateRoomDialog extends React.Component { render() { let aliasField; - if (this.state.isPublic) { + if (this.state.joinRule === JoinRule.Public) { const domain = MatrixClientPeg.get().getDomain(); aliasField = (
@@ -224,19 +237,46 @@ export default class CreateRoomDialog extends React.Component { ); } - let publicPrivateLabel =

{_t( - "Private rooms can be found and joined by invitation only. Public rooms can be " + - "found and joined by anyone.", - )}

; + let publicPrivateLabel: JSX.Element; if (CommunityPrototypeStore.instance.getSelectedCommunityId()) { - publicPrivateLabel =

{_t( - "Private rooms can be found and joined by invitation only. Public rooms can be " + - "found and joined by anyone in this community.", - )}

; + publicPrivateLabel =

+ { _t( + "Private rooms can be found and joined by invitation only. Public rooms can be " + + "found and joined by anyone in this community.", + ) } +

; + } else if (this.state.joinRule === JoinRule.Restricted) { + publicPrivateLabel =

+ { _t( + "Everyone in will be able to find and join this room.", {}, { + SpaceName: () => this.props.parentSpace.name, + }, + ) } +   + { _t("You can change this at any time from room settings.") } +

; + } else if (this.state.joinRule === JoinRule.Public) { + publicPrivateLabel =

+ { _t( + "Anyone will be able to find and join this room, not just members of .", {}, { + SpaceName: () => this.props.parentSpace.name, + }, + ) } +   + { _t("You can change this at any time from room settings.") } +

; + } else if (this.state.joinRule === JoinRule.Invite) { + publicPrivateLabel =

+ { _t( + "Only people invited will be able to find and join this room.", + ) } +   + { _t("You can change this at any time from room settings.") } +

; } let e2eeSection; - if (!this.state.isPublic) { + if (this.state.joinRule !== JoinRule.Public) { let microcopy; if (privateShouldBeEncrypted()) { if (this.state.canChangeEncryption) { @@ -273,15 +313,31 @@ export default class CreateRoomDialog extends React.Component { ); } - let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room'); + let title = _t("Create a room"); if (CommunityPrototypeStore.instance.getSelectedCommunityId()) { const name = CommunityPrototypeStore.instance.getSelectedCommunityName(); title = _t("Create a room in %(communityName)s", { communityName: name }); + } else if (!this.props.parentSpace) { + title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room'); } + + const options = [ +
+ { _t("Private room (invite only)") } +
, +
+ { _t("Public room") } +
, + ]; + + if (this.supportsRestricted) { + options.unshift(
+ { _t("Visible to space members") } +
); + } + return ( - +
{ value={this.state.topic} className="mx_CreateRoomDialog_topic" /> - + + + { options } + + { publicPrivateLabel } { e2eeSection } { aliasField } diff --git a/src/createRoom.ts b/src/createRoom.ts index 0a88e2cef7..e809f5ff0a 100644 --- a/src/createRoom.ts +++ b/src/createRoom.ts @@ -153,10 +153,8 @@ export default async function createRoom(opts: IOpts): Promise { }); if (opts.joinRule === JoinRule.Restricted) { - const serverCapabilities = await client.getCapabilities(); - const roomCapabilities = serverCapabilities?.["m.room_versions"]?.["org.matrix.msc3244.room_capabilities"]; - if (roomCapabilities?.["restricted"]?.preferred) { - opts.createOpts.room_version = roomCapabilities?.["restricted"].preferred; + if (SpaceStore.instance.restrictedJoinRuleSupport?.preferred) { + opts.createOpts.room_version = SpaceStore.instance.restrictedJoinRuleSupport.preferred; opts.createOpts.initial_state.push({ type: EventType.RoomJoinRules, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 12b0c40d75..c7992d93c3 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2200,11 +2200,15 @@ "Enable end-to-end encryption": "Enable end-to-end encryption", "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.", "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.", + "Create a room": "Create a room", + "Create a room in %(communityName)s": "Create a room in %(communityName)s", "Create a public room": "Create a public room", "Create a private room": "Create a private room", - "Create a room in %(communityName)s": "Create a room in %(communityName)s", + "Private room (invite only)": "Private room (invite only)", + "Public room": "Public room", + "Visible to space members": "Visible to space members", "Topic (optional)": "Topic (optional)", - "Make this room public": "Make this room public", + "Room visibility": "Room visibility", "Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.", "Create Room": "Create Room", "Sign out": "Sign out", From 3301763f12954c95156000dd59e9f83c0a197203 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:19:33 +0100 Subject: [PATCH 026/142] stub getCapabilities in tests --- test/test-utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/test-utils.js b/test/test-utils.js index ad56522965..900c870f68 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -96,6 +96,7 @@ export function createTestClient() { }, }, decryptEventIfNeeded: () => Promise.resolve(), + getCapabilities: jest.fn().mockReturnValue({}), }; } From 0ca4a958f7002c4036e8cb835b3867b362886c66 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:34:50 +0100 Subject: [PATCH 027/142] fix getCapabilities stub --- test/test-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/test-utils.js b/test/test-utils.js index 900c870f68..35c4441077 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -96,7 +96,7 @@ export function createTestClient() { }, }, decryptEventIfNeeded: () => Promise.resolve(), - getCapabilities: jest.fn().mockReturnValue({}), + getCapabilities: jest.fn().mockResolvedValue({}), }; } From 9d8acd1af0178b999e14845c42e8ad507032a371 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:44:09 +0100 Subject: [PATCH 028/142] stub getJoinRule --- test/test-utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/test-utils.js b/test/test-utils.js index 35c4441077..a07994af20 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -269,6 +269,7 @@ export function mkStubRoom(roomId = null, name) { getCanonicalAlias: jest.fn(), getAltAliases: jest.fn().mockReturnValue([]), timeline: [], + getJoinRule: jest.fn().mockReturnValue("invite"), }; } From 04c923bd75e9758187314e5a64e41938bb0c81b1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 11:35:56 +0100 Subject: [PATCH 029/142] fix tests by including client field on the Room stub and stubbing getJoinedMemberCount --- test/stores/SpaceStore-test.ts | 52 +++++++++++++++++----------------- test/test-utils.js | 4 ++- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts index 4cbd9f43c8..e6d8dc144e 100644 --- a/test/stores/SpaceStore-test.ts +++ b/test/stores/SpaceStore-test.ts @@ -53,32 +53,6 @@ const emitPromise = (e: EventEmitter, k: string | symbol) => new Promise(r => e. const testUserId = "@test:user"; -let rooms = []; - -const mkRoom = (roomId: string) => { - const room = mkStubRoom(roomId); - room.currentState.getStateEvents.mockImplementation(mockStateEventImplementation([])); - rooms.push(room); - return room; -}; - -const mkSpace = (spaceId: string, children: string[] = []) => { - const space = mkRoom(spaceId); - space.isSpaceRoom.mockReturnValue(true); - space.currentState.getStateEvents.mockImplementation(mockStateEventImplementation(children.map(roomId => - mkEvent({ - event: true, - type: EventType.SpaceChild, - room: spaceId, - user: testUserId, - skey: roomId, - content: { via: [] }, - ts: Date.now(), - }), - ))); - return space; -}; - const getValue = jest.fn(); SettingsStore.getValue = getValue; @@ -111,6 +85,32 @@ describe("SpaceStore", () => { const store = SpaceStore.instance; const client = MatrixClientPeg.get(); + let rooms = []; + + const mkRoom = (roomId: string) => { + const room = mkStubRoom(roomId, roomId, client); + room.currentState.getStateEvents.mockImplementation(mockStateEventImplementation([])); + rooms.push(room); + return room; + }; + + const mkSpace = (spaceId: string, children: string[] = []) => { + const space = mkRoom(spaceId); + space.isSpaceRoom.mockReturnValue(true); + space.currentState.getStateEvents.mockImplementation(mockStateEventImplementation(children.map(roomId => + mkEvent({ + event: true, + type: EventType.SpaceChild, + room: spaceId, + user: testUserId, + skey: roomId, + content: { via: [] }, + ts: Date.now(), + }), + ))); + return space; + }; + const viewRoom = roomId => defaultDispatcher.dispatch({ action: "view_room", room_id: roomId }, true); const run = async () => { diff --git a/test/test-utils.js b/test/test-utils.js index a07994af20..33001e39d1 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -220,7 +220,7 @@ export function mkMessage(opts) { return mkEvent(opts); } -export function mkStubRoom(roomId = null, name) { +export function mkStubRoom(roomId = null, name, client) { const stubTimeline = { getEvents: () => [] }; return { roomId, @@ -235,6 +235,7 @@ export function mkStubRoom(roomId = null, name) { }), getMembersWithMembership: jest.fn().mockReturnValue([]), getJoinedMembers: jest.fn().mockReturnValue([]), + getJoinedMemberCount: jest.fn().mockReturnValue(1), getMembers: jest.fn().mockReturnValue([]), getPendingEvents: () => [], getLiveTimeline: () => stubTimeline, @@ -270,6 +271,7 @@ export function mkStubRoom(roomId = null, name) { getAltAliases: jest.fn().mockReturnValue([]), timeline: [], getJoinRule: jest.fn().mockReturnValue("invite"), + client, }; } From 06284fe73d65fb5b9014b517a2ab57aebadeb7cf Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 12:05:06 +0100 Subject: [PATCH 030/142] Update e2e tests --- .../src/scenarios/directory.js | 2 +- .../src/scenarios/lazy-loading.js | 2 +- .../src/usecases/room-settings.js | 28 +++++++------------ 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/test/end-to-end-tests/src/scenarios/directory.js b/test/end-to-end-tests/src/scenarios/directory.js index 53b790c174..fffca2b05c 100644 --- a/test/end-to-end-tests/src/scenarios/directory.js +++ b/test/end-to-end-tests/src/scenarios/directory.js @@ -25,7 +25,7 @@ module.exports = async function roomDirectoryScenarios(alice, bob) { console.log(" creating a public room and join through directory:"); const room = 'test'; await createRoom(alice, room); - await changeRoomSettings(alice, { directory: true, visibility: "public_no_guests", alias: "#test" }); + await changeRoomSettings(alice, { directory: true, visibility: "public", alias: "#test" }); await join(bob, room); //looks up room in directory const bobMessage = "hi Alice!"; await sendMessage(bob, bobMessage); diff --git a/test/end-to-end-tests/src/scenarios/lazy-loading.js b/test/end-to-end-tests/src/scenarios/lazy-loading.js index 1b5d449af9..406f7b24a3 100644 --- a/test/end-to-end-tests/src/scenarios/lazy-loading.js +++ b/test/end-to-end-tests/src/scenarios/lazy-loading.js @@ -51,7 +51,7 @@ const charlyMsg2 = "how's it going??"; async function setupRoomWithBobAliceAndCharlies(alice, bob, charlies) { await createRoom(bob, room); - await changeRoomSettings(bob, { directory: true, visibility: "public_no_guests", alias }); + await changeRoomSettings(bob, { directory: true, visibility: "public", alias }); // wait for alias to be set by server after clicking "save" // so the charlies can join it. await bob.delay(500); diff --git a/test/end-to-end-tests/src/usecases/room-settings.js b/test/end-to-end-tests/src/usecases/room-settings.js index b40afe76bf..01431197a7 100644 --- a/test/end-to-end-tests/src/usecases/room-settings.js +++ b/test/end-to-end-tests/src/usecases/room-settings.js @@ -98,18 +98,14 @@ async function checkRoomSettings(session, expectedSettings) { if (expectedSettings.visibility) { session.log.step(`checks visibility is ${expectedSettings.visibility}`); const radios = await session.queryAll(".mx_RoomSettingsDialog input[type=radio]"); - assert.equal(radios.length, 7); - const inviteOnly = radios[0]; - const publicNoGuests = radios[1]; - const publicWithGuests = radios[2]; + assert.equal(radios.length, 6); + const [inviteOnlyRoom, publicRoom] = radios; let expectedRadio = null; if (expectedSettings.visibility === "invite_only") { - expectedRadio = inviteOnly; - } else if (expectedSettings.visibility === "public_no_guests") { - expectedRadio = publicNoGuests; - } else if (expectedSettings.visibility === "public_with_guests") { - expectedRadio = publicWithGuests; + expectedRadio = inviteOnlyRoom; + } else if (expectedSettings.visibility === "public") { + expectedRadio = publicRoom; } else { throw new Error(`unrecognized room visibility setting: ${expectedSettings.visibility}`); } @@ -165,17 +161,13 @@ async function changeRoomSettings(session, settings) { if (settings.visibility) { session.log.step(`sets visibility to ${settings.visibility}`); const radios = await session.queryAll(".mx_RoomSettingsDialog label"); - assert.equal(radios.length, 7); - const inviteOnly = radios[0]; - const publicNoGuests = radios[1]; - const publicWithGuests = radios[2]; + assert.equal(radios.length, 6); + const [inviteOnlyRoom, publicRoom] = radios; if (settings.visibility === "invite_only") { - await inviteOnly.click(); - } else if (settings.visibility === "public_no_guests") { - await publicNoGuests.click(); - } else if (settings.visibility === "public_with_guests") { - await publicWithGuests.click(); + await inviteOnlyRoom.click(); + } else if (settings.visibility === "public") { + await publicRoom.click(); } else { throw new Error(`unrecognized room visibility setting: ${settings.visibility}`); } From d004163177a5da6303a9a5f270dbdf5377a217a6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 12:05:30 +0100 Subject: [PATCH 031/142] Fix 2 new NPEs --- .../settings/tabs/room/SecurityRoomSettingsTab.tsx | 2 +- src/createRoom.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index a05bae30c2..82eeef111d 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -104,7 +104,7 @@ export default class SecurityRoomSettingsTab extends React.Component { } if (opts.parentSpace) { - opts.createOpts.initial_state.push(makeSpaceParentEvent(opts.parentSpace, true)); - opts.createOpts.initial_state.push({ + createOpts.initial_state.push(makeSpaceParentEvent(opts.parentSpace, true)); + createOpts.initial_state.push({ type: EventType.RoomHistoryVisibility, content: { - "history_visibility": opts.createOpts.preset === Preset.PublicChat ? "world_readable" : "invited", + "history_visibility": createOpts.preset === Preset.PublicChat ? "world_readable" : "invited", }, }); if (opts.joinRule === JoinRule.Restricted) { if (SpaceStore.instance.restrictedJoinRuleSupport?.preferred) { - opts.createOpts.room_version = SpaceStore.instance.restrictedJoinRuleSupport.preferred; + createOpts.room_version = SpaceStore.instance.restrictedJoinRuleSupport.preferred; - opts.createOpts.initial_state.push({ + createOpts.initial_state.push({ type: EventType.RoomJoinRules, content: { "join_rule": JoinRule.Restricted, @@ -171,7 +171,7 @@ export default async function createRoom(opts: IOpts): Promise { } if (opts.joinRule !== JoinRule.Restricted) { - opts.createOpts.initial_state.push({ + createOpts.initial_state.push({ type: EventType.RoomJoinRules, content: { join_rule: opts.joinRule }, }); From 894bce7813c4dee78e951ed5397c9d61e9f8538e Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 6 Jul 2021 14:54:06 +0200 Subject: [PATCH 032/142] Update lockfile --- yarn.lock | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index c8c3315855..ea4adfb09f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1677,6 +1677,11 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/retry@^0.12.0": + version "0.12.0" + resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d" + integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA== + "@types/sanitize-html@^2.3.1": version "2.3.1" resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.3.1.tgz#094d696b83b7394b016e96342bbffa6a028795ce" @@ -5445,10 +5450,10 @@ mathml-tag-names@^2.1.3: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -matrix-js-sdk@12.0.0: - version "12.0.0" - resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0.tgz#8ee7cc37661476341d0c792a1a12bc78b19f9fdd" - integrity sha512-DHeq87Sx9Dv37FYyvZkmA1VYsQUNaVgc3QzMUkFwoHt1T4EZzgyYpdsp3uYruJzUW0ACvVJcwFdrU4e1VS97dQ== +matrix-js-sdk@12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.1.tgz#3a63881f743420a4d39474daa39bd0fb90930d43" + integrity sha512-HkOWv8QHojceo3kPbC+vAIFUjsRAig6MBvEY35UygS3g2dL0UcJ5Qx09/2wcXtu6dowlDnWsz2HHk62tS2cklA== dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" @@ -5456,6 +5461,7 @@ matrix-js-sdk@12.0.0: bs58 "^4.0.1" content-type "^1.0.4" loglevel "^1.7.1" + p-retry "^4.5.0" qs "^6.9.6" request "^2.88.2" unhomoglyph "^1.0.6" @@ -6007,6 +6013,14 @@ p-locate@^4.1.0: dependencies: p-limit "^2.2.0" +p-retry@^4.5.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.0.tgz#9de15ae696278cffe86fce2d8f73b7f894f8bc9e" + integrity sha512-SAHbQEwg3X5DRNaLmWjT+DlGc93ba5i+aP3QLfVNDncQEQO4xjbYW4N/lcVTSuP0aJietGfx2t94dJLzfBMpXw== + dependencies: + "@types/retry" "^0.12.0" + retry "^0.13.1" + p-try@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" @@ -6816,6 +6830,11 @@ ret@~0.1.10: resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg== +retry@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658" + integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg== + reusify@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" From 437d53d1ccff764978613da396165d27257436f6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 9 Jul 2021 08:43:41 +0100 Subject: [PATCH 033/142] Update space children (best effort) when upgrading a room --- .../views/dialogs/RoomUpgradeDialog.js | 4 +- src/stores/SpaceStore.tsx | 4 + src/utils/RoomUpgrade.ts | 89 +++++++++++-------- 3 files changed, 60 insertions(+), 37 deletions(-) diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.js index 90092df7a5..acbb99099f 100644 --- a/src/components/views/dialogs/RoomUpgradeDialog.js +++ b/src/components/views/dialogs/RoomUpgradeDialog.js @@ -17,10 +17,10 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import * as sdk from '../../../index'; -import { MatrixClientPeg } from '../../../MatrixClientPeg'; import Modal from '../../../Modal'; import { _t } from '../../../languageHandler'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { upgradeRoom } from "../../../utils/RoomUpgrade"; @replaceableComponent("views.dialogs.RoomUpgradeDialog") export default class RoomUpgradeDialog extends React.Component { @@ -45,7 +45,7 @@ export default class RoomUpgradeDialog extends React.Component { _onUpgradeClick = () => { this.setState({ busy: true }); - MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => { + upgradeRoom(this.props.room, this._targetVersion, false, false).then(() => { this.props.onFinished(true); }).catch((err) => { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 9a2dc027c2..91bc0a027c 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -335,6 +335,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient { return sortBy(parents, r => r.roomId)?.[0] || null; } + public getKnownParents(roomId: string): Set { + return this.parentMap.get(roomId) || new Set(); + } + public getSpaceFilteredRoomIds = (space: Room | null): Set => { if (!space && SettingsStore.getValue("feature_spaces.all_rooms")) { return new Set(this.matrixClient.getVisibleRooms().map(r => r.roomId)); diff --git a/src/utils/RoomUpgrade.ts b/src/utils/RoomUpgrade.ts index 7330b23863..e632ec6345 100644 --- a/src/utils/RoomUpgrade.ts +++ b/src/utils/RoomUpgrade.ts @@ -15,60 +15,79 @@ limitations under the License. */ import { Room } from "matrix-js-sdk/src/models/room"; +import { EventType } from "matrix-js-sdk/src/@types/event"; import { inviteUsersToRoom } from "../RoomInvite"; import Modal from "../Modal"; import { _t } from "../languageHandler"; import ErrorDialog from "../components/views/dialogs/ErrorDialog"; +import SpaceStore from "../stores/SpaceStore"; export async function upgradeRoom( room: Room, targetVersion: string, inviteUsers = false, - // eslint-disable-next-line camelcase -): Promise<{ replacement_room: string }> { + handleError = true, + updateSpaces = true, +): Promise { const cli = room.client; - let checkForUpgradeFn: (room: Room) => Promise; + let newRoomId: string; try { - const upgradePromise = cli.upgradeRoom(room.roomId, targetVersion); - - // We have to wait for the js-sdk to give us the room back so - // we can more effectively abuse the MultiInviter behaviour - // which heavily relies on the Room object being available. - if (inviteUsers) { - checkForUpgradeFn = async (newRoom: Room) => { - // The upgradePromise should be done by the time we await it here. - const { replacement_room: newRoomId } = await upgradePromise; - if (newRoom.roomId !== newRoomId) return; - - const toInvite = [ - ...room.getMembersWithMembership("join"), - ...room.getMembersWithMembership("invite"), - ].map(m => m.userId).filter(m => m !== cli.getUserId()); - - if (toInvite.length > 0) { - // Errors are handled internally to this function - await inviteUsersToRoom(newRoomId, toInvite); - } - - cli.removeListener('Room', checkForUpgradeFn); - }; - cli.on('Room', checkForUpgradeFn); - } - - // We have to await after so that the checkForUpgradesFn has a proper reference - // to the new room's ID. - return upgradePromise; + ({ replacement_room: newRoomId } = await cli.upgradeRoom(room.roomId, targetVersion)); } catch (e) { + if (!handleError) throw e; console.error(e); - if (checkForUpgradeFn) cli.removeListener('Room', checkForUpgradeFn); - - Modal.createTrackedDialog('Slash Commands', 'room upgrade error', ErrorDialog, { + Modal.createTrackedDialog("Room Upgrade Error", "", ErrorDialog, { title: _t('Error upgrading room'), description: _t('Double check that your server supports the room version chosen and try again.'), }); throw e; } + + // We have to wait for the js-sdk to give us the room back so + // we can more effectively abuse the MultiInviter behaviour + // which heavily relies on the Room object being available. + if (inviteUsers) { + const checkForUpgradeFn = async (newRoom: Room): Promise => { + // The upgradePromise should be done by the time we await it here. + if (newRoom.roomId !== newRoomId) return; + + const toInvite = [ + ...room.getMembersWithMembership("join"), + ...room.getMembersWithMembership("invite"), + ].map(m => m.userId).filter(m => m !== cli.getUserId()); + + if (toInvite.length > 0) { + // Errors are handled internally to this function + await inviteUsersToRoom(newRoomId, toInvite); + } + + cli.removeListener('Room', checkForUpgradeFn); + }; + cli.on('Room', checkForUpgradeFn); + } + + if (updateSpaces) { + const parents = SpaceStore.instance.getKnownParents(room.roomId); + try { + for (const parentId of parents) { + const parent = cli.getRoom(parentId); + if (!parent?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId())) continue; + + const currentEv = parent.currentState.getStateEvents(EventType.SpaceChild, room.roomId); + await cli.sendStateEvent(parentId, EventType.SpaceChild, { + ...(currentEv?.getContent() || {}), // copy existing attributes like suggested + via: [cli.getDomain()], + }, newRoomId); + await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, room.roomId); + } + } catch (e) { + // These errors are not critical to the room upgrade itself + console.warn("Failed to update parent spaces during room upgrade", e); + } + } + + return newRoomId; } From 6fe00d12ea444d82942263c04054f2f0cc080a53 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 9 Jul 2021 08:47:18 +0100 Subject: [PATCH 034/142] Convert RoomUpgradeDialog to TS --- ...UpgradeDialog.js => RoomUpgradeDialog.tsx} | 68 ++++++++++--------- 1 file changed, 36 insertions(+), 32 deletions(-) rename src/components/views/dialogs/{RoomUpgradeDialog.js => RoomUpgradeDialog.tsx} (58%) diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.tsx similarity index 58% rename from src/components/views/dialogs/RoomUpgradeDialog.js rename to src/components/views/dialogs/RoomUpgradeDialog.tsx index acbb99099f..bcca0e3829 100644 --- a/src/components/views/dialogs/RoomUpgradeDialog.js +++ b/src/components/views/dialogs/RoomUpgradeDialog.tsx @@ -1,5 +1,5 @@ /* -Copyright 2018 New Vector Ltd +Copyright 2018 - 2021 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. @@ -15,19 +15,29 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; -import * as sdk from '../../../index'; +import { Room } from "matrix-js-sdk/src/models/room"; + import Modal from '../../../Modal'; import { _t } from '../../../languageHandler'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { upgradeRoom } from "../../../utils/RoomUpgrade"; +import { IDialogProps } from "./IDialogProps"; +import BaseDialog from "./BaseDialog"; +import ErrorDialog from './ErrorDialog'; +import DialogButtons from '../elements/DialogButtons'; +import Spinner from "../elements/Spinner"; + +interface IProps extends IDialogProps { + room: Room; +} + +interface IState { + busy: boolean; +} @replaceableComponent("views.dialogs.RoomUpgradeDialog") -export default class RoomUpgradeDialog extends React.Component { - static propTypes = { - room: PropTypes.object.isRequired, - onFinished: PropTypes.func.isRequired, - }; +export default class RoomUpgradeDialog extends React.Component { + private targetVersion: string; state = { busy: true, @@ -35,20 +45,19 @@ export default class RoomUpgradeDialog extends React.Component { async componentDidMount() { const recommended = await this.props.room.getRecommendedVersion(); - this._targetVersion = recommended.version; + this.targetVersion = recommended.version; this.setState({ busy: false }); } - _onCancelClick = () => { + private onCancelClick = (): void => { this.props.onFinished(false); }; - _onUpgradeClick = () => { + private onUpgradeClick = (): void => { this.setState({ busy: true }); - upgradeRoom(this.props.room, this._targetVersion, false, false).then(() => { + upgradeRoom(this.props.room, this.targetVersion, false, false).then(() => { this.props.onFinished(true); }).catch((err) => { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Failed to upgrade room', '', ErrorDialog, { title: _t("Failed to upgrade room"), description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")), @@ -59,48 +68,43 @@ export default class RoomUpgradeDialog extends React.Component { }; render() { - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - const Spinner = sdk.getComponent('views.elements.Spinner'); - let buttons; if (this.state.busy) { buttons = ; } else { buttons = ; } return ( -

- {_t( + { _t( "Upgrading this room requires closing down the current " + "instance of the room and creating a new room in its place. " + "To give room members the best possible experience, we will:", - )} + ) }

    -
  1. {_t("Create a new room with the same name, description and avatar")}
    2. -
  2. {_t("Update any local room aliases to point to the new room")}
    3. -
  3. {_t("Stop users from speaking in the old version of the room, and post a message advising users to move to the new room")}
    4. -
  4. {_t("Put a link back to the old room at the start of the new room so people can see old messages")}
    5. +
  5. { _t("Create a new room with the same name, description and avatar") }
    6. +
  6. { _t("Update any local room aliases to point to the new room") }
    7. +
  7. { _t("Stop users from speaking in the old version of the room, " + + "and post a message advising users to move to the new room") }
    8. +
  8. { _t("Put a link back to the old room at the start of the new room " + + "so people can see old messages") }
- {buttons} + { buttons } ); } From 3921e42e8a753d2f393675b678daa218d403db0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 12 Jul 2021 12:32:30 +0200 Subject: [PATCH 035/142] Make diff colors in codeblocks more pleseant MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 57cbc7efa9..1f814f08b8 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -288,3 +288,11 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); .hljs-tag { color: inherit; // Without this they'd be weirdly blue which doesn't match the theme } + +.hljs-addition { + background: #1a4b59; +} + +.hljs-deletion { + background: #53232a; +} From 4ddcb9a484fe0a0b4b4e2afd39640bb3742a76db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 12 Jul 2021 16:59:16 +0200 Subject: [PATCH 036/142] Make diffs look a bit better MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 55f73c0315..ebd5002843 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -480,6 +480,11 @@ $hover-select-border: 4px; background-color: $header-panel-bg-color; } + pre code > * { + display: inline-block; + width: 100%; + } + pre { // have to use overlay rather than auto otherwise Linux and Windows // Chrome gets very confused about vertical spacing: From 5986609731daae10b35dbb6847208e251876b659 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Jul 2021 10:05:37 +0100 Subject: [PATCH 037/142] i18n --- src/i18n/strings/en_EN.json | 73 ++++++++++++++++++++++++++----------- 1 file changed, 52 insertions(+), 21 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5cc900a21b..50c5abbcf4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -437,8 +437,6 @@ "To use it, just wait for autocomplete results to load and tab through them.": "To use it, just wait for autocomplete results to load and tab through them.", "Upgrades a room to a new version": "Upgrades a room to a new version", "You do not have the required permissions to use this command.": "You do not have the required permissions to use this command.", - "Error upgrading room": "Error upgrading room", - "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.", "Changes your display nickname": "Changes your display nickname", "Changes your display nickname in the current room only": "Changes your display nickname in the current room only", "Changes the avatar of the current room": "Changes the avatar of the current room", @@ -732,6 +730,8 @@ "Common names and surnames are easy to guess": "Common names and surnames are easy to guess", "Straight rows of keys are easy to guess": "Straight rows of keys are easy to guess", "Short keyboard patterns are easy to guess": "Short keyboard patterns are easy to guess", + "Error upgrading room": "Error upgrading room", + "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.", "Invite to %(spaceName)s": "Invite to %(spaceName)s", "Share your public space": "Share your public space", "Unknown App": "Unknown App", @@ -778,6 +778,16 @@ "The person who invited you already left the room.": "The person who invited you already left the room.", "The person who invited you already left the room, or their server is offline.": "The person who invited you already left the room, or their server is offline.", "Failed to join room": "Failed to join room", + "New in the Spaces beta": "New in the Spaces beta", + "Help people in spaces to find and join private rooms": "Help people in spaces to find and join private rooms", + "Learn more": "Learn more", + "Help space members find private rooms": "Help space members find private rooms", + "To help space members find and join a private room, go to that room's Security & Privacy settings.": "To help space members find and join a private room, go to that room's Security & Privacy settings.", + "General": "General", + "Security & Privacy": "Security & Privacy", + "Roles & Permissions": "Roles & Permissions", + "This make it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.": "This make it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.", + "Skip": "Skip", "You joined the call": "You joined the call", "%(senderName)s joined the call": "%(senderName)s joined the call", "Call in progress": "Call in progress", @@ -1037,7 +1047,6 @@ "Invite people": "Invite people", "Invite with email or username": "Invite with email or username", "Failed to save space settings.": "Failed to save space settings.", - "General": "General", "Edit settings relating to your space.": "Edit settings relating to your space.", "Saving...": "Saving...", "Save Changes": "Save Changes", @@ -1432,27 +1441,35 @@ "Muted Users": "Muted Users", "Banned users": "Banned users", "Send %(eventType)s events": "Send %(eventType)s events", - "Roles & Permissions": "Roles & Permissions", "Permissions": "Permissions", "Select the roles required to change various parts of the room": "Select the roles required to change various parts of the room", "Enable encryption?": "Enable encryption?", "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.", - "Guests cannot join this room even if explicitly invited.": "Guests cannot join this room even if explicitly invited.", - "Click here to fix": "Click here to fix", + "This upgrade will allow members of selected spaces access to this room without an invite.": "This upgrade will allow members of selected spaces access to this room without an invite.", "To link to this room, please add an address.": "To link to this room, please add an address.", - "Only people who have been invited": "Only people who have been invited", - "Anyone who knows the room's link, apart from guests": "Anyone who knows the room's link, apart from guests", - "Anyone who knows the room's link, including guests": "Anyone who knows the room's link, including guests", + "Private (invite only)": "Private (invite only)", + "Only invited people can join.": "Only invited people can join.", + "Public (anyone)": "Public (anyone)", + "Anyone can find and join.": "Anyone can find and join.", + "Upgrade required": "Upgrade required", + "& %(count)s more|other": "& %(count)s more", + "Currently, %(count)s spaces have access|other": "Currently, %(count)s spaces have access", + "Anyone in a space can find and join. Edit which spaces can access here.": "Anyone in a space can find and join. Edit which spaces can access here.", + "Spaces with access": "Spaces with access", + "Anyone in %(spaceName)s can find and join. You can select other spaces too.": "Anyone in %(spaceName)s can find and join. You can select other spaces too.", + "Anyone in a space can find and join. You can select multiple spaces.": "Anyone in a space can find and join. You can select multiple spaces.", + "Space members": "Space members", + "Decide who can view and join %(roomName)s.": "Decide who can view and join %(roomName)s.", "Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)", "Members only (since they were invited)": "Members only (since they were invited)", "Members only (since they joined)": "Members only (since they joined)", "Anyone": "Anyone", "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.", + "People with supported clients will be able to join the room without having a registered account.": "People with supported clients will be able to join the room without having a registered account.", "Who can read history?": "Who can read history?", - "Security & Privacy": "Security & Privacy", "Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.", "Encrypted": "Encrypted", - "Who can access this room?": "Who can access this room?", + "Access": "Access", "Unable to revoke sharing for email address": "Unable to revoke sharing for email address", "Unable to share email address": "Unable to share email address", "Your email address hasn't been verified yet": "Your email address hasn't been verified yet", @@ -2148,7 +2165,6 @@ "People you know on %(brand)s": "People you know on %(brand)s", "Hide": "Hide", "Show": "Show", - "Skip": "Skip", "Send %(count)s invites|other": "Send %(count)s invites", "Send %(count)s invites|one": "Send %(count)s invite", "Invite people to join %(communityName)s": "Invite people to join %(communityName)s", @@ -2177,18 +2193,25 @@ "Community ID": "Community ID", "example": "example", "Please enter a name for the room": "Please enter a name for the room", - "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.", "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.", + "Everyone in will be able to find and join this room.": "Everyone in will be able to find and join this room.", + "You can change this at any time from room settings.": "You can change this at any time from room settings.", + "Anyone will be able to find and join this room, not just members of .": "Anyone will be able to find and join this room, not just members of .", + "Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.", "You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.", "Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.", "Enable end-to-end encryption": "Enable end-to-end encryption", "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.", "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.", + "Create a room": "Create a room", + "Create a room in %(communityName)s": "Create a room in %(communityName)s", "Create a public room": "Create a public room", "Create a private room": "Create a private room", - "Create a room in %(communityName)s": "Create a room in %(communityName)s", + "Private room (invite only)": "Private room (invite only)", + "Public room": "Public room", + "Visible to space members": "Visible to space members", "Topic (optional)": "Topic (optional)", - "Make this room public": "Make this room public", + "Room visibility": "Room visibility", "Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.", "Create Room": "Create Room", "Sign out": "Sign out", @@ -2342,6 +2365,17 @@ "Manually export keys": "Manually export keys", "You'll lose access to your encrypted messages": "You'll lose access to your encrypted messages", "Are you sure you want to sign out?": "Are you sure you want to sign out?", + "%(count)s members|other": "%(count)s members", + "%(count)s members|one": "%(count)s member", + "%(count)s rooms|other": "%(count)s rooms", + "%(count)s rooms|one": "%(count)s room", + "You're removing all spaces. Access will default to invite only": "You're removing all spaces. Access will default to invite only", + "Select spaces": "Select spaces", + "Decide which spaces can access this room. If a space is selected its members will be able to find and join .": "Decide which spaces can access this room. If a space is selected its members will be able to find and join .", + "Search spaces": "Search spaces", + "Spaces you know that contain this room": "Spaces you know that contain this room", + "Other spaces or rooms you might not know": "Other spaces or rooms you might not know", + "These are likely ones other room admins are a part of.": "These are likely ones other room admins are a part of.", "Confirm by comparing the following with the User Settings in your other session:": "Confirm by comparing the following with the User Settings in your other session:", "Confirm this user's session by comparing the following with their User Settings:": "Confirm this user's session by comparing the following with their User Settings:", "Session name": "Session name", @@ -2385,12 +2419,13 @@ "Update any local room aliases to point to the new room": "Update any local room aliases to point to the new room", "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room": "Stop users from speaking in the old version of the room, and post a message advising users to move to the new room", "Put a link back to the old room at the start of the new room so people can see old messages": "Put a link back to the old room at the start of the new room so people can see old messages", - "Automatically invite users": "Automatically invite users", + "Automatically invite members from this room to the new one": "Automatically invite members from this room to the new one", "Upgrade private room": "Upgrade private room", "Upgrade public room": "Upgrade public room", "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.", "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.": "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please report a bug.", "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.", + "Please note upgrading will make a new version of the room. All current messages will stay in this archived room.": "Please note upgrading will make a new version of the room. All current messages will stay in this archived room.", "You'll upgrade this room from to .": "You'll upgrade this room from to .", "Resend": "Resend", "You're all caught up.": "You're all caught up.", @@ -2413,7 +2448,6 @@ "We call the places where you can host your account ‘homeservers’.": "We call the places where you can host your account ‘homeservers’.", "Other homeserver": "Other homeserver", "Use your preferred Matrix homeserver if you have one, or host your own.": "Use your preferred Matrix homeserver if you have one, or host your own.", - "Learn more": "Learn more", "About homeservers": "About homeservers", "Reset event store?": "Reset event store?", "You most likely do not want to reset your event index store": "You most likely do not want to reset your event index store", @@ -2647,6 +2681,7 @@ "You are an administrator of this community": "You are an administrator of this community", "You are a member of this community": "You are a member of this community", "Who can join this community?": "Who can join this community?", + "Only people who have been invited": "Only people who have been invited", "Everyone": "Everyone", "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", @@ -2744,10 +2779,6 @@ "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.", "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.", "You don't have permission": "You don't have permission", - "%(count)s members|other": "%(count)s members", - "%(count)s members|one": "%(count)s member", - "%(count)s rooms|other": "%(count)s rooms", - "%(count)s rooms|one": "%(count)s room", "This room is suggested as a good one to join": "This room is suggested as a good one to join", "Suggested": "Suggested", "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.", From c8bd37513026590d08c156104323bb1c80a88552 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:11:45 +0200 Subject: [PATCH 038/142] Migrate DisableEventIndexDialog to TypeScript --- ...xDialog.js => DisableEventIndexDialog.tsx} | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) rename src/async-components/views/dialogs/eventindex/{DisableEventIndexDialog.js => DisableEventIndexDialog.tsx} (86%) diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx similarity index 86% rename from src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js rename to src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx index a19494c753..2be5ddaa43 100644 --- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js +++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from 'react'; import * as sdk from '../../../../index'; -import PropTypes from 'prop-types'; import dis from "../../../../dispatcher/dispatcher"; import { _t } from '../../../../languageHandler'; @@ -25,34 +24,37 @@ import EventIndexPeg from "../../../../indexing/EventIndexPeg"; import { Action } from "../../../../dispatcher/actions"; import { SettingLevel } from "../../../../settings/SettingLevel"; +interface IProps { + onFinished: (success: boolean) => void; +} + +interface IState { + disabling: boolean; +} + /* * Allows the user to disable the Event Index. */ -export default class DisableEventIndexDialog extends React.Component { - static propTypes = { - onFinished: PropTypes.func.isRequired, - } - - constructor(props) { +export default class DisableEventIndexDialog extends React.Component { + constructor(props: IProps) { super(props); - this.state = { disabling: false, }; } - _onDisable = async () => { + private onDisable = async (): Promise => { this.setState({ disabling: true, }); await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false); await EventIndexPeg.deleteEventIndex(); - this.props.onFinished(); + this.props.onFinished(true); dis.fire(Action.ViewUserSettings); - } + }; - render() { + public render(): React.ReactNode { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const Spinner = sdk.getComponent('elements.Spinner'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); @@ -63,7 +65,7 @@ export default class DisableEventIndexDialog extends React.Component { {this.state.disabling ? :
} Date: Thu, 15 Jul 2021 15:19:48 +0200 Subject: [PATCH 039/142] Migrate AuthBody to TypeScript --- src/components/views/auth/{AuthBody.js => AuthBody.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/views/auth/{AuthBody.js => AuthBody.tsx} (100%) diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.tsx similarity index 100% rename from src/components/views/auth/AuthBody.js rename to src/components/views/auth/AuthBody.tsx From 59316e4820961667813ad5dff9aee69c56010bdd Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:20:43 +0200 Subject: [PATCH 040/142] Migrate AuthFooter to TypeScript --- src/components/views/auth/AuthBody.tsx | 2 +- src/components/views/auth/{AuthFooter.js => AuthFooter.tsx} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/views/auth/{AuthFooter.js => AuthFooter.tsx} (96%) diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index abe7fd2fd3..3543a573d7 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthBody") export default class AuthBody extends React.PureComponent { - render() { + public render(): React.ReactNode { return
{ this.props.children }
; diff --git a/src/components/views/auth/AuthFooter.js b/src/components/views/auth/AuthFooter.tsx similarity index 96% rename from src/components/views/auth/AuthFooter.js rename to src/components/views/auth/AuthFooter.tsx index e81d2cd969..00bced8c39 100644 --- a/src/components/views/auth/AuthFooter.js +++ b/src/components/views/auth/AuthFooter.tsx @@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthFooter") export default class AuthFooter extends React.Component { - render() { + public render(): React.ReactNode { return (
{ _t("powered by Matrix") } From 5783a382070ea568fd1107f06be1d0a077f9b2cd Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:21:33 +0200 Subject: [PATCH 041/142] Migrate AuthHeader to TypeScript --- .../views/auth/{AuthHeader.js => AuthHeader.tsx} | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) rename src/components/views/auth/{AuthHeader.js => AuthHeader.tsx} (85%) diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.tsx similarity index 85% rename from src/components/views/auth/AuthHeader.js rename to src/components/views/auth/AuthHeader.tsx index d9bd81adcb..6f071c8f61 100644 --- a/src/components/views/auth/AuthHeader.js +++ b/src/components/views/auth/AuthHeader.tsx @@ -16,17 +16,16 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import * as sdk from '../../../index'; import { replaceableComponent } from "../../../utils/replaceableComponent"; -@replaceableComponent("views.auth.AuthHeader") -export default class AuthHeader extends React.Component { - static propTypes = { - disableLanguageSelector: PropTypes.bool, - }; +interface IProps { + disableLanguageSelector?: boolean; +} - render() { +@replaceableComponent("views.auth.AuthHeader") +export default class AuthHeader extends React.Component { + public render(): React.ReactNode { const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo'); const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector'); From 13c5adbb6ca050a3130996646fe10e09885665f9 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:22:02 +0200 Subject: [PATCH 042/142] Migrate AuthHeaderLogo to TypeScript --- .../views/auth/{AuthHeaderLogo.js => AuthHeaderLogo.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{AuthHeaderLogo.js => AuthHeaderLogo.tsx} (95%) diff --git a/src/components/views/auth/AuthHeaderLogo.js b/src/components/views/auth/AuthHeaderLogo.tsx similarity index 95% rename from src/components/views/auth/AuthHeaderLogo.js rename to src/components/views/auth/AuthHeaderLogo.tsx index 0adf18dc1c..b6724793a5 100644 --- a/src/components/views/auth/AuthHeaderLogo.js +++ b/src/components/views/auth/AuthHeaderLogo.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthHeaderLogo") export default class AuthHeaderLogo extends React.PureComponent { - render() { + public render(): React.ReactNode { return
Matrix
; From e495cbce373b6f2f55e89ea300d598c37945c372 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:22:34 +0200 Subject: [PATCH 043/142] Migrate AuthPage to TypeScript --- src/components/views/auth/{AuthPage.js => AuthPage.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{AuthPage.js => AuthPage.tsx} (96%) diff --git a/src/components/views/auth/AuthPage.js b/src/components/views/auth/AuthPage.tsx similarity index 96% rename from src/components/views/auth/AuthPage.js rename to src/components/views/auth/AuthPage.tsx index 6ba47e5288..9957c1d6d0 100644 --- a/src/components/views/auth/AuthPage.js +++ b/src/components/views/auth/AuthPage.tsx @@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthPage") export default class AuthPage extends React.PureComponent { - render() { + public render(): React.ReactNode { const AuthFooter = sdk.getComponent('auth.AuthFooter'); return ( From 1f9b423baceed95dd59d56db7c5779f8986917f1 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:30:39 +0200 Subject: [PATCH 044/142] Migrate CaptchaForm to TypeScript --- src/@types/global.d.ts | 2 + .../auth/{CaptchaForm.js => CaptchaForm.tsx} | 59 +++++++++---------- 2 files changed, 31 insertions(+), 30 deletions(-) rename src/components/views/auth/{CaptchaForm.js => CaptchaForm.tsx} (74%) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7192eb81cc..7f78d96642 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -90,6 +90,8 @@ declare global { mxUIStore: UIStore; mxSetupEncryptionStore?: SetupEncryptionStore; mxRoomScrollStateStore?: RoomScrollStateStore; + grecaptcha: any; + mx_on_recaptcha_loaded: () => void; } interface Document { diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.tsx similarity index 74% rename from src/components/views/auth/CaptchaForm.js rename to src/components/views/auth/CaptchaForm.tsx index bea4f89f53..f7386be5b0 100644 --- a/src/components/views/auth/CaptchaForm.js +++ b/src/components/views/auth/CaptchaForm.tsx @@ -15,25 +15,28 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import CountlyAnalytics from "../../../CountlyAnalytics"; import { replaceableComponent } from "../../../utils/replaceableComponent"; const DIV_ID = 'mx_recaptcha'; +interface IProps { + sitePublicKey?: string; + onCaptchaResponse: () => void; +} + +interface IState { + errorText: string; +} + /** * A pure UI component which displays a captcha form. */ @replaceableComponent("views.auth.CaptchaForm") -export default class CaptchaForm extends React.Component { - static propTypes = { - sitePublicKey: PropTypes.string, - - // called with the captcha response - onCaptchaResponse: PropTypes.func, - }; - +export default class CaptchaForm extends React.Component { + private captchaWidgetId: string; + private recaptchaContainer = createRef(); static defaultProps = { onCaptchaResponse: () => {}, }; @@ -45,36 +48,32 @@ export default class CaptchaForm extends React.Component { errorText: null, }; - this._captchaWidgetId = null; - - this._recaptchaContainer = createRef(); - CountlyAnalytics.instance.track("onboarding_grecaptcha_begin"); } - componentDidMount() { + public componentDidMount(): void { // Just putting a script tag into the returned jsx doesn't work, annoyingly, // so we do this instead. - if (global.grecaptcha) { + if (window.grecaptcha) { // TODO: Properly find the type of `grecaptcha` // already loaded - this._onCaptchaLoaded(); + this.onCaptchaLoaded(); } else { console.log("Loading recaptcha script..."); - window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();}; + window.mx_on_recaptcha_loaded = () => {this.onCaptchaLoaded();}; const scriptTag = document.createElement('script'); scriptTag.setAttribute( 'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`, ); - this._recaptchaContainer.current.appendChild(scriptTag); + this.recaptchaContainer.current.appendChild(scriptTag); } } - componentWillUnmount() { - this._resetRecaptcha(); + public componentWillUnmount(): void { + this.resetRecaptcha(); } - _renderRecaptcha(divId) { - if (!global.grecaptcha) { + private renderRecaptcha(divId): void { + if (!window.grecaptcha) { console.error("grecaptcha not loaded!"); throw new Error("Recaptcha did not load successfully"); } @@ -88,22 +87,22 @@ export default class CaptchaForm extends React.Component { } console.info("Rendering to %s", divId); - this._captchaWidgetId = global.grecaptcha.render(divId, { + this.captchaWidgetId = window.grecaptcha.render(divId, { sitekey: publicKey, callback: this.props.onCaptchaResponse, }); } - _resetRecaptcha() { - if (this._captchaWidgetId !== null) { - global.grecaptcha.reset(this._captchaWidgetId); + private resetRecaptcha(): void { + if (this.captchaWidgetId !== null) { + window.grecaptcha.reset(this.captchaWidgetId); } } - _onCaptchaLoaded() { + private onCaptchaLoaded(): void { console.log("Loaded recaptcha script."); try { - this._renderRecaptcha(DIV_ID); + this.renderRecaptcha(DIV_ID); // clear error if re-rendered this.setState({ errorText: null, @@ -117,7 +116,7 @@ export default class CaptchaForm extends React.Component { } } - render() { + public render(): React.ReactNode { let error = null; if (this.state.errorText) { error = ( @@ -128,7 +127,7 @@ export default class CaptchaForm extends React.Component { } return ( -
+

{_t( "This homeserver would like to make sure you are not a robot.", )}

From c6dd9bc5261f35563c2a8c493a1042e26ad85c20 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:32:24 +0200 Subject: [PATCH 045/142] Migrate CompleteSecurityBody to TypeScript --- .../auth/{CompleteSecurityBody.js => CompleteSecurityBody.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{CompleteSecurityBody.js => CompleteSecurityBody.tsx} (95%) diff --git a/src/components/views/auth/CompleteSecurityBody.js b/src/components/views/auth/CompleteSecurityBody.tsx similarity index 95% rename from src/components/views/auth/CompleteSecurityBody.js rename to src/components/views/auth/CompleteSecurityBody.tsx index 745d7abbf2..8f6affb64e 100644 --- a/src/components/views/auth/CompleteSecurityBody.js +++ b/src/components/views/auth/CompleteSecurityBody.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.CompleteSecurityBody") export default class CompleteSecurityBody extends React.PureComponent { - render() { + public render(): React.ReactNode { return
{ this.props.children }
; From 8ef9c3dfebc1b9c79d2a543e167d77568b34a75e Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:42:11 +0200 Subject: [PATCH 046/142] Migrate CountryDropdown to TypeScript --- ...CountryDropdown.js => CountryDropdown.tsx} | 59 +++++++++++-------- src/phonenumber.ts | 8 ++- 2 files changed, 42 insertions(+), 25 deletions(-) rename src/components/views/auth/{CountryDropdown.js => CountryDropdown.tsx} (78%) diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.tsx similarity index 78% rename from src/components/views/auth/CountryDropdown.js rename to src/components/views/auth/CountryDropdown.tsx index cbc19e0f8d..2e85356e38 100644 --- a/src/components/views/auth/CountryDropdown.js +++ b/src/components/views/auth/CountryDropdown.tsx @@ -19,7 +19,7 @@ import PropTypes from 'prop-types'; import * as sdk from '../../../index'; -import { COUNTRIES, getEmojiFlag } from '../../../phonenumber'; +import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber'; import SdkConfig from "../../../SdkConfig"; import { _t } from "../../../languageHandler"; import { replaceableComponent } from "../../../utils/replaceableComponent"; @@ -29,7 +29,7 @@ for (const c of COUNTRIES) { COUNTRIES_BY_ISO2[c.iso2] = c; } -function countryMatchesSearchQuery(query, country) { +function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean { // Remove '+' if present (when searching for a prefix) if (query[0] === '+') { query = query.slice(1); @@ -41,15 +41,26 @@ function countryMatchesSearchQuery(query, country) { return false; } -@replaceableComponent("views.auth.CountryDropdown") -export default class CountryDropdown extends React.Component { - constructor(props) { - super(props); - this._onSearchChange = this._onSearchChange.bind(this); - this._onOptionChange = this._onOptionChange.bind(this); - this._getShortOption = this._getShortOption.bind(this); +interface IProps { + value?: string; + onOptionChange: (country: PhoneNumberCountryDefinition) => void; + isSmall: boolean; + showPrefix: boolean; + className?: string; + disabled?: boolean; +} - let defaultCountry = COUNTRIES[0]; +interface IState { + searchQuery: string; + defaultCountry: PhoneNumberCountryDefinition; +} + +@replaceableComponent("views.auth.CountryDropdown") +export default class CountryDropdown extends React.Component { + constructor(props: IProps) { + super(props); + + let defaultCountry: PhoneNumberCountryDefinition = COUNTRIES[0]; const defaultCountryCode = SdkConfig.get()["defaultCountryCode"]; if (defaultCountryCode) { const country = COUNTRIES.find(c => c.iso2 === defaultCountryCode.toUpperCase()); @@ -62,7 +73,7 @@ export default class CountryDropdown extends React.Component { }; } - componentDidMount() { + public componentDidMount(): void { if (!this.props.value) { // If no value is given, we start with the default // country selected, but our parent component @@ -71,21 +82,21 @@ export default class CountryDropdown extends React.Component { } } - _onSearchChange(search) { + private onSearchChange = (search: string): void => { this.setState({ searchQuery: search, }); - } + }; - _onOptionChange(iso2) { + private onOptionChange = (iso2: string): void => { this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]); - } + }; - _flagImgForIso2(iso2) { + private flagImgForIso2(iso2: string): React.ReactNode { return
{ getEmojiFlag(iso2) }
; } - _getShortOption(iso2) { + private getShortOption = (iso2: string): React.ReactNode => { if (!this.props.isSmall) { return undefined; } @@ -94,12 +105,12 @@ export default class CountryDropdown extends React.Component { countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix; } return - { this._flagImgForIso2(iso2) } + { this.flagImgForIso2(iso2) } { countryPrefix } ; - } + }; - render() { + public render(): React.ReactNode { const Dropdown = sdk.getComponent('elements.Dropdown'); let displayedCountries; @@ -124,7 +135,7 @@ export default class CountryDropdown extends React.Component { const options = displayedCountries.map((country) => { return
- { this._flagImgForIso2(country.iso2) } + { this.flagImgForIso2(country.iso2) } { _t(country.name) } (+{ country.prefix })
; }); @@ -136,10 +147,10 @@ export default class CountryDropdown extends React.Component { return { return String.fromCodePoint(...countryCode.split('').map(l => UNICODE_BASE + l.charCodeAt(0))); }; -export const COUNTRIES = [ +export interface PhoneNumberCountryDefinition { + iso2: string; + name: string; + prefix: string; +} + +export const COUNTRIES: PhoneNumberCountryDefinition[] = [ { "iso2": "GB", "name": _td("United Kingdom"), From 3b5266071e5fbdba252610a0588e8b04de4fa21b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:44:44 +0200 Subject: [PATCH 047/142] Migrate LanguageSelector to TypeScript --- .../auth/{LanguageSelector.js => LanguageSelector.tsx} | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) rename src/components/views/auth/{LanguageSelector.js => LanguageSelector.tsx} (89%) diff --git a/src/components/views/auth/LanguageSelector.js b/src/components/views/auth/LanguageSelector.tsx similarity index 89% rename from src/components/views/auth/LanguageSelector.js rename to src/components/views/auth/LanguageSelector.tsx index 88293310e7..fc4f4ba5ca 100644 --- a/src/components/views/auth/LanguageSelector.js +++ b/src/components/views/auth/LanguageSelector.tsx @@ -22,14 +22,18 @@ import * as sdk from '../../../index'; import React from 'react'; import { SettingLevel } from "../../../settings/SettingLevel"; -function onChange(newLang) { +function onChange(newLang: string): void { if (getCurrentLanguage() !== newLang) { SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang); PlatformPeg.get().reload(); } } -export default function LanguageSelector({ disabled }) { +interface IProps { + disabled?: boolean; +} + +export default function LanguageSelector({ disabled }: IProps): React.ReactNode { if (SdkConfig.get()['disable_login_language_selector']) return
; const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); From 54bfe8ec1ed6fdeb14c6ef872f8ab4ffe1a4e544 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:45:36 +0200 Subject: [PATCH 048/142] Migrate Welcome to TypeScript --- src/components/views/auth/CaptchaForm.tsx | 2 +- src/components/views/auth/CountryDropdown.tsx | 10 ---------- src/components/views/auth/{Welcome.js => Welcome.tsx} | 10 +++++++--- 3 files changed, 8 insertions(+), 14 deletions(-) rename src/components/views/auth/{Welcome.js => Welcome.tsx} (93%) diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index f7386be5b0..d71d8a6b15 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -23,7 +23,7 @@ const DIV_ID = 'mx_recaptcha'; interface IProps { sitePublicKey?: string; - onCaptchaResponse: () => void; + onCaptchaResponse: (response: string) => void; } interface IState { diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index 2e85356e38..e0eed5b430 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -160,13 +160,3 @@ export default class CountryDropdown extends React.Component { ; } } - -CountryDropdown.propTypes = { - className: PropTypes.string, - isSmall: PropTypes.bool, - // if isSmall, show +44 in the selected value - showPrefix: PropTypes.bool, - onOptionChange: PropTypes.func.isRequired, - value: PropTypes.string, - disabled: PropTypes.bool, -}; diff --git a/src/components/views/auth/Welcome.js b/src/components/views/auth/Welcome.tsx similarity index 93% rename from src/components/views/auth/Welcome.js rename to src/components/views/auth/Welcome.tsx index e3f7a601f2..1b02d0d2b5 100644 --- a/src/components/views/auth/Welcome.js +++ b/src/components/views/auth/Welcome.tsx @@ -29,15 +29,19 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; // translatable strings for Welcome pages _td("Sign in with SSO"); +interface IProps { + +} + @replaceableComponent("views.auth.Welcome") -export default class Welcome extends React.PureComponent { - constructor(props) { +export default class Welcome extends React.PureComponent { + constructor(props: IProps) { super(props); CountlyAnalytics.instance.track("onboarding_welcome"); } - render() { + public render(): React.ReactNode { const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage'); const LanguageSelector = sdk.getComponent('auth.LanguageSelector'); From 8f6458a79c8ba4fa52e88ca79411ba5ea831e722 Mon Sep 17 00:00:00 2001 From: Aaron Raimist Date: Fri, 16 Jul 2021 01:43:03 -0500 Subject: [PATCH 049/142] Add matrix: to the list of permitted URL schemes Signed-off-by: Aaron Raimist --- src/HtmlUtils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 5e83fdc2a0..dfe5cba3fd 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -58,7 +58,7 @@ const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, 'i'); const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/; -export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet']; +export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet', 'matrix']; const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)\/(.+?)(?:[?/]|$)/; From e6007874d9c68315cc4b709d4d506ff0cb10ac4c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 16 Jul 2021 11:43:06 +0100 Subject: [PATCH 050/142] post-merge fixup --- src/components/views/rooms/SendMessageComposer.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx index 0639c20fef..04f74fb2b2 100644 --- a/src/components/views/rooms/SendMessageComposer.tsx +++ b/src/components/views/rooms/SendMessageComposer.tsx @@ -514,13 +514,11 @@ export default class SendMessageComposer extends React.Component { private onPaste = (event: ClipboardEvent): boolean => { const { clipboardData } = event; - // Prioritize text on the clipboard over files as Office on macOS puts a bitmap - // in the clipboard as well as the content being copied. - if (clipboardData.files.length && !clipboardData.types.some(t => t === "text/plain")) { - // This actually not so much for 'files' as such (at time of writing - // neither chrome nor firefox let you paste a plain file copied - // from Finder) but more images copied from a different website - // / word processor etc. + // Prioritize text on the clipboard over files if RTF is present as Office on macOS puts a bitmap + // in the clipboard as well as the content being copied. Modern versions of Office seem to not do this anymore. + // We check text/rtf instead of text/plain as when copy+pasting a file from Finder or Gnome Image Viewer + // it puts the filename in as text/plain which we want to ignore. + if (clipboardData.files.length && !clipboardData.types.includes("text/rtf")) { ContentMessages.sharedInstance().sendContentListToRoom( Array.from(clipboardData.files), this.props.room.roomId, this.context, ); From f2a88599a4c8fdcd8cbca736b427139805eceb9e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 19 Jul 2021 16:51:43 +0100 Subject: [PATCH 051/142] delint --- src/components/views/avatars/RoomAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index 36f6db87a6..f285222f7b 100644 --- a/src/components/views/avatars/RoomAvatar.tsx +++ b/src/components/views/avatars/RoomAvatar.tsx @@ -147,7 +147,7 @@ export default class RoomAvatar extends React.Component { className={classNames(className, { mx_RoomAvatar_isSpaceRoom: room?.isSpaceRoom(), })} - name={room ? room.name : oobData.name} + name={roomName} idName={idName} urls={this.state.urls} onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick} From 28f58278847b49cb385cb532c2fc8aaeaa5ca451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:02:33 +0200 Subject: [PATCH 052/142] Add FileUtils MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/FileUtils.ts | 53 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/utils/FileUtils.ts diff --git a/src/utils/FileUtils.ts b/src/utils/FileUtils.ts new file mode 100644 index 0000000000..0adcb172e4 --- /dev/null +++ b/src/utils/FileUtils.ts @@ -0,0 +1,53 @@ +/* +Copyright 2021 Šimon Brandner + +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 filesize from 'filesize'; +import { IMediaEventContent } from '../customisations/models/IMediaEventContent'; +import { _t } from '../languageHandler'; + +/** + * Extracts a human readable label for the file attachment to use as + * link text. + * + * @param {IMediaEventContent} content The "content" key of the matrix event. + * @param {string} fallbackText The fallback text + * @param {boolean} withSize Whether to include size information. Default true. + * @return {string} the human readable link text for the attachment. + */ +export function presentableTextForFile( + content: IMediaEventContent, + fallbackText = _t("Attachment"), + withSize = true, +): string { + let text = fallbackText; + if (content.body && content.body.length > 0) { + // The content body should be the name of the file including a + // file extension. + text = content.body; + } + + if (content.info && content.info.size && withSize) { + // If we know the size of the file then add it as human readable + // string to the end of the link text so that the user knows how + // big a file they are downloading. + // The content.info also contains a MIME-type but we don't display + // it since it is "ugly", users generally aren't aware what it + // means and the type of the attachment can usually be inferrered + // from the file extension. + text += ' (' + filesize(content.info.size) + ')'; + } + return text; +} From 5d5b9f6022de6e2a049cd1c058e91462a8581894 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:04:33 +0200 Subject: [PATCH 053/142] Better labeling of images and stickers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MFileBody.js | 30 +------------------ src/components/views/messages/MImageBody.tsx | 2 +- .../views/messages/MImageReplyBody.tsx | 9 ++++-- 3 files changed, 8 insertions(+), 33 deletions(-) diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index 9236c77e8d..ea0dbe3f1e 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -25,6 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromContent } from "../../../customisations/Media"; import ErrorDialog from "../dialogs/ErrorDialog"; import { TileShape } from "../rooms/EventTile"; +import { presentableTextForFile } from "../../../utils/FileUtils"; let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on @@ -90,35 +91,6 @@ function computedStyle(element) { return cssText; } -/** - * Extracts a human readable label for the file attachment to use as - * link text. - * - * @param {Object} content The "content" key of the matrix event. - * @param {boolean} withSize Whether to include size information. Default true. - * @return {string} the human readable link text for the attachment. - */ -export function presentableTextForFile(content, withSize = true) { - let linkText = _t("Attachment"); - if (content.body && content.body.length > 0) { - // The content body should be the name of the file including a - // file extension. - linkText = content.body; - } - - if (content.info && content.info.size && withSize) { - // If we know the size of the file then add it as human readable - // string to the end of the link text so that the user knows how - // big a file they are downloading. - // The content.info also contains a MIME-type but we don't display - // it since it is "ugly", users generally aren't aware what it - // means and the type of the attachment can usually be inferrered - // from the file extension. - linkText += ' (' + filesize(content.info.size) + ')'; - } - return linkText; -} - @replaceableComponent("views.messages.MFileBody") export default class MFileBody extends React.Component { static propTypes = { diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 96c8652aee..a2c8663cd7 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -451,7 +451,7 @@ export default class MImageBody extends React.Component { } // Overidden by MStickerBody - protected getFileBody(): JSX.Element { + protected getFileBody(): string | JSX.Element { return ; } diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index 44acf18004..8d92920226 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -16,9 +16,11 @@ limitations under the License. import React from "react"; import MImageBody from "./MImageBody"; -import { presentableTextForFile } from "./MFileBody"; +import { presentableTextForFile } from "../../../utils/FileUtils"; import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; import SenderProfile from "./SenderProfile"; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import { _t } from "../../../languageHandler"; const FORCED_IMAGE_HEIGHT = 44; @@ -32,8 +34,9 @@ export default class MImageReplyBody extends MImageBody { } // Don't show "Download this_file.png ..." - public getFileBody(): JSX.Element { - return presentableTextForFile(this.props.mxEvent.getContent()); + public getFileBody(): string { + const sticker = this.props.mxEvent.getType() === EventType.Sticker; + return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker); } render() { From 3250b35151969135fd189a0a02cd172e54ab8057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:10:31 +0200 Subject: [PATCH 054/142] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2790e17eed..ae97c0787f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -671,6 +671,7 @@ "This homeserver has exceeded one of its resource limits.": "This homeserver has exceeded one of its resource limits.", "Please contact your service administrator to continue using the service.": "Please contact your service administrator to continue using the service.", "Unable to connect to Homeserver. Retrying...": "Unable to connect to Homeserver. Retrying...", + "Attachment": "Attachment", "%(items)s and %(count)s others|other": "%(items)s and %(count)s others", "%(items)s and %(count)s others|one": "%(items)s and one other", "%(items)s and %(lastItem)s": "%(items)s and %(lastItem)s", @@ -1873,13 +1874,14 @@ "Retry": "Retry", "Reply": "Reply", "Message Actions": "Message Actions", - "Attachment": "Attachment", "Error decrypting attachment": "Error decrypting attachment", "Decrypt %(text)s": "Decrypt %(text)s", "Download %(text)s": "Download %(text)s", "Invalid file%(extra)s": "Invalid file%(extra)s", "Error decrypting image": "Error decrypting image", "Show image": "Show image", + "Sticker": "Sticker", + "Image": "Image", "Join the conference at the top of this room": "Join the conference at the top of this room", "Join the conference from the room information card on the right": "Join the conference from the room information card on the right", "Video conference ended by %(senderName)s": "Video conference ended by %(senderName)s", From 1b74286cf03dd3efdfa1d8e64a364792f5ee4389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:11:23 +0200 Subject: [PATCH 055/142] /me has managed to steel something by accident MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/FileUtils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/FileUtils.ts b/src/utils/FileUtils.ts index 0adcb172e4..355fa2135c 100644 --- a/src/utils/FileUtils.ts +++ b/src/utils/FileUtils.ts @@ -1,4 +1,5 @@ /* +Copyright 2015 - 2021 The Matrix.org Foundation C.I.C. Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); From fdd98bbf3f2a13f7959fac3060e752a40c9c3df5 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 20 Jul 2021 09:36:33 +0200 Subject: [PATCH 056/142] linter fix --- src/@types/global.d.ts | 1 + .../dialogs/eventindex/DisableEventIndexDialog.tsx | 10 ++++------ .../dialogs/eventindex/ManageEventIndexDialog.tsx | 5 +++-- src/components/views/auth/CountryDropdown.tsx | 1 - 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7f78d96642..50cfa745a4 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -91,6 +91,7 @@ declare global { mxSetupEncryptionStore?: SetupEncryptionStore; mxRoomScrollStateStore?: RoomScrollStateStore; grecaptcha: any; + // eslint-disable-next-line mx_on_recaptcha_loaded: () => void; } diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx index 2be5ddaa43..3088cbfdf4 100644 --- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx @@ -15,7 +15,10 @@ limitations under the License. */ import React from 'react'; -import * as sdk from '../../../../index'; + +import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; +import Spinner from "../../../../components/views/elements/Spinner"; +import DialogButtons from "../../../../components/views/elements/DialogButtons"; import dis from "../../../../dispatcher/dispatcher"; import { _t } from '../../../../languageHandler'; @@ -23,7 +26,6 @@ import SettingsStore from "../../../../settings/SettingsStore"; import EventIndexPeg from "../../../../indexing/EventIndexPeg"; import { Action } from "../../../../dispatcher/actions"; import { SettingLevel } from "../../../../settings/SettingLevel"; - interface IProps { onFinished: (success: boolean) => void; } @@ -55,10 +57,6 @@ export default class DisableEventIndexDialog extends React.Component {_t("If disabled, messages from encrypted rooms won't appear in search results.")} diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index c5c8022346..8a11ff4b1b 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -134,8 +134,9 @@ export default class ManageEventIndexDialog extends React.Component { - Modal.createTrackedDialogAsync("Disable message search", "Disable message search", - import("./DisableEventIndexDialog"), + const DisableEventIndexDialog = (await import("./DisableEventIndexDialog")).default; + Modal.createTrackedDialog("Disable message search", "Disable message search", + DisableEventIndexDialog, null, null, /* priority = */ false, /* static = */ true, ); }; diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index e0eed5b430..a97222b5e4 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import * as sdk from '../../../index'; From 8bbd91547d6fbbcb1aba8f30e067ded32ce83315 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 10:59:34 +0200 Subject: [PATCH 057/142] Convert ActionButton to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../{ActionButton.js => ActionButton.tsx} | 51 +++++++++++-------- 1 file changed, 29 insertions(+), 22 deletions(-) rename src/components/views/elements/{ActionButton.js => ActionButton.tsx} (75%) diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.tsx similarity index 75% rename from src/components/views/elements/ActionButton.js rename to src/components/views/elements/ActionButton.tsx index 9c9e9663e7..f776174722 100644 --- a/src/components/views/elements/ActionButton.js +++ b/src/components/views/elements/ActionButton.tsx @@ -15,49 +15,56 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import AccessibleButton from './AccessibleButton'; import dis from '../../../dispatcher/dispatcher'; import * as sdk from '../../../index'; import Analytics from '../../../Analytics'; import { replaceableComponent } from "../../../utils/replaceableComponent"; -@replaceableComponent("views.elements.ActionButton") -export default class ActionButton extends React.Component { - static propTypes = { - size: PropTypes.string, - tooltip: PropTypes.bool, - action: PropTypes.string.isRequired, - mouseOverAction: PropTypes.string, - label: PropTypes.string.isRequired, - iconPath: PropTypes.string, - className: PropTypes.string, - children: PropTypes.node, - }; +interface IProps { + size?: string; + tooltip?: boolean; + action: string; + mouseOverAction?: string; + label: string; + iconPath?: string; + className?: string; + children?: JSX.Element; +} +interface IState { + showTooltip: boolean; +} + +@replaceableComponent("views.elements.ActionButton") +export default class ActionButton extends React.Component { static defaultProps = { size: "25", tooltip: false, }; - state = { - showTooltip: false, - }; + constructor(props: IProps) { + super(props); - _onClick = (ev) => { + this.state = { + showTooltip: false, + }; + } + + private onClick = (ev: React.MouseEvent): void => { ev.stopPropagation(); Analytics.trackEvent('Action Button', 'click', this.props.action); dis.dispatch({ action: this.props.action }); }; - _onMouseEnter = () => { + private onMouseEnter = (): void => { if (this.props.tooltip) this.setState({ showTooltip: true }); if (this.props.mouseOverAction) { dis.dispatch({ action: this.props.mouseOverAction }); } }; - _onMouseLeave = () => { + private onMouseLeave = (): void => { this.setState({ showTooltip: false }); }; @@ -80,9 +87,9 @@ export default class ActionButton extends React.Component { return ( { icon } From 28871ee07d608e26c799a7f723b553dda350b987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 11:04:29 +0200 Subject: [PATCH 058/142] Convert AddressSelector to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...AddressSelector.js => AddressSelector.tsx} | 80 ++++++++++--------- 1 file changed, 43 insertions(+), 37 deletions(-) rename src/components/views/elements/{AddressSelector.js => AddressSelector.tsx} (70%) diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.tsx similarity index 70% rename from src/components/views/elements/AddressSelector.js rename to src/components/views/elements/AddressSelector.tsx index b7c9124438..c55f6f22d2 100644 --- a/src/components/views/elements/AddressSelector.js +++ b/src/components/views/elements/AddressSelector.tsx @@ -15,30 +15,36 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { createRef } from 'react'; import * as sdk from '../../../index'; import classNames from 'classnames'; -import { UserAddressType } from '../../../UserAddress'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +interface IProps { + onSelected: (index: number) => void; + + // List of the addresses to display + addressList; // FIXME: UserAddressType should be an interface + // Whether to show the address on the address tiles + showAddress?: boolean; + truncateAt: number; + selected?: number; + + // Element to put as a header on top of the list + header?: JSX.Element; +} + +interface IState { + selected: number; + hover: boolean; +} + @replaceableComponent("views.elements.AddressSelector") -export default class AddressSelector extends React.Component { - static propTypes = { - onSelected: PropTypes.func.isRequired, +export default class AddressSelector extends React.Component { + private scrollElement = createRef(); + private addressListElement = createRef(); - // List of the addresses to display - addressList: PropTypes.arrayOf(UserAddressType).isRequired, - // Whether to show the address on the address tiles - showAddress: PropTypes.bool, - truncateAt: PropTypes.number.isRequired, - selected: PropTypes.number, - - // Element to put as a header on top of the list - header: PropTypes.node, - }; - - constructor(props) { + constructor(props: IProps) { super(props); this.state = { @@ -48,10 +54,10 @@ export default class AddressSelector extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(props) { // eslint-disable-line camelcase + UNSAFE_componentWillReceiveProps(props: IProps) { // eslint-disable-line // Make sure the selected item isn't outside the list bounds const selected = this.state.selected; - const maxSelected = this._maxSelected(props.addressList); + const maxSelected = this.maxSelected(props.addressList); if (selected > maxSelected) { this.setState({ selected: maxSelected }); } @@ -60,13 +66,13 @@ export default class AddressSelector extends React.Component { componentDidUpdate() { // As the user scrolls with the arrow keys keep the selected item // at the top of the window. - if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) { - const elementHeight = this.addressListElement.getBoundingClientRect().height; - this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight; + if (this.scrollElement.current && this.props.addressList.length > 0 && !this.state.hover) { + const elementHeight = this.addressListElement.current.getBoundingClientRect().height; + this.scrollElement.current.scrollTop = (this.state.selected * elementHeight) - elementHeight; } } - moveSelectionTop = () => { + public moveSelectionTop = (): void => { if (this.state.selected > 0) { this.setState({ selected: 0, @@ -75,7 +81,7 @@ export default class AddressSelector extends React.Component { } }; - moveSelectionUp = () => { + public moveSelectionUp = (): void => { if (this.state.selected > 0) { this.setState({ selected: this.state.selected - 1, @@ -84,8 +90,8 @@ export default class AddressSelector extends React.Component { } }; - moveSelectionDown = () => { - if (this.state.selected < this._maxSelected(this.props.addressList)) { + public moveSelectionDown = (): void => { + if (this.state.selected < this.maxSelected(this.props.addressList)) { this.setState({ selected: this.state.selected + 1, hover: false, @@ -93,26 +99,26 @@ export default class AddressSelector extends React.Component { } }; - chooseSelection = () => { + public chooseSelection = (): void => { this.selectAddress(this.state.selected); }; - onClick = index => { + private onClick = (index: number): void => { this.selectAddress(index); }; - onMouseEnter = index => { + private onMouseEnter = (index: number): void => { this.setState({ selected: index, hover: true, }); }; - onMouseLeave = () => { + private onMouseLeave = (): void => { this.setState({ hover: false }); }; - selectAddress = index => { + private selectAddress = (index: number): void => { // Only try to select an address if one exists if (this.props.addressList.length !== 0) { this.props.onSelected(index); @@ -120,9 +126,9 @@ export default class AddressSelector extends React.Component { } }; - createAddressListTiles() { + private createAddressListTiles(): JSX.Element[] { const AddressTile = sdk.getComponent("elements.AddressTile"); - const maxSelected = this._maxSelected(this.props.addressList); + const maxSelected = this.maxSelected(this.props.addressList); const addressList = []; // Only create the address elements if there are address @@ -143,7 +149,7 @@ export default class AddressSelector extends React.Component { onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address} - ref={(ref) => { this.addressListElement = ref; }} + ref={this.addressListElement} > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize; return maxSelected; @@ -172,7 +178,7 @@ export default class AddressSelector extends React.Component { }); return ( -
{this.scrollElement = ref;}}> +
{ this.props.header } { this.createAddressListTiles() }
From 156901ce62aaf7a836248060919c42c02b7a1d5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 11:19:29 +0200 Subject: [PATCH 059/142] Convert AddressTile to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../{AddressTile.js => AddressTile.tsx} | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) rename src/components/views/elements/{AddressTile.js => AddressTile.tsx} (89%) diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.tsx similarity index 89% rename from src/components/views/elements/AddressTile.js rename to src/components/views/elements/AddressTile.tsx index ca85d73a11..9f147b6bd6 100644 --- a/src/components/views/elements/AddressTile.js +++ b/src/components/views/elements/AddressTile.tsx @@ -16,23 +16,22 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import * as sdk from "../../../index"; import { _t } from '../../../languageHandler'; -import { UserAddressType } from '../../../UserAddress'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromMxc } from "../../../customisations/Media"; -@replaceableComponent("views.elements.AddressTile") -export default class AddressTile extends React.Component { - static propTypes = { - address: UserAddressType.isRequired, - canDismiss: PropTypes.bool, - onDismissed: PropTypes.func, - justified: PropTypes.bool, - }; +interface IProps { + address; // FIXME: UserAddressType should be an interface + canDismiss?: boolean; + onDismissed?: () => void; + justified?: boolean; + showAddress?: boolean; +} +@replaceableComponent("views.elements.AddressTile") +export default class AddressTile extends React.Component { static defaultProps = { canDismiss: false, onDismissed: function() {}, // NOP @@ -70,9 +69,10 @@ export default class AddressTile extends React.Component { info = (
{ name }
- { this.props.showAddress ? -
{ address.address }
: -
+ { + this.props.showAddress + ?
{ address.address }
+ :
}
); From a747bbbae7b753fa379935370db6235e05a5608b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 11:26:33 +0200 Subject: [PATCH 060/142] Convert AddressPickerDialog to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...ickerDialog.js => AddressPickerDialog.tsx} | 215 +++++++++--------- 1 file changed, 112 insertions(+), 103 deletions(-) rename src/components/views/dialogs/{AddressPickerDialog.js => AddressPickerDialog.tsx} (80%) diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.tsx similarity index 80% rename from src/components/views/dialogs/AddressPickerDialog.js rename to src/components/views/dialogs/AddressPickerDialog.tsx index 09714e24e3..1802f8ced2 100644 --- a/src/components/views/dialogs/AddressPickerDialog.js +++ b/src/components/views/dialogs/AddressPickerDialog.tsx @@ -18,7 +18,6 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { sleep } from "matrix-js-sdk/src/utils"; import { _t, _td } from '../../../languageHandler'; @@ -34,6 +33,7 @@ import { abbreviateUrl } from '../../../utils/UrlUtils'; import { Key } from "../../../Keyboard"; import { Action } from "../../../dispatcher/actions"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import AddressSelector from '../elements/AddressSelector'; const TRUNCATE_QUERY_LIST = 40; const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200; @@ -44,27 +44,54 @@ const addressTypeName = { 'email': _td("email address"), }; +interface IProps { + title: string; + description?: JSX.Element; + // Extra node inserted after picker input, dropdown and errors + extraNode?: JSX.Element; + value?: string; + placeholder?: ((validAddressTypes: any) => string) | string; + roomId?: string; + button?: string; + focus?: boolean; + validAddressTypes?; // FIXME: UserAddressType should be an interface + onFinished: (success: boolean, list?) => void; // FIXME: UserAddressType should be an interface + groupId?: string; + // The type of entity to search for. Default: 'user'. + pickerType?: 'user' | 'room'; + // Whether the current user should be included in the addresses returned. Only + // applicable when pickerType is `user`. Default: false. + includeSelf?: boolean; +} + +interface IState { + // Whether to show an error message because of an invalid address + invalidAddressError: boolean; + // List of UserAddressType objects representing + // the list of addresses we're going to invite + selectedList; // FIXME: UserAddressType should be an interface + // Whether a search is ongoing + busy: boolean; + // An error message generated during the user directory search + searchError: string; + // Whether the server supports the user_directory API + serverSupportsUserDirectory: boolean; + // The query being searched for + query: string; + // List of UserAddressType objects representing the set of + // auto-completion results for the current search query. + suggestedList; // FIXME: UserAddressType should be an interface + // List of address types initialised from props, but may change while the + // dialog is open and represents the supported list of address types at this time. + validAddressTypes; +} + @replaceableComponent("views.dialogs.AddressPickerDialog") -export default class AddressPickerDialog extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - description: PropTypes.node, - // Extra node inserted after picker input, dropdown and errors - extraNode: PropTypes.node, - value: PropTypes.string, - placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - roomId: PropTypes.string, - button: PropTypes.string, - focus: PropTypes.bool, - validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)), - onFinished: PropTypes.func.isRequired, - groupId: PropTypes.string, - // The type of entity to search for. Default: 'user'. - pickerType: PropTypes.oneOf(['user', 'room']), - // Whether the current user should be included in the addresses returned. Only - // applicable when pickerType is `user`. Default: false. - includeSelf: PropTypes.bool, - }; +export default class AddressPickerDialog extends React.Component { + private textinput = createRef(); + private addressSelector = createRef(); + private queryChangedDebouncer: NodeJS.Timeout; + private cancelThreepidLookup: () => void; static defaultProps = { value: "", @@ -74,11 +101,9 @@ export default class AddressPickerDialog extends React.Component { includeSelf: false, }; - constructor(props) { + constructor(props: IProps) { super(props); - this._textinput = createRef(); - let validAddressTypes = this.props.validAddressTypes; // Remove email from validAddressTypes if no IS is configured. It may be added at a later stage by the user if (!MatrixClientPeg.get().getIdentityServerUrl() && validAddressTypes.includes("email")) { @@ -86,24 +111,13 @@ export default class AddressPickerDialog extends React.Component { } this.state = { - // Whether to show an error message because of an invalid address invalidAddressError: false, - // List of UserAddressType objects representing - // the list of addresses we're going to invite selectedList: [], - // Whether a search is ongoing busy: false, - // An error message generated during the user directory search searchError: null, - // Whether the server supports the user_directory API serverSupportsUserDirectory: true, - // The query being searched for query: "", - // List of UserAddressType objects representing the set of - // auto-completion results for the current search query. suggestedList: [], - // List of address types initialised from props, but may change while the - // dialog is open and represents the supported list of address types at this time. validAddressTypes, }; } @@ -111,11 +125,11 @@ export default class AddressPickerDialog extends React.Component { componentDidMount() { if (this.props.focus) { // Set the cursor at the end of the text input - this._textinput.current.value = this.props.value; + this.textinput.current.value = this.props.value; } } - getPlaceholder() { + private getPlaceholder(): string { const { placeholder } = this.props; if (typeof placeholder === "string") { return placeholder; @@ -124,23 +138,23 @@ export default class AddressPickerDialog extends React.Component { return placeholder(this.state.validAddressTypes); } - onButtonClick = () => { + private onButtonClick = (): void => { let selectedList = this.state.selectedList.slice(); // Check the text input field to see if user has an unconverted address // If there is and it's valid add it to the local selectedList - if (this._textinput.current.value !== '') { - selectedList = this._addAddressesToList([this._textinput.current.value]); + if (this.textinput.current.value !== '') { + selectedList = this.addAddressesToList([this.textinput.current.value]); if (selectedList === null) return; } this.props.onFinished(true, selectedList); }; - onCancel = () => { + private onCancel = (): void => { this.props.onFinished(false); }; - onKeyDown = e => { - const textInput = this._textinput.current ? this._textinput.current.value : undefined; + private onKeyDown = (e: React.KeyboardEvent): void => { + const textInput = this.textinput.current ? this.textinput.current.value : undefined; if (e.key === Key.ESCAPE) { e.stopPropagation(); @@ -149,15 +163,15 @@ export default class AddressPickerDialog extends React.Component { } else if (e.key === Key.ARROW_UP) { e.stopPropagation(); e.preventDefault(); - if (this.addressSelector) this.addressSelector.moveSelectionUp(); + if (this.addressSelector.current) this.addressSelector.current.moveSelectionUp(); } else if (e.key === Key.ARROW_DOWN) { e.stopPropagation(); e.preventDefault(); - if (this.addressSelector) this.addressSelector.moveSelectionDown(); + if (this.addressSelector.current) this.addressSelector.current.moveSelectionDown(); } else if (this.state.suggestedList.length > 0 && [Key.COMMA, Key.ENTER, Key.TAB].includes(e.key)) { e.stopPropagation(); e.preventDefault(); - if (this.addressSelector) this.addressSelector.chooseSelection(); + if (this.addressSelector.current) this.addressSelector.current.chooseSelection(); } else if (textInput.length === 0 && this.state.selectedList.length && e.key === Key.BACKSPACE) { e.stopPropagation(); e.preventDefault(); @@ -169,17 +183,17 @@ export default class AddressPickerDialog extends React.Component { // if there's nothing in the input box, submit the form this.onButtonClick(); } else { - this._addAddressesToList([textInput]); + this.addAddressesToList([textInput]); } } else if (textInput && (e.key === Key.COMMA || e.key === Key.TAB)) { e.stopPropagation(); e.preventDefault(); - this._addAddressesToList([textInput]); + this.addAddressesToList([textInput]); } }; - onQueryChanged = ev => { - const query = ev.target.value; + private onQueryChanged = (ev: React.ChangeEvent): void => { + const query = (ev.target as HTMLTextAreaElement).value; if (this.queryChangedDebouncer) { clearTimeout(this.queryChangedDebouncer); } @@ -188,17 +202,17 @@ export default class AddressPickerDialog extends React.Component { this.queryChangedDebouncer = setTimeout(() => { if (this.props.pickerType === 'user') { if (this.props.groupId) { - this._doNaiveGroupSearch(query); + this.doNaiveGroupSearch(query); } else if (this.state.serverSupportsUserDirectory) { - this._doUserDirectorySearch(query); + this.doUserDirectorySearch(query); } else { - this._doLocalSearch(query); + this.doLocalSearch(query); } } else if (this.props.pickerType === 'room') { if (this.props.groupId) { - this._doNaiveGroupRoomSearch(query); + this.doNaiveGroupRoomSearch(query); } else { - this._doRoomSearch(query); + this.doRoomSearch(query); } } else { console.error('Unknown pickerType', this.props.pickerType); @@ -213,7 +227,7 @@ export default class AddressPickerDialog extends React.Component { } }; - onDismissed = index => () => { + private onDismissed = (index: number) => () => { const selectedList = this.state.selectedList.slice(); selectedList.splice(index, 1); this.setState({ @@ -221,25 +235,21 @@ export default class AddressPickerDialog extends React.Component { suggestedList: [], query: "", }); - if (this._cancelThreepidLookup) this._cancelThreepidLookup(); + if (this.cancelThreepidLookup) this.cancelThreepidLookup(); }; - onClick = index => () => { - this.onSelected(index); - }; - - onSelected = index => { + private onSelected = (index: number): void => { const selectedList = this.state.selectedList.slice(); - selectedList.push(this._getFilteredSuggestions()[index]); + selectedList.push(this.getFilteredSuggestions()[index]); this.setState({ selectedList, suggestedList: [], query: "", }); - if (this._cancelThreepidLookup) this._cancelThreepidLookup(); + if (this.cancelThreepidLookup) this.cancelThreepidLookup(); }; - _doNaiveGroupSearch(query) { + private doNaiveGroupSearch(query: string): void { const lowerCaseQuery = query.toLowerCase(); this.setState({ busy: true, @@ -260,7 +270,7 @@ export default class AddressPickerDialog extends React.Component { display_name: u.displayname, }); }); - this._processResults(results, query); + this.processResults(results, query); }).catch((err) => { console.error('Error whilst searching group rooms: ', err); this.setState({ @@ -273,7 +283,7 @@ export default class AddressPickerDialog extends React.Component { }); } - _doNaiveGroupRoomSearch(query) { + private doNaiveGroupRoomSearch(query: string): void { const lowerCaseQuery = query.toLowerCase(); const results = []; GroupStore.getGroupRooms(this.props.groupId).forEach((r) => { @@ -289,13 +299,13 @@ export default class AddressPickerDialog extends React.Component { name: r.name || r.canonical_alias, }); }); - this._processResults(results, query); + this.processResults(results, query); this.setState({ busy: false, }); } - _doRoomSearch(query) { + private doRoomSearch(query: string): void { const lowerCaseQuery = query.toLowerCase(); const rooms = MatrixClientPeg.get().getRooms(); const results = []; @@ -346,13 +356,13 @@ export default class AddressPickerDialog extends React.Component { return a.rank - b.rank; }); - this._processResults(sortedResults, query); + this.processResults(sortedResults, query); this.setState({ busy: false, }); } - _doUserDirectorySearch(query) { + private doUserDirectorySearch(query: string): void { this.setState({ busy: true, query, @@ -366,7 +376,7 @@ export default class AddressPickerDialog extends React.Component { if (this.state.query !== query) { return; } - this._processResults(resp.results, query); + this.processResults(resp.results, query); }).catch((err) => { console.error('Error whilst searching user directory: ', err); this.setState({ @@ -377,7 +387,7 @@ export default class AddressPickerDialog extends React.Component { serverSupportsUserDirectory: false, }); // Do a local search immediately - this._doLocalSearch(query); + this.doLocalSearch(query); } }).then(() => { this.setState({ @@ -386,7 +396,7 @@ export default class AddressPickerDialog extends React.Component { }); } - _doLocalSearch(query) { + private doLocalSearch(query: string): void { this.setState({ query, searchError: null, @@ -407,10 +417,10 @@ export default class AddressPickerDialog extends React.Component { avatar_url: user.avatarUrl, }); }); - this._processResults(results, query); + this.processResults(results, query); } - _processResults(results, query) { + private processResults(results, query: string): void { const suggestedList = []; results.forEach((result) => { if (result.room_id) { @@ -465,20 +475,20 @@ export default class AddressPickerDialog extends React.Component { address: query, isKnown: false, }); - if (this._cancelThreepidLookup) this._cancelThreepidLookup(); + if (this.cancelThreepidLookup) this.cancelThreepidLookup(); if (addrType === 'email') { - this._lookupThreepid(addrType, query); + this.lookupThreepid(addrType, query); } } this.setState({ suggestedList, invalidAddressError: false, }, () => { - if (this.addressSelector) this.addressSelector.moveSelectionTop(); + if (this.addressSelector.current) this.addressSelector.current.moveSelectionTop(); }); } - _addAddressesToList(addressTexts) { + private addAddressesToList(addressTexts): void { const selectedList = this.state.selectedList.slice(); let hasError = false; @@ -518,17 +528,17 @@ export default class AddressPickerDialog extends React.Component { query: "", invalidAddressError: hasError ? true : this.state.invalidAddressError, }); - if (this._cancelThreepidLookup) this._cancelThreepidLookup(); + if (this.cancelThreepidLookup) this.cancelThreepidLookup(); return hasError ? null : selectedList; } - async _lookupThreepid(medium, address) { + private async lookupThreepid(medium, address): Promise { let cancelled = false; // Note that we can't safely remove this after we're done // because we don't know that it's the same one, so we just // leave it: it's replacing the old one each time so it's // not like they leak. - this._cancelThreepidLookup = function() { + this.cancelThreepidLookup = function() { cancelled = true; }; @@ -570,7 +580,7 @@ export default class AddressPickerDialog extends React.Component { } } - _getFilteredSuggestions() { + private getFilteredSuggestions() { // FIXME: UserAddressType should be an interface // map addressType => set of addresses to avoid O(n*m) operation const selectedAddresses = {}; this.state.selectedList.forEach(({ address, addressType }) => { @@ -584,15 +594,15 @@ export default class AddressPickerDialog extends React.Component { }); } - _onPaste = e => { + private onPaste = (e: React.ClipboardEvent): void => { // Prevent the text being pasted into the textarea e.preventDefault(); const text = e.clipboardData.getData("text"); // Process it as a list of addresses to add instead - this._addAddressesToList(text.split(/[\s,]+/)); + this.addAddressesToList(text.split(/[\s,]+/)); }; - onUseDefaultIdentityServerClick = e => { + private onUseDefaultIdentityServerClick = (e: React.MouseEvent): void => { e.preventDefault(); // Update the IS in account data. Actually using it may trigger terms. @@ -605,7 +615,7 @@ export default class AddressPickerDialog extends React.Component { this.setState({ validAddressTypes }); }; - onManageSettingsClick = e => { + private onManageSettingsClick = (e: React.MouseEvent): void => { e.preventDefault(); dis.fire(Action.ViewUserSettings); this.onCancel(); @@ -615,12 +625,11 @@ export default class AddressPickerDialog extends React.Component { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const AddressSelector = sdk.getComponent("elements.AddressSelector"); - this.scrollElement = null; let inputLabel; if (this.props.description) { inputLabel =
- +
; } @@ -644,10 +653,10 @@ export default class AddressPickerDialog extends React.Component { query.push( , + autoFocus={this.props.focus} + />, ); const filteredSuggestedList = this.getFilteredSuggestions(); @@ -727,8 +727,12 @@ export default class AddressPickerDialog extends React.Component } return ( - + { inputLabel }
{ query }
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 8ccc485d7c..42b21ec743 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -118,9 +118,7 @@ export default class BaseDialog extends React.Component { let headerImage; if (this.props.headerImage) { - headerImage = ; + headerImage = ; } return ( diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx index 917004dbc7..34218a3399 100644 --- a/src/components/views/dialogs/BetaFeedbackDialog.tsx +++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx @@ -71,13 +71,16 @@ const BetaFeedbackDialog: React.FC = ({ featureId, onFinished }) => {   { _t("Your platform and username will be noted to help us use your feedback as much as we can.") } - { - onFinished(false); - defaultDispatcher.dispatch({ + { + onFinished(false); + defaultDispatcher.dispatch({ action: Action.ViewUserSettings, initialTabId: UserTab.Labs, - }); - }}> + }); + }} + > { _t("To leave the beta, visit your settings.") }
diff --git a/src/components/views/dialogs/BugReportDialog.tsx b/src/components/views/dialogs/BugReportDialog.tsx index 64e984fe20..3df05dac6e 100644 --- a/src/components/views/dialogs/BugReportDialog.tsx +++ b/src/components/views/dialogs/BugReportDialog.tsx @@ -188,7 +188,9 @@ export default class BugReportDialog extends React.Component { } return ( - diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx index 73fd4def25..6a8773ce45 100644 --- a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx +++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx @@ -205,9 +205,12 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent< people.push(( { _t("Show more") } + > + { _t("Show more") } + )); } } @@ -240,10 +243,13 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent< { peopleIntro } { people } { buttonText } + > + { buttonText } +
diff --git a/src/components/views/dialogs/ConfirmRedactDialog.tsx b/src/components/views/dialogs/ConfirmRedactDialog.tsx index a2f2b10144..b346d2d44c 100644 --- a/src/components/views/dialogs/ConfirmRedactDialog.tsx +++ b/src/components/views/dialogs/ConfirmRedactDialog.tsx @@ -37,8 +37,8 @@ export default class ConfirmRedactDialog extends React.Component { "Note that if you delete a room name or topic change, it could undo the change.")} placeholder={_t("Reason (optional)")} focus - button={_t("Remove")}> - + button={_t("Remove")} + /> ); } } diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx index cbef474c69..7099556ac6 100644 --- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx @@ -104,7 +104,9 @@ export default class ConfirmUserActionDialog extends React.Component { } return ( - diff --git a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx index 392ab9edad..ccac45fbcc 100644 --- a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx +++ b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx @@ -204,8 +204,10 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
{ } return ( -
@@ -133,8 +135,11 @@ export default class CreateGroupDialog extends React.Component {
- { title = _t("Create a room in %(communityName)s", { communityName: name }); } return ( - diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx index 134c4ab79e..d03b668cd9 100644 --- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx +++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx @@ -72,7 +72,7 @@ const CryptoStoreTooNewDialog: React.FC = (props: IProps) => { hasCancel={false} onPrimaryButtonClick={props.onFinished} > - diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index 61cda796ee..8ae9d0654f 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/src/components/views/dialogs/DevtoolsDialog.tsx @@ -182,14 +182,23 @@ export class SendCustomEvent extends GenericEditor - +
{ !this.state.message && } { showTglFlip &&
- - +
{ !this.state.message && } { !this.state.message &&
- - + key={this.props.children[0] ? this.props.children[0].key : ''} + /> ; + }} + />; } return
@@ -594,7 +625,9 @@ class AccountDataExplorer extends React.PureComponent; + }} + forceMode={true} + />; } return
@@ -631,7 +664,9 @@ class AccountDataExplorer extends React.PureComponent
-
@@ -1040,7 +1080,9 @@ class SettingsExplorer extends React.PureComponent this.onViewClick(e, i)}> { i } - this.onEditClick(e, i)} + this.onEditClick(e, i)} className='mx_DevTools_SettingsExplorer_edit' > ✏ @@ -1104,18 +1146,26 @@ class SettingsExplorer extends React.PureComponent
diff --git a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx index 1eabb68081..a0e6046d71 100644 --- a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx +++ b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx @@ -144,8 +144,10 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent
= ({ room, event, matrixClient: cli, onFinish className = "mx_ForwardList_sending"; disabled = true; title = _t("Sending"); - icon =
; + icon =
; } else if (sendState === SendState.Sent) { className = "mx_ForwardList_sent"; disabled = true; title = _t("Sent"); - icon =
; + icon =
; } else { className = "mx_ForwardList_sendFailed"; disabled = true; @@ -204,10 +204,16 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr function overflowTile(overflowCount, totalCount) { const text = _t("and %(count)s others...", { count: overflowCount }); return ( - - } name={text} presenceState="online" suppressOnHover={true} - onClick={() => setTruncateAt(totalCount)} /> + + } + name={text} + presenceState="online" + suppressOnHover={true} + onClick={() => setTruncateAt(totalCount)} + /> ); } diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js index 963d98ef3f..a5c9f2107f 100644 --- a/src/components/views/dialogs/IncomingSasDialog.js +++ b/src/components/views/dialogs/IncomingSasDialog.js @@ -133,18 +133,23 @@ export default class IncomingSasDialog extends React.Component { ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48) : null; profile =
-

{ oppProfile.displayname }

; } else if (this.state.opponentProfileError) { profile =
-

{ this.props.verifier.userId }

; diff --git a/src/components/views/dialogs/InfoDialog.js b/src/components/views/dialogs/InfoDialog.js index 8207d334d3..ff8c3645ca 100644 --- a/src/components/views/dialogs/InfoDialog.js +++ b/src/components/views/dialogs/InfoDialog.js @@ -63,8 +63,7 @@ export default class InfoDialog extends React.Component { { this.props.button !== false && - } + /> } ); } diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 46f140fd39..609829b833 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -196,7 +196,9 @@ class DMUserTile extends React.PureComponent { ? + width={avatarSize} + height={avatarSize} + /> : { className='mx_InviteDialog_userTile_remove' onClick={this.onRemove} > - {_t('Remove')} ); @@ -297,7 +302,9 @@ class DMRoomTile extends React.PureComponent { const avatar = (this.props.member as ThreepidMember).isEmail ? + width={avatarSize} + height={avatarSize} + /> : + width={14} + height={14} /> { " " + _t("Invited people will be able to read old messages.") }

; } @@ -1534,14 +1542,18 @@ export default class InviteDialog extends React.PureComponent; } else { - dialPadField = { dialPadField } -
; tabs.push(new Tab(TabId.DialPad, _td("Dial pad"), 'mx_InviteDialog_dialPadIcon', dialPadSection)); dialogContent = - { consultConnectSection } ; diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js index b7037d1f4f..eeeadbbfe5 100644 --- a/src/components/views/dialogs/SessionRestoreErrorDialog.js +++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js @@ -85,7 +85,9 @@ export default class SessionRestoreErrorDialog extends React.Component { } return ( - { _t("Forgotten or lost all recovery methods? Reset all", null, { a: (sub) => { sub }, }) }
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js index e8bd8af01c..2b272a3b88 100644 --- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js +++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js @@ -399,7 +399,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent { let keyStatus; if (this.state.recoveryKey.length === 0) { - keyStatus =
; + keyStatus =
; } else if (this.state.recoveryKeyValid) { keyStatus =
{ "\uD83D\uDC4D " }{ _t("This looks like a valid Security Key!") } diff --git a/src/components/views/elements/AddressTile.tsx b/src/components/views/elements/AddressTile.tsx index cdeb7cacd6..52c0d84ac2 100644 --- a/src/components/views/elements/AddressTile.tsx +++ b/src/components/views/elements/AddressTile.tsx @@ -122,7 +122,7 @@ export default class AddressTile extends React.Component { let dismiss; if (this.props.canDismiss) { dismiss = ( -
+
); diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 82d0aa4976..20ecf08a5f 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -51,7 +51,8 @@ export class ExistingSource extends React.Component + onClick={this.onClick} + > { const avatar = ( ); @@ -403,7 +404,7 @@ export default class ImageView extends React.Component { // an empty div here, since the panel uses space-between // and we want the same placement of elements info = ( -
+
); } @@ -427,15 +428,15 @@ export default class ImageView extends React.Component { - + onClick={this.onZoomOutClick} + /> ); zoomInButton = ( - + onClick={this.onZoomInClick} + /> ); } @@ -457,24 +458,24 @@ export default class ImageView extends React.Component { - + onClick={this.onRotateCounterClockwiseClick} + /> - + onClick={this.onRotateClockwiseClick} + /> - + onClick={this.onDownloadClick} + /> { contextMenuButton } - + onClick={this.props.onFinished} + /> { this.renderContextMenu() }
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx index 47bcd845ba..22ff4bf4b3 100644 --- a/src/components/views/elements/MiniAvatarUploader.tsx +++ b/src/components/views/elements/MiniAvatarUploader.tsx @@ -92,7 +92,7 @@ const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAva
{ busy ? : -
} +
}
- diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 9e7d9ca205..080816df14 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -428,7 +428,9 @@ export default class RoomList extends React.PureComponent { groupId={g.groupId} groupName={g.name} groupAvatarUrl={g.avatarUrl} - width={32} height={32} resizeMethod='crop' + width={32} + height={32} + resizeMethod='crop' /> ); const openGroup = () => { diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js index 3cd34b1966..b8a4315e2d 100644 --- a/src/components/views/rooms/RoomPreviewBar.js +++ b/src/components/views/rooms/RoomPreviewBar.js @@ -536,8 +536,10 @@ export default class RoomPreviewBar extends React.Component { "If you think you're seeing this message in error, please " + "submit a bug report.", { errcode: this.props.error.errcode }, - { issueLink: label => { label } }, + { issueLink: label => { label } }, ), ]; break; diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js index 768a456b35..a2b5566e39 100644 --- a/src/components/views/rooms/SimpleRoomHeader.js +++ b/src/components/views/rooms/SimpleRoomHeader.js @@ -35,13 +35,15 @@ export default class SimpleRoomHeader extends React.Component { let icon; if (this.props.icon) { icon = ; } return ( -
+
{ icon } { this.props.title } diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index c0e6826ba5..6649948331 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -403,8 +403,7 @@ export default class Stickerpicker extends React.PureComponent { onClick={this._onHideStickersClick} active={this.state.showStickers.toString()} title={_t("Hide Stickers")} - > - ; + />; const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu'); stickerPicker = - ; + />; } return { stickersButton } diff --git a/src/components/views/rooms/TopUnreadMessagesBar.js b/src/components/views/rooms/TopUnreadMessagesBar.js index 0f632e7128..d2a3e3a303 100644 --- a/src/components/views/rooms/TopUnreadMessagesBar.js +++ b/src/components/views/rooms/TopUnreadMessagesBar.js @@ -32,14 +32,16 @@ export default class TopUnreadMessagesBar extends React.Component { render() { return (
- - - + - + onClick={this.props.onCloseClick} + />
); } diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx index 7228e4b939..5dd5ed9ba1 100644 --- a/src/components/views/settings/BridgeTile.tsx +++ b/src/components/views/settings/BridgeTile.tsx @@ -124,7 +124,7 @@ export default class BridgeTile extends React.PureComponent { url={avatarUrl} />; } else { - networkIcon =
; + networkIcon =
; } let networkItem = null; if (network) { diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js index 36d5d4aa0c..c3a1544cdc 100644 --- a/src/components/views/settings/ChangeAvatar.js +++ b/src/components/views/settings/ChangeAvatar.js @@ -148,13 +148,22 @@ export default class ChangeAvatar extends React.Component { if (this.props.room && !this.avatarSet) { const RoomAvatar = sdk.getComponent('avatars.RoomAvatar'); avatarImg = ; } else { const BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ? - avatarImg = ; + avatarImg = ; } let uploadSection; diff --git a/src/components/views/settings/EventIndexPanel.tsx b/src/components/views/settings/EventIndexPanel.tsx index de49c2a980..9966e38de8 100644 --- a/src/components/views/settings/EventIndexPanel.tsx +++ b/src/components/views/settings/EventIndexPanel.tsx @@ -178,8 +178,11 @@ export default class EventIndexPanel extends React.Component<{}, IState> { "appear in search results.", ) }
- + { _t("Enable") } { this.state.enabling ? :
} @@ -203,8 +206,10 @@ export default class EventIndexPanel extends React.Component<{}, IState> { brand, }, { - nativeLink: sub => { sub }, }, ) }
@@ -219,8 +224,10 @@ export default class EventIndexPanel extends React.Component<{}, IState> { brand, }, { - desktopLink: sub => { sub }, }, ) }
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js index 02eaaaeea8..d05fca983c 100644 --- a/src/components/views/settings/ProfileSettings.js +++ b/src/components/views/settings/ProfileSettings.js @@ -172,7 +172,8 @@ export default class ProfileSettings extends React.Component { > @@ -181,7 +182,8 @@ export default class ProfileSettings extends React.Component { { _t("Profile") } diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx index fd8abc0dbe..1f488f1e67 100644 --- a/src/components/views/settings/SetIdServer.tsx +++ b/src/components/views/settings/SetIdServer.tsx @@ -426,7 +426,9 @@ export default class SetIdServer extends React.Component { disabled={this.state.busy} forceValidity={this.state.error ? false : null} /> - { _t("Change") } diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js index e2f30192b9..b90fb310e0 100644 --- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js @@ -97,9 +97,12 @@ export default class GeneralRoomSettingsTab extends React.Component {
{ _t("Room Addresses") }
- +
{ _t("Other") }
{ flairSection } diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx index edc0220921..9225bc6b94 100644 --- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx @@ -346,8 +346,11 @@ export default class RolesRoomSettingsTab extends React.Component { let bannedBy = member.events.member.getSender(); // start by falling back to mxid if (sender) bannedBy = sender.name; return ( - ); diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 88bc2046ce..99ae2e52ab 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -133,8 +133,10 @@ export default class SecurityRoomSettingsTab extends React.ComponentLearn more about encryption.", {}, { - a: sub => { sub }, }, ), @@ -424,8 +426,11 @@ export default class SecurityRoomSettingsTab extends React.Component { _t("Once enabled, encryption cannot be disabled.") }
-
{ encryptionSettings } diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index d1c497b351..44873816dc 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -303,9 +303,12 @@ export default class AppearanceUserSettingsTab extends React.Component { _t("Add theme") } + > + { _t("Add theme") } + { messageElement }
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 2a6e8937a3..238d6cca21 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -426,9 +426,13 @@ export default class GeneralUserSettingsTab extends React.Component { const supportsMultiLanguageSpellCheck = plaf.supportsMultiLanguageSpellCheck(); const discoWarning = this.state.requiredPolicyInfo.hasTerms - ? {_t("Warning")} + width="18" + height="18" + alt={_t("Warning")} + /> : null; let accountManagementSection; diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index 33de634611..eaf52e6062 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -134,28 +134,39 @@ export default class HelpUserSettingsTab extends React.Component { _t("Credits") } @@ -254,7 +265,8 @@ export default class HelpUserSettingsTab extends React.Component "Security Disclosure Policy.", {}, { a: sub => { sub }, }, ) } diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js index aace4ca557..fa854fc4d8 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js @@ -86,8 +86,11 @@ export default class LabsUserSettingsTab extends React.Component { 'test out new features and help shape them before they actually launch. ' + 'Learn more.', {}, { 'a': (sub) => { - return { sub }; + return { sub }; }, }) } diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx index 6d2cc1f5db..9d3696c5a9 100644 --- a/src/components/views/spaces/SpaceBasicSettings.tsx +++ b/src/components/views/spaces/SpaceBasicSettings.tsx @@ -57,11 +57,15 @@ export const SpaceAvatar = ({ src={avatar} alt="" /> - { - avatarUploadRef.current.value = ""; - setAvatarDataUrl(undefined); - setAvatar(undefined); - }} kind="link" className="mx_SpaceBasicSettings_avatar_remove"> + { + avatarUploadRef.current.value = ""; + setAvatarDataUrl(undefined); + setAvatar(undefined); + }} + kind="link" + className="mx_SpaceBasicSettings_avatar_remove" + > { _t("Delete") } ; @@ -77,16 +81,21 @@ export const SpaceAvatar = ({ return
{ avatarSection } - { - if (!e.target.files?.length) return; - const file = e.target.files[0]; - setAvatar(file); - const reader = new FileReader(); - reader.onload = (ev) => { - setAvatarDataUrl(ev.target.result as string); - }; - reader.readAsDataURL(file); - }} accept="image/*" /> + { + if (!e.target.files?.length) return; + const file = e.target.files[0]; + setAvatar(file); + const reader = new FileReader(); + reader.onload = (ev) => { + setAvatarDataUrl(ev.target.result as string); + }; + reader.readAsDataURL(file); + }} + accept="image/*" + />
; }; diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 8bdd6e0f55..e53c2f4823 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -665,15 +665,19 @@ export default class CallView extends React.Component { let fullScreenButton; if (this.props.call.type === CallType.Video && !this.props.pipMode) { - fullScreenButton =
; } let expandButton; if (this.props.pipMode) { - expandButton =
; } @@ -685,7 +689,7 @@ export default class CallView extends React.Component { let header: React.ReactNode; if (!this.props.pipMode) { header =
-
+
{ callTypeText } { headerControls }
; diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx index 2af8bd6989..3b4a29b3f9 100644 --- a/src/components/views/voip/DialPad.tsx +++ b/src/components/views/voip/DialPad.tsx @@ -68,13 +68,19 @@ export default class Dialpad extends React.PureComponent { for (let i = 0; i < BUTTONS.length; i++) { const button = BUTTONS[i]; const digitSubtext = BUTTON_LETTERS[i]; - buttonNodes.push(); } if (this.props.hasDial) { - buttonNodes.push(); } diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx index 0bba65e44f..a36fc37dff 100644 --- a/src/components/views/voip/DialPadModal.tsx +++ b/src/components/views/voip/DialPadModal.tsx @@ -81,14 +81,18 @@ export default class DialpadModal extends React.PureComponent { // Only show the backspace button if the field has content let dialPadField; if (this.state.value.length !== 0) { - dialPadField = ; } else { - dialPadField = { const avatarSize = this.props.pipMode ? 76 : 160; return ( -
+
, + , ); const tiles = TestUtils.scryRenderedComponentsWithType( @@ -330,8 +334,12 @@ describe('MessagePanel', function() { it('should show the read-marker that fall in summarised events after the summary', function() { const melsEvents = mkMelsEvents(); const res = TestUtils.renderIntoDocument( - , + , ); const summary = TestUtils.findRenderedDOMComponentWithClass(res, 'mx_EventListSummary'); @@ -348,8 +356,12 @@ describe('MessagePanel', function() { it('should hide the read-marker at the end of summarised events', function() { const melsEvents = mkMelsEventsOnly(); const res = TestUtils.renderIntoDocument( - , + , ); const summary = TestUtils.findRenderedDOMComponentWithClass(res, 'mx_EventListSummary'); @@ -371,7 +383,10 @@ describe('MessagePanel', function() { // first render with the RM in one place let mp = ReactDOM.render( - , parentDiv); @@ -387,7 +402,10 @@ describe('MessagePanel', function() { // now move the RM mp = ReactDOM.render( - , parentDiv); From f99c0fad3ec428e34523e7b3f2daf151d43093f3 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 23 Jul 2021 11:40:34 +0200 Subject: [PATCH 136/142] Make inline events feel less claustrophobic in bubble layout --- res/css/views/rooms/_EventBubbleTile.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index a65afdf0d5..487bb38c49 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -221,6 +221,7 @@ limitations under the License. display: flex; align-items: center; justify-content: center; + padding: 5px 0; .mx_EventTile_avatar { position: static; @@ -287,7 +288,7 @@ limitations under the License. & + .mx_EventListSummary { .mx_EventTile { margin-top: 0; - padding: 0; + padding: 2px 0; } } From 4a4ec596bd90b117df5da5e495a06dc628fd1f0c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 23 Jul 2021 11:27:00 +0100 Subject: [PATCH 137/142] Fix position of the space hierarchy spinner --- res/css/structures/_SpaceRoomView.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 48b565be7f..3119d2fe6e 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -234,6 +234,9 @@ $SpaceRoomViewInnerWidth: 428px; } .mx_SpaceRoomView_landing { + display: flex; + flex-direction: column; + > .mx_BaseAvatar_image, > .mx_BaseAvatar > .mx_BaseAvatar_image { border-radius: 12px; @@ -340,6 +343,7 @@ $SpaceRoomViewInnerWidth: 428px; .mx_SearchBox { margin: 0 0 20px; + flex: 0; } .mx_SpaceFeedbackPrompt { From 2b133deb63db689a373bddabe48125e16233e09a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 23 Jul 2021 12:19:54 +0100 Subject: [PATCH 138/142] fix scroll behaviour to match that of prior to the spinner fix --- res/css/structures/_SpaceRoomView.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 3119d2fe6e..e4832d9430 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -354,6 +354,11 @@ $SpaceRoomViewInnerWidth: 428px; display: none; } } + + .mx_SpaceRoomDirectory_list { + // we don't want this container to get forced into the flexbox layout + display: contents; + } } .mx_SpaceRoomView_privateScope { From 42b213ba8c873041680dd7a1792a59f3fe37b934 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 23 Jul 2021 14:17:26 +0200 Subject: [PATCH 139/142] Fix clipped avatar in room list --- res/css/views/avatars/_BaseAvatar.scss | 1 - res/css/views/rooms/_EventBubbleTile.scss | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss index 65e4493f19..cbddd97e18 100644 --- a/res/css/views/avatars/_BaseAvatar.scss +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -27,7 +27,6 @@ limitations under the License. // https://bugzilla.mozilla.org/show_bug.cgi?id=255139 display: inline-block; user-select: none; - line-height: 1; } .mx_BaseAvatar_initial { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 487bb38c49..8629682693 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -155,13 +155,17 @@ limitations under the License. .mx_EventTile_avatar { position: absolute; top: 0; - line-height: 1; img { box-shadow: 0 0 0 3px $eventbubble-avatar-outline; border-radius: 50%; } } + .mx_BaseAvatar, + .mx_EventTile_avatar { + line-height: 1; + } + &[data-has-reply=true] { > .mx_EventTile_line { flex-direction: column; From 3c1902c26a69c463bcaff95f48a23b6b3d608f34 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 23 Jul 2021 16:09:41 +0100 Subject: [PATCH 140/142] Update matrix-org-eslint-plugin --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5283f5778a..c576148e19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3234,8 +3234,8 @@ eslint-config-google@^0.14.0: integrity sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw== "eslint-plugin-matrix-org@github:matrix-org/eslint-plugin-matrix-org#main": - version "0.3.2" - resolved "https://codeload.github.com/matrix-org/eslint-plugin-matrix-org/tar.gz/8529f1d77863db6327cf1a1a4fa65d06cc26f91b" + version "0.3.3" + resolved "https://codeload.github.com/matrix-org/eslint-plugin-matrix-org/tar.gz/50d6bdf6704dd95016d5f1f824f00cac6eaa64e1" eslint-plugin-react-hooks@^4.2.0: version "4.2.0" From 5f2582395ffcf07d8edf6a384ba2d9db084a666b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 23 Jul 2021 16:21:59 +0100 Subject: [PATCH 141/142] Fix blurhash rounded corners missing regression --- res/css/views/messages/_MImageBody.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index f5d8131e6e..42565a76d0 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -28,7 +28,7 @@ $timelineImageBorderRadius: 4px; justify-content: center; align-items: center; - > canvas { + > div > canvas { border-radius: $timelineImageBorderRadius; } } From 4fe0e216d6417ad15559d57ed9ef1720b8c705be Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 23 Jul 2021 16:22:35 +0100 Subject: [PATCH 142/142] Use div instead of span for mx_MImageBody to not violate spec --- res/css/views/messages/_MImageBody.scss | 4 ---- src/components/views/messages/MImageBody.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 42565a76d0..a748435cd8 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -16,10 +16,6 @@ limitations under the License. $timelineImageBorderRadius: 4px; -.mx_MImageBody { - display: block; -} - .mx_MImageBody_thumbnail { object-fit: contain; border-radius: $timelineImageBorderRadius; diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index c24f014d84..945994d964 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -416,10 +416,10 @@ export default class MImageBody extends React.Component { if (this.state.error !== null) { return ( - +
{ _t("Error decrypting image") } - +
); } @@ -434,10 +434,10 @@ export default class MImageBody extends React.Component { const thumbnail = this.messageContent(contentUrl, thumbUrl, content); const fileBody = this.getFileBody(); - return + return
{ thumbnail } { fileBody } - ; +
; } }