imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - label devices as inactive (PSG-638) (#9175)

Browse source 
* filter devices by security recommendation

* display inactive status on device tile

* unify DeviceSecurityVariation type, add correct icon to inactive ui

* tidy

* avoid dead code warning
This commit is contained in:
Kerry 2022-08-11 23:39:38 +02:00 • committed by GitHub
parent d21498de94
commit 4a5ed2f899
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 189 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/views/settings/devices/DeviceTile.tsx
View file

@ -16,13 +16,14 @@ limitations under the License.
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_MS, isDeviceInactive } from "./filter";
import { DeviceWithVerification } from "./useOwnDevices";
export interface DeviceTileProps {
device: DeviceWithVerification;
children?: React.ReactNode;
@ -45,7 +46,8 @@ const DeviceTileName: React.FC<{ device: DeviceWithVerification }> = ({ device }
</Heading>;
};
const MS_6_DAYS = 6 * 24 * 60 * 60 * 1000;
const MS_DAY = 24 * 60 * 60 * 1000;
const MS_6_DAYS = 6 * MS_DAY;
const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
// less than a week ago
if (timestamp + MS_6_DAYS >= now) {
@ -56,18 +58,40 @@ const formatLastActivity = (timestamp: number, now = new Date().getTime()): stri
return formatRelativeTime(new Date(timestamp));
};
const DeviceMetadata: React.FC<{ value: string, id: string }> = ({ value, id }) => (
const getInactiveMetadata = (device: DeviceWithVerification): { id: string, value: React.ReactNode } | undefined => {
const isInactive = isDeviceInactive(device);
if (!isInactive) {
return undefined;
}
const inactiveAgeDays = Math.round(INACTIVE_DEVICE_AGE_MS / MS_DAY);
return { id: 'inactive', value: (
<>
<InactiveIcon className="mx_DeviceTile_inactiveIcon" />
{
_t('Inactive for %(inactiveAgeDays)s+ days', { inactiveAgeDays }) +
` (${formatLastActivity(device.last_seen_ts)})`
}
</>),
};
};
const DeviceMetadata: React.FC<{ value: string | React.ReactNode, id: string }> = ({ value, id }) => (
value ? <span data-testid={`device-metadata-${id}`}>{ value }</span> : null
);
const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) => {
const inactive = getInactiveMetadata(device);
const lastActivity = device.last_seen_ts && `${_t('Last activity')} ${formatLastActivity(device.last_seen_ts)}`;
const verificationStatus = device.isVerified ? _t('Verified') : _t('Unverified');
const metadata = [
{ id: 'isVerified', value: verificationStatus },
{ id: 'lastActivity', value: lastActivity },
{ id: 'lastSeenIp', value: device.last_seen_ip },
];
// if device is inactive, don't display last activity or verificationStatus
const metadata = inactive
? [inactive, { id: 'lastSeenIp', value: device.last_seen_ip }]
: [
{ id: 'isVerified', value: verificationStatus },
{ id: 'lastActivity', value: lastActivity },
{ id: 'lastSeenIp', value: device.last_seen_ip },
];
return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
<div className="mx_DeviceTile_info" onClick={onClick}>