Make device ID copyable in device list (#9297)

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}`}>

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

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

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
+      <h4
-        tabindex="0"
+        class="mx_Heading_h4"
       >
-        <h4
+        My device
-          class="mx_Heading_h4"
+      </h4>
-        >
-          My device
-        </h4>
-      </div>
       <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

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
+        <h4
-          tabindex="0"
+          class="mx_Heading_h4"
         >
-          <h4
+          My Device
-            class="mx_Heading_h4"
+        </h4>
-          >
-            My Device
-          </h4>
-        </div>
         <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

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
+        <h4
-          tabindex="0"
+          class="mx_Heading_h4"
         >
-          <h4
+          Alices device
-            class="mx_Heading_h4"
+        </h4>
-          >
-            Alices device
-          </h4>
-        </div>
         <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
+        <h4
-          tabindex="0"
+          class="mx_Heading_h4"
         >
-          <h4
+          Alices device
-            class="mx_Heading_h4"
+        </h4>
-          >
-            Alices device
-          </h4>
-        </div>
         <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
+    <h4
-      tabindex="0"
+      class="mx_Heading_h4"
     >
-      <h4
+      Alices device
-        class="mx_Heading_h4"
+    </h4>
-      >
-        Alices device
-      </h4>
-    </div>
     <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