Device manager - device type and verification icons on device tile (PSG-637)

res/css/_components.pcss

@@ -31,6 +31,7 @@
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
 @import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
+@import "./components/views/settings/devices/_DeviceType.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/devices/_SecurityRecommendations.pcss";
 @import "./components/views/settings/devices/_SelectableDeviceTile.pcss";

res/css/components/views/settings/devices/_DeviceSecurityCard.pcss

@@ -68,3 +68,7 @@ limitations under the License.
     font-size: $font-12px;
     color: $secondary-content;
 }
+
+.mx_DeviceSecurityCard_actions {
+    margin-top: $spacing-16;
+}

res/css/components/views/settings/devices/_DeviceType.pcss

@@ -0,0 +1,66 @@
+/*
+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.
+*/
+
+.mx_DeviceType {
+    flex: 0 0 auto;
+    position: relative;
+    margin-right: $spacing-8;
+    /* creates space for verification icon to overlap */
+    padding: 0 $spacing-8 $spacing-8 0;
+}
+
+.mx_DeviceType_deviceIcon {
+    --background-color: $system;
+    --icon-color: $secondary-content;
+
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+
+    border: $spacing-8 solid var(--background-color);
+    border-radius: 50%;
+    color: var(--icon-color);
+    background-color: var(--background-color);
+}
+
+.mx_DeviceType_selected .mx_DeviceType_deviceIcon {
+    --background-color: $primary-content;
+    --icon-color: $background;
+}
+
+.mx_DeviceType_verificationIcon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 24px;
+    width: 24px;
+    box-sizing: border-box;
+    padding: $spacing-4;
+
+    border: 1px solid $system;
+    border-radius: 50%;
+    background-color: $background;
+
+    color: var(--v-icon-color);
+
+    &.verified {
+        --v-icon-color: $e2e-verified-color;
+    }
+
+    &.unverified {
+        --v-icon-color: $e2e-warning-color;
+    }
+}

res/css/views/settings/_DevicesPanel.pcss

@@ -57,6 +57,12 @@ limitations under the License.
     margin-block: 10px;
     min-height: 35px;
     padding: 0 $spacing-8;
