Allow options to cascade kicks/bans throughout spaces

res/css/_components.scss

@@ -1,8 +1,10 @@
 // autogenerated by rethemendex.sh
+@import "./_animations.scss";
 @import "./_common.scss";
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./structures/_AutoHideScrollbar.scss";
+@import "./structures/_BackdropPanel.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
@@ -17,7 +19,6 @@
 @import "./structures/_LeftPanelWidget.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
-@import "./structures/_BackdropPanel.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";
@@ -72,6 +73,7 @@
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
+@import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
@@ -266,6 +268,7 @@
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
 @import "./views/spaces/_SpaceBasicSettings.scss";
+@import "./views/spaces/_SpaceChildrenPicker.scss";
 @import "./views/spaces/_SpaceCreateMenu.scss";
 @import "./views/spaces/_SpacePublicShare.scss";
 @import "./views/terms/_InlineTermsAgreement.scss";

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.scss

@@ -0,0 +1,66 @@
+/*
+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_ConfirmSpaceUserActionDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+    }
+}
+
+.mx_ConfirmSpaceUserActionDialog {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 520px;
+
+    .mx_Dialog_content {
+        margin: 12px 0;
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
+    .mx_ConfirmUserActionDialog_reasonField {
+        margin-bottom: 12px;
+    }
+
+    .mx_ConfirmSpaceUserActionDialog_warning {
+        position: relative;
+        border-radius: 8px;
+        padding: 12px 8px 12px 42px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-content;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: calc(50% - 8px); // vertical centering
+            height: 16px;
+            width: 16px;
+            background-color: $secondary-content;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+        }
+    }
+}

res/css/views/dialogs/_ConfirmUserActionDialog.scss

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ConfirmUserActionDialog .mx_Dialog_content {
+.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
     min-height: 48px;
     margin-bottom: 24px;
 }
 
 .mx_ConfirmUserActionDialog_avatar {
     float: left;
     margin-right: 20px;
-    margin-top: -2px;
 }
 
 .mx_ConfirmUserActionDialog_name {
+    padding-top: 2px;
     font-size: $font-18px;
 }
 
@@ -37,16 +37,4 @@ limitations under the License.
     font-size: $font-14px;
     color: $primary-content;
     background-color: $background;
-
-    border-radius: 3px;
-    border: solid 1px $input-border-color;
-    line-height: $font-36px;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-
-    margin-bottom: 24px;
-
-    width: 90%;
 }

res/css/views/dialogs/_LeaveSpaceDialog.scss

@@ -27,33 +27,13 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    max-height: 520px;
+    height: 520px;
 
     .mx_Dialog_content {
         flex-grow: 1;
         margin: 0;
         overflow-y: auto;
 
-        .mx_RadioButton + .mx_RadioButton {
-            margin-top: 16px;
-        }
-
-        .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_LeaveSpaceDialog_section_warning {
             position: relative;
             border-radius: 8px;

res/css/views/spaces/_SpaceChildrenPicker.scss

@@ -0,0 +1,35 @@
+/*
+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_SpaceChildrenPicker {
+    margin: 16px 0;
+
+    .mx_RadioButton + .mx_RadioButton {
+        margin-top: 16px;
+    }
+
+    .mx_SearchBox {
+        // To match the space around the title
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+        border-radius: 8px;
+    }
+
+    .mx_SpaceChildrenPicker_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+}

src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx

@@ -0,0 +1,85 @@
+/*
+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, { ComponentProps, useMemo, useState } from 'react';
+
+import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
+import SpaceStore from "../../../stores/SpaceStore";
+import { Room } from "matrix-js-sdk/src/models/room";
+import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
+
+type BaseProps = ComponentProps<typeof ConfirmUserActionDialog>;
+interface IProps extends Omit<BaseProps, "groupMember" | "matrixClient" | "children" | "onFinished"> {
+    space: Room;
+    allLabel: string;
+    specificLabel: string;
+    noneLabel?: string;
+    warningMessage?: string;
+    onFinished(success: boolean, reason?: string, rooms?: Room[]): void;
+    spaceChildFilter?(child: Room): boolean;
+}
+
+const ConfirmSpaceUserActionDialog: React.FC<IProps> = ({
+    space,
+    spaceChildFilter,
+    allLabel,
+    specificLabel,
+    noneLabel,
+    warningMessage,
+    onFinished,
+    ...props
+}) => {
+    const spaceChildren = useMemo(() => {
+        const children = SpaceStore.instance.getChildren(space.roomId);
+        if (spaceChildFilter) {
+            return children.filter(spaceChildFilter);
+        }
+        return children;
+    }, [space.roomId, spaceChildFilter]);
+
+    const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+    const selectedRooms = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
+
+    let warning: JSX.Element;
+    if (warningMessage) {
+        warning = <div className="mx_ConfirmSpaceUserActionDialog_warning">
+            { warningMessage }
+        </div>;
+    }
+
+    return (
+        <ConfirmUserActionDialog
+            {...props}
+            onFinished={(success: boolean, reason?: string) => {
+                onFinished(success, reason, roomsToLeave);
+            }}
+            className="mx_ConfirmSpaceUserActionDialog"
+        >
+            { warning }
+            <SpaceChildrenPicker
+                space={space}
+                spaceChildren={spaceChildren}
+                selected={selectedRooms}
+                allLabel={allLabel}
+                specificLabel={specificLabel}
+                noneLabel={noneLabel}
+                onChange={setRoomsToLeave}
+            />
+        </ConfirmUserActionDialog>
+    );
+};
+
+export default ConfirmSpaceUserActionDialog;