Rm/1955 hierarchy ux 1

src/components/structures/SpaceRoomView.tsx

@@ -34,7 +34,7 @@ import { useStateArray } from "../../hooks/useStateArray";
 import { _t } from "../../languageHandler";
 import PosthogTrackers from "../../PosthogTrackers";
 import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
-import { UIComponent } from "../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../settings/UIFeature";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
@@ -74,6 +74,7 @@ import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import SettingsStore from "../../settings/SettingsStore";
 
 interface IProps {
     space: Room;
@@ -173,7 +174,7 @@ const SpaceLandingAddButton: React.FC<{ space: Room }> = ({ space }) => {
                             showAddExistingRooms(space);
                         }}
                     />
-                    {canCreateSpace && (
+                    {canCreateSpace && SettingsStore.getValue(UIFeature.ShowCreateSpaceButton) && (
                         <IconizedContextMenuOption
                             label={_t("room_list|add_space_label")}
                             iconClassName="mx_RoomList_iconPlus"

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -37,7 +37,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import { Action } from "../../../dispatcher/actions";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
@@ -193,7 +193,7 @@ const SpaceContextMenu: React.FC<IProps> = ({ space, hideHeader, onFinished, ...
                         <BetaPill />
                     </IconizedContextMenuOption>
                 )}
-                {canAddSubSpaces && (
+                {SettingsStore.getValue(UIFeature.AddSubSpace) && canAddSubSpaces && (
                     <IconizedContextMenuOption
                         data-testid="new-subspace-option"
                         iconClassName="mx_SpacePanel_iconPlus"

src/components/views/rooms/RoomListHeader.tsx

@@ -28,7 +28,7 @@ import { useEventEmitterState, useTypedEventEmitter, useTypedEventEmitterState }
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import { _t } from "../../../languageHandler";
 import PosthogTrackers from "../../../PosthogTrackers";
-import { UIComponent } from "../../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import {
     getMetaSpaceName,
     MetaSpace,
@@ -59,6 +59,7 @@ import IconizedContextMenu, {
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import InlineSpinner from "../elements/InlineSpinner";
 import { HomeButtonContextMenu } from "../spaces/SpacePanel";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
     // align the context menu's icons with the icon which opened the context menu
@@ -269,7 +270,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                         disabled={!canAddSubRooms}
                         title={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
                     />
-                    {canCreateSpaces && (
+                    {SettingsStore.getValue(UIFeature.AddSpace) && canCreateSpaces && (
                         <IconizedContextMenuOption
                             label={_t("room_list|add_space_label")}
                             iconClassName="mx_RoomListHeader_iconPlus"

src/components/views/spaces/SpacePanel.tsx

@@ -72,7 +72,7 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { Action } from "../../../dispatcher/actions";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
 import { KeyboardShortcut } from "../settings/KeyboardShortcut";
@@ -349,8 +349,15 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                     </Draggable>
                 ))}
                 {children}
-                {shouldShowComponent(UIComponent.CreateSpaces) && (
-                    <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
+                {SettingsStore.getValue(UIFeature.ShowCreateSpaceButton) && (
+                    <>
+                        {shouldShowComponent(UIComponent.CreateSpaces) && (
+                            <CreateSpaceButton
+                                isPanelCollapsed={isPanelCollapsed}
+                                setPanelCollapsed={setPanelCollapsed}
+                            />
+                        )}
+                    </>
                 )}
             </IndicatorScrollbar>
         );

src/settings/Settings.tsx

@@ -1239,6 +1239,18 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
     },
+    [UIFeature.ShowCreateSpaceButton]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.AddSubSpace]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.AddSpace]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
     [UIFeature.ShowStickersButtonSetting]: {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,

src/settings/UIFeature.ts

@@ -33,6 +33,9 @@ export const enum UIFeature {
     RoomHistorySettings = "UIFeature.roomHistorySettings",
     TimelineEnableRelativeDates = "UIFeature.timelineEnableRelativeDates",
     BulkUnverifiedSessionsReminder = "UIFeature.BulkUnverifiedSessionsReminder",
+    ShowCreateSpaceButton = "UIFeature.showCreateSpaceButton",
+    AddSubSpace = "UIFeature.addSubSpace",
+    AddSpace = "UIFeature.addSpace",
     ShowStickersButtonSetting = "UIFeature.showStickersButtonSetting",
     InsertTrailingColonSetting = "UIFeature.insertTrailingColonSetting",
     ShowJoinLeavesSetting = "UIFeature.showJoinLeavesSetting",

test/components/views/context_menus/SpaceContextMenu-test.tsx

@@ -31,7 +31,8 @@ import {
 } from "../../../../src/utils/space";
 import { leaveSpace } from "../../../../src/utils/leave-behaviour";
 import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../src/settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../../src/settings/UIFeature";
+import SettingsStore from "../../../../src/settings/SettingsStore";
 
 jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
@@ -223,4 +224,41 @@ describe("<SpaceContextMenu />", () => {
             expect(onFinished).toHaveBeenCalled();
         });
     });
+
+    describe("UIFeature.AddSubSpace feature flag", () => {
+        const space = makeMockSpace();
+
+        beforeEach(() => {
+            // set space to allow adding children to space
+            mocked(space.currentState.maySendStateEvent).mockReturnValue(true);
+            mocked(shouldShowComponent).mockReturnValue(true);
+            jest.clearAllMocks();
+        });
+
+        it("UIFeature.AddSubSpace = true: renders create space button when UIFeature is true", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.AddSubSpace) return true;
+                else return "default";
+            });
+            renderComponent({ space });
+
+            screen.debug();
+
+            expect(screen.getByTestId("add-to-space-header")).toBeInTheDocument();
+            expect(screen.getByTestId("new-room-option")).toBeInTheDocument();
+            expect(screen.queryByTestId("new-subspace-option")).toBeInTheDocument();
+        });
+
+        it("UIFeature.AddSubSpace = false: does not render create space button when UIFeature is false", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.AddSubSpace) return false;
+                else return "default";
+            });
+            renderComponent({ space });
+
+            expect(screen.getByTestId("add-to-space-header")).toBeInTheDocument();
+            expect(screen.getByTestId("new-room-option")).toBeInTheDocument();
+            expect(screen.queryByTestId("new-subspace-option")).not.toBeInTheDocument();
+        });
+    });
 });

