From 722c5ad493d2220bac7d2133735509b48886d4dc Mon Sep 17 00:00:00 2001 From: Germain Date: Sat, 11 Nov 2023 07:24:48 +0000 Subject: [PATCH] Update room summary card header (#11823) * Update room summary card header * test coverage for public room label * test coverage for public room label (#11841) * fix encrypted badge selector in cypress/crypto.spec --------- Co-authored-by: Kerry --- cypress/e2e/crypto/crypto.spec.ts | 2 +- .../views/right_panel/_RoomSummaryCard.pcss | 60 +------ .../views/right_panel/RoomSummaryCard.tsx | 86 +++++++--- .../right_panel/RoomSummaryCard-test.tsx | 149 ++++++++++++------ .../RoomSummaryCard-test.tsx.snap | 44 +++--- 5 files changed, 201 insertions(+), 140 deletions(-) diff --git a/cypress/e2e/crypto/crypto.spec.ts b/cypress/e2e/crypto/crypto.spec.ts index 9795b9da2d..f9cd5ba316 100644 --- a/cypress/e2e/crypto/crypto.spec.ts +++ b/cypress/e2e/crypto/crypto.spec.ts @@ -269,7 +269,7 @@ describe("Cryptography", function () { // Assert that verified icon is rendered cy.findByRole("button", { name: "Room members" }).click(); cy.findByRole("button", { name: "Room information" }).click(); - cy.get(".mx_RoomSummaryCard_e2ee_verified").should("exist"); + cy.get('.mx_RoomSummaryCard_badges [data-kind="success"]').should("contain.text", "Encrypted"); // Take a snapshot of RoomSummaryCard with a verified E2EE icon cy.get(".mx_RightPanel").percySnapshotElement("RoomSummaryCard - with a verified E2EE icon", { diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index e2b71e1a15..d6da39365e 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -31,68 +31,12 @@ limitations under the License. .mx_RoomSummaryCard_roomName { margin: $spacing-12 0 $spacing-4; - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-17px; } .mx_RoomSummaryCard_alias { - font: var(--cpd-font-body-md-regular); - color: $secondary-content; text-overflow: ellipsis; } - .mx_RoomSummaryCard_avatar { - display: flex; - justify-content: center; - align-items: center; - - .mx_RoomSummaryCard_e2ee { - display: inline-block; - position: relative; - width: 54px; - height: 54px; - border-radius: 50%; - background-color: #737d8c; - margin-left: -10px; /* overlap */ - border: 3px solid $dark-panel-bg-color; - - &::before { - content: ""; - position: absolute; - top: 13px; - left: 13px; - height: 28px; - width: 28px; - mask-size: cover; - mask-repeat: no-repeat; - mask-position: center; - mask-image: url("$(res)/img/e2e/disabled.svg"); - background-color: #ffffff; - } - } - - .mx_RoomSummaryCard_e2ee_normal { - background-color: #424446; - &::before { - mask-image: url("$(res)/img/e2e/normal.svg"); - } - } - - .mx_RoomSummaryCard_e2ee_verified { - background-color: $e2e-verified-color; - &::before { - mask-image: url("$(res)/img/e2e/verified.svg"); - } - } - - .mx_RoomSummaryCard_e2ee_warning { - background-color: $e2e-warning-color; - &::before { - mask-image: url("$(res)/img/e2e/warning.svg"); - } - } - } - .mx_RoomSummaryCard_aboutGroup { .mx_RoomSummaryCard_Button { padding-left: 44px; @@ -244,6 +188,10 @@ limitations under the License. } } +.mx_RoomSummaryCard_badges { + margin: var(--cpd-space-4x) 0; +} + .mx_RoomSummaryCard_header { padding: 15px 12px; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 98876fce93..ef6e3ea3ab 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -16,9 +16,13 @@ limitations under the License. import React, { useCallback, useContext, useEffect, useMemo, useState } from "react"; import classNames from "classnames"; -import { Room } from "matrix-js-sdk/src/matrix"; -import { Tooltip } from "@vector-im/compound-web"; +import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix"; +import { Badge, Heading, Text, Tooltip } from "@vector-im/compound-web"; import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg"; +import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg"; +import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; +import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg"; +import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { useIsEncrypted } from "../../../hooks/useIsEncrypted"; @@ -34,7 +38,6 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter"; import WidgetUtils from "../../../utils/WidgetUtils"; import { IntegrationManagers } from "../../../integrations/IntegrationManagers"; import SettingsStore from "../../../settings/SettingsStore"; -import TextWithTooltip from "../elements/TextWithTooltip"; import WidgetAvatar from "../avatars/WidgetAvatar"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import WidgetStore, { IApp } from "../../../stores/WidgetStore"; @@ -56,6 +59,8 @@ import PosthogTrackers from "../../../PosthogTrackers"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { PollHistoryDialog } from "../dialogs/PollHistoryDialog"; import { Flex } from "../../utils/Flex"; +import { useAccountData } from "../../../hooks/useAccountData"; +import { useRoomState } from "../../../hooks/useRoomState"; interface IProps { room: Room; @@ -307,31 +312,74 @@ const RoomSummaryCard: React.FC = ({ room, permalinkCreator, onClose, on const isVideoRoom = videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom())); + const roomState = useRoomState(room); + const directRoomsList = useAccountData>(room.client, EventType.Direct); + const [isDirectMessage, setDirectMessage] = useState(false); + useEffect(() => { + for (const [, dmRoomList] of Object.entries(directRoomsList)) { + if (dmRoomList.includes(room?.roomId ?? "")) { + setDirectMessage(true); + break; + } + } + }, [room, directRoomsList]); + const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || ""; const header = (
-
- - -
- + {(name) => ( -

+ {name} -

+ )} -
+ {alias} -
+ + + + {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && ( + + + {_t("common|public_room")} + + )} + + {isRoomEncrypted && e2eStatus !== E2EStatus.Warning && ( + + + {_t("common|encrypted")} + + )} + + {!e2eStatus && ( + + + {_t("common|unencrypted")} + + )} + + {e2eStatus === E2EStatus.Warning && ( + + + {_t("common|not_trusted")} + + )} +
); diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx index eef7d06ba9..7f556000f6 100644 --- a/test/components/views/right_panel/RoomSummaryCard-test.tsx +++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx @@ -15,8 +15,9 @@ limitations under the License. */ import React from "react"; -import { render, fireEvent } from "@testing-library/react"; -import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; +import { render, fireEvent, screen } from "@testing-library/react"; +import { EventType, MatrixEvent, Room, MatrixClient, JoinRule } from "matrix-js-sdk/src/matrix"; +import { mocked, MockedObject } from "jest-mock"; import DMRoomMap from "../../../../src/utils/DMRoomMap"; import RoomSummaryCard from "../../../../src/components/views/right_panel/RoomSummaryCard"; @@ -28,56 +29,67 @@ import * as settingsHooks from "../../../../src/hooks/useSettings"; import Modal from "../../../../src/Modal"; import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore"; import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases"; -import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils"; +import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils"; import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog"; import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks"; import { _t } from "../../../../src/languageHandler"; describe("", () => { const userId = "@alice:domain.org"; - const mockClient = getMockClientWithEventEmitter({ - ...mockClientMethodsUser(userId), - isRoomEncrypted: jest.fn(), - getRoom: jest.fn(), - }); + const roomId = "!room:domain.org"; - const room = new Room(roomId, mockClient, userId); - const roomCreateEvent = new MatrixEvent({ - type: "m.room.create", - room_id: roomId, - sender: userId, - content: { - creator: userId, - room_version: "5", - }, - state_key: "", - }); - room.currentState.setStateEvents([roomCreateEvent]); - const defaultProps = { - room, - onClose: jest.fn(), - permalinkCreator: new RoomPermalinkCreator(room), - }; - const getComponent = (props = {}) => - render(, { + let mockClient!: MockedObject; + let room!: Room; + + const getComponent = (props = {}) => { + const defaultProps = { + room, + onClose: jest.fn(), + permalinkCreator: new RoomPermalinkCreator(room), + }; + + return render(, { wrapper: ({ children }) => ( {children} ), }); - - const modalSpy = jest.spyOn(Modal, "createDialog"); - const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch"); - const rightPanelCardSpy = jest.spyOn(RightPanelStore.instance, "pushCard"); - const featureEnabledSpy = jest.spyOn(settingsHooks, "useFeatureEnabled"); + }; beforeEach(() => { + mockClient = getMockClientWithEventEmitter({ + ...mockClientMethodsUser(userId), + getAccountData: jest.fn(), + isRoomEncrypted: jest.fn(), + getOrCreateFilter: jest.fn().mockResolvedValue({ filterId: 1 }), + getRoom: jest.fn(), + }); + room = new Room(roomId, mockClient, userId); + const roomCreateEvent = new MatrixEvent({ + type: "m.room.create", + room_id: roomId, + sender: userId, + content: { + creator: userId, + room_version: "5", + }, + state_key: "", + }); + room.currentState.setStateEvents([roomCreateEvent]); + + jest.spyOn(Modal, "createDialog"); + jest.spyOn(RightPanelStore.instance, "pushCard"); + jest.spyOn(settingsHooks, "useFeatureEnabled").mockReturnValue(false); + jest.spyOn(defaultDispatcher, "dispatch"); jest.clearAllMocks(); DMRoomMap.makeShared(mockClient); mockClient.getRoom.mockReturnValue(room); jest.spyOn(room, "isElementVideoRoom").mockRestore(); jest.spyOn(room, "isCallRoom").mockRestore(); - featureEnabledSpy.mockReset().mockReturnValue(false); + }); + + afterEach(() => { + jest.restoreAllMocks(); }); it("renders the room summary", () => { @@ -101,7 +113,10 @@ describe("", () => { fireEvent.click(getByText("People")); - expect(rightPanelCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomMemberList }, true); + expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith( + { phase: RightPanelPhases.RoomMemberList }, + true, + ); }); it("opens room file panel on button click", () => { @@ -109,7 +124,7 @@ describe("", () => { fireEvent.click(getByText("Files")); - expect(rightPanelCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.FilePanel }, true); + expect(RightPanelStore.instance.pushCard).toHaveBeenCalledWith({ phase: RightPanelPhases.FilePanel }, true); }); it("opens room export dialog on button click", () => { @@ -117,7 +132,7 @@ describe("", () => { fireEvent.click(getByText("Export chat")); - expect(modalSpy).toHaveBeenCalledWith(ExportDialog, { room }); + expect(Modal.createDialog).toHaveBeenCalledWith(ExportDialog, { room }); }); it("opens share room dialog on button click", () => { @@ -125,7 +140,7 @@ describe("", () => { fireEvent.click(getByText("Share room")); - expect(modalSpy).toHaveBeenCalledWith(ShareDialog, { target: room }); + expect(Modal.createDialog).toHaveBeenCalledWith(ShareDialog, { target: room }); }); it("opens room settings on button click", () => { @@ -133,12 +148,12 @@ describe("", () => { fireEvent.click(getByText("Room settings")); - expect(dispatchSpy).toHaveBeenCalledWith({ action: "open_room_settings" }); + expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "open_room_settings" }); }); describe("pinning", () => { it("renders pins options when pinning feature is enabled", () => { - featureEnabledSpy.mockImplementation((feature) => feature === "feature_pinning"); + mocked(settingsHooks.useFeatureEnabled).mockImplementation((feature) => feature === "feature_pinning"); const { getByText } = getComponent(); expect(getByText("Pinned")).toBeInTheDocument(); @@ -153,14 +168,15 @@ describe("", () => { }); it("opens poll history dialog on button click", () => { - const { getByText } = getComponent(); + const permalinkCreator = new RoomPermalinkCreator(room); + const { getByText } = getComponent({ permalinkCreator }); fireEvent.click(getByText("Poll history")); - expect(modalSpy).toHaveBeenCalledWith(PollHistoryDialog, { + expect(Modal.createDialog).toHaveBeenCalledWith(PollHistoryDialog, { room, matrixClient: mockClient, - permalinkCreator: defaultProps.permalinkCreator, + permalinkCreator: permalinkCreator, }); }); }); @@ -168,7 +184,7 @@ describe("", () => { describe("video rooms", () => { it("does not render irrelevant options for element video room", () => { jest.spyOn(room, "isElementVideoRoom").mockReturnValue(true); - featureEnabledSpy.mockImplementation( + mocked(settingsHooks.useFeatureEnabled).mockImplementation( (feature) => feature === "feature_video_rooms" || feature === "feature_pinning", ); const { queryByText } = getComponent(); @@ -181,7 +197,7 @@ describe("", () => { it("does not render irrelevant options for element call room", () => { jest.spyOn(room, "isCallRoom").mockReturnValue(true); - featureEnabledSpy.mockImplementation( + mocked(settingsHooks.useFeatureEnabled).mockImplementation( (feature) => feature === "feature_element_call_video_rooms" || feature === "feature_video_rooms" || @@ -195,4 +211,49 @@ describe("", () => { expect(queryByText("Export chat")).not.toBeInTheDocument(); }); }); + + describe("public room label", () => { + beforeEach(() => { + jest.spyOn(room.currentState, "getJoinRule").mockReturnValue(JoinRule.Public); + }); + + it("does not show public room label for a DM", async () => { + mockClient.getAccountData.mockImplementation( + (eventType) => + ({ + [EventType.Direct]: new MatrixEvent({ + type: EventType.Direct, + content: { + "@bob:sesame.st": ["some-room-id"], + // this room is a DM with ernie + "@ernie:sesame.st": ["some-other-room-id", room.roomId], + }, + }), + }[eventType]), + ); + getComponent(); + + await flushPromises(); + + expect(screen.queryByText("Public room")).not.toBeInTheDocument(); + }); + + it("does not show public room label for non public room", async () => { + jest.spyOn(room.currentState, "getJoinRule").mockReturnValue(JoinRule.Invite); + getComponent(); + + await flushPromises(); + + expect(screen.queryByText("Public room")).not.toBeInTheDocument(); + }); + + it("shows a public room label for a public room", async () => { + jest.spyOn(room.currentState, "getJoinRule").mockReturnValue(JoinRule.Public); + getComponent(); + + await flushPromises(); + + expect(screen.queryByText("Public room")).toBeInTheDocument(); + }); + }); }); diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 8c5891b576..9e81528f1c 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -35,36 +35,40 @@ exports[` renders the room summary 1`] = `
-