Skip to content

Commit 4b9382f

Browse files
floriandurosflorianduros
authored
New room list: hide favourites and people meta spaces (#29241)
* feat(new room list)!: hide Favourites and People meta spaces when the new room list is enabled * test(space store): add testcase for new labs flag * feat(quick settings): hide pin to sidebar and more options and add extra margin
1 parent 03a5ee1 commit 4b9382f

File tree

5 files changed

+120
-63
lines changed

5 files changed

+120
-63
lines changed

‎res/css/structures/_QuickSettingsButton.pcss

+6
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@ Please see LICENSE files in the repository root for full details.
104104
}
105105
}
106106

107+
.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
108+
.mx_QuickThemeSwitcher {
109+
margin-top: var(--cpd-space-2x);
110+
}
111+
}
112+
107113
.mx_QuickSettingsButton_icon {
108114
// TODO remove when all icons have fill=currentColor
109115
* {

‎src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

+39-26
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@ const SidebarUserSettingsTab: React.FC = () => {
7272
PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", event, 1);
7373
};
7474

75+
// "Favourites" and "People" meta spaces are not available in the new room list
76+
const newRoomListEnabled = useSettingValue("feature_new_room_list");
77+
7578
return (
7679
<SettingsTab>
7780
<SettingsSection>
@@ -109,33 +112,43 @@ const SidebarUserSettingsTab: React.FC = () => {
109112
</SettingsSubsectionText>
110113
</StyledCheckbox>
111114

112-
<StyledCheckbox
113-
checked={!!favouritesEnabled}
114-
onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebSettingsSidebarTabSpacesCheckbox")}
115-
className="mx_SidebarUserSettingsTab_checkbox"
116-
>
117-
<SettingsSubsectionText>
118-
<FavouriteSolidIcon />
119-
{_t("common|favourites")}
120-
</SettingsSubsectionText>
121-
<SettingsSubsectionText>
122-
{_t("settings|sidebar|metaspaces_favourites_description")}
123-
</SettingsSubsectionText>
124-
</StyledCheckbox>
115+
{!newRoomListEnabled && (
116+
<>
117+
<StyledCheckbox
118+
checked={!!favouritesEnabled}
119+
onChange={onMetaSpaceChangeFactory(
120+
MetaSpace.Favourites,
121+
"WebSettingsSidebarTabSpacesCheckbox",
122+
)}
123+
className="mx_SidebarUserSettingsTab_checkbox"
124+
>
125+
<SettingsSubsectionText>
126+
<FavouriteSolidIcon />
127+
{_t("common|favourites")}
128+
</SettingsSubsectionText>
129+
<SettingsSubsectionText>
130+
{_t("settings|sidebar|metaspaces_favourites_description")}
131+
</SettingsSubsectionText>
132+
</StyledCheckbox>
125133

126-
<StyledCheckbox
127-
checked={!!peopleEnabled}
128-
onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebSettingsSidebarTabSpacesCheckbox")}
129-
className="mx_SidebarUserSettingsTab_checkbox"
130-
>
131-
<SettingsSubsectionText>
132-
<UserProfileSolidIcon />
133-
{_t("common|people")}
134-
</SettingsSubsectionText>
135-
<SettingsSubsectionText>
136-
{_t("settings|sidebar|metaspaces_people_description")}
137-
</SettingsSubsectionText>
138-
</StyledCheckbox>
134+
<StyledCheckbox
135+
checked={!!peopleEnabled}
136+
onChange={onMetaSpaceChangeFactory(
137+
MetaSpace.People,
138+
"WebSettingsSidebarTabSpacesCheckbox",
139+
)}
140+
className="mx_SidebarUserSettingsTab_checkbox"
141+
>
142+
<SettingsSubsectionText>
143+
<UserProfileSolidIcon />
144+
{_t("common|people")}
145+
</SettingsSubsectionText>
146+
<SettingsSubsectionText>
147+
{_t("settings|sidebar|metaspaces_people_description")}
148+
</SettingsSubsectionText>
149+
</StyledCheckbox>
150+
</>
151+
)}
139152

140153
<StyledCheckbox
141154
checked={!!orphansEnabled}

‎src/components/views/spaces/QuickSettingsButton.tsx

+48-35
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,17 @@ const QuickSettingsButton: React.FC<{
4040

4141
const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
4242
const developerModeEnabled = useSettingValue("developerMode");
43+
// "Favourites" and "People" meta spaces are not available in the new room list
44+
const newRoomListEnabled = useSettingValue("feature_new_room_list");
4345

4446
let contextMenu: JSX.Element | undefined;
4547
if (menuDisplayed && handle.current) {
4648
contextMenu = (
4749
<ContextMenu
4850
{...alwaysAboveRightOf(handle.current.getBoundingClientRect(), ChevronFace.None, 16)}
49-
wrapperClassName="mx_QuickSettingsButton_ContextMenuWrapper"
51+
wrapperClassName={classNames("mx_QuickSettingsButton_ContextMenuWrapper", {
52+
mx_QuickSettingsButton_ContextMenuWrapper_new_room_list: newRoomListEnabled,
53+
})}
5054
onFinished={closeMenu}
5155
managed={false}
5256
focusLock={true}
@@ -81,41 +85,50 @@ const QuickSettingsButton: React.FC<{
8185
</AccessibleButton>
8286
)}
8387

84-
<h4 className="mx_QuickSettingsButton_pinToSidebarHeading">
85-
<PinUprightIcon className="mx_QuickSettingsButton_icon" />
86-
{_t("quick_settings|metaspace_section")}
87-
</h4>
88-
89-
<StyledCheckbox
90-
className="mx_QuickSettingsButton_favouritesCheckbox"
91-
checked={!!favouritesEnabled}
92-
onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebQuickSettingsPinToSidebarCheckbox")}
93-
>
94-
<FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
95-
{_t("common|favourites")}
96-
</StyledCheckbox>
97-
<StyledCheckbox
98-
className="mx_QuickSettingsButton_peopleCheckbox"
99-
checked={!!peopleEnabled}
100-
onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")}
101-
>
102-
<UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
103-
{_t("common|people")}
104-
</StyledCheckbox>
105-
<AccessibleButton
106-
className="mx_QuickSettingsButton_moreOptionsButton"
107-
onClick={() => {
108-
closeMenu();
109-
defaultDispatcher.dispatch({
110-
action: Action.ViewUserSettings,
111-
initialTabId: UserTab.Sidebar,
112-
});
113-
}}
114-
>
115-
<OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
116-
{_t("quick_settings|sidebar_settings")}
117-
</AccessibleButton>
88+
{!newRoomListEnabled && (
89+
<>
90+
<h4 className="mx_QuickSettingsButton_pinToSidebarHeading">
91+
<PinUprightIcon className="mx_QuickSettingsButton_icon" />
92+
{_t("quick_settings|metaspace_section")}
93+
</h4>
11894

95+
<StyledCheckbox
96+
className="mx_QuickSettingsButton_favouritesCheckbox"
97+
checked={!!favouritesEnabled}
98+
onChange={onMetaSpaceChangeFactory(
99+
MetaSpace.Favourites,
100+
"WebQuickSettingsPinToSidebarCheckbox",
101+
)}
102+
>
103+
<FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
104+
{_t("common|favourites")}
105+
</StyledCheckbox>
106+
<StyledCheckbox
107+
className="mx_QuickSettingsButton_peopleCheckbox"
108+
checked={!!peopleEnabled}
109+
onChange={onMetaSpaceChangeFactory(
110+
MetaSpace.People,
111+
"WebQuickSettingsPinToSidebarCheckbox",
112+
)}
113+
>
114+
<UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
115+
{_t("common|people")}
116+
</StyledCheckbox>
117+
<AccessibleButton
118+
className="mx_QuickSettingsButton_moreOptionsButton"
119+
onClick={() => {
120+
closeMenu();
121+
defaultDispatcher.dispatch({
122+
action: Action.ViewUserSettings,
123+
initialTabId: UserTab.Sidebar,
124+
});
125+
}}
126+
>
127+
<OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
128+
{_t("quick_settings|sidebar_settings")}
129+
</AccessibleButton>
130+
</>
131+
)}
119132
<QuickThemeSwitcher requestClose={closeMenu} />
120133
</ContextMenu>
121134
);

‎src/stores/spaces/SpaceStore.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,20 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
162162
SettingsStore.monitorSetting("feature_dynamic_room_predecessors", null);
163163
}
164164

165+
/**
166+
* Get the order of meta spaces to display in the space panel.
167+
*
168+
* This accessor should be removed when the "feature_new_room_list" labs flag is removed.
169+
* "People" and "Favourites" will be removed from the "metaSpaceOrder" array and this filter will no longer be needed.
170+
* @private
171+
*/
172+
private get metaSpaceOrder(): MetaSpace[] {
173+
if (!SettingsStore.getValue("feature_new_room_list")) return metaSpaceOrder;
174+
175+
// People and Favourites are not shown when the new room list is enabled
176+
return metaSpaceOrder.filter((space) => space !== MetaSpace.People && space !== MetaSpace.Favourites);
177+
}
178+
165179
public get invitedSpaces(): Room[] {
166180
return Array.from(this._invitedSpaces);
167181
}
@@ -1164,7 +1178,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
11641178

11651179
const oldMetaSpaces = this._enabledMetaSpaces;
11661180
const enabledMetaSpaces = SettingsStore.getValue("Spaces.enabledMetaSpaces");
1167-
this._enabledMetaSpaces = metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
1181+
this._enabledMetaSpaces = this.metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
11681182

11691183
this._allRoomsInHome = SettingsStore.getValue("Spaces.allRoomsInHome");
11701184
this.sendUserProperties();
@@ -1278,7 +1292,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
12781292

12791293
case "Spaces.enabledMetaSpaces": {
12801294
const newValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
1281-
const enabledMetaSpaces = metaSpaceOrder.filter((k) => newValue[k]);
1295+
const enabledMetaSpaces = this.metaSpaceOrder.filter((k) => newValue[k]);
12821296
if (arrayHasDiff(this._enabledMetaSpaces, enabledMetaSpaces)) {
12831297
const hadPeopleOrHomeEnabled = this.enabledMetaSpaces.some((s) => {
12841298
return s === MetaSpace.Home || s === MetaSpace.People;

‎test/unit-tests/stores/SpaceStore-test.ts

+11
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,8 @@ describe("SpaceStore", () => {
141141
});
142142

143143
afterEach(async () => {
144+
// Disable the new room list feature flag
145+
await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, false);
144146
await testUtils.resetAsyncStoreWithClient(store);
145147
});
146148

@@ -1391,6 +1393,15 @@ describe("SpaceStore", () => {
13911393
removeListener();
13921394
});
13931395

1396+
it("Favourites and People meta spaces should not be returned when the feature_new_room_list labs flag is enabled", async () => {
1397+
// Enable the new room list
1398+
await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, true);
1399+
1400+
await run();
1401+
// Favourites and People meta spaces should not be returned
1402+
expect(SpaceStore.instance.enabledMetaSpaces).toStrictEqual([MetaSpace.Home, MetaSpace.Orphans]);
1403+
});
1404+
13941405
describe("when feature_dynamic_room_predecessors is not enabled", () => {
13951406
beforeAll(() => {
13961407
jest.spyOn(SettingsStore, "getValue").mockImplementation(

0 commit comments

Comments
 (0)