Add "user identity" display to dev tools (#33977)

* Add "user identity" display to dev tools

* Correct incorect hard-coded string in test mock

* Fix up tests

apps/web/src/components/views/dialogs/devtools/Users.tsx

@@ -21,6 +21,8 @@ import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import CopyableText from "../../elements/CopyableText";
 import E2EIcon from "../../rooms/E2EIcon";
 import { E2EStatus } from "../../../../utils/ShieldUtils";
+import SyntaxHighlight from "../../elements/SyntaxHighlight.tsx";
+import { stringify } from "./Event.tsx";
 
 /**
  * Replacement function for `<i>` tags in translation strings.
@@ -164,6 +166,17 @@ const UserView: React.FC<UserProps> = ({ member, onBack }) => {
         [context, member],
         new Map(),
     );
+
+    const userIdentity = useAsyncMemo(
+        async () => {
+            const identity = await crypto?.getUserCrossSigningKeys(member.userId);
+            if (!identity) return null;
+            return <SyntaxHighlight language="json">{stringify(identity)}</SyntaxHighlight>;
+        },
+        [context, member],
+        null,
+    );
+
     // The device to show, if any.
     const [device, setDevice] = useState<Device | null>(null);
 
@@ -209,6 +222,10 @@ const UserView: React.FC<UserProps> = ({ member, onBack }) => {
                     ))}
                 </ul>
             </section>
+            <section>
+                <h2>{_t("devtools|user_identity")}</h2>
+                {userIdentity ?? <i>{_t("devtools|user_identity_unknown")}</i>}
+            </section>
         </BaseTool>
     );
 };

apps/web/src/i18n/strings/en_EN.json

@@ -904,6 +904,8 @@
         "user_avatar": "Avatar: %(avatar)s",
         "user_displayname": "Displayname: %(displayname)s",
         "user_id": "User ID: %(userId)s",
+        "user_identity": "Cryptographic identity",
+        "user_identity_unknown": "Unknown",
         "user_no_avatar": "Avatar: <i>None</i>",
         "user_no_displayname": "Displayname: <i>None</i>",
         "user_read_up_to": "User read up to: ",

apps/web/test/test-utils/test-utils.ts

@@ -125,6 +125,7 @@ export function createTestClient(): MatrixClient {
             getOwnDeviceKeys: vi.fn().mockResolvedValue({ ed25519: "ed25519", curve25519: "curve25519" }),
             getUserDeviceInfo: vi.fn().mockResolvedValue(new Map()),
             getUserVerificationStatus: vi.fn(),
+            getUserCrossSigningKeys: vi.fn().mockResolvedValue(null),
             getDeviceVerificationStatus: vi.fn(),
             resetKeyBackup: vi.fn(),
             isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(false),

apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap

@@ -654,6 +654,14 @@ exports[`<Users /> should render a single user 1`] = `
         </li>
       </ul>
     </section>
+    <section>
+      <h2>
+        Cryptographic identity
+      </h2>
+      <i>
+        Unknown
+      </i>
+    </section>
   </div>
   <div
     class="mx_Dialog_buttons"