Add E2E status in room header

res/css/_common.pcss

@@ -134,6 +134,14 @@ code {
     color: $muted-fg-color;
 }
 
+.mx_Verified {
+    color: $e2e-verified-color;
+}
+
+.mx_Untrusted {
+    color: $e2e-warning-color;
+}
+
 b {
     /* On Firefox, the default weight for `<b>` is `bolder` which results in no bold */
     /* effect since we only have specific weights of our fonts available. */

src/components/views/rooms/RoomHeader.tsx

@@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useMemo } from "react";
-import { Body as BodyText, IconButton } from "@vector-im/compound-web";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Body as BodyText, IconButton, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
 import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
+import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
+import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
+import { EventType, type Room } from "matrix-js-sdk/src/matrix";
 
-import type { Room } from "matrix-js-sdk/src/matrix";
 import { _t } from "../../../languageHandler";
 import { useRoomName } from "../../../hooks/useRoomName";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
@@ -41,6 +43,10 @@ import { NotificationColor } from "../../../stores/notifications/NotificationCol
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
+import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
+import { E2EStatus } from "../../../utils/ShieldUtils";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useAccountData } from "../../../hooks/useAccountData";
 
 /**
  * A helper to transform a notification color to the what the Compound Icon Button
@@ -67,6 +73,8 @@ function showOrHidePanel(phase: RightPanelPhases): void {
 }
 
 export default function RoomHeader({ room }: { room: Room }): JSX.Element {
+    const client = useMatrixClientContext();
+
     const roomName = useRoomName(room);
     const roomTopic = useTopic(room);
 
@@ -112,6 +120,18 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const threadNotifications = useRoomThreadNotifications(room);
     const globalNotificationState = useGlobalNotificationState();
 
+    const directRoomsList = useAccountData<Record<string, string[]>>(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 e2eStatus = useEncryptionStatus(client, room);
+
     return (
         <Flex
             as="header"
@@ -137,6 +157,18 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     aria-level={1}
                 >
                     {roomName}
+
+                    {isDirectMessage && e2eStatus === E2EStatus.Verified && (
+                        <Tooltip label={_t("Verified")}>
+                            <VerifiedIcon width="16px" height="16px" className="mx_Verified" />
+                        </Tooltip>
+                    )}
+
+                    {isDirectMessage && e2eStatus === E2EStatus.Warning && (
+                        <Tooltip label={_t("Untrusted")}>
+                            <ErrorIcon width="16px" height="16px" className="mx_Untrusted" />
+                        </Tooltip>
+                    )}
                 </BodyText>
                 {roomTopic && (
                     <BodyText as="div" size="sm" className="mx_RoomHeader_topic">

src/hooks/useEncryptionStatus.ts

@@ -0,0 +1,34 @@
+/*
+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 { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { useEffect, useState } from "react";
+
+import { E2EStatus, shieldStatusForRoom } from "../utils/ShieldUtils";
+
+export function useEncryptionStatus(client: MatrixClient, room: Room): E2EStatus | null {
+    const [e2eStatus, setE2eStatus] = useState<E2EStatus | null>(null);
+
+    useEffect(() => {
+        if (client.isCryptoEnabled()) {
+            shieldStatusForRoom(client, room).then((e2eStatus) => {
+                setE2eStatus(e2eStatus);
+            });
+        }
+    }, [client, room]);
+
+    return e2eStatus;
+}

src/i18n/strings/en_EN.json

@@ -1821,6 +1821,7 @@
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",
+    "Untrusted": "Untrusted",
     "Threads": "Threads",
     "Video room": "Video room",
     "Public space": "Public space",

test/components/views/rooms/RoomHeader-test.tsx

@@ -20,7 +20,7 @@ import { Room, EventType, MatrixEvent, PendingEventOrdering, MatrixCall } from "
 import userEvent from "@testing-library/user-event";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
-import { stubClient } from "../../../test-utils";
+import { stubClient, withClientContextRenderOptions } from "../../../test-utils";
 import RoomHeader from "../../../../src/components/views/rooms/RoomHeader";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -57,7 +57,10 @@ describe("Roomeader", () => {
     });
 
     it("renders the room header", () => {
-        const { container } = render(<RoomHeader room={room} />);
+        const { container } = render(
+            <RoomHeader room={room} />,
+            withClientContextRenderOptions(MatrixClientPeg.get()!),
+        );
         expect(container).toHaveTextContent(ROOM_ID);
     });
 
@@ -75,26 +78,38 @@ describe("Roomeader", () => {
         });
         await room.addLiveEvents([roomTopic]);
 
-        const { container } = render(<RoomHeader room={room} />);
+        const { container } = render(
+            <RoomHeader room={room} />,
+            withClientContextRenderOptions(MatrixClientPeg.get()!),
+        );
         expect(container).toHaveTextContent(TOPIC);
     });
 
     it("opens the room summary", async () => {
-        const { container } = render(<RoomHeader room={room} />);
+        const { container } = render(
+            <RoomHeader room={room} />,
+            withClientContextRenderOptions(MatrixClientPeg.get()!),
+        );
 
         await userEvent.click(getByText(container, ROOM_ID));
         expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary });
     });
 
     it("opens the thread panel", async () => {
-        const { container } = render(<RoomHeader room={room} />);
+        const { container } = render(
+            <RoomHeader room={room} />,
+            withClientContextRenderOptions(MatrixClientPeg.get()!),
+        );
 
         await userEvent.click(getByTitle(container, "Threads"));
         expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.ThreadPanel });
     });
 
     it("opens the notifications panel", async () => {
-        const { container } = render(<RoomHeader room={room} />);
+        const { container } = render(
+            <RoomHeader room={room} />,
+            withClientContextRenderOptions(MatrixClientPeg.get()!),
+        );
 
         await userEvent.click(getByTitle(container, "Notifications"));
         expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.NotificationPanel });
@@ -103,15 +118,21 @@ describe("Roomeader", () => {
     describe("groups call disabled", () => {
         it("you can't call if you're alone", () => {
             mockRoomMembers(room, 1);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             for (const button of getAllByTitle(container, "There's no one here to call")) {
                 expect(button).toBeDisabled();
             }
         });
 
         it("you can call when you're two in the room", async () => {
             mockRoomMembers(room, 2);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             const voiceButton = getByTitle(container, "Voice call");
             const videoButton = getByTitle(container, "Video call");
             expect(voiceButton).not.toBeDisabled();
@@ -132,7 +153,10 @@ describe("Roomeader", () => {
                 // The JS-SDK does not export the class `MatrixCall` only the type
                 {} as MatrixCall,
             );
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             for (const button of getAllByTitle(container, "Ongoing call")) {
                 expect(button).toBeDisabled();
             }
@@ -141,7 +165,10 @@ describe("Roomeader", () => {
         it("can calls in large rooms if able to edit widgets", () => {
             mockRoomMembers(room, 10);
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
 
             expect(getByTitle(container, "Voice call")).not.toBeDisabled();
             expect(getByTitle(container, "Video call")).not.toBeDisabled();
@@ -150,7 +177,10 @@ describe("Roomeader", () => {
         it("disable calls in large rooms by default", () => {
             mockRoomMembers(room, 10);
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             expect(getByTitle(container, "You do not have permission to start voice calls")).toBeDisabled();
             expect(getByTitle(container, "You do not have permission to start video calls")).toBeDisabled();
         });
@@ -166,7 +196,10 @@ describe("Roomeader", () => {
             // allow element calls
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
 
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
 
             expect(screen.queryByTitle("Voice call")).toBeNull();
 
@@ -187,7 +220,10 @@ describe("Roomeader", () => {
 
             jest.spyOn(CallStore.instance, "getCall").mockReturnValue({} as Call);
 
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             expect(getByTitle(container, "Ongoing call")).toBeDisabled();
         });
 
@@ -197,23 +233,32 @@ describe("Roomeader", () => {
                 // The JS-SDK does not export the class `MatrixCall` only the type
                 {} as MatrixCall,
             );
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             for (const button of getAllByTitle(container, "Ongoing call")) {
                 expect(button).toBeDisabled();
             }
         });
 
         it("can't call if you have no friends", () => {
             mockRoomMembers(room, 1);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
             for (const button of getAllByTitle(container, "There's no one here to call")) {
                 expect(button).toBeDisabled();
             }
         });
 
         it("calls using legacy or jitsi", async () => {
             mockRoomMembers(room, 2);
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
 
             const voiceButton = getByTitle(container, "Voice call");
             const videoButton = getByTitle(container, "Video call");
@@ -236,7 +281,10 @@ describe("Roomeader", () => {
                 return false;
             });
 
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
 
             const voiceButton = getByTitle(container, "Voice call");
             const videoButton = getByTitle(container, "Video call");
@@ -260,7 +308,10 @@ describe("Roomeader", () => {
                 return false;
             });
 
-            const { container } = render(<RoomHeader room={room} />);
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
 
             const voiceButton = getByTitle(container, "Voice call");
             const videoButton = getByTitle(container, "Video call");