test/components/views/rooms/RoomListHeader-test.tsx

@@ -29,7 +29,7 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../src/settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../../src/settings/UIFeature";
 
 const RoomListHeader = testUtils.wrapInMatrixClientContext(_RoomListHeader);
 
@@ -285,4 +285,30 @@ describe("RoomListHeader", () => {
             checkIsDisabled(items[3]);
         });
     });
+
+    describe("UIFeature.AddSpace", () => {
+        it("UIFeature.AddSpace = true: renders Add Space when user has permission to add spaces", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.AddSpace) return true;
+                else return "default";
+            });
+
+            const testSpace = setupSpace(client);
+            await setupPlusMenu(client, testSpace);
+
+            expect(screen.getByText("Add space")).toBeInTheDocument();
+        });
+
+        it("UIFeature.AddSpace = false: does not render Add Space when user has permission to add spaces", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.AddSpace) return false;
+                else return "default";
+            });
+
+            const testSpace = setupSpace(client);
+            await setupPlusMenu(client, testSpace);
+
+            expect(screen.queryByText("Add space")).not.toBeInTheDocument();
+        });
+    });
 });

test/components/views/spaces/SpacePanel-test.tsx

@@ -26,7 +26,7 @@ import {
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces";
 import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../src/settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../../src/settings/UIFeature";
 import { mkStubRoom, wrapInMatrixClientContext, wrapInSdkContext } from "../../../test-utils";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
@@ -182,6 +182,24 @@ describe("<SpacePanel />", () => {
             fireEvent.click(screen.getByTestId("create-space-button"));
             screen.getByTestId("create-space-button");
         });
+        it("renders create space button when UIFeature is true", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.ShowCreateSpaceButton) return true;
+                return true;
+            });
+            mocked(shouldShowComponent).mockReturnValue(true);
+            render(<SpacePanel />);
+            expect(screen.queryByTestId("create-space-button")).not.toBeNull();
+        });
+        it("does not render create space button when UIFeature is false", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+                if (name === UIFeature.ShowCreateSpaceButton) return false;
+                return true;
+            });
+            mocked(shouldShowComponent).mockReturnValue(true);
+            render(<SpacePanel />);
+            expect(screen.queryByTestId("create-space-button")).toBeNull();
+        });
     });
 
     it("should allow rearranging via drag and drop", async () => {