Improve the upgrade for restricted user experience

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -79,7 +79,10 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
             ROOM_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_RoomSettingsDialog_securityIcon",
-            <SecurityRoomSettingsTab roomId={this.props.roomId} />,
+            <SecurityRoomSettingsTab
+                roomId={this.props.roomId}
+                closeSettingsFn={() => this.props.onFinished(true)}
+            />,
         ));
         tabs.push(new Tab(
             ROOM_ROLES_TAB,

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<IProps, ISt
                     targetVersion,
                     description: _t("This upgrade will allow members of selected spaces " +
                         "access to this room without an invite."),
-                    onFinished: (resp) => {
+                    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;

src/utils/RoomUpgrade.ts

@@ -22,15 +22,18 @@ 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,
     targetVersion: string,
     inviteUsers = false,
     handleError = true,
     updateSpaces = true,
+    awaitRoom = false,
 ): Promise<string> {
     const cli = room.client;
+    const spinnerModal = 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<void> => {
-            // The upgradePromise should be done by the time we await it here.
-            if (newRoom.roomId !== newRoomId) return;
+    if (awaitRoom || inviteUsers) {
+        await new Promise<void>(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(
         }
     }
 
+    spinnerModal.close();
     return newRoomId;
 }