Remove new room breadcrumbs (#11104)

* Deprecate new room breadcrumbs

* i18n

res/css/_components.pcss

@@ -288,7 +288,6 @@
 @import "./views/rooms/_PinnedEventTile.pcss";
 @import "./views/rooms/_PresenceLabel.pcss";
 @import "./views/rooms/_ReadReceiptGroup.pcss";
-@import "./views/rooms/_RecentlyViewedButton.pcss";
 @import "./views/rooms/_ReplyPreview.pcss";
 @import "./views/rooms/_ReplyTile.pcss";
 @import "./views/rooms/_RoomBreadcrumbs.pcss";

res/css/views/rooms/_RecentlyViewedButton.pcss

@@ -1,77 +0,0 @@
-/*
-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_RecentlyViewedButton_ContextMenu {
-    padding: 16px 8px 16px 16px;
-    width: max-content;
-    max-width: 240px;
-    max-height: 400px;
-    border: 1px solid rgba($primary-content, 0.1);
-    border-radius: 8px;
-    box-shadow: 0 8px 4px rgba(0, 0, 0, 0.08);
-    display: flex;
-    flex-direction: column;
-
-    > h4 {
-        margin: 0 0 12px 0;
-    }
-
-    > div {
-        overflow-y: auto;
-
-        * {
-            margin-right: 4px;
-        }
-    }
-
-    .mx_AccessibleButton {
-        margin-top: 2px;
-        padding: 4px;
-        display: flex;
-        align-items: center;
-        border-radius: 8px;
-        min-height: 34px;
-
-        &:hover {
-            background-color: $panel-actions;
-        }
-
-        .mx_DecoratedRoomAvatar {
-            margin-right: 8px;
-            width: 24px;
-
-            .mx_BaseAvatar {
-                width: inherit;
-            }
-        }
-
-        .mx_RecentlyViewedButton_entry_label {
-            display: grid;
-
-            > div {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-
-        .mx_RecentlyViewedButton_entry_spaces {
-            font-size: $font-12px;
-            line-height: $font-15px;
-            color: $secondary-content;
-        }
-    }
-}

src/components/structures/LeftPanel.tsx

@@ -33,13 +33,11 @@ import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
 import { IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
 import RoomListHeader from "../views/rooms/RoomListHeader";
-import RecentlyViewedButton from "../views/rooms/RecentlyViewedButton";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import IndicatorScrollbar from "./IndicatorScrollbar";
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
-import SettingsStore from "../../settings/SettingsStore";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../settings/UIFeature";
@@ -57,7 +55,6 @@ interface IProps {
 enum BreadcrumbsMode {
     Disabled,
     Legacy,
-    Labs,
 }
 
 interface IState {
@@ -85,8 +82,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     private static get breadcrumbsMode(): BreadcrumbsMode {
-        if (!BreadcrumbsStore.instance.visible) return BreadcrumbsMode.Disabled;
+        return !BreadcrumbsStore.instance.visible ? BreadcrumbsMode.Disabled : BreadcrumbsMode.Legacy;
-        return SettingsStore.getValue("feature_breadcrumbs_v2") ? BreadcrumbsMode.Labs : BreadcrumbsMode.Legacy;
     }
 
     public componentDidMount(): void {
@@ -344,9 +340,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
 
         let rightButton: JSX.Element | undefined;
-        if (this.state.showBreadcrumbs === BreadcrumbsMode.Labs) {
+        if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
-            rightButton = <RecentlyViewedButton />;
-        } else if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
             rightButton = (
                 <AccessibleTooltipButton
                     className="mx_LeftPanel_exploreButton"

src/components/views/rooms/RecentlyViewedButton.tsx

@@ -1,84 +0,0 @@
-/*
-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, { useRef } from "react";
-
-import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { MenuItem } from "../../structures/ContextMenu";
-import { useEventEmitterState } from "../../../hooks/useEventEmitter";
-import { _t } from "../../../languageHandler";
-import dis from "../../../dispatcher/dispatcher";
-import { RoomContextDetails } from "./RoomContextDetails";
-import InteractiveTooltip, { Direction } from "../elements/InteractiveTooltip";
-import { Action } from "../../../dispatcher/actions";
-import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import RoomAvatar from "../avatars/RoomAvatar";
-
-const RecentlyViewedButton: React.FC = () => {
-    const tooltipRef = useRef<InteractiveTooltip>(null);
-    const crumbs = useEventEmitterState(BreadcrumbsStore.instance, UPDATE_EVENT, () => BreadcrumbsStore.instance.rooms);
-
-    const content = (
-        <div className="mx_RecentlyViewedButton_ContextMenu">
-            <h4>{_t("Recently viewed")}</h4>
-            <div>
-                {crumbs.map((crumb) => {
-                    return (
-                        <MenuItem
-                            key={crumb.roomId}
-                            onClick={(ev) => {
-                                dis.dispatch<ViewRoomPayload>({
-                                    action: Action.ViewRoom,
-                                    room_id: crumb.roomId,
-                                    metricsTrigger: "WebVerticalBreadcrumbs",
-                                    metricsViaKeyboard: ev.type !== "click",
-                                });
-                                tooltipRef.current?.hideTooltip();
-                            }}
-                        >
-                            {crumb.isSpaceRoom() ? (
-                                <RoomAvatar room={crumb} width={24} height={24} />
-                            ) : (
-                                <DecoratedRoomAvatar room={crumb} avatarSize={24} tooltipProps={{ tabIndex: -1 }} />
-                            )}
-                            <span className="mx_RecentlyViewedButton_entry_label">
-                                <div>{crumb.name}</div>
-                                <RoomContextDetails className="mx_RecentlyViewedButton_entry_spaces" room={crumb} />
-                            </span>
-                        </MenuItem>
-                    );
-                })}
-            </div>
-        </div>
-    );
-
-    return (
-        <InteractiveTooltip content={content} direction={Direction.Right} ref={tooltipRef}>
-            {({ ref, onMouseOver }) => (
-                <span
-                    className="mx_LeftPanel_recentsButton"
-                    title={_t("Recently viewed")}
-                    ref={ref}
-                    onMouseOver={onMouseOver}
-                />
-            )}
-        </InteractiveTooltip>
-    );
-};
-
-export default RecentlyViewedButton;

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -141,7 +141,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         const useCase = SettingsStore.getValue<UseCase | null>("FTUE.useCaseSelection");
         const roomListSettings = PreferencesUserSettingsTab.ROOM_LIST_SETTINGS
             // Only show the breadcrumbs setting if breadcrumbs v2 is disabled
-            .filter((it) => it !== "breadcrumbs" || !SettingsStore.getValue("feature_breadcrumbs_v2"))
+            .filter((it) => it !== "breadcrumbs")
             // Only show the user onboarding setting if the user should see the user onboarding page
             .filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
 

src/i18n/strings/en_EN.json

@@ -970,7 +970,6 @@
     "Show current avatar and name for users in message history": "Show current avatar and name for users in message history",
     "Show HTML representation of room topics": "Show HTML representation of room topics",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
-    "Use new room breadcrumbs": "Use new room breadcrumbs",
     "Right panel stays open": "Right panel stays open",
     "Defaults to room member list.": "Defaults to room member list.",
     "Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
@@ -1984,7 +1983,6 @@
     "Seen by %(count)s people|other": "Seen by %(count)s people",
     "Seen by %(count)s people|one": "Seen by %(count)s person",
     "Read receipts": "Read receipts",
-    "Recently viewed": "Recently viewed",
     "Replying": "Replying",
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
@@ -3112,6 +3110,7 @@
     "To search messages, look for this icon at the top of a room <icon/>": "To search messages, look for this icon at the top of a room <icon/>",
     "Recent searches": "Recent searches",
     "Clear": "Clear",
+    "Recently viewed": "Recently viewed",
     "Use <arrows/> to scroll": "Use <arrows/> to scroll",
     "Search Dialog": "Search Dialog",
     "Remove search filter for %(filter)s": "Remove search filter for %(filter)s",

src/settings/Settings.tsx

@@ -331,13 +331,6 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
-    "feature_breadcrumbs_v2": {
-        isFeature: true,
-        labsGroup: LabGroup.Rooms,
-        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("Use new room breadcrumbs"),
-        default: false,
-    },
     "feature_right_panel_default_open": {
         isFeature: true,
         labsGroup: LabGroup.Rooms,
@@ -856,7 +849,6 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("Show shortcuts to recently viewed rooms above the room list"),
         default: true,
-        controller: new IncompatibleController("feature_breadcrumbs_v2", true),
     },
     "FTUE.userOnboardingButton": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

src/stores/BreadcrumbsStore.ts

@@ -50,7 +50,6 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
 
         SettingsStore.monitorSetting("breadcrumb_rooms", null);
         SettingsStore.monitorSetting("breadcrumbs", null);
-        SettingsStore.monitorSetting("feature_breadcrumbs_v2", null);
     }
 
     public static get instance(): BreadcrumbsStore {
@@ -69,11 +68,9 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
      * Do we have enough rooms to justify showing the breadcrumbs?
      * (Or is the labs feature enabled?)
      *
-     * @returns true if there are at least 20 visible rooms or
+     * @returns true if there are at least 20 visible rooms.
-     *          feature_breadcrumbs_v2 is enabled.
      */
     public get meetsRoomRequirement(): boolean {
-        if (SettingsStore.getValue("feature_breadcrumbs_v2")) return true;
         const msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
         return !!this.matrixClient && this.matrixClient.getVisibleRooms(msc3946ProcessDynamicPredecessor).length >= 20;
     }
@@ -83,7 +80,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
         if (payload.action === Action.SettingUpdated) {
             if (payload.settingName === "breadcrumb_rooms") {
                 await this.updateRooms();
-            } else if (payload.settingName === "breadcrumbs" || payload.settingName === "feature_breadcrumbs_v2") {
+            } else if (payload.settingName === "breadcrumbs") {
                 await this.updateState({ enabled: SettingsStore.getValue("breadcrumbs", null) });
             }
         } else if (payload.action === Action.ViewRoom) {

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -20,48 +20,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
         <div
           class="mx_SettingsSection_subSections"
         >
-          <div
-            class="mx_SettingsSubsection"
-          >
-            <div
-              class="mx_SettingsSubsectionHeading"
-            >
-              <h3
-                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
-              >
-                Room list
-              </h3>
-            </div>
-            <div
-              class="mx_SettingsSubsection_content"
-            >
-              <div
-                class="mx_SettingsFlag"
-              >
-                <label
-                  class="mx_SettingsFlag_label"
-                >
-                  <span
-                    class="mx_SettingsFlag_labelText"
-                  >
-                    Show shortcuts to recently viewed rooms above the room list
-                  </span>
-                </label>
-                <div
-                  aria-checked="true"
-                  aria-disabled="true"
-                  aria-label="Show shortcuts to recently viewed rooms above the room list"
-                  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  role="switch"
-                  tabindex="0"
-                >
-                  <div
-                    class="mx_ToggleSwitch_ball"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
           <div
             class="mx_SettingsSubsection"
           >

test/stores/BreadcrumbsStore-test.ts

@@ -32,65 +32,41 @@ describe("BreadcrumbsStore", () => {
         store = BreadcrumbsStore.instance;
         setupAsyncStoreWithClient(store, client);
         jest.spyOn(SettingsStore, "setValue").mockImplementation(() => Promise.resolve());
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
     });
 
-    describe("If the feature_breadcrumbs_v2 feature is not enabled", () => {
+    it("does not meet room requirements if there are not enough rooms", () => {
-        beforeEach(() => {
+        // We don't have enough rooms, so we don't meet requirements
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+        mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(2));
-        });
+        expect(store.meetsRoomRequirement).toBe(false);
-
-        it("does not meet room requirements if there are not enough rooms", () => {
-            // We don't have enough rooms, so we don't meet requirements
-            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(2));
-            expect(store.meetsRoomRequirement).toBe(false);
-        });
-
-        it("meets room requirements if there are enough rooms", () => {
-            // We do have enough rooms to show breadcrumbs
-            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-            expect(store.meetsRoomRequirement).toBe(true);
-        });
-
-        describe("And the feature_dynamic_room_predecessors is enabled", () => {
-            beforeEach(() => {
-                // Turn on feature_dynamic_room_predecessors setting
-                jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                    (settingName) => settingName === "feature_dynamic_room_predecessors",
-                );
-            });
-
-            it("passes through the dynamic room precessors flag", () => {
-                mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-                store.meetsRoomRequirement;
-                expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
-            });
-        });
-
-        describe("And the feature_dynamic_room_predecessors is not enabled", () => {
-            it("passes through the dynamic room precessors flag", () => {
-                mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-                store.meetsRoomRequirement;
-                expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
-            });
-        });
     });
 
-    describe("If the feature_breadcrumbs_v2 feature is enabled", () => {
+    it("meets room requirements if there are enough rooms", () => {
+        // We do have enough rooms to show breadcrumbs
+        mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
+        expect(store.meetsRoomRequirement).toBe(true);
+    });
+
+    describe("And the feature_dynamic_room_predecessors is enabled", () => {
         beforeEach(() => {
-            // Turn on feature_breadcrumbs_v2 setting
+            // Turn on feature_dynamic_room_predecessors setting
             jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                (settingName) => settingName === "feature_breadcrumbs_v2",
+                (settingName) => settingName === "feature_dynamic_room_predecessors",
             );
         });
 
-        it("always meets room requirements", () => {
+        it("passes through the dynamic room precessors flag", () => {
-            // With enough rooms, we meet requirements
             mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-            expect(store.meetsRoomRequirement).toBe(true);
+            store.meetsRoomRequirement;
+            expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
+        });
+    });
 
-            // And even with not enough we do, because the feature is enabled.
+    describe("And the feature_dynamic_room_predecessors is not enabled", () => {
-            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(2));
+        it("passes through the dynamic room precessors flag", () => {
-            expect(store.meetsRoomRequirement).toBe(true);
+            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
+            store.meetsRoomRequirement;
+            expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
         });
     });