From 83912daced7bafdea313436ac1270229c1585065 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 8 Sep 2021 13:16:31 +0100 Subject: [PATCH 1/2] Improve the upgrade for restricted user experience --- .../views/dialogs/RoomSettingsDialog.tsx | 5 +- .../tabs/room/SecurityRoomSettingsTab.tsx | 18 ++++++- src/utils/RoomUpgrade.ts | 49 ++++++++++++------- 3 files changed, 51 insertions(+), 21 deletions(-) diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx index a426dce5c78..a73f0a595bf 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.tsx +++ b/src/components/views/dialogs/RoomSettingsDialog.tsx @@ -79,7 +79,10 @@ export default class RoomSettingsDialog extends React.Component { ROOM_SECURITY_TAB, _td("Security & Privacy"), "mx_RoomSettingsDialog_securityIcon", - , + this.props.onFinished(true)} + />, )); tabs.push(new Tab( ROOM_ROLES_TAB, diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 081b1a86989..5cb76ebc252 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -39,9 +39,12 @@ import { arrayHasDiff } from "../../../../../utils/arrays"; import SettingsFlag from '../../../elements/SettingsFlag'; import createRoom, { IOpts } from '../../../../../createRoom'; import CreateRoomDialog from '../../../dialogs/CreateRoomDialog'; +import dis from "../../../../../dispatcher/dispatcher"; +import { ROOM_SECURITY_TAB } from "../../../dialogs/RoomSettingsDialog"; interface IProps { roomId: string; + closeSettingsFn: () => void; } interface IState { @@ -220,9 +223,20 @@ export default class SecurityRoomSettingsTab extends React.Component { + onFinished: async (resp) => { if (!resp?.continue) return; - upgradeRoom(room, targetVersion, resp.invite); + const roomId = await upgradeRoom(room, targetVersion, resp.invite, true, true, true); + this.props.closeSettingsFn(); + // switch to the new room in the background + dis.dispatch({ + action: "view_room", + room_id: roomId, + }); + // open new settings on this tab + dis.dispatch({ + action: "open_room_settings", + initial_tab_id: ROOM_SECURITY_TAB, + }); }, }); return; diff --git a/src/utils/RoomUpgrade.ts b/src/utils/RoomUpgrade.ts index e632ec63457..4dd2a880a09 100644 --- a/src/utils/RoomUpgrade.ts +++ b/src/utils/RoomUpgrade.ts @@ -22,6 +22,7 @@ import Modal from "../Modal"; import { _t } from "../languageHandler"; import ErrorDialog from "../components/views/dialogs/ErrorDialog"; import SpaceStore from "../stores/SpaceStore"; +import Spinner from "../components/views/elements/Spinner"; export async function upgradeRoom( room: Room, @@ -29,8 +30,10 @@ export async function upgradeRoom( inviteUsers = false, handleError = true, updateSpaces = true, + awaitRoom = false, ): Promise { const cli = room.client; + const modal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner"); let newRoomId: string; try { @@ -46,27 +49,36 @@ export async function upgradeRoom( 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; + if (awaitRoom || inviteUsers) { + await new Promise(resolve => { + // already have the room + if (room.client.getRoom(newRoomId)) { + resolve(); + return; + } - const toInvite = [ - ...room.getMembersWithMembership("join"), - ...room.getMembersWithMembership("invite"), - ].map(m => m.userId).filter(m => m !== cli.getUserId()); + // 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. + const checkForRoomFn = (newRoom: Room) => { + if (newRoom.roomId !== newRoomId) return; + resolve(); + cli.off("Room", checkForRoomFn); + }; + cli.on("Room", checkForRoomFn); + }); + } - if (toInvite.length > 0) { - // Errors are handled internally to this function - await inviteUsersToRoom(newRoomId, toInvite); - } + if (inviteUsers) { + const toInvite = [ + ...room.getMembersWithMembership("join"), + ...room.getMembersWithMembership("invite"), + ].map(m => m.userId).filter(m => m !== cli.getUserId()); - cli.removeListener('Room', checkForUpgradeFn); - }; - cli.on('Room', checkForUpgradeFn); + if (toInvite.length > 0) { + // Errors are handled internally to this function + await inviteUsersToRoom(newRoomId, toInvite); + } } if (updateSpaces) { @@ -89,5 +101,6 @@ export async function upgradeRoom( } } + modal.close(); return newRoomId; } From 17e0a4b3d772cdf96043fac3029d13c19bc9d1d7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 8 Sep 2021 17:14:51 +0100 Subject: [PATCH 2/2] iterate PR based on feedback --- src/utils/RoomUpgrade.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/RoomUpgrade.ts b/src/utils/RoomUpgrade.ts index 4dd2a880a09..366f49d892d 100644 --- a/src/utils/RoomUpgrade.ts +++ b/src/utils/RoomUpgrade.ts @@ -33,7 +33,7 @@ export async function upgradeRoom( awaitRoom = false, ): Promise { const cli = room.client; - const modal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner"); + const spinnerModal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner"); let newRoomId: string; try { @@ -101,6 +101,6 @@ export async function upgradeRoom( } } - modal.close(); + spinnerModal.close(); return newRoomId; }