From 12e3ba8e5ac883b329f851f134501399637fa94a Mon Sep 17 00:00:00 2001
From: Faye Duxovni <fayed@element.io>
Date: Fri, 23 Sep 2022 09:21:04 -0400
Subject: [PATCH] Make device ID copyable in device list (#9297)

---
 .../views/settings/devices/DeviceTile.tsx     | 15 +-----
 .../__snapshots__/DevicesPanel-test.tsx.snap  | 18 +++++++
 .../CurrentDeviceSection-test.tsx.snap        | 12 +++++
 .../__snapshots__/DeviceTile-test.tsx.snap    | 36 ++++++++++---
 .../SelectableDeviceTile-test.tsx.snap        | 18 ++++---
 .../SessionManagerTab-test.tsx.snap           | 54 ++++++++++---------
 6 files changed, 100 insertions(+), 53 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index a23e1586db..e48070ddbc 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -19,8 +19,6 @@ import React, { Fragment } from "react";
 import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';
 import { _t } from "../../../../languageHandler";
 import { formatDate, formatRelativeTime } from "../../../../DateUtils";
-import TooltipTarget from "../../elements/TooltipTarget";
-import { Alignment } from "../../elements/Tooltip";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { DeviceWithVerification } from "./types";
@@ -32,18 +30,8 @@ export interface DeviceTileProps {
 }
 
 const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }) => {
-    if (device.display_name) {
-        return <TooltipTarget
-            alignment={Alignment.Top}
-            label={`${device.display_name} (${device.device_id})`}
-        >
-            <Heading size='h4'>
-                { device.display_name }
-            </Heading>
-        </TooltipTarget>;
-    }
     return <Heading size='h4'>
-        { device.device_id }
+        { device.display_name || device.device_id }
     </Heading>;
 };
 
@@ -91,6 +79,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
             { id: 'isVerified', value: verificationStatus },
             { id: 'lastActivity', value: lastActivity },
             { id: 'lastSeenIp', value: device.last_seen_ip },
+            { id: 'deviceId', value: device.device_id },
         ];
 
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
index 2f2f3a7773..0cdead4e6e 100644
--- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
@@ -141,6 +141,12 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
             >
               Unverified
             </span>
+             · 
+            <span
+              data-testid="device-metadata-deviceId"
+            >
+              device_1
+            </span>
           </div>
         </div>
         <div
@@ -257,6 +263,12 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
               >
                 Unverified
               </span>
+               · 
+              <span
+                data-testid="device-metadata-deviceId"
+              >
+                device_2
+              </span>
             </div>
           </div>
           <div
@@ -332,6 +344,12 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
               >
                 Unverified
               </span>
+               · 
+              <span
+                data-testid="device-metadata-deviceId"
+              >
+                device_3
+              </span>
             </div>
           </div>
           <div
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 0f029423ab..65ed96604d 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -212,6 +212,12 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             >
               Unverified
             </span>
+             · 
+            <span
+              data-testid="device-metadata-deviceId"
+            >
+              alices_device
+            </span>
           </div>
         </div>
         <div
@@ -322,6 +328,12 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             >
               Unverified
             </span>
+             · 
+            <span
+              data-testid="device-metadata-deviceId"
+            >
+              alices_device
+            </span>
           </div>
         </div>
         <div
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
index 913b6333fb..48f05d9259 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
@@ -36,6 +36,12 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
         >
           Unverified
         </span>
+         · 
+        <span
+          data-testid="device-metadata-deviceId"
+        >
+          123
+        </span>
       </div>
     </div>
     <div
@@ -81,6 +87,12 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
         >
           Unverified
         </span>
+         · 
+        <span
+          data-testid="device-metadata-deviceId"
+        >
+          123
+        </span>
       </div>
     </div>
     <div
@@ -113,15 +125,11 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <div
-        tabindex="0"
+      <h4
+        class="mx_Heading_h4"
       >
-        <h4
-          class="mx_Heading_h4"
-        >
-          My device
-        </h4>
-      </div>
+        My device
+      </h4>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -130,6 +138,12 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
         >
           Unverified
         </span>
+         · 
+        <span
+          data-testid="device-metadata-deviceId"
+        >
+          123
+        </span>
       </div>
     </div>
     <div
@@ -187,6 +201,12 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
         >
           1.2.3.4
         </span>
+         · 
+        <span
+          data-testid="device-metadata-deviceId"
+        >
+          123
+        </span>
       </div>
     </div>
     <div
diff --git a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index de5b76f8b4..3f03ab1813 100644
--- a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -53,15 +53,11 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
       <div
         class="mx_DeviceTile_info"
       >
-        <div
-          tabindex="0"
+        <h4
+          class="mx_Heading_h4"
         >
-          <h4
-            class="mx_Heading_h4"
-          >
-            My Device
-          </h4>
-        </div>
+          My Device
+        </h4>
         <div
           class="mx_DeviceTile_metadata"
         >
@@ -76,6 +72,12 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
           >
             123.456.789
           </span>
+           · 
+          <span
+            data-testid="device-metadata-deviceId"
+          >
+            my-device
+          </span>
         </div>
       </div>
       <div
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 2d290b20b5..f4f120d0a5 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -85,15 +85,11 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
       <div
         class="mx_DeviceTile_info"
       >
-        <div
-          tabindex="0"
+        <h4
+          class="mx_Heading_h4"
         >
-          <h4
-            class="mx_Heading_h4"
-          >
-            Alices device
-          </h4>
-        </div>
+          Alices device
+        </h4>
         <div
           class="mx_DeviceTile_metadata"
         >
@@ -102,6 +98,12 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
           >
             Verified
           </span>
+           · 
+          <span
+            data-testid="device-metadata-deviceId"
+          >
+            alices_device
+          </span>
         </div>
       </div>
       <div
@@ -185,15 +187,11 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
       <div
         class="mx_DeviceTile_info"
       >
-        <div
-          tabindex="0"
+        <h4
+          class="mx_Heading_h4"
         >
-          <h4
-            class="mx_Heading_h4"
-          >
-            Alices device
-          </h4>
-        </div>
+          Alices device
+        </h4>
         <div
           class="mx_DeviceTile_metadata"
         >
@@ -202,6 +200,12 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
           >
             Unverified
           </span>
+           · 
+          <span
+            data-testid="device-metadata-deviceId"
+          >
+            alices_device
+          </span>
         </div>
       </div>
       <div
@@ -285,15 +289,11 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
   <div
     class="mx_DeviceTile_info"
   >
-    <div
-      tabindex="0"
+    <h4
+      class="mx_Heading_h4"
     >
-      <h4
-        class="mx_Heading_h4"
-      >
-        Alices device
-      </h4>
-    </div>
+      Alices device
+    </h4>
     <div
       class="mx_DeviceTile_metadata"
     >
@@ -302,6 +302,12 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
       >
         Verified
       </span>
+       · 
+      <span
+        data-testid="device-metadata-deviceId"
+      >
+        alices_device
+      </span>
     </div>
   </div>
   <div