Add E2E status in room header (#11493)

* Add E2E status in room header

* Clearer logic for dmRoomList

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Add test for E2E shield

* Remove dead code

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

src/components/views/rooms/RoomHeader.tsx

@@ -14,16 +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 } from "matrix-js-sdk/src/matrix";
+import { EventType, type Room } from "matrix-js-sdk/src/matrix";
 
-import type { Room } from "matrix-js-sdk/src/matrix";
 import { useRoomName } from "../../../hooks/useRoomName";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -45,6 +46,8 @@ 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 FacePile from "../elements/FacePile";
 
 /**
@@ -80,16 +83,6 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const members = useRoomMembers(room);
     const memberCount = useRoomMemberCount(room);
 
-    const directRoomsList = useAccountData<Record<string, string[]>>(client, EventType.Direct);
-    const isDirectMessage = useMemo(() => {
-        for (const [, dmRoomList] of Object.entries(directRoomsList)) {
-            if (dmRoomList.includes(room?.roomId ?? "")) {
-                return true;
-            }
-        }
-        return false;
-    }, [directRoomsList, room?.roomId]);
-
     const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
 
     const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
@@ -132,6 +125,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"
@@ -154,6 +159,28 @@ 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"
+                                aria-label={_t("Verified")}
+                            />
+                        </Tooltip>
+                    )}
+
+                    {isDirectMessage && e2eStatus === E2EStatus.Warning && (
+                        <Tooltip label={_t("Untrusted")}>
+                            <ErrorIcon
+                                width="16px"
+                                height="16px"
+                                className="mx_Untrusted"
+                                aria-label={_t("Untrusted")}
+                            />
+                        </Tooltip>
+                    )}
                 </BodyText>
                 {roomTopic && (
                     <BodyText as="div" size="sm" className="mx_RoomHeader_topic">

src/hooks/useAccountData.ts

@@ -37,7 +37,6 @@ export const useAccountData = <T extends {}>(cli: MatrixClient, eventType: strin
     return value || ({} as T);
 };
 
-// Hook to simplify listening to Matrix room account data
 // Currently not used, commenting out otherwise the dead code CI is unhappy.
 // But this code is valid and probably will be needed.
 

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

@@ -1851,6 +1851,7 @@
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",
+    "Untrusted": "Untrusted",
     "%(count)s members": {
         "other": "%(count)s members",
         "one": "%(count)s member"