diff --git a/res/css/_components.scss b/res/css/_components.scss index 396a5560a6..f9e3ab1160 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -86,6 +86,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/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 48b565be7f..e4832d9430 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 { @@ -350,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 { 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/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 2678f7b4ad..5321d8ff69 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,56 @@ 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; + } + + .mx_Dropdown_option { + font-size: $font-14px; + line-height: $font-32px; + height: 32px; + min-height: 32px; + + > div { + padding-left: 30px; + position: relative; + + &::before { + content: ""; + position: absolute; + height: 16px; + width: 16px; + left: 6px; + top: 8px; + mask-repeat: no-repeat; + mask-position: center; + background-color: $secondary-fg-color; + } + } + } + + .mx_CreateRoomDialog_dropdown_invite::before { + mask-image: url('$(res)/img/element-icons/lock.svg'); + mask-size: contain; + } + + .mx_CreateRoomDialog_dropdown_public::before { + mask-image: url('$(res)/img/globe.svg'); + mask-size: 12px; + } + + .mx_CreateRoomDialog_dropdown_restricted::before { + mask-image: url('$(res)/img/element-icons/community-members.svg'); + mask-size: contain; + } + } } diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss new file mode 100644 index 0000000000..91df76675a --- /dev/null +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss @@ -0,0 +1,150 @@ +/* +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_info { + 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 { + margin-top: 20px; + + .mx_ManageRestrictedJoinRuleDialog_footer_buttons { + display: flex; + width: max-content; + margin-left: auto; + + .mx_AccessibleButton { + display: inline-block; + + & + .mx_AccessibleButton { + margin-left: 24px; + } + } + } + } +} 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; diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index f5d8131e6e..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; @@ -28,7 +24,7 @@ $timelineImageBorderRadius: 4px; justify-content: center; align-items: center; - > canvas { + > div > canvas { border-radius: $timelineImageBorderRadius; } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index f603042b59..b281c16107 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -38,7 +38,8 @@ limitations under the License. padding-top: 0; } - &:hover { + &:hover, + &.mx_EventTile_selected { &::before { content: ''; position: absolute; @@ -155,12 +156,24 @@ limitations under the License. position: absolute; top: 0; line-height: 1; + z-index: 9; img { box-shadow: 0 0 0 3px $eventbubble-avatar-outline; border-radius: 50%; } } + &.mx_EventTile_noSender { + .mx_EventTile_avatar { + top: -19px; + } + } + + .mx_BaseAvatar, + .mx_EventTile_avatar { + line-height: 1; + } + &[data-has-reply=true] { > .mx_EventTile_line { flex-direction: column; @@ -219,6 +232,8 @@ limitations under the License. display: flex; align-items: center; + justify-content: center; + padding: 5px 0; .mx_EventTile_avatar { position: static; @@ -289,7 +304,7 @@ limitations under the License. & + .mx_EventListSummary { .mx_EventTile { margin-top: 0; - padding: 0; + padding: 2px 0; } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2f06d47877..bda4a15f45 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -132,7 +132,8 @@ $hover-select-border: 4px; } } - &.mx_EventTile_info .mx_EventTile_line { + &.mx_EventTile_info .mx_EventTile_line, + & ~ .mx_EventListSummary .mx_EventTile_avatar ~ .mx_EventTile_line { padding-left: calc($left-gutter + 18px); } diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index ddee81a914..ebb7f99e45 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -26,6 +26,7 @@ $left-gutter: 64px; > .mx_EventTile_avatar { position: absolute; + z-index: 9; } .mx_MessageTimestamp { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 97190807ca..578c0325d2 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -116,6 +116,11 @@ $irc-line-height: $font-18px; .mx_EditMessageComposer_buttons { position: relative; } + + .mx_ReactionsRow { + padding-left: 0; + padding-right: 0; + } } .mx_EventTile_emote { diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss index b3eff7e960..24900ee14b 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.scss +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -34,7 +34,7 @@ limitations under the License. .mx_LinkPreviewWidget_caption { margin-left: 15px; flex: 1 1 auto; - overflow-x: hidden; // cause it to wrap rather than clip + overflow: hidden; // cause it to wrap rather than clip } .mx_LinkPreviewWidget_title { 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/res/img/feather-customised/globe.svg b/res/img/feather-customised/globe.svg deleted file mode 100644 index 8af7dc41dc..0000000000 --- a/res/img/feather-customised/globe.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/Registration.js b/src/Registration.js index 70dcd38454..c59d244149 100644 --- a/src/Registration.js +++ b/src/Registration.js @@ -51,10 +51,15 @@ export async function startAnyRegistrationFlow(options) { description: _t("Use your account or create a new one to continue."), button: _t("Create Account"), extraButtons: [ - , + , ], onFinished: (proceed) => { if (proceed) { diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 9f5ac83a56..b4deb6d8c4 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -34,7 +34,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"; @@ -49,6 +48,7 @@ import { UIFeature } from "./settings/UIFeature"; import { CHAT_EFFECTS } from "./effects"; import CallHandler from "./CallHandler"; import { guessAndSetDMRoom } from "./Rooms"; +import { upgradeRoom } from './utils/RoomUpgrade'; import UploadConfirmDialog from './components/views/dialogs/UploadConfirmDialog'; import ErrorDialog from './components/views/dialogs/ErrorDialog'; import DevtoolsDialog from './components/views/dialogs/DevtoolsDialog'; @@ -277,50 +277,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); - - 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/async-components/views/dialogs/security/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js index 412194ab43..2cef1c0e41 100644 --- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js +++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js @@ -269,7 +269,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
{ _t("Advanced") } - + { _t("Set up with a Security Key") }
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js index aa78d68830..641df4f897 100644 --- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js +++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js @@ -474,7 +474,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { outlined >
- + { _t("Generate a Security Key") }
{ _t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.") }
@@ -493,7 +493,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { outlined >
- + { _t("Enter a Security Phrase") }
{ _t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.") }
@@ -701,7 +701,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent { { this._recoveryKey.encodedPrivateKey }
- diff --git a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js index 0435d81968..dbed9f3968 100644 --- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js +++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js @@ -148,8 +148,12 @@ export default class ExportE2eKeysDialog extends React.Component {
-
@@ -161,8 +165,10 @@ export default class ExportE2eKeysDialog extends React.Component {
-
diff --git a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js index 6017d07047..0936ad696d 100644 --- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js +++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js @@ -174,7 +174,10 @@ export default class ImportE2eKeysDialog extends React.Component {
- ; + submitButton = ; } return ( @@ -616,7 +618,9 @@ export class MsisdnAuthEntry extends React.Component
- diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 87cdbe7512..6aaef29854 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -187,7 +187,8 @@ const BaseAvatar = (props: IProps) => { width: toPx(width), height: toPx(height), }} - title={title} alt={_t("Avatar")} + title={title} + alt={_t("Avatar")} inputRef={inputRef} {...otherProps} /> ); @@ -201,7 +202,8 @@ const BaseAvatar = (props: IProps) => { width: toPx(width), height: toPx(height), }} - title={title} alt="" + title={title} + alt="" ref={inputRef} {...otherProps} /> ); diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 61155e3880..11c24a5981 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/src/components/views/avatars/MemberAvatar.tsx @@ -102,8 +102,12 @@ export default class MemberAvatar extends React.Component { } return ( - + ); } } diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx index a07990c3bb..f285222f7b 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'; @@ -32,11 +34,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; } @@ -129,15 +134,19 @@ export default class RoomAvatar extends React.Component { }; public render() { - const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props; + const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props; const roomName = room ? room.name : oobData.name; // If the room is a DM, we use the other user's ID for the color hash // in order to match the room avatar with their avatar - const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : null; + const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : oobData.roomId; return ( -
-
diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js index f90d9cc005..e05b05116c 100644 --- a/src/components/views/context_menus/StatusMessageContextMenu.js +++ b/src/components/views/context_menus/StatusMessageContextMenu.js @@ -109,8 +109,10 @@ export default class StatusMessageContextMenu extends React.Component { ; } } else { - actionButton = { _t("Set status") } ; @@ -121,12 +123,19 @@ export default class StatusMessageContextMenu extends React.Component { spinner = ; } - const form =
-
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx index b21efdceb9..26d7b640a4 100644 --- a/src/components/views/context_menus/WidgetContextMenu.tsx +++ b/src/components/views/context_menus/WidgetContextMenu.tsx @@ -76,7 +76,8 @@ const WidgetContextMenu: React.FC = ({ onFinished(); }; streamAudioStreamButton = ; } diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 0f78b971eb..3ef86e438d 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 { sleep } from "matrix-js-sdk/src/utils"; import { _t } from '../../../languageHandler'; @@ -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 }) => { @@ -211,10 +209,16 @@ export const AddExistingToSpace: React.FC = ({ 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)} + /> ); } @@ -295,7 +299,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 +348,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/AddressPickerDialog.tsx b/src/components/views/dialogs/AddressPickerDialog.tsx index 1a976918bd..6b239ee570 100644 --- a/src/components/views/dialogs/AddressPickerDialog.tsx +++ b/src/components/views/dialogs/AddressPickerDialog.tsx @@ -665,8 +665,8 @@ export default class AddressPickerDialog extends React.Component onChange={this.onQueryChanged} placeholder={this.getPlaceholder()} defaultValue={this.props.value} - autoFocus={this.props.focus}> - , + 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 {
- { + 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,13 +93,18 @@ 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; const { alias } = this.state; createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1); + } else { + // If we cannot change encryption we pass `true` for safety, the server should automatically do this for us. + opts.encryption = this.state.canChangeEncryption ? this.state.isEncrypted : true; } + if (this.state.topic) { createOpts.topic = this.state.topic; } @@ -95,22 +112,13 @@ export default class CreateRoomDialog extends React.Component { createOpts.creation_content = { 'm.federate': false }; } - if (!this.state.isPublic) { - if (this.state.canChangeEncryption) { - opts.encryption = this.state.isEncrypted; - } else { - // the server should automatically do this for us, but for safety - // we'll demand it too. - opts.encryption = true; - } - } - if (CommunityPrototypeStore.instance.getSelectedCommunityId()) { 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 +180,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 +218,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 +232,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 +308,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/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.tsx similarity index 74% rename from src/components/views/dialogs/InfoDialog.js rename to src/components/views/dialogs/InfoDialog.tsx index 8207d334d3..9c74e08e98 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(); }; @@ -63,8 +62,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/ManageRestrictedJoinRuleDialog.tsx b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx new file mode 100644 index 0000000000..c63fdc4c84 --- /dev/null +++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx @@ -0,0 +1,192 @@ +/* +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)); + }; + + let inviteOnlyWarning; + if (newSelected.size < 1) { + inviteOnlyWarning =
+ { _t("You're removing all spaces. Access will default to invite only") } +
; + } + + return +

+ { _t("Decide which spaces can access this room. " + + "If a space is selected, its members can 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 + } +
+ +
+ { inviteOnlyWarning } +
+ onFinished()}> + { _t("Cancel") } + + onFinished(Array.from(newSelected))}> + { _t("Confirm") } + +
+
+
+
; +}; + +export default ManageRestrictedJoinRuleDialog; + diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.tsx similarity index 66% rename from src/components/views/dialogs/RoomUpgradeDialog.js rename to src/components/views/dialogs/RoomUpgradeDialog.tsx index e48f728383..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 { MatrixClientPeg } from '../../../MatrixClientPeg'; +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 }); - 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"); 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,29 +68,22 @@ 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("Create a new room with the same name, description and avatar") }
  • { _t("Update any local room aliases to point to the new room") }
  • -
  • { _t("Stop users from speaking in the old version of the room, and post a message advising users to move to the new room") }
  • -
  • { _t("Put a link back to the old room at the start of the new room so people can see old messages") }
  • +
  • { _t("Stop users from speaking in the old version of the room, " + + "and post a message advising users to move to the new room") }
  • +
  • { _t("Put a link back to the old room at the start of the new room " + + "so people can see old messages") }
  • { buttons }
    diff --git a/src/components/views/dialogs/RoomUpgradeWarningDialog.js b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx similarity index 64% rename from src/components/views/dialogs/RoomUpgradeWarningDialog.js rename to src/components/views/dialogs/RoomUpgradeWarningDialog.tsx index 29adb261be..a90f417959 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,73 +14,82 @@ 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 = (

    @@ -101,7 +110,7 @@ export default class RoomUpgradeWarningDialog extends React.Component { }, { "a": (sub) => { - return { sub }; + return { sub }; }, }, ) } @@ -119,18 +128,26 @@ 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.", ) }

    +

    + { _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 }, + oldVersion: () => { this.currentVersion }, newVersion: () => { this.props.targetVersion }, }, ) } @@ -139,9 +156,9 @@ export default class RoomUpgradeWarningDialog extends React.Component {

    ); 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} + > -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 - UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line 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, -}; diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index db63dbbfc2..87f3dab718 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -419,7 +419,8 @@ export default class ImageView extends React.Component { const avatar = ( ); @@ -438,7 +439,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 = ( -
    +
    ); } @@ -462,15 +463,15 @@ export default class ImageView extends React.Component { - + onClick={this.onZoomOutClick} + /> ); zoomInButton = ( - + onClick={this.onZoomInClick} + /> ); } @@ -492,24 +493,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..010780565b 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 @@ -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/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index f0df64fcb4..8323320520 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -20,7 +20,7 @@ import React, { ReactNode } from "react"; import { RecordingState, VoiceRecording, -} from "../../../voice/VoiceRecording"; +} from "../../../audio/VoiceRecording"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import classNames from "classnames"; @@ -189,7 +189,6 @@ export default class VoiceRecordComposerTile extends React.PureComponent; } 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..ede9a5ddb5 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -15,52 +15,43 @@ limitations under the License. */ import React from 'react'; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +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"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; 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"; 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"; +import { arrayHasDiff } from "../../../../../utils/arrays"; import SettingsFlag from '../../../elements/SettingsFlag'; -// Knock and private are reserved keywords which are not yet implemented. -export enum JoinRule { - Public = "public", - Knock = "knock", - Invite = "invite", - /** - * @deprecated Reserved. Should not be used. - */ - Private = "private", -} - -export enum GuestAccess { - CanJoin = "can_join", - Forbidden = "forbidden", -} - -export enum HistoryVisibility { - Invited = "invited", - Joined = "joined", - Shared = "shared", - WorldReadable = "world_readable", -} - interface IProps { roomId: string; } interface IState { joinRule: JoinRule; + restrictedAllowRoomIds?: string[]; guestAccess: GuestAccess; history: HistoryVisibility; hasAliases: boolean; encrypted: boolean; + roomSupportsRestricted?: boolean; + preferredRestrictionVersion?: string; + showAdvancedSection: boolean; } @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab") @@ -70,44 +61,58 @@ export default class SecurityRoomSettingsTab extends React.Component( + joinRuleEvent, 'join_rule', JoinRule.Invite, ); - const guestAccess: GuestAccess = this.pullContentPropertyFromEvent( - state.getStateEvents("m.room.guest_access", ""), + 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( - state.getStateEvents("m.room.history_visibility", ""), + 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 }); - const hasAliases = await this.hasAliases(); - this.setState({ hasAliases }); + const restrictedRoomCapabilities = SpaceStore.instance.restrictedJoinRuleSupport; + const roomSupportsRestricted = Array.isArray(restrictedRoomCapabilities?.support) + && restrictedRoomCapabilities.support.includes(room.getVersion()); + const preferredRestrictionVersion = roomSupportsRestricted ? undefined : restrictedRoomCapabilities?.preferred; + this.setState({ joinRule, restrictedAllowRoomIds, guestAccess, history, encrypted, + roomSupportsRestricted, preferredRestrictionVersion }); + + this.hasAliases().then(hasAliases => this.setState({ hasAliases })); } 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() { @@ -115,13 +120,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 = () => { @@ -133,8 +138,10 @@ export default class SecurityRoomSettingsTab extends React.ComponentLearn more about encryption.", {}, { - a: sub => { sub }, }, ), @@ -147,7 +154,7 @@ export default class SecurityRoomSettingsTab extends React.Component { console.error(e); @@ -157,89 +164,91 @@ export default class SecurityRoomSettingsTab extends React.Component { - e.preventDefault(); - e.stopPropagation(); - - const joinRule = JoinRule.Invite; - const guestAccess = GuestAccess.CanJoin; - + private onJoinRuleChange = async (joinRule: JoinRule) => { const beforeJoinRule = this.state.joinRule; - const beforeGuestAccess = this.state.guestAccess; - this.setState({ joinRule, guestAccess }); + + let restrictedAllowRoomIds: string[]; + if (joinRule === JoinRule.Restricted) { + const matrixClient = MatrixClientPeg.get(); + const roomId = this.props.roomId; + const room = matrixClient.getRoom(roomId); + + if (beforeJoinRule === JoinRule.Restricted || this.state.roomSupportsRestricted) { + // Have the user pick which spaces to allow joins from + 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 + 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; + } + } + + if (beforeJoinRule === joinRule && !restrictedAllowRoomIds) return; + + const content: IContent = { + join_rule: joinRule, + }; + + // pre-set the accepted spaces with the currently viewed one as per the microcopy + if (joinRule === JoinRule.Restricted) { + content.allow = restrictedAllowRoomIds.map(roomId => ({ + "type": RestrictedAllowType.RoomMembership, + "room_id": roomId, + })); + } + + this.setState({ joinRule, restrictedAllowRoomIds }); const client = MatrixClientPeg.get(); - client.sendStateEvent( - this.props.roomId, - "m.room.join_rules", - { join_rule: joinRule }, - "", - ).catch((e) => { + client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, content, "").catch((e) => { console.error(e); - this.setState({ joinRule: beforeJoinRule }); - }); - client.sendStateEvent( - this.props.roomId, - "m.room.guest_access", - { guest_access: guestAccess }, - "", - ).catch((e) => { - console.error(e); - this.setState({ guestAccess: beforeGuestAccess }); + this.setState({ + joinRule: beforeJoinRule, + restrictedAllowRoomIds: undefined, + }); }); }; - private onRoomAccessRadioToggle = (roomAccess: string) => { - // join_rule - // INVITE | PUBLIC - // ----------------------+---------------- - // guest CAN_JOIN | inv_only | pub_with_guest - // access ----------------------+---------------- - // FORBIDDEN | inv_only | pub_no_guest - // ----------------------+---------------- - - // 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 "invite_only": - // no change - use defaults above - break; - case "public_no_guests": - joinRule = JoinRule.Public; - guestAccess = GuestAccess.Forbidden; - break; - case "public_with_guests": - joinRule = JoinRule.Public; - guestAccess = GuestAccess.CanJoin; - break; - } - - const beforeJoinRule = this.state.joinRule; - const beforeGuestAccess = this.state.guestAccess; - this.setState({ joinRule, guestAccess }); + private onRestrictedRoomIdsChange = (restrictedAllowRoomIds: string[]) => { + const beforeRestrictedAllowRoomIds = this.state.restrictedAllowRoomIds; + if (!arrayHasDiff(beforeRestrictedAllowRoomIds || [], restrictedAllowRoomIds)) return; + this.setState({ restrictedAllowRoomIds }); const client = MatrixClientPeg.get(); - client.sendStateEvent( - this.props.roomId, - "m.room.join_rules", - { join_rule: joinRule }, - "", - ).catch((e) => { + 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({ joinRule: beforeJoinRule }); + this.setState({ restrictedAllowRoomIds: beforeRestrictedAllowRoomIds }); }); - client.sendStateEvent( - this.props.roomId, - "m.room.guest_access", - { guest_access: guestAccess }, - "", - ).catch((e) => { + }; + + private onGuestAccessChange = (allowed: boolean) => { + const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden; + const beforeGuestAccess = this.state.guestAccess; + if (beforeGuestAccess === guestAccess) return; + + 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 }); }); @@ -247,8 +256,10 @@ 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, "m.room.history_visibility", { + MatrixClientPeg.get().sendStateEvent(this.props.roomId, EventType.RoomHistoryVisibility, { history_visibility: history, }, "").catch((e) => { console.error(e); @@ -268,36 +279,48 @@ export default class SecurityRoomSettingsTab extends React.Component (ev.getContent().aliases || []).length > 0); return hasAliases; } } - private renderRoomAccess() { + private editRestrictedRoomIds = async (): Promise => { + let selected = this.state.restrictedAllowRoomIds; + if (!selected?.length && SpaceStore.instance.activeSpace) { + selected = [SpaceStore.instance.activeSpace.roomId]; + } + + const matrixClient = MatrixClientPeg.get(); + const { finished } = Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, { + matrixClient, + room: matrixClient.getRoom(this.props.roomId), + 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() { 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("m.room.join_rules", client) - && room.currentState.mayClientSendStateEvent("m.room.guest_access", client); - - let guestWarning = null; - if (joinRule !== 'public' && 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 === 'public' && !this.state.hasAliases) { + if (joinRule === JoinRule.Public && !this.state.hasAliases) { aliasWarning = (
    @@ -308,34 +331,107 @@ export default class SecurityRoomSettingsTab extends React.Component[] = [{ + value: JoinRule.Invite, + label: _t("Private (invite only)"), + description: _t("Only invited people can join."), + checked: this.state.joinRule === JoinRule.Invite + || (this.state.joinRule === JoinRule.Restricted && !this.state.restrictedAllowRoomIds?.length), + }, { + value: JoinRule.Public, + label: _t("Public"), + description: _t("Anyone can find and join."), + }]; + + 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 && this.state.restrictedAllowRoomIds?.length) { + const shownSpaces = this.state.restrictedAllowRoomIds + .map(roomId => client.getRoom(roomId)) + .filter(room => room?.isSpaceRoom()) + .slice(0, 4); + + 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 =
    + + { _t("Anyone in a space can find and join. Edit which spaces can access here.", {}, { + a: sub => + { sub } + , + }) } + + +
    +

    { _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.", { + 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, + // if there are 0 allowed spaces then render it as invite only instead + checked: this.state.joinRule === JoinRule.Restricted && !!this.state.restrictedAllowRoomIds?.length, + }); + } + return ( -
    - { guestWarning } +
    +
    + { _t("Decide who can join %(roomName)s.", { + roomName: client.getRoom(this.props.roomId)?.name, + }) } +
    { aliasWarning }
    ); @@ -345,7 +441,7 @@ 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 client = MatrixClientPeg.get(); const room = client.getRoom(this.props.roomId); const isEncrypted = this.state.encrypted; - const hasEncryptionPermission = room.currentState.mayClientSendStateEvent("m.room.encryption", client); + const hasEncryptionPermission = room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, client); const canEnableEncryption = !isEncrypted && hasEncryptionPermission; let encryptionSettings = null; @@ -424,18 +544,30 @@ export default class SecurityRoomSettingsTab extends React.Component { _t("Once enabled, encryption cannot be disabled.") }
    -
    { encryptionSettings }
    - { _t("Who can access this room?") } + { _t("Access") }
    - { this.renderRoomAccess() } + { this.renderJoinRule() }
    + + { this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") } + + { this.state.showAdvancedSection && this.renderAdvanced() } + { historySection }
    ); 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/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index ec17551d93..b48f5c79c6 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -18,13 +18,13 @@ import React, { useState } 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 { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; import AliasSettings from "../room_settings/AliasSettings"; import { useStateToggle } from "../../../hooks/useStateToggle"; import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; -import { GuestAccess, HistoryVisibility, JoinRule } from "../settings/tabs/room/SecurityRoomSettingsTab"; import StyledRadioGroup from "../elements/StyledRadioGroup"; interface IProps { diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index c4a2a8f9d3..90584a5361 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 = ( { 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 ( -
    +
    { +export default async function createRoom(opts: IOpts): Promise { opts = opts || {}; if (opts.spinner === undefined) opts.spinner = true; if (opts.guestAccess === undefined) opts.guestAccess = true; @@ -85,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; @@ -142,13 +143,37 @@ export default function createRoom(opts: IOpts): Promise { } 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) { + createOpts.room_version = SpaceStore.instance.restrictedJoinRuleSupport.preferred; + + createOpts.initial_state.push({ + type: EventType.RoomJoinRules, + content: { + "join_rule": JoinRule.Restricted, + "allow": [{ + "type": RestrictedAllowType.RoomMembership, + "room_id": opts.parentSpace.roomId, + }], + }, + }); + } + } + } + + if (opts.joinRule !== JoinRule.Restricted) { + createOpts.initial_state.push({ + type: EventType.RoomJoinRules, + content: { join_rule: opts.joinRule }, + }); } let modal; diff --git a/src/editor/deserialize.ts b/src/editor/deserialize.ts index eb8adfda9d..9033f99b6c 100644 --- a/src/editor/deserialize.ts +++ b/src/editor/deserialize.ts @@ -121,6 +121,12 @@ function parseElement(n: HTMLElement, partCreator: PartCreator, lastNode: HTMLEl return partCreator.plain(`\`${n.textContent}\``); case "DEL": return partCreator.plain(`${n.textContent}`); + case "SUB": + return partCreator.plain(`${n.textContent}`); + case "SUP": + return partCreator.plain(`${n.textContent}`); + case "U": + return partCreator.plain(`${n.textContent}`); case "LI": { const indent = " ".repeat(state.listDepth - 1); if (n.parentElement.nodeName === "OL") { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f48f06a791..b36910b41b 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", @@ -719,6 +717,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", @@ -765,6 +765,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 makes 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 makes 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", @@ -1025,7 +1035,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", @@ -1415,27 +1424,34 @@ "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.", + "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 join %(roomName)s.": "Decide who can 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", @@ -2147,7 +2163,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", @@ -2176,18 +2191,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", @@ -2341,6 +2363,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 can find and join .": "Decide which spaces can access this room. If a space is selected, its members can 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", @@ -2384,12 +2417,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.", @@ -2412,7 +2446,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 +2680,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)", @@ -2746,10 +2780,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/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index 65201134bf..a338e71838 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -14,11 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React from "react"; 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 { ISpaceSummaryRoom } from "matrix-js-sdk/src/@types/spaces"; +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"; @@ -39,6 +42,12 @@ import { objectDiff } from "../utils/objects"; import { arrayHasOrderChange } from "../utils/arrays"; import { reorderLexicographically } from "../utils/stringOrderField"; import { TAG_ORDER } from "../components/views/rooms/RoomList"; +import { shouldShowSpaceSettings } from "../utils/space"; +import ToastStore from "./ToastStore"; +import { _t } from "../languageHandler"; +import GenericToast from "../components/views/toasts/GenericToast"; +import Modal from "../Modal"; +import InfoDialog from "../components/views/dialogs/InfoDialog"; type SpaceKey = string | symbol; @@ -114,6 +123,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); @@ -131,7 +141,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { return this._suggestedRooms; } - public async setActiveRoomInSpace(space: Room | null) { + public async setActiveRoomInSpace(space: Room | null): Promise { if (space && !space.isSpaceRoom()) return; if (space !== this.activeSpace) await this.setActiveSpace(space); @@ -166,6 +176,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient { } } + 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. @@ -215,6 +229,65 @@ export class SpaceStoreClass extends AsyncStoreWithClient { window.localStorage.removeItem(ACTIVE_SPACE_LS_KEY); } + // New in Spaces beta toast for Restricted Join Rule + 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.") }

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

    { _t("This makes 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, + }); + } + if (space) { const suggestedRooms = await this.fetchSuggestedRooms(space); if (this._activeSpace === space) { @@ -301,6 +374,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 && spacesTweakAllRoomsEnabled) { return new Set(this.matrixClient.getVisibleRooms().map(r => r.roomId)); @@ -678,6 +755,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 diff --git a/src/stores/VoiceRecordingStore.ts b/src/stores/VoiceRecordingStore.ts index 81c19e7e82..df837fec88 100644 --- a/src/stores/VoiceRecordingStore.ts +++ b/src/stores/VoiceRecordingStore.ts @@ -17,7 +17,7 @@ limitations under the License. import { AsyncStoreWithClient } from "./AsyncStoreWithClient"; import defaultDispatcher from "../dispatcher/dispatcher"; import { ActionPayload } from "../dispatcher/payloads"; -import { VoiceRecording } from "../voice/VoiceRecording"; +import { VoiceRecording } from "../audio/VoiceRecording"; interface IState { recording?: VoiceRecording; diff --git a/src/utils/MediaEventHelper.ts b/src/utils/MediaEventHelper.ts index cf34d5dea4..8b8edcc62a 100644 --- a/src/utils/MediaEventHelper.ts +++ b/src/utils/MediaEventHelper.ts @@ -67,6 +67,7 @@ export class MediaEventHelper implements IDestroyable { private prepareThumbnailUrl = async () => { if (this.media.isEncrypted) { const blob = await this.thumbnailBlob.value; + if (blob === null) return null; return URL.createObjectURL(blob); } else { return this.media.thumbnailHttp; diff --git a/src/utils/RoomUpgrade.ts b/src/utils/RoomUpgrade.ts new file mode 100644 index 0000000000..e632ec6345 --- /dev/null +++ b/src/utils/RoomUpgrade.ts @@ -0,0 +1,93 @@ +/* +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 { 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, + handleError = true, + updateSpaces = true, +): Promise { + const cli = room.client; + + let newRoomId: string; + try { + ({ replacement_room: newRoomId } = await cli.upgradeRoom(room.roomId, targetVersion)); + } catch (e) { + if (!handleError) throw e; + console.error(e); + + 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; +} 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", diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js index f415b85105..dea5bcefb7 100644 --- a/test/components/structures/MessagePanel-test.js +++ b/test/components/structures/MessagePanel-test.js @@ -312,8 +312,12 @@ describe('MessagePanel', function() { it('should insert the read-marker in the right place', function() { const res = TestUtils.renderIntoDocument( - , + , ); 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); 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}`); } diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts index eb28a72d67..8855f4e470 100644 --- a/test/stores/SpaceStore-test.ts +++ b/test/stores/SpaceStore-test.ts @@ -52,32 +52,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 getUserIdForRoomId = jest.fn(); // @ts-ignore DMRoomMap.sharedInstance = { getUserIdForRoomId }; @@ -107,6 +81,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 d75abc80f0..5e29fd242e 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -97,6 +97,7 @@ export function createTestClient() { }, decryptEventIfNeeded: () => Promise.resolve(), isUserIgnored: jest.fn().mockReturnValue(false), + getCapabilities: jest.fn().mockResolvedValue({}), }; } @@ -220,7 +221,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 +236,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, @@ -269,6 +271,8 @@ export function mkStubRoom(roomId = null, name) { getCanonicalAlias: jest.fn(), getAltAliases: jest.fn().mockReturnValue([]), timeline: [], + getJoinRule: jest.fn().mockReturnValue("invite"), + client, }; } 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"