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/_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/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,55 @@
+/*
+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';
+
+interface Props {
+ isVerified?: boolean;
+ 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

@@ -1705,6 +1705,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"
  >