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

Merge pull request #11508 from matrix-org/germain-gg/notifications-labs 

Move notifications bell back in labs
pull/28788/head^2
Andy Balaam 2023-09-15 14:19:47 +01:00 committed by GitHub
parent dce42d32e7 d5d4b528d5
commit 0b50e02790
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cypress/e2e/right-panel/notification-panel.spec.ts
View File

@ -38,6 +38,7 @@ describe("NotificationPanel", () => {
});
it("should render empty state", () => {
cy.enableLabsFeature("feature_notifications");
cy.viewRoomByName(ROOM_NAME);
cy.findByRole("button", { name: "Notifications" }).click();

4
cypress/e2e/room/room-header.spec.ts
View File

@ -36,6 +36,7 @@ describe("Room Header", () => {
});
it("should render default buttons properly", () => {
cy.enableLabsFeature("feature_notifications");
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
cy.get(".mx_LegacyRoomHeader").within(() => {
@ -79,6 +80,7 @@ describe("Room Header", () => {
});
it("should render a very long room name without collapsing the buttons", () => {
cy.enableLabsFeature("feature_notifications");
const LONG_ROOM_NAME =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
"et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
@ -109,6 +111,7 @@ describe("Room Header", () => {
});
it("should have buttons highlighted by being clicked", () => {
cy.enableLabsFeature("feature_notifications");
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
cy.get(".mx_LegacyRoomHeader").within(() => {
@ -142,6 +145,7 @@ describe("Room Header", () => {
};
it("should render buttons for room options, beta pill, invite, chat, and room info", () => {
cy.enableLabsFeature("feature_notifications");
createVideoRoom();
cy.get(".mx_LegacyRoomHeader").within(() => {

8
src/components/views/right_panel/HeaderButtons.tsx
View File

@ -25,6 +25,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import SettingsStore from "../../../settings/SettingsStore";
export enum HeaderKind {
Room = "room",
@ -35,6 +36,7 @@ interface IState {
phase: RightPanelPhases | null;
threadNotificationColor: NotificationColor;
globalNotificationColor: NotificationColor;
notificationsEnabled?: boolean;
}
interface IProps {}
@ -42,6 +44,7 @@ interface IProps {}
export default abstract class HeaderButtons<P = {}> extends React.Component<IProps & P, IState> {
private unmounted = false;
private dispatcherRef?: string = undefined;
private readonly watcherRef: string;
public constructor(props: IProps & P, kind: HeaderKind) {
super(props);
@ -52,7 +55,11 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
phase: rps.currentCard.phase,
threadNotificationColor: NotificationColor.None,
globalNotificationColor: NotificationColor.None,
notificationsEnabled: SettingsStore.getValue("feature_notifications"),
};
this.watcherRef = SettingsStore.watchSetting("feature_notifications", null, (...[, , , value]) =>
this.setState({ notificationsEnabled: value }),
);
}
public componentDidMount(): void {
@ -63,6 +70,7 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
this.unmounted = true;
RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
if (this.watcherRef) SettingsStore.unwatchSetting(this.watcherRef);
}
public isPhase(phases: string | string[]): boolean {

32
src/components/views/right_panel/LegacyRoomHeaderButtons.tsx
View File

@ -282,21 +282,23 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
<UnreadIndicator color={this.state.threadNotificationColor} />
</HeaderButton>,
);
rightPanelPhaseButtons.set(
RightPanelPhases.NotificationPanel,
<HeaderButton
key="notifsButton"
name="notifsButton"
title={_t("Notifications")}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
onClick={this.onNotificationsClicked}
isUnread={this.globalNotificationState.color === NotificationColor.Red}
>
{this.globalNotificationState.color === NotificationColor.Red ? (
<UnreadIndicator color={this.globalNotificationState.color} />
) : null}
</HeaderButton>,
);
if (this.state.notificationsEnabled) {
rightPanelPhaseButtons.set(
RightPanelPhases.NotificationPanel,
<HeaderButton
key="notifsButton"
name="notifsButton"
title={_t("Notifications")}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
onClick={this.onNotificationsClicked}
isUnread={this.globalNotificationState.color === NotificationColor.Red}
>
{this.globalNotificationState.color === NotificationColor.Red ? (
<UnreadIndicator color={this.globalNotificationState.color} />
) : null}
</HeaderButton>,
);
}
rightPanelPhaseButtons.set(
RightPanelPhases.RoomSummary,
<HeaderButton

28
src/components/views/rooms/RoomHeader.tsx
View File

@ -100,6 +100,8 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
}, [room, directRoomsList]);
const e2eStatus = useEncryptionStatus(client, room);
const notificationsEnabled = useFeatureEnabled("feature_notifications");
return (
<Flex
as="header"
@ -202,18 +204,20 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
<ThreadsIcon />
</IconButton>
</Tooltip>
<Tooltip label={_t("Notifications")}>
<IconButton
indicator={notificationColorToIndicator(globalNotificationState.color)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);
}}
title={_t("Notifications")}
>
<NotificationsIcon />
</IconButton>
</Tooltip>
{notificationsEnabled && (
<Tooltip label={_t("Notifications")}>
<IconButton
indicator={notificationColorToIndicator(globalNotificationState.color)}
onClick={(evt) => {
evt.stopPropagation();
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.NotificationPanel);
}}
title={_t("Notifications")}
>
<NotificationsIcon />
</IconButton>
</Tooltip>
)}
</Flex>
{!isDirectMessage && (
<BodyText

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

@ -1161,7 +1161,9 @@
"rust_crypto": "Rust cryptography implementation",
"hidebold": "Hide notification dot (only display counters badges)",
"ask_to_join": "Enable ask to join",
"new_room_decoration_ui": "New room header & details interface",
"new_room_decoration_ui": "Under active development, new room header & details interface",
"notifications": "Enable the notifications panel in the room header",
"unrealiable_e2e": "Unreliable in encrypted rooms",
"beta_feature": "This is a beta feature",
"click_for_info": "Click for more info",
"leave_beta_reload": "Leaving the beta will reload %(brand)s.",

8
src/settings/Settings.tsx
View File

@ -547,6 +547,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
default: false,
controller: new ReloadOnChangeController(),
},
"feature_notifications": {
isFeature: true,
labsGroup: LabGroup.Messaging,
displayName: _td("labs|notifications"),
description: _td("labs|unrealiable_e2e"),
supportedLevels: LEVELS_FEATURE,
default: false,
},
"useCompactLayout": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
displayName: _td("Use a more compact 'Modern' layout"),

7
test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap
View File

@ -17,13 +17,6 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
role="button"
tabindex="0"
/>
<div
aria-current="false"
aria-label="Notifications"
class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_notifsButton"
role="button"
tabindex="0"
/>
<div
aria-current="false"
aria-label="Room info"

4
test/components/views/rooms/RoomHeader-test.tsx
View File

@ -200,6 +200,10 @@ describe("RoomHeader", () => {
});
it("opens the notifications panel", async () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
if (name === "feature_notifications") return true;
});
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),

8
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View File

@ -60,14 +60,6 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
>
<div />
</button>
<button
class="_icon-button_1segd_17"
data-state="closed"
style="--cpd-icon-button-size: 32px;"
title="Notifications"
>
<div />
</button>
</nav>
</header>
</DocumentFragment>