From c5ca98a3ad090d38e9fcd840ffbea585afa973b7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jul 2021 10:10:25 +0100 Subject: [PATCH] Iterate SecurityRoomSettingsTab and ManageRestrictedJoinRuleDialog --- .../_ManageRestrictedJoinRuleDialog.scss | 19 +-- .../ManageRestrictedJoinRuleDialog.tsx | 24 +++- .../tabs/room/SecurityRoomSettingsTab.tsx | 128 ++++++++++-------- src/i18n/strings/en_EN.json | 11 +- 4 files changed, 106 insertions(+), 76 deletions(-) diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss index 6606f78a8a..91df76675a 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss @@ -104,7 +104,7 @@ limitations under the License. } } - .mx_ManageRestrictedJoinRuleDialog_section_experimental { + .mx_ManageRestrictedJoinRuleDialog_section_info { position: relative; border-radius: 8px; margin: 12px 0; @@ -131,16 +131,19 @@ limitations under the License. } .mx_ManageRestrictedJoinRuleDialog_footer { - display: flex; margin-top: 20px; - align-self: end; - .mx_AccessibleButton { - display: inline-block; - align-self: center; + .mx_ManageRestrictedJoinRuleDialog_footer_buttons { + display: flex; + width: max-content; + margin-left: auto; - & + .mx_AccessibleButton { - margin-left: 24px; + .mx_AccessibleButton { + display: inline-block; + + & + .mx_AccessibleButton { + margin-left: 24px; + } } } } diff --git a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx index 79a6fb7f24..ff08ae5d28 100644 --- a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx +++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx @@ -102,6 +102,13 @@ const ManageRestrictedJoinRuleDialog: React.FC = ({ room, selected = [], setNewSelected(new Set(newSelected)); }; + let inviteOnlyWarning; + if (newSelected.size < 1) { + inviteOnlyWarning =
+ { _t("You're removing all spaces. Access will default to invite only") } +
; + } + return = ({ room, selected = [], { filteredOtherEntries.length > 0 ? (

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

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

{ _t("Spaces with access") }

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

{ _t("Spaces with access") }

+ { shownSpaces.map(room => { + return + + { room.name } + ; + })} + { moreText && { moreText } } +
; } else if (SpaceStore.instance.activeSpace) { description = _t("Anyone in %(spaceName)s can find and join. You can select other spaces too.", { @@ -403,6 +411,8 @@ export default class SecurityRoomSettingsTab extends React.Component, description, + // if there are 0 allowed spaces then render it as invite only instead + checked: this.state.joinRule === JoinRule.Restricted && !!this.state.restrictedAllowRoomIds?.length, }); } @@ -478,7 +488,7 @@ export default class SecurityRoomSettingsTab extends React.Component + return
- ; +
; } render() { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7d0f863b7f..12b0c40d75 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1455,9 +1455,12 @@ "Public (anyone)": "Public (anyone)", "Anyone can find and join.": "Anyone can find and join.", "Upgrade required": "Upgrade required", - "Spaces with access": "Spaces with access", "& %(count)s more|other": "& %(count)s more", + "& %(count)s more|one": "& %(count)s more", + "Currently, %(count)s spaces have access|other": "Currently, %(count)s spaces have access", + "Currently, %(count)s spaces have access|one": "Currently, %(count)s space has access", "Anyone in a space can find and join. Edit which spaces can access here.": "Anyone in a space can find and join. Edit which spaces can access here.", + "Spaces with access": "Spaces with access", "Anyone in %(spaceName)s can find and join. You can select other spaces too.": "Anyone in %(spaceName)s can find and join. You can select other spaces too.", "Anyone in a space can find and join. You can select multiple spaces.": "Anyone in a space can find and join. You can select multiple spaces.", "Space members": "Space members", @@ -2187,8 +2190,11 @@ "Community ID": "Community ID", "example": "example", "Please enter a name for the room": "Please enter a name for the room", - "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone.", "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.": "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.", + "Everyone in will be able to find and join this room.": "Everyone in will be able to find and join this room.", + "You can change this at any time from room settings.": "You can change this at any time from room settings.", + "Anyone will be able to find and join this room, not just members of .": "Anyone will be able to find and join this room, not just members of .", + "Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.", "You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.", "Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.", "Enable end-to-end encryption": "Enable end-to-end encryption", @@ -2355,6 +2361,7 @@ "%(count)s members|one": "%(count)s member", "%(count)s rooms|other": "%(count)s rooms", "%(count)s rooms|one": "%(count)s room", + "You're removing all spaces. Access will default to invite only": "You're removing all spaces. Access will default to invite only", "Select spaces": "Select spaces", "Decide which spaces can access this room. If a space is selected its members will be able to find and join .": "Decide which spaces can access this room. If a space is selected its members will be able to find and join .", "Search spaces": "Search spaces",