Device manager - New device tile info design (#9122)(PSG-637)

* redesign device tile info

* test DeviceTile except for broken date mocking

* mock dates the nice way, test lastactivity in device tile

* tweak spacing style

* update comment style in rethemendex

* i18n

src/components/views/settings/DevicesPanelEntry.tsx

@@ -20,15 +20,14 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import { formatDate } from '../../../DateUtils';
 import StyledCheckbox, { CheckboxStyle } from '../elements/StyledCheckbox';
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
-import TextWithTooltip from "../elements/TextWithTooltip";
 import Modal from "../../../Modal";
 import SetupEncryptionDialog from '../dialogs/security/SetupEncryptionDialog';
 import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
 import LogoutDialog from '../dialogs/LogoutDialog';
+import DeviceTile from './devices/DeviceTile';
 
 interface IProps {
     device: IMyDevice;
@@ -114,17 +113,6 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
     };
 
     public render(): JSX.Element {
-        const device = this.props.device;
-
-        let lastSeen = "";
-        if (device.last_seen_ts) {
-            const lastSeenDate = new Date(device.last_seen_ts);
-            lastSeen = _t("Last seen %(date)s at %(ip)s", {
-                date: formatDate(lastSeenDate),
-                ip: device.last_seen_ip,
-            });
-        }
-
         const myDeviceClass = this.props.isOwnDevice ? " mx_DevicesPanel_myDevice" : '';
 
         let iconClass = '';
@@ -153,16 +141,6 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 <StyledCheckbox kind={CheckboxStyle.Outline} onChange={this.onDeviceToggled} checked={this.props.selected} />
             </div>;
 
-        const deviceName = device.display_name ?
-            <React.Fragment>
-                <TextWithTooltip tooltip={device.display_name + " (" + device.device_id + ")"}>
-                    { device.display_name }
-                </TextWithTooltip>
-            </React.Fragment> :
-            <React.Fragment>
-                { device.device_id }
-            </React.Fragment>;
-
         const buttons = this.state.renaming ?
             <form className="mx_DevicesPanel_renameForm" onSubmit={this.onRenameSubmit}>
                 <Field
@@ -187,17 +165,9 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
         return (
             <div className={"mx_DevicesPanel_device" + myDeviceClass}>
                 { left }
-                <div className="mx_DevicesPanel_deviceInfo">
-                    <div className="mx_DevicesPanel_deviceName">
-                        { deviceName }
-                    </div>
-                    <div className="mx_DevicesPanel_lastSeen">
-                        { lastSeen }
-                    </div>
-                </div>
-                <div className="mx_DevicesPanel_deviceButtons">
+                <DeviceTile device={this.props.device}>
                     { buttons }
-                </div>
+                </DeviceTile>
             </div>
         );
     }

src/components/views/settings/devices/DeviceTile.tsx

@@ -0,0 +1,87 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { Fragment } from "react";
+import { IMyDevice } from "matrix-js-sdk/src/matrix";
+
+import { _t } from "../../../../languageHandler";
+import { formatDate, formatRelativeTime } from "../../../../DateUtils";
+import TooltipTarget from "../../elements/TooltipTarget";
+import { Alignment } from "../../elements/Tooltip";
+import Heading from "../../typography/Heading";
+
+interface Props {
+    device: IMyDevice;
+    children?: React.ReactNode;
+}
+
+const DeviceTileName: React.FC<{ device: IMyDevice }> = ({ device }) => {
+    if (device.display_name) {
+        return <TooltipTarget
+            alignment={Alignment.Left}
+            label={`${device.display_name} (${device.device_id})`}
+        >
+            <Heading size='h4'>
+                { device.display_name }
+            </Heading>
+        </TooltipTarget>;
+    }
+    return <Heading size='h4'>
+        { device.device_id }
+    </Heading>;
+};
+
+const MS_6_DAYS = 6 * 24 * 60 * 60 * 1000;
+const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
+    // less than a week ago
+    if (timestamp + MS_6_DAYS >= now) {
+        const date = new Date(timestamp);
+        // Tue 20:15
+        return formatDate(date);
+    }
+    return formatRelativeTime(new Date(timestamp));
+};
+
+const DeviceMetadata: React.FC<{ value: string, id: string }> = ({ value, id }) => (
+    value ? <span data-testid={`device-metadata-${id}`}>{ value }</span> : null
+);
+
+const DeviceTile: React.FC<Props> = ({ device, children }) => {
+    const lastActivity = device.last_seen_ts && `${_t('Last activity')} ${formatLastActivity(device.last_seen_ts)}`;
+    const metadata = [
+        { id: 'lastActivity', value: lastActivity },
+        { id: 'lastSeenIp', value: device.last_seen_ip },
+    ];
+
+    return <div className="mx_DeviceTile">
+        <div className="mx_DeviceTile_info">
+            <DeviceTileName device={device} />
+            <div className="mx_DeviceTile_metadata">
+                { metadata.map(({ id, value }, index) =>
+                    <Fragment key={id}>
+                        { !!index && ' · ' }
+                        <DeviceMetadata id={id} value={value} />
+                    </Fragment>,
+                ) }
+            </div>
+        </div>
+        <div className="mx_DeviceTile_actions">
+            { children }
+        </div>
+    </div>;
+};
+
+export default DeviceTile;

src/i18n/strings/en_EN.json

@@ -1303,7 +1303,6 @@
     "You aren't signed into any other devices.": "You aren't signed into any other devices.",
     "This device": "This device",
     "Failed to set display name": "Failed to set display name",
-    "Last seen %(date)s at %(ip)s": "Last seen %(date)s at %(ip)s",
     "Sign Out": "Sign Out",
     "Display Name": "Display Name",
     "Rename": "Rename",
@@ -1691,6 +1690,7 @@
     "Please enter verification code sent via text.": "Please enter verification code sent via text.",
     "Verification code": "Verification code",
     "Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
+    "Last activity": "Last activity",
     "Unable to remove contact information": "Unable to remove contact information",
     "Remove %(email)s?": "Remove %(email)s?",
     "Invalid Email Address": "Invalid Email Address",