From 1b2d70d816ce151d408cc257b7e667cc25e920c9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 21 Jul 2021 09:57:10 +0100
Subject: [PATCH 1/5] Prompt user to leave rooms/subspaces in a space when
 leaving space

---
 res/css/_components.scss                      |   3 +-
 .../dialogs/_AddExistingToSpaceDialog.scss    |  48 ++--
 res/css/views/dialogs/_LeaveSpaceDialog.scss  | 107 +++++++++
 .../dialogs/AddExistingToSpaceDialog.tsx      |   2 +-
 .../views/dialogs/LeaveSpaceDialog.tsx        | 217 ++++++++++++++++++
 .../views/spaces/SpaceSettingsGeneralTab.tsx  |   7 +-
 .../views/spaces/SpaceTreeLevel.tsx           |   6 +-
 src/i18n/strings/en_EN.json                   |  14 ++
 src/stores/SpaceStore.tsx                     |   2 +-
 src/utils/space.tsx                           |  25 ++
 10 files changed, 395 insertions(+), 36 deletions(-)
 create mode 100644 res/css/views/dialogs/_LeaveSpaceDialog.scss
 create mode 100644 src/components/views/dialogs/LeaveSpaceDialog.tsx

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 7df45b857e1..93d6b2b36f2 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/_LeaveSpaceDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_ModalWidgetDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
@@ -200,8 +201,8 @@
 @import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
-@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_EventBubbleTile.scss";
+@import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 2776c477fcc..e71c34b8004 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -49,30 +49,6 @@ limitations under the License.
             font-weight: $font-semi-bold;
             line-height: $font-15px;
         }
-
-        .mx_AddExistingToSpace_entry {
-            display: flex;
-            margin-top: 12px;
-
-            // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
-            .mx_DecoratedRoomAvatar {
-                margin-right: 12px;
-            }
-
-            .mx_AddExistingToSpace_entry_name {
-                font-size: $font-15px;
-                line-height: 30px;
-                flex-grow: 1;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                margin-right: 12px;
-            }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
-        }
     }
 
     .mx_AddExistingToSpace_section_spaces {
@@ -279,3 +255,27 @@ limitations under the License.
         display: contents;
     }
 }
