OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Remove new room breadcrumbs (#11104) 

* Deprecate new room breadcrumbs

* i18n
pull/28788/head^2
Germain 2023-06-19 09:18:46 +01:00 committed by GitHub
parent 0f17f876d6
commit aca6a66f6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 30 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_components.pcss
View File

@ -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";

77
res/css/views/rooms/_RecentlyViewedButton.pcss
View File

@ -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;
}
}
}

10
src/components/structures/LeftPanel.tsx
View File

@ -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 SettingsStore.getValue("feature_breadcrumbs_v2") ? BreadcrumbsMode.Labs : BreadcrumbsMode.Legacy;
return !BreadcrumbsStore.instance.visible ? BreadcrumbsMode.Disabled : 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) {
rightButton = <RecentlyViewedButton />;
} else if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
rightButton = (
<AccessibleTooltipButton
className="mx_LeftPanel_exploreButton"

84
src/components/views/rooms/RecentlyViewedButton.tsx
View File

@ -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;

2
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View File

@ -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));

3
src/i18n/strings/en_EN.json
View File

@ -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",

8
src/settings/Settings.tsx
View File

@ -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,

7
src/stores/BreadcrumbsStore.ts
View File

@ -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
* feature_breadcrumbs_v2 is enabled.
* @returns true if there are at least 20 visible rooms.
*/
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) {

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

@ -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"
>

72
test/stores/BreadcrumbsStore-test.ts
View File

@ -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", () => {
beforeEach(() => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(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);
});
});
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);
});
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", () => {
// With enough rooms, we meet requirements
it("passes through the dynamic room precessors flag", () => {
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.
mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(2));
expect(store.meetsRoomRequirement).toBe(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);
});
});