Support adding space-restricted joins on rooms not members of those spaces

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -93,11 +93,13 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase().trim();
 
-    const [spacesContainingRoom, otherEntries] = useMemo(() => {
+    const [spacesContainingRoom, otherJoinedSpaces, otherEntries] = useMemo(() => {
         const parents = new Set<Room>();
         addAllParents(parents, room);
+
         return [
             Array.from(parents),
+            SpaceStore.instance.spacePanelSpaces.filter((s) => !parents.has(s)),
             filterBoolean(
                 selected.map((roomId) => {
                     const room = cli.getRoom(roomId);
@@ -112,12 +114,13 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
         ];
     }, [cli, selected, room]);
 
-    const [filteredSpacesContainingRoom, filteredOtherEntries] = useMemo(
+    const [filteredSpacesContainingRoom, filteredOtherJoinedSpaces, filteredOtherEntries] = useMemo(
         () => [
             spacesContainingRoom.filter((r) => r.name.toLowerCase().includes(lcQuery)),
+            otherJoinedSpaces.filter((r) => r.name.toLowerCase().includes(lcQuery)),
             otherEntries.filter((r) => r.name.toLowerCase().includes(lcQuery)),
         ],
-        [spacesContainingRoom, otherEntries, lcQuery],
+        [spacesContainingRoom, otherJoinedSpaces, otherEntries, lcQuery],
     );
 
     const onChange = (checked: boolean, room: Room): void => {
@@ -138,6 +141,8 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
         );
     }
 
+    const totalResults =
+        filteredSpacesContainingRoom.length + filteredOtherJoinedSpaces.length + filteredOtherEntries.length;
     return (
         <BaseDialog
             title={_t("Select spaces")}
@@ -206,7 +211,25 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                         </div>
                     ) : null}
 
-                    {filteredSpacesContainingRoom.length + filteredOtherEntries.length < 1 ? (
+                    {filteredOtherJoinedSpaces.length > 0 ? (
+                        <div className="mx_ManageRestrictedJoinRuleDialog_section">
+                            <h3>{_t("Other spaces you know")}</h3>
+                            {filteredOtherJoinedSpaces.map((space) => {
+                                return (
+                                    <Entry
+                                        key={space.roomId}
+                                        room={space}
+                                        checked={newSelected.has(space.roomId)}
+                                        onChange={(checked: boolean) => {
+                                            onChange(checked, space);
+                                        }}
+                                    />
+                                );
+                            })}
+                        </div>
+                    ) : null}
+
+                    {totalResults < 1 ? (
                         <span className="mx_ManageRestrictedJoinRuleDialog_noResults">{_t("No results")}</span>
                     ) : undefined}
                 </AutoHideScrollbar>

src/i18n/strings/en_EN.json

@@ -2970,6 +2970,7 @@
     "Spaces you know that contain this room": "Spaces you know that contain this room",
     "Other spaces or rooms you might not know": "Other spaces or rooms you might not know",
     "These are likely ones other room admins are a part of.": "These are likely ones other room admins are a part of.",
+    "Other spaces you know": "Other spaces you know",
     "Confirm by comparing the following with the User Settings in your other session:": "Confirm by comparing the following with the User Settings in your other session:",
     "Confirm this user's session by comparing the following with their User Settings:": "Confirm this user's session by comparing the following with their User Settings:",
     "Session name": "Session name",

test/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx

@@ -0,0 +1,58 @@
+/*
+Copyright 2023 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 from "react";
+import { render } from "@testing-library/react";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
+import ManageRestrictedJoinRuleDialog from "../../../../src/components/views/dialogs/ManageRestrictedJoinRuleDialog";
+import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+
+// Fake random strings to give a predictable snapshot
+jest.mock("matrix-js-sdk/src/randomstring", () => {
+    return {
+        randomString: () => "abdefghi",
+    };
+});
+
+describe("<ManageRestrictedJoinRuleDialog />", () => {
+    const userId = "@alice:server.org";
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        getRoom: jest.fn(),
+    });
+    const room = new Room("!roomId:server", mockClient, userId);
+    mockClient.getRoom.mockReturnValue(room);
+    DMRoomMap.makeShared(mockClient);
+
+    const onFinished = jest.fn();
+    const getComponent = (props = {}) =>
+        render(<ManageRestrictedJoinRuleDialog room={room} onFinished={onFinished} {...props} />);
+
+    it("should render empty state", () => {
+        expect(getComponent().asFragment()).toMatchSnapshot();
+    });
+
+    it("should list spaces which are not parents of the room", () => {
+        const space1 = new Room("!space:server", mockClient, userId);
+        space1.name = "Other Space";
+        jest.spyOn(SpaceStore.instance, "spacePanelSpaces", "get").mockReturnValue([space1]);
+
+        expect(getComponent().asFragment()).toMatchSnapshot();
+    });
+});

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not parents of the room 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ManageRestrictedJoinRuleDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Select spaces
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <p>
+      <span>
+        Decide which spaces can access this room. If a space is selected, its members can find and join 
+        <b>
+          !roomId:server
+        </b>
+        .
+      </span>
+    </p>
+    <div
+      class="mx_SearchBox mx_textinput"
+    >
+      <input
+        autocomplete="off"
+        class="mx_textinput_icon mx_textinput_search mx_textinput_icon mx_textinput_search"
+        data-testid="searchbox-input"
+        placeholder="Search spaces"
+        type="text"
+        value=""
+      />
+      <div
+        class="mx_AccessibleButton mx_SearchBox_closeButton"
+        role="button"
+        tabindex="-1"
+      />
+    </div>
+    <div
+      class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
+      tabindex="-1"
+    >
+      <div
+        class="mx_ManageRestrictedJoinRuleDialog_section"
+      >
+        <h3>
+          Other spaces you know
+        </h3>
+        <label
+          class="mx_ManageRestrictedJoinRuleDialog_entry"
+        >
+          <div>
+            <div>
+              <span
+                class="mx_BaseAvatar"
+                role="presentation"
+              >
+                <span
+                  aria-hidden="true"
+                  class="mx_BaseAvatar_initial"
+                  style="font-size: 13px; width: 20px; line-height: 20px;"
+                >
+                  O
+                </span>
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  class="mx_BaseAvatar_image"
+                  data-testid="avatar-img"
+                  loading="lazy"
+                  src="data:image/png;base64,00"
+                  style="width: 20px; height: 20px;"
+                />
+              </span>
+              <span
+                class="mx_ManageRestrictedJoinRuleDialog_entry_name"
+              >
+                Other Space
+              </span>
+            </div>
+            <div
+              class="mx_ManageRestrictedJoinRuleDialog_entry_description"
+            >
+              0 members
+            </div>
+          </div>
+          <span
+            class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          >
+            <input
+              id="checkbox_abdefghi"
+              type="checkbox"
+            />
+            <label
+              for="checkbox_abdefghi"
+            >
+              <div
+                class="mx_Checkbox_background"
+              >
+                <div
+                  class="mx_Checkbox_checkmark"
+                />
+              </div>
+            </label>
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mx_ManageRestrictedJoinRuleDialog_footer"
+    >
+      <div
+        class="mx_ManageRestrictedJoinRuleDialog_section_info"
+      >
+        You're removing all spaces. Access will default to invite only
+      </div>
+      <div
+        class="mx_ManageRestrictedJoinRuleDialog_footer_buttons"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+          role="button"
+          tabindex="0"
+        >
+          Cancel
+        </div>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+        >
+          Confirm
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ManageRestrictedJoinRuleDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Select spaces
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <p>
+      <span>
+        Decide which spaces can access this room. If a space is selected, its members can find and join 
+        <b>
+          !roomId:server
+        </b>
+        .
+      </span>
+    </p>
+    <div
+      class="mx_SearchBox mx_textinput"
+    >
+      <input
+        autocomplete="off"
+        class="mx_textinput_icon mx_textinput_search mx_textinput_icon mx_textinput_search"
+        data-testid="searchbox-input"
+        placeholder="Search spaces"
+        type="text"
+        value=""
+      />
+      <div
+        class="mx_AccessibleButton mx_SearchBox_closeButton"
+        role="button"
+        tabindex="-1"
+      />
+    </div>
+    <div
+      class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
+      tabindex="-1"
+    >
+      <span
+        class="mx_ManageRestrictedJoinRuleDialog_noResults"
+      >
+        No results
+      </span>
+    </div>
+    <div
+      class="mx_ManageRestrictedJoinRuleDialog_footer"
+    >
+      <div
+        class="mx_ManageRestrictedJoinRuleDialog_section_info"
+      >
+        You're removing all spaces. Access will default to invite only
+      </div>
+      <div
+        class="mx_ManageRestrictedJoinRuleDialog_footer_buttons"
+      >
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+          role="button"
+          tabindex="0"
+        >
+          Cancel
+        </div>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+        >
+          Confirm
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;