+
+.mx_AddExistingToSpace_entry {
+    display: flex;
+    margin-top: 12px;
+
+    // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+    .mx_DecoratedRoomAvatar {
+        margin-right: 12px;
+    }
+
+    .mx_AddExistingToSpace_entry_name {
+        font-size: $font-15px;
+        line-height: 30px;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 12px;
+    }
+
+    .mx_Checkbox {
+        align-items: center;
+    }
+}
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss
new file mode 100644
index 00000000000..bb2585f25f8
--- /dev/null
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss
@@ -0,0 +1,107 @@
+/*
+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_LeaveSpaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+    }
+}
+
+.mx_LeaveSpaceDialog {
+    width: 440px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .mx_Dialog_content {
+        flex-grow: 1;
+        margin: 0 0 24px;
+        color: $tertiary-fg-color;
+        overflow-y: auto;
+
+        .mx_Dropdown_input {
+            border-radius: 8px;
+            border-color: $input-border-color;
+        }
+
+        .mx_Dropdown_option {
+            font-size: $font-15px;
+        }
+
+        .mx_SearchBox {
+            // To match the space around the title
+            margin: 0 0 15px 0;
+            flex-grow: 0;
+            border-radius: 8px;
+        }
+
+        .mx_LeaveSpaceDialog_noResults {
+            display: block;
+            margin-top: 24px;
+        }
+
+        .mx_LeaveSpaceDialog_section {
+            margin: 16px 0;
+
+            .mx_Dropdown + span {
+                display: inline-block;
+                margin-top: 8px;
+            }
+        }
+
+        .mx_LeaveSpaceDialog_section_warning {
+            position: relative;
+            border-radius: 8px;
+            margin: 12px 0;
+            padding: 12px 8px 12px 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;
+            }
+        }
+
+        > p {
+            color: $primary-fg-color;
+        }
+    }
+
+    .mx_Dialog_buttons {
+        margin-top: 20px;
+
+        .mx_Dialog_primary {
+            background-color: $notice-primary-color !important; // override default colour
+            border-color: $notice-primary-color;
+        }
+    }
+}
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 5024b98def1..baebe44ec3d 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -49,7 +49,7 @@ interface IProps extends IDialogProps {
     onCreateRoomClick(cli: MatrixClient, space: Room): void;
 }
 
-const Entry = ({ room, checked, onChange }) => {
+export const Entry = ({ room, checked, onChange }) => {
     return <label className="mx_AddExistingToSpace_entry">
         { room?.isSpaceRoom()
             ? <RoomAvatar room={room} height={32} width={32} />
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
new file mode 100644
index 00000000000..ffad4a22a2d
--- /dev/null
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -0,0 +1,217 @@
+/*
+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, { useEffect, useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
+import Dropdown from "../elements/Dropdown";
+import DialogButtons from "../elements/DialogButtons";
+import BaseDialog from "../dialogs/BaseDialog";
+import { JoinRule } from "../settings/tabs/room/SecurityRoomSettingsTab";
+import SpaceStore from "../../../stores/SpaceStore";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { Entry } from "./AddExistingToSpaceDialog";
+import SearchBox from "../../structures/SearchBox";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+
+enum RoomsToLeave {
+    All = "All",
+    Specific = "Specific",
+    None = "None",
+}
+
+const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
+
+    const filteredRooms = useMemo(() => {
+        if (!lcQuery) {
+            return rooms;
+        }
+
+        const matcher = new QueryMatcher<Room>(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        });
+
+        return matcher.match(lcQuery);
+    }, [rooms, lcQuery]);
+
+    return <div className="mx_LeaveSpaceDialog_section">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={filterPlaceholder}
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
+            { filteredRooms.map(room => {
+                return <Entry
+                    key={room.roomId}
+                    room={room}
+                    checked={selected.has(room)}
+                    onChange={(checked) => {
+                        onChange(checked, room);
+                    }}
+                />;
+            }) }
+            { filteredRooms.length < 1 ? <span className="mx_LeaveSpaceDialog_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+    </div>;
+};
+
+const LeaveRoomsPicker = ({ space, roomsToLeave, setRoomsToLeave }) => {
+    const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
+    const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
+    const [state, setState] = useState<RoomsToLeave>(RoomsToLeave.All);
+
+    useEffect(() => {
+        if (state === RoomsToLeave.All) {
+            setRoomsToLeave(spaceChildren);
+        } else {
+            setRoomsToLeave([]);
+        }
+    }, [setRoomsToLeave, state, spaceChildren]);
+
+    let captionSpan;
+    switch (state) {
+        case RoomsToLeave.All:
+            captionSpan = _t("You will leave all subspaces and rooms in <spaceName/>.", {}, {
+                spaceName: () => <b>{ space.name }</b>,
+            });
+            break;
+        case RoomsToLeave.None:
+            captionSpan = _t("You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.", {}, {
+                spaceName: () => <b>{ space.name }</b>,
+            });
+            break;
+        case RoomsToLeave.Specific:
+            captionSpan = <span>{ _t("Pick which rooms and subspaces you want to leave.") }</span>;
+            break;
+    }
+
+    if (spaceChildren.length < 1) {
+        return <div>
+            BOLD:
+            { _t("Are you sure you want to leave %(spaceName)s? " +
+                "You won't be able to rejoin unless you are re-invited", { spaceName: space.name }) }
+        </div>;
+    }
+
+    return <div className="mx_LeaveSpaceDialog_section">
+        <Dropdown
+            id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
+            onOptionChange={setState}
+            value={state}
+            label={_t("Choose which rooms you wish to leave")}
+        >
+            <div key={RoomsToLeave.All}>
+                { _t("Leave all subspaces and rooms") }
+            </div>
+            <div key={RoomsToLeave.None}>
+                { _t("Don't leave any") }
+            </div>
+            <div key={RoomsToLeave.Specific}>
+                { _t("Leave specific rooms and subspaces") }
+            </div>
+        </Dropdown>
+        { captionSpan }
+
+        { state === RoomsToLeave.Specific && (
+            <SpaceChildPicker
+                filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
+                rooms={spaceChildren}
+                selected={selected}
+                onChange={(selected: boolean, room: Room) => {
+                    if (selected) {
+                        setRoomsToLeave([room, ...roomsToLeave]);
+                    } else {
+                        setRoomsToLeave(roomsToLeave.filter(r => r !== room));
+                    }
+                }}
+            />
+        ) }
+    </div>;
+};
+
+interface IProps {
+    space: Room;
+    onFinished(leave: boolean, rooms?: Room[]): void;
+}
+
+const isOnlyAdmin = (room: Room): boolean => {
+    return !room.getJoinedMembers().some(member => {
+        return member.userId !== room.client.credentials.userId && member.powerLevelNorm === 100;
+    });
+};
+
+const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
+    const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+
+    let rejoinWarning;
+    if (space.getJoinRule() !== JoinRule.Public) {
+        rejoinWarning = _t("You won't be able to rejoin unless you are re-invited.");
+    }
+
+    let onlyAdminWarning;
+    if (isOnlyAdmin(space)) {
+        onlyAdminWarning = _t("You're the only admin of this space. " +
+            "Leaving it will mean no one has control over it.");
+    } else {
+        const numChildrenOnlyAdminIn = roomsToLeave.filter(isOnlyAdmin).length;
+        if (numChildrenOnlyAdminIn > 0) {
+            onlyAdminWarning = _t("You're the only admin of some of the rooms or subspaces you wish to leave. " +
+                "Leaving them will leave them without any admins.");
+        }
+    }
+
+    return <BaseDialog
+        title={_t("Leave %(spaceName)s", { spaceName: space.name })}
+        className="mx_LeaveSpaceDialog"
+        contentId="mx_LeaveSpaceDialog"
+        onFinished={() => onFinished(false)}
+        fixedWidth={false}
+    >
+        <div className="mx_Dialog_content" id="mx_LeaveSpaceDialog">
+            <p>
+                { _t("Are you sure you want to leave <spaceName/>?", {}, {
+                    spaceName: () => <b>{ space.name }</b>,
+                }) }
+                &nbsp;
+                { rejoinWarning }
+            </p>
+
+            <LeaveRoomsPicker space={space} roomsToLeave={roomsToLeave} setRoomsToLeave={setRoomsToLeave} />
+
+            { onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
+                { onlyAdminWarning }
+            </div> }
+        </div>
+        <DialogButtons
+            primaryButton={_t("Leave space")}
+            onPrimaryButtonClick={() => onFinished(true, roomsToLeave)}
+            hasCancel={true}
+            onCancel={onFinished}
+        />
+    </BaseDialog>;
+};
+
+export default LeaveSpaceDialog;
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
index 9f4e0ecea7c..24073d5767a 100644
--- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -26,7 +26,7 @@ import SpaceBasicSettings from "./SpaceBasicSettings";
 import { avatarUrlForRoom } from "../../../Avatar";
 import { IDialogProps } from "../dialogs/IDialogProps";
 import { getTopic } from "../elements/RoomTopic";
-import { defaultDispatcher } from "../../../dispatcher/dispatcher";
+import { leaveSpace } from "../../../utils/space";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -128,10 +128,7 @@ const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProp
             <AccessibleButton
                 kind="danger"
                 onClick={() => {
-                    defaultDispatcher.dispatch({
-                        action: "leave_room",
-                        room_id: space.roomId,
-                    });
+                    leaveSpace(space);
                 }}
             >
                 { _t("Leave Space") }
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 486a988b938..7f047535563 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -31,6 +31,7 @@ import { _t } from "../../../languageHandler";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { toRightOf } from "../../structures/ContextMenu";
 import {
+    leaveSpace,
     shouldShowSpaceSettings,
     showAddExistingRooms,
     showCreateNewRoom,
@@ -211,10 +212,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        defaultDispatcher.dispatch({
-            action: "leave_room",
-            room_id: this.props.space.roomId,
-        });
+        leaveSpace(this.props.space);
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7212aede7d3..101e8b088d5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2331,6 +2331,20 @@
     "Clear cache and resync": "Clear cache and resync",
     "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!",
     "Updating %(brand)s": "Updating %(brand)s",
+    "You will leave all subspaces and rooms in <spaceName/>.": "You will leave all subspaces and rooms in <spaceName/>.",
+    "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.",
+    "Pick which rooms and subspaces you want to leave.": "Pick which rooms and subspaces you want to leave.",
+    "Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited": "Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited",
+    "Choose which rooms you wish to leave": "Choose which rooms you wish to leave",
+    "Leave all subspaces and rooms": "Leave all subspaces and rooms",
+    "Don't leave any": "Don't leave any",
+    "Leave specific rooms and subspaces": "Leave specific rooms and subspaces",
+    "Search %(spaceName)s": "Search %(spaceName)s",
+    "You won't be able to rejoin unless you are re-invited.": "You won't be able to rejoin unless you are re-invited.",
+    "You're the only admin of this space. Leaving it will mean no one has control over it.": "You're the only admin of this space. Leaving it will mean no one has control over it.",
+    "You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.": "You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.",
+    "Leave %(spaceName)s": "Leave %(spaceName)s",
+    "Are you sure you want to leave <spaceName/>?": "Are you sure you want to leave <spaceName/>?",
     "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.",
     "Start using Key Backup": "Start using Key Backup",
     "I don't want my encrypted messages": "I don't want my encrypted messages",
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 1a6b5109ec2..1f04a13c910 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -222,7 +222,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }, roomId);
     }
 
-    private getChildren(spaceId: string): Room[] {
+    public getChildren(spaceId: string): Room[] {
         const room = this.matrixClient?.getRoom(spaceId);
         const childEvents = room?.currentState.getStateEvents(EventType.SpaceChild).filter(ev => ev.getContent()?.via);
         return sortBy(childEvents, ev => {
diff --git a/src/utils/space.tsx b/src/utils/space.tsx
index 38f6e348d76..9a979d9a10a 100644
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@@ -29,6 +29,10 @@ import { _t } from "../languageHandler";
 import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
 import { showRoomInviteDialog } from "../RoomInvite";
+import { leaveRoomBehaviour } from "./membership";
+import Spinner from "../components/views/elements/Spinner";
+import dis from "../dispatcher/dispatcher";
+import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
 
 export const shouldShowSpaceSettings = (cli: MatrixClient, space: Room) => {
     const userId = cli.getUserId();
@@ -103,3 +107,24 @@ export const showSpaceInvite = (space: Room, initialText = "") => {
         showRoomInviteDialog(space.roomId, initialText);
     }
 };
+
+export const leaveSpace = (space: Room) => {
+    Modal.createTrackedDialog("Leave Space", "", LeaveSpaceDialog, {
+        space,
+        onFinished: async (leave: boolean, rooms: Room[]) => {
+            if (!leave) return;
+            const modal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner");
+            try {
+                await Promise.all(rooms.map(r => leaveRoomBehaviour(r.roomId)));
+                await leaveRoomBehaviour(space.roomId);
+            } finally {
+                modal.close();
+            }
+
+            dis.dispatch({
+                action: "after_leave_room",
+                room_id: space.roomId,
+            });
+        },
+    }, "mx_LeaveSpaceDialog_wrapper");
+};

From bc87dc3c56427314081aa49392ad8430a63e06f1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 21 Jul 2021 10:17:09 +0100
Subject: [PATCH 2/5] remove duplicated content

---
 src/components/views/dialogs/LeaveSpaceDialog.tsx | 6 +-----
 src/i18n/strings/en_EN.json                       | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index ffad4a22a2d..af29f18fdb4 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -109,11 +109,7 @@ const LeaveRoomsPicker = ({ space, roomsToLeave, setRoomsToLeave }) => {
     }
 
     if (spaceChildren.length < 1) {
-        return <div>
-            BOLD:
-            { _t("Are you sure you want to leave %(spaceName)s? " +
-                "You won't be able to rejoin unless you are re-invited", { spaceName: space.name }) }
-        </div>;
+        return null;
     }
 
     return <div className="mx_LeaveSpaceDialog_section">
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 101e8b088d5..e317a0c071d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2334,7 +2334,6 @@
     "You will leave all subspaces and rooms in <spaceName/>.": "You will leave all subspaces and rooms in <spaceName/>.",
     "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.",
     "Pick which rooms and subspaces you want to leave.": "Pick which rooms and subspaces you want to leave.",
-    "Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited": "Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited",
     "Choose which rooms you wish to leave": "Choose which rooms you wish to leave",
     "Leave all subspaces and rooms": "Leave all subspaces and rooms",
     "Don't leave any": "Don't leave any",

From 880dc26847b3d7528f58c05728af84685d4f0c9f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 21 Jul 2021 10:39:04 +0100
Subject: [PATCH 3/5] don't force height if the height can't change (no
 children edge)

---
 res/css/views/dialogs/_LeaveSpaceDialog.scss  |  5 ++++-
 .../views/dialogs/LeaveSpaceDialog.tsx        | 20 +++++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss
index bb2585f25f8..e28ff82bcf8 100644
--- a/res/css/views/dialogs/_LeaveSpaceDialog.scss
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss
@@ -24,11 +24,14 @@ limitations under the License.
 
 .mx_LeaveSpaceDialog {
     width: 440px;
-    height: 500px;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
 
+    &.mx_LeaveSpaceDialog_hasChildren {
+        height: 500px;
+    }
+
     .mx_Dialog_content {
         flex-grow: 1;
         margin: 0 0 24px;
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index af29f18fdb4..6f0d1e5b611 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -27,6 +27,7 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { Entry } from "./AddExistingToSpaceDialog";
 import SearchBox from "../../structures/SearchBox";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import classNames from "classnames";
 
 enum RoomsToLeave {
     All = "All",
@@ -78,9 +79,8 @@ const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
     </div>;
 };
 
-const LeaveRoomsPicker = ({ space, roomsToLeave, setRoomsToLeave }) => {
+const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave }) => {
     const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
-    const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
     const [state, setState] = useState<RoomsToLeave>(RoomsToLeave.All);
 
     useEffect(() => {
@@ -108,10 +108,6 @@ const LeaveRoomsPicker = ({ space, roomsToLeave, setRoomsToLeave }) => {
             break;
     }
 
-    if (spaceChildren.length < 1) {
-        return null;
-    }
-
     return <div className="mx_LeaveSpaceDialog_section">
         <Dropdown
             id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
@@ -160,6 +156,7 @@ const isOnlyAdmin = (room: Room): boolean => {
 };
 
 const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
+    const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
     const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
 
     let rejoinWarning;
@@ -181,7 +178,9 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
 
     return <BaseDialog
         title={_t("Leave %(spaceName)s", { spaceName: space.name })}
-        className="mx_LeaveSpaceDialog"
+        className={classNames("mx_LeaveSpaceDialog", {
+            mx_LeaveSpaceDialog_hasChildren: spaceChildren.length > 0,
+        })}
         contentId="mx_LeaveSpaceDialog"
         onFinished={() => onFinished(false)}
         fixedWidth={false}
@@ -195,7 +194,12 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
                 { rejoinWarning }
             </p>
 
-            <LeaveRoomsPicker space={space} roomsToLeave={roomsToLeave} setRoomsToLeave={setRoomsToLeave} />
+            { spaceChildren.length > 0 && <LeaveRoomsPicker
+                space={space}
+                spaceChildren={spaceChildren}
+                roomsToLeave={roomsToLeave}
+                setRoomsToLeave={setRoomsToLeave}
+            /> }
 
             { onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
                 { onlyAdminWarning }

From 251b6eb04e3137ee9980bd9432e6332ffe3b37bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 29 Jul 2021 15:30:49 +0100
Subject: [PATCH 4/5] update copy

---
 src/components/views/dialogs/LeaveSpaceDialog.tsx | 14 +++++++-------
 src/i18n/strings/en_EN.json                       | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index 276dd7a7219..7d3ded78e7e 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -94,17 +94,17 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
     let captionSpan;
     switch (state) {
         case RoomsToLeave.All:
-            captionSpan = _t("You will leave all subspaces and rooms in <spaceName/>.", {}, {
+            captionSpan = _t("You will leave all rooms and spaces in <spaceName/>.", {}, {
                 spaceName: () => <b>{ space.name }</b>,
             });
             break;
         case RoomsToLeave.None:
-            captionSpan = _t("You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.", {}, {
+            captionSpan = _t("You'll still be a part of all rooms and spaces in <spaceName/> you've joined.", {}, {
                 spaceName: () => <b>{ space.name }</b>,
             });
             break;
         case RoomsToLeave.Specific:
-            captionSpan = <span>{ _t("Pick which rooms and subspaces you want to leave.") }</span>;
+            captionSpan = <span>{ _t("Pick which rooms and spaces you want to leave.") }</span>;
             break;
     }
 
@@ -113,16 +113,16 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
             id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
             onOptionChange={setState}
             value={state}
-            label={_t("Choose which rooms you wish to leave")}
+            label={_t("Choose which rooms and spaces you wish to leave")}
         >
             <div key={RoomsToLeave.All}>
-                { _t("Leave all subspaces and rooms") }
+                { _t("Leave all rooms and spaces") }
             </div>
             <div key={RoomsToLeave.None}>
                 { _t("Don't leave any") }
             </div>
             <div key={RoomsToLeave.Specific}>
-                { _t("Leave specific rooms and subspaces") }
+                { _t("Leave specific rooms and spaces") }
             </div>
         </Dropdown>
         { captionSpan }
@@ -171,7 +171,7 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
     } else {
         const numChildrenOnlyAdminIn = roomsToLeave.filter(isOnlyAdmin).length;
         if (numChildrenOnlyAdminIn > 0) {
-            onlyAdminWarning = _t("You're the only admin of some of the rooms or subspaces you wish to leave. " +
+            onlyAdminWarning = _t("You're the only admin of some of the rooms or spaces you wish to leave. " +
                 "Leaving them will leave them without any admins.");
         }
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bd8ff0589d3..d50d5f514ea 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2373,17 +2373,17 @@
     "Clear cache and resync": "Clear cache and resync",
     "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!",
     "Updating %(brand)s": "Updating %(brand)s",
-    "You will leave all subspaces and rooms in <spaceName/>.": "You will leave all subspaces and rooms in <spaceName/>.",
-    "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.",
-    "Pick which rooms and subspaces you want to leave.": "Pick which rooms and subspaces you want to leave.",
-    "Choose which rooms you wish to leave": "Choose which rooms you wish to leave",
-    "Leave all subspaces and rooms": "Leave all subspaces and rooms",
+    "You will leave all rooms and spaces in <spaceName/>.": "You will leave all rooms and spaces in <spaceName/>.",
+    "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.",
+    "Pick which rooms and spaces you want to leave.": "Pick which rooms and spaces you want to leave.",
+    "Choose which rooms and spaces you wish to leave": "Choose which rooms and spaces you wish to leave",
+    "Leave all rooms and spaces": "Leave all rooms and spaces",
     "Don't leave any": "Don't leave any",
-    "Leave specific rooms and subspaces": "Leave specific rooms and subspaces",
+    "Leave specific rooms and spaces": "Leave specific rooms and spaces",
     "Search %(spaceName)s": "Search %(spaceName)s",
     "You won't be able to rejoin unless you are re-invited.": "You won't be able to rejoin unless you are re-invited.",
     "You're the only admin of this space. Leaving it will mean no one has control over it.": "You're the only admin of this space. Leaving it will mean no one has control over it.",
-    "You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.": "You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.",
+    "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.",
     "Leave %(spaceName)s": "Leave %(spaceName)s",
     "Are you sure you want to leave <spaceName/>?": "Are you sure you want to leave <spaceName/>?",
     "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.",

From 3ee8f607c0586f18e3eb03614d769a871695befa Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 29 Jul 2021 15:50:18 +0100
Subject: [PATCH 5/5] Switch dropdown out for radio interaction when leaving
 space

---
 .../dialogs/_AddExistingToSpaceDialog.scss    | 38 +++----------
 res/css/views/dialogs/_LeaveSpaceDialog.scss  | 24 ++------
 .../views/dialogs/LeaveSpaceDialog.tsx        | 56 ++++++-------------
 src/i18n/strings/en_EN.json                   |  4 --
 4 files changed, 30 insertions(+), 92 deletions(-)

diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 5d9ea06e520..42e17c8d987 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -50,35 +50,6 @@ limitations under the License.
             line-height: $font-15px;
         }
 
-        .mx_AddExistingToSpace_entry {
-            display: flex;
-            margin-top: 12px;
-
-            .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
-            .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
-                margin-right: 12px;
-            }
-
-            img.mx_RoomAvatar_isSpaceRoom,
-            .mx_RoomAvatar_isSpaceRoom img {
-                border-radius: 8px;
-            }
-
-            .mx_AddExistingToSpace_entry_name {
-                font-size: $font-15px;
-                line-height: 30px;
-                flex-grow: 1;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                margin-right: 12px;
-            }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
-        }
-
         .mx_AccessibleButton_kind_link {
             font-size: $font-12px;
             line-height: $font-15px;
@@ -260,11 +231,16 @@ limitations under the License.
     display: flex;
     margin-top: 12px;
 
-    // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
-    .mx_DecoratedRoomAvatar {
+    .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
         margin-right: 12px;
     }
 
+    img.mx_RoomAvatar_isSpaceRoom,
+    .mx_RoomAvatar_isSpaceRoom img {
+        border-radius: 8px;
+    }
+
     .mx_AddExistingToSpace_entry_name {
         font-size: $font-15px;
         line-height: 30px;
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss
index e28ff82bcf8..c982f50e52f 100644
--- a/res/css/views/dialogs/_LeaveSpaceDialog.scss
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss
@@ -27,24 +27,15 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-
-    &.mx_LeaveSpaceDialog_hasChildren {
-        height: 500px;
-    }
+    max-height: 520px;
 
     .mx_Dialog_content {
         flex-grow: 1;
-        margin: 0 0 24px;
-        color: $tertiary-fg-color;
+        margin: 0;
         overflow-y: auto;
 
-        .mx_Dropdown_input {
-            border-radius: 8px;
-            border-color: $input-border-color;
-        }
-
-        .mx_Dropdown_option {
-            font-size: $font-15px;
+        .mx_RadioButton + .mx_RadioButton {
+            margin-top: 16px;
         }
 
         .mx_SearchBox {
@@ -61,17 +52,12 @@ limitations under the License.
 
         .mx_LeaveSpaceDialog_section {
             margin: 16px 0;
-
-            .mx_Dropdown + span {
-                display: inline-block;
-                margin-top: 8px;
-            }
         }
 
         .mx_LeaveSpaceDialog_section_warning {
             position: relative;
             border-radius: 8px;
-            margin: 12px 0;
+            margin: 12px 0 0;
             padding: 12px 8px 12px 42px;
             background-color: $header-panel-bg-color;
 
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index 7d3ded78e7e..6e1e798e9df 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 import { _t } from '../../../languageHandler';
-import Dropdown from "../elements/Dropdown";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
 import SpaceStore from "../../../stores/SpaceStore";
@@ -27,7 +26,7 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { Entry } from "./AddExistingToSpaceDialog";
 import SearchBox from "../../structures/SearchBox";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
-import classNames from "classnames";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
 
 enum RoomsToLeave {
     All = "All",
@@ -91,41 +90,24 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
         }
     }, [setRoomsToLeave, state, spaceChildren]);
 
-    let captionSpan;
-    switch (state) {
-        case RoomsToLeave.All:
-            captionSpan = _t("You will leave all rooms and spaces in <spaceName/>.", {}, {
-                spaceName: () => <b>{ space.name }</b>,
-            });
-            break;
-        case RoomsToLeave.None:
-            captionSpan = _t("You'll still be a part of all rooms and spaces in <spaceName/> you've joined.", {}, {
-                spaceName: () => <b>{ space.name }</b>,
-            });
-            break;
-        case RoomsToLeave.Specific:
-            captionSpan = <span>{ _t("Pick which rooms and spaces you want to leave.") }</span>;
-            break;
-    }
-
     return <div className="mx_LeaveSpaceDialog_section">
-        <Dropdown
-            id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
-            onOptionChange={setState}
+        <StyledRadioGroup
+            name="roomsToLeave"
             value={state}
-            label={_t("Choose which rooms and spaces you wish to leave")}
-        >
-            <div key={RoomsToLeave.All}>
-                { _t("Leave all rooms and spaces") }
-            </div>
-            <div key={RoomsToLeave.None}>
-                { _t("Don't leave any") }
-            </div>
-            <div key={RoomsToLeave.Specific}>
-                { _t("Leave specific rooms and spaces") }
-            </div>
-        </Dropdown>
-        { captionSpan }
+            onChange={setState}
+            definitions={[
+                {
+                    value: RoomsToLeave.All,
+                    label: _t("Leave all rooms and spaces"),
+                }, {
+                    value: RoomsToLeave.None,
+                    label: _t("Don't leave any"),
+                }, {
+                    value: RoomsToLeave.Specific,
+                    label: _t("Leave specific rooms and spaces"),
+                },
+            ]}
+        />
 
         { state === RoomsToLeave.Specific && (
             <SpaceChildPicker
@@ -178,9 +160,7 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
 
     return <BaseDialog
         title={_t("Leave %(spaceName)s", { spaceName: space.name })}
-        className={classNames("mx_LeaveSpaceDialog", {
-            mx_LeaveSpaceDialog_hasChildren: spaceChildren.length > 0,
-        })}
+        className="mx_LeaveSpaceDialog"
         contentId="mx_LeaveSpaceDialog"
         onFinished={() => onFinished(false)}
         fixedWidth={false}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d50d5f514ea..706dea88cf2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2373,10 +2373,6 @@
     "Clear cache and resync": "Clear cache and resync",
     "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!",
     "Updating %(brand)s": "Updating %(brand)s",
-    "You will leave all rooms and spaces in <spaceName/>.": "You will leave all rooms and spaces in <spaceName/>.",
-    "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.",
-    "Pick which rooms and spaces you want to leave.": "Pick which rooms and spaces you want to leave.",
-    "Choose which rooms and spaces you wish to leave": "Choose which rooms and spaces you wish to leave",
     "Leave all rooms and spaces": "Leave all rooms and spaces",
     "Don't leave any": "Don't leave any",
     "Leave specific rooms and spaces": "Leave specific rooms and spaces",