Make device ID copyable in device list (#9297)
This commit is contained in:
parent
45556e6662
commit
12e3ba8e5a
6 changed files with 100 additions and 53 deletions
|
@ -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}`}>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
@ -112,16 +124,12 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_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
|
||||
|
|
|
@ -52,16 +52,12 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_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
|
||||
|
|
|
@ -84,16 +84,12 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_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
|
||||
|
@ -184,16 +186,12 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_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
|
||||
|
@ -284,16 +288,12 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
|
|||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_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
|
||||
|
|
Loading…
Reference in a new issue