From 9e3f64bf862dd08c3dd1e1e060f4fd4ced10f508 Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 4 Aug 2023 15:16:13 +0100 Subject: [PATCH 1/7] Move notification bell to space panel --- res/css/structures/_QuickSettingsButton.pcss | 15 ++----- res/css/structures/_RightPanel.pcss | 5 --- res/css/structures/_SpacePanel.pcss | 28 ++++++++++++- res/img/element-icons/notifications.svg | 6 +-- .../right_panel/LegacyRoomHeaderButtons.tsx | 40 +------------------ .../views/spaces/QuickSettingsButton.tsx | 5 ++- src/components/views/spaces/SpacePanel.tsx | 26 +++++++++++- src/hooks/useGlobalNotification.ts | 40 +++++++++++++++++++ .../LegacyRoomHeaderButtons-test.tsx.snap | 7 ---- 9 files changed, 102 insertions(+), 70 deletions(-) create mode 100644 src/hooks/useGlobalNotification.ts diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 631b098ad64..7c5884ca725 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -15,15 +15,6 @@ limitations under the License. */ .mx_QuickSettingsButton { - flex: 0 0 auto; - border-radius: 8px; - position: relative; - margin: 12px auto; - color: $secondary-content; - min-width: 32px; - min-height: 32px; - line-height: 32px; - &.expanded { margin-left: 20px; padding-left: 44px; /* align with toggle collapse button text */ @@ -32,9 +23,9 @@ limitations under the License. &::before { content: ""; - position: absolute; - width: 32px; - height: 32px; + display: block; + width: 100%; + height: 100%; left: 0; mask-image: url("$(res)/img/element-icons/settings.svg"); mask-repeat: no-repeat; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 7d39968c11a..68f101ab56e 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -38,11 +38,6 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/room/thread.svg"); } -.mx_RightPanel_notifsButton::before { - mask-image: url("$(res)/img/element-icons/notifications.svg"); - mask-position: center; -} - .mx_RightPanel_roomSummaryButton::before { mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); mask-position: center; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 76c328fa568..c4aa0febef0 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -24,7 +24,7 @@ limitations under the License. background-color: $spacePanel-bg-color; flex: 0 0 auto; - padding: 0; + padding: 0 0 12px 0; margin: 0; position: relative; /* Fix for the blurred avatar-background */ @@ -283,7 +283,6 @@ limitations under the License. } .mx_SpaceTreeLevel { - // Indent subspaces padding-left: 16px; } } @@ -439,3 +438,28 @@ limitations under the License. .mx_SpacePanel_sharePublicSpace { margin: 0; } + +.mx_SpacePanel_button { + flex: 0 0 auto; + border-radius: 8px; + position: relative; + margin: 0 auto; + color: $secondary-content; + width: 20px; + height: 20px; + line-height: 20px; + padding: 12px; + + &:not(.expanded):hover { + color: $quaternary-content; + background-color: $quaternary-content; + + &::before { + background-color: $primary-content; + } + + svg { + color: $primary-content; + } + } +} diff --git a/res/img/element-icons/notifications.svg b/res/img/element-icons/notifications.svg index 7002782129f..7709c673f11 100644 --- a/res/img/element-icons/notifications.svg +++ b/res/img/element-icons/notifications.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx index 693fed6b438..135d7826517 100644 --- a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx +++ b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx @@ -33,12 +33,8 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { useReadPinnedEvents, usePinnedEvents } from "./PinnedMessagesCard"; import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads"; import SettingsStore from "../../../settings/SettingsStore"; -import { - RoomNotificationStateStore, - UPDATE_STATUS_INDICATOR, -} from "../../../stores/notifications/RoomNotificationStateStore"; +import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; -import { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState"; import PosthogTrackers from "../../../PosthogTrackers"; import { ButtonEvent } from "../elements/AccessibleButton"; import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread"; @@ -57,7 +53,7 @@ interface IUnreadIndicatorProps { color?: NotificationColor; } -const UnreadIndicator: React.FC = ({ color }) => { +export const UnreadIndicator: React.FC = ({ color }) => { if (color === NotificationColor.None) { return null; } @@ -132,11 +128,9 @@ interface IProps { */ export default class LegacyRoomHeaderButtons extends HeaderButtons { private static readonly THREAD_PHASES = [RightPanelPhases.ThreadPanel, RightPanelPhases.ThreadView]; - private globalNotificationState: SummarizedNotificationState; public constructor(props: IProps) { super(props, HeaderKind.Room); - this.globalNotificationState = RoomNotificationStateStore.instance.globalState; } public componentDidMount(): void { @@ -153,7 +147,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { this.props.room?.on(ThreadEvent.New, this.onNotificationUpdate); this.props.room?.on(ThreadEvent.Update, this.onNotificationUpdate); this.onNotificationUpdate(); - RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus); } public componentWillUnmount(): void { @@ -166,7 +159,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { this.props.room?.off(RoomEvent.MyMembership, this.onNotificationUpdate); this.props.room?.off(ThreadEvent.New, this.onNotificationUpdate); this.props.room?.off(ThreadEvent.Update, this.onNotificationUpdate); - RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus); } private onNotificationUpdate = (): void => { @@ -196,14 +188,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { return NotificationColor.None; } - private onUpdateStatus = (notificationState: SummarizedNotificationState): void => { - // XXX: why don't we read from this.state.globalNotificationCount in the render methods? - this.globalNotificationState = notificationState; - this.setState({ - globalNotificationColor: notificationState.color, - }); - }; - protected onAction(payload: ActionPayload): void { if (payload.action === Action.ViewUser) { if (payload.member) { @@ -246,11 +230,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { } }; - private onNotificationsClicked = (): void => { - // This toggles for us, if needed - this.setPhase(RightPanelPhases.NotificationPanel); - }; - private onPinnedMessagesClicked = (): void => { // This toggles for us, if needed this.setPhase(RightPanelPhases.PinnedMessages); @@ -309,21 +288,6 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons { , ); - rightPanelPhaseButtons.set( - RightPanelPhases.NotificationPanel, - - {this.globalNotificationState.color === NotificationColor.Red ? ( - - ) : null} - , - ); rightPanelPhaseButtons.set( RightPanelPhases.RoomSummary, = ({ isPanelCollapsed = false }) => { + className: string; +}> = ({ isPanelCollapsed = false, className = "" }) => { const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); const { [MetaSpace.Favourites]: favouritesEnabled, [MetaSpace.People]: peopleEnabled } = @@ -131,7 +132,7 @@ const QuickSettingsButton: React.FC<{ return ( <> { const invites = useEventEmitterState(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -344,6 +352,8 @@ const SpacePanel: React.FC = () => { } }); + const summarizedNotificationState = useGlobalNotificationState(); + return ( {({ onKeyDownHandler, onDragEndHandler }) => ( @@ -399,7 +409,21 @@ const SpacePanel: React.FC = () => { )} - + +
{ + RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel }); + }} + > + + {summarizedNotificationState.color === NotificationColor.Red ? ( + + ) : null} +
+ + )} diff --git a/src/hooks/useGlobalNotification.ts b/src/hooks/useGlobalNotification.ts new file mode 100644 index 00000000000..d2568847857 --- /dev/null +++ b/src/hooks/useGlobalNotification.ts @@ -0,0 +1,40 @@ +/* +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 { useState } from "react"; + +import { SummarizedNotificationState } from "../stores/notifications/SummarizedNotificationState"; +import { + RoomNotificationStateStore, + UPDATE_STATUS_INDICATOR, +} from "../stores/notifications/RoomNotificationStateStore"; +import { useEventEmitter } from "./useEventEmitter"; + +export const useGlobalNotificationState = (): SummarizedNotificationState => { + const [summarizedNotificationState, setSummarizedNotificationState] = useState( + RoomNotificationStateStore.instance.globalState, + ); + + useEventEmitter( + RoomNotificationStateStore.instance, + UPDATE_STATUS_INDICATOR, + (notificationState: SummarizedNotificationState) => { + setSummarizedNotificationState(notificationState); + }, + ); + + return summarizedNotificationState; +}; diff --git a/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap b/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap index bd706048be2..6dbe9ed2e3a 100644 --- a/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap @@ -17,13 +17,6 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = ` role="button" tabindex="0" /> -
Date: Fri, 4 Aug 2023 15:28:41 +0100 Subject: [PATCH 2/7] Create notifications panel labs flag --- src/components/views/spaces/SpacePanel.tsx | 30 ++++++++++++---------- src/settings/Settings.tsx | 14 ++++++++++ 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 8042b17bf19..a0d86cab6fb 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -409,20 +409,22 @@ const SpacePanel: React.FC = () => { )} - -
{ - RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel }); - }} - > - - {summarizedNotificationState.color === NotificationColor.Red ? ( - - ) : null} -
- + {SettingsStore.getValue("feature_video_rooms") && ( + +
{ + RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel }); + }} + > + + {summarizedNotificationState.color === NotificationColor.Red ? ( + + ) : null} +
+ + )}
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index bab6c1d3025..4d938186a9b 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -230,6 +230,20 @@ export const SETTINGS: { [setting: string]: ISetting } = { requiresRefresh: true, }, }, + "feature_notifications_panel": { + isFeature: true, + labsGroup: LabGroup.Messaging, + displayName: _td("Notifications panel"), + supportedLevels: LEVELS_FEATURE, + default: false, + // Reload to ensure that the left panel etc. get remounted + controller: new ReloadOnChangeController(), + betaInfo: { + title: _td("Notifications panel"), + caption: () =>

{_t("A list of all events notifying you. Only works with unencrypted rooms")}

, + requiresRefresh: true, + }, + }, [Features.NotificationSettings2]: { isFeature: true, labsGroup: LabGroup.Experimental, From 45b0b43b72585849a77eba3f2f4da69fd282e007 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 7 Aug 2023 09:42:48 +0100 Subject: [PATCH 3/7] Fix linting issues and copyright problems --- src/components/views/spaces/QuickSettingsButton.tsx | 2 +- src/hooks/useGlobalNotification.ts | 2 +- src/i18n/strings/en_EN.json | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 1271f9e0b25..bb4d4ef5fef 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -39,7 +39,7 @@ import { SdkContextClass } from "../../../contexts/SDKContext"; const QuickSettingsButton: React.FC<{ isPanelCollapsed: boolean; - className: string; + className?: string; }> = ({ isPanelCollapsed = false, className = "" }) => { const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); diff --git a/src/hooks/useGlobalNotification.ts b/src/hooks/useGlobalNotification.ts index d2568847857..ba625328658 100644 --- a/src/hooks/useGlobalNotification.ts +++ b/src/hooks/useGlobalNotification.ts @@ -1,5 +1,5 @@ /* -Copyright 2021 The Matrix.org Foundation C.I.C. +Copyright 2023 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. diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 06caa0c7236..f999583cdef 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -961,6 +961,8 @@ "Can I use text chat alongside the video call?": "Can I use text chat alongside the video call?", "Yes, the chat timeline is displayed alongside the video.": "Yes, the chat timeline is displayed alongside the video.", "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.", + "Notifications panel": "Notifications panel", + "A list of all events notifying you. Only works with unencrypted rooms": "A list of all events notifying you. Only works with unencrypted rooms", "New Notification Settings": "New Notification Settings", "Notification Settings": "Notification Settings", "Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.": "Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.", From f1e395dff6d018ac2f2b9e979360613f9b3acc12 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 7 Aug 2023 09:43:35 +0100 Subject: [PATCH 4/7] Do not mandate a refresh for notification panel change --- src/settings/Settings.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 4d938186a9b..8e2bdc254be 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -237,11 +237,9 @@ export const SETTINGS: { [setting: string]: ISetting } = { supportedLevels: LEVELS_FEATURE, default: false, // Reload to ensure that the left panel etc. get remounted - controller: new ReloadOnChangeController(), betaInfo: { title: _td("Notifications panel"), caption: () =>

{_t("A list of all events notifying you. Only works with unencrypted rooms")}

, - requiresRefresh: true, }, }, [Features.NotificationSettings2]: { From ba15ca8e996304a3a559ad5bee733d64371b2068 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 7 Aug 2023 09:43:57 +0100 Subject: [PATCH 5/7] Create NotificationPanelButton component --- .../views/spaces/NotificationPanelButton.tsx | 49 +++++++++++++++++++ src/components/views/spaces/SpacePanel.tsx | 30 ++---------- 2 files changed, 53 insertions(+), 26 deletions(-) create mode 100644 src/components/views/spaces/NotificationPanelButton.tsx diff --git a/src/components/views/spaces/NotificationPanelButton.tsx b/src/components/views/spaces/NotificationPanelButton.tsx new file mode 100644 index 00000000000..dcf969e2547 --- /dev/null +++ b/src/components/views/spaces/NotificationPanelButton.tsx @@ -0,0 +1,49 @@ +/* +Copyright 2023 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 from "react"; + +import { _t } from "../../../languageHandler"; +import TooltipTarget from "../elements/TooltipTarget"; +import { Alignment } from "../elements/Tooltip"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; +import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; +import { UnreadIndicator } from "../right_panel/LegacyRoomHeaderButtons"; +import { NotificationColor } from "../../../stores/notifications/NotificationColor"; +import { useGlobalNotificationState } from "../../../hooks/useGlobalNotification"; +import { Icon as NotificationIcon } from "../../../../res/img/element-icons/notifications.svg"; + +export const NotificationPanelButton: React.FC = () => { + const summarizedNotificationState = useGlobalNotificationState(); + return ( + +
{ + RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel }); + }} + role="button" + aria-label={_t("Notifications")} + > + + {summarizedNotificationState.color === NotificationColor.Red ? ( + + ) : null} +
+ + ); +}; diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index a0d86cab6fb..c9aa94bacbd 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -60,7 +60,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import { SettingLevel } from "../../../settings/SettingLevel"; import UIStore from "../../../stores/UIStore"; import QuickSettingsButton from "./QuickSettingsButton"; -import { useSettingValue } from "../../../hooks/useSettings"; +import { useFeatureEnabled, useSettingValue } from "../../../hooks/useSettings"; import UserMenu from "../../structures/UserMenu"; import IndicatorScrollbar from "../../structures/IndicatorScrollbar"; import { IS_MAC, Key } from "../../../Keyboard"; @@ -72,14 +72,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; -import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; -import { useGlobalNotificationState } from "../../../hooks/useGlobalNotification"; -import { NotificationColor } from "../../../stores/notifications/NotificationColor"; -import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import { UnreadIndicator } from "../right_panel/LegacyRoomHeaderButtons"; -import { Icon as NotificationIcon } from "../../../../res/img/element-icons/notifications.svg"; -import TooltipTarget from "../elements/TooltipTarget"; -import { Alignment } from "../elements/Tooltip"; +import { NotificationPanelButton } from "./NotificationPanelButton"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const invites = useEventEmitterState(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -352,7 +345,7 @@ const SpacePanel: React.FC = () => { } }); - const summarizedNotificationState = useGlobalNotificationState(); + const isNotifPanelEnabled = useFeatureEnabled("feature_notifications_panel"); return ( @@ -409,22 +402,7 @@ const SpacePanel: React.FC = () => { )} - {SettingsStore.getValue("feature_video_rooms") && ( - -
{ - RightPanelStore.instance.setCard({ phase: RightPanelPhases.NotificationPanel }); - }} - > - - {summarizedNotificationState.color === NotificationColor.Red ? ( - - ) : null} -
- - )} + {isNotifPanelEnabled && }
From b67f92e3f42543270d445650a231f21536c5d7d1 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 7 Aug 2023 09:44:07 +0100 Subject: [PATCH 6/7] Fix tests --- cypress/e2e/room/room-header.spec.ts | 16 ------ .../LabsUserSettingsTab-test.tsx.snap | 50 +++++++++++++++++++ 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index 835fb2bb3e3..eb8f3bff7c9 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -46,7 +46,6 @@ describe("Room Header", () => { "Video call", "Search", "Threads", - "Notifications", "Room info", ]; @@ -108,21 +107,6 @@ describe("Room Header", () => { }); }); - it("should have buttons highlighted by being clicked", () => { - cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room"); - - cy.get(".mx_LegacyRoomHeader").within(() => { - // Check these buttons - const buttonsHighlighted = ["Threads", "Notifications", "Room info"]; - - for (const name of buttonsHighlighted) { - cy.findByRole("button", { name: name }).click(); // Highlight the button - } - }); - - cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a highlighted button"); - }); - describe("with a video room", () => { const createVideoRoom = () => { // Enable video rooms. This command reloads the app diff --git a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap index 32a8facee1d..ad8b732d5e3 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap @@ -79,6 +79,56 @@ exports[` renders settings marked as beta as beta cards 1 +
+
+
+

+ + Notifications panel + + + Beta + +

+
+

+ A list of all events notifying you. Only works with unencrypted rooms +

+
+
+
+ Join the beta +
+
+
+
+ +
+
+
From 49b71d0d1118b12ff5ad960878cce0b50fd018a4 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 7 Aug 2023 10:25:36 +0100 Subject: [PATCH 7/7] fix e2e tests --- cypress/e2e/right-panel/notification-panel.spec.ts | 1 + cypress/e2e/room/room-header.spec.ts | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/right-panel/notification-panel.spec.ts b/cypress/e2e/right-panel/notification-panel.spec.ts index 4068285070b..d08d88fd003 100644 --- a/cypress/e2e/right-panel/notification-panel.spec.ts +++ b/cypress/e2e/right-panel/notification-panel.spec.ts @@ -38,6 +38,7 @@ describe("NotificationPanel", () => { }); it("should render empty state", () => { + cy.enableLabsFeature("feature_notifications_panel"); cy.viewRoomByName(ROOM_NAME); cy.findByRole("button", { name: "Notifications" }).click(); diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index eb8f3bff7c9..0a6b6b3d048 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -55,7 +55,7 @@ describe("Room Header", () => { } // Assert that just those seven buttons exist on mx_LegacyRoomHeader by default - cy.findAllByRole("button").should("have.length", 7); + cy.findAllByRole("button").should("have.length", expectedButtonNames.length); }); cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header"); @@ -96,7 +96,7 @@ describe("Room Header", () => { // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed // Note these assertions do not check the size of mx_LegacyRoomHeader_name button cy.get(".mx_LegacyRoomHeader_button") - .should("have.length", 6) + .should("have.length", 5) .should("be.visible") .should("have.css", "height", "32px") .should("have.css", "width", "32px"); @@ -144,7 +144,7 @@ describe("Room Header", () => { } // Assert that there is not a button except those buttons - cy.findAllByRole("button").should("have.length", 7); + cy.findAllByRole("button").should("have.length", 6); }); cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a video room");