+
+    .mx_DeviceType {
+        /* hide the new device type in legacy device list
+        for backwards compat reasons */
+        display: none;
+    }
 }
 
 .mx_DevicesPanel_icon {

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

@@ -47,7 +47,9 @@ const DeviceSecurityCard: React.FC<Props> = ({ variation, heading, description,
         <div className='mx_DeviceSecurityCard_content'>
             <p className='mx_DeviceSecurityCard_heading'>{ heading }</p>
             <p className='mx_DeviceSecurityCard_description'>{ description }</p>
-            { children }
+            { !!children && <div className='mx_DeviceSecurityCard_actions'>
+                { children }
+            </div> }
         </div>
     </div>;
 };

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

@@ -24,6 +24,7 @@ import { Alignment } from "../../elements/Tooltip";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { DeviceWithVerification } from "./types";
+import { DeviceType } from "./DeviceType";
 export interface DeviceTileProps {
     device: DeviceWithVerification;
     children?: React.ReactNode;
@@ -93,6 +94,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
         ];
 
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
+        <DeviceType isVerified={device.isVerified} />
         <div className="mx_DeviceTile_info" onClick={onClick}>
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">

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

@@ -0,0 +1,56 @@
+/*
+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 from 'react';
+import classNames from 'classnames';
+
+import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
+import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
+import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
+import { _t } from '../../../../languageHandler';
+import { DeviceWithVerification } from './types';
+
+interface Props {
+    isVerified?: DeviceWithVerification['isVerified'];
+    isSelected?: boolean;
+}
+
+export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
+    <div className={classNames('mx_DeviceType', {
+        mx_DeviceType_selected: isSelected,
+    })}
+    >
+        { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
+        <UnknownDeviceIcon
+            className='mx_DeviceType_deviceIcon'
+            role='img'
+            aria-label={_t('Unknown device type')}
+        />
+        {
+            isVerified
+                ? <VerifiedIcon
+                    className={classNames('mx_DeviceType_verificationIcon', 'verified')}
+                    role='img'
+                    aria-label={_t('Verified')}
+                />
+                : <UnverifiedIcon
+                    className={classNames('mx_DeviceType_verificationIcon', 'unverified')}
+                    role='img'
+                    aria-label={_t('Unverified')}
+                />
+        }
+    </div>);
+

src/i18n/strings/en_EN.json

@@ -1712,6 +1712,7 @@
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",
     "Unverified": "Unverified",
+    "Unknown device type": "Unknown device type",
     "Verified session": "Verified session",
     "This session is ready for secure messaging.": "This session is ready for secure messaging.",
     "Unverified session": "Unverified session",

test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap

@@ -111,6 +111,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
         class="mx_DeviceTile"
         data-testid="device-tile-device_1"
       >
+        <div
+          class="mx_DeviceType"
+        >
+          <div
+            aria-label="Unknown device type"
+            class="mx_DeviceType_deviceIcon"
+            role="img"
+          />
+          <div
+            aria-label="Unverified"
+            class="mx_DeviceType_verificationIcon unverified"
+            role="img"
+          />
+        </div>
         <div
           class="mx_DeviceTile_info"
         >
@@ -215,6 +229,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
           class="mx_DeviceTile"
           data-testid="device-tile-device_2"
         >
+          <div
+            class="mx_DeviceType"
+          >
+            <div
+              aria-label="Unknown device type"
+              class="mx_DeviceType_deviceIcon"
+              role="img"
+            />
+            <div
+              aria-label="Unverified"
+              class="mx_DeviceType_verificationIcon unverified"
+              role="img"
+            />
+          </div>
           <div
             class="mx_DeviceTile_info"
           >
@@ -278,6 +306,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
           class="mx_DeviceTile"
           data-testid="device-tile-device_3"
         >
+          <div
+            class="mx_DeviceType"
+          >
+            <div
+              aria-label="Unknown device type"
+              class="mx_DeviceType_deviceIcon"
+              role="img"
+            />
+            <div
+              aria-label="Unverified"
+              class="mx_DeviceType_verificationIcon unverified"
+              role="img"
+            />
+          </div>
           <div
             class="mx_DeviceTile_info"
           >

test/components/views/settings/devices/DeviceType-test.tsx

@@ -0,0 +1,44 @@
+/*
+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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { DeviceType } from '../../../../../src/components/views/settings/devices/DeviceType';
+
+describe('<DeviceType />', () => {
+    const defaultProps = {
+        isVerified: false,
+        isSelected: false,
+    };
+    const getComponent = (props = {}) =>
+        <DeviceType {...defaultProps} {...props} />;
+
+    it('renders an unverified device', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders a verified device', () => {
+        const { container } = render(getComponent({ isVerified: true }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders correctly when selected', () => {
+        const { container } = render(getComponent({ isSelected: true }));
+        expect(container).toMatchSnapshot();
+    });
+});

test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -141,6 +141,20 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         class="mx_DeviceTile"
         data-testid="device-tile-alices_device"
       >
+        <div
+          class="mx_DeviceType"
+        >
+          <div
+            aria-label="Unknown device type"
+            class="mx_DeviceType_deviceIcon"
+            role="img"
+          />
+          <div
+            aria-label="Unverified"
+            class="mx_DeviceType_verificationIcon unverified"
+            role="img"
+          />
+        </div>
         <div
           class="mx_DeviceTile_info"
         >
@@ -227,6 +241,20 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         class="mx_DeviceTile"
         data-testid="device-tile-alices_device"
       >
+        <div
+          class="mx_DeviceType"
+        >
+          <div
+            aria-label="Unknown device type"
+            class="mx_DeviceType_deviceIcon"
+            role="img"
+          />
+          <div
+            aria-label="Unverified"
+            class="mx_DeviceType_verificationIcon unverified"
+            role="img"
+          />
+        </div>
         <div
           class="mx_DeviceTile_info"
         >

test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap

@@ -57,8 +57,12 @@ exports[`<DeviceSecurityCard /> renders with children 1`] = `
       >
         nice
       </p>
-      <div>
-        hey
+      <div
+        class="mx_DeviceSecurityCard_actions"
+      >
+        <div>
+          hey
+        </div>
       </div>
     </div>
   </div>