Device manager - device type icon

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

@@ -22,7 +22,7 @@ limitations under the License.
  padding: 0 $spacing-8 $spacing-8 0;
 }
 
-.mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_deviceIconWrapper {
  --background-color: $system;
  --icon-color: $secondary-content;
 
@@ -36,11 +36,16 @@ limitations under the License.
  background-color: var(--background-color);
 }
 
-.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
  --background-color: $primary-content;
  --icon-color: $background;
 }
 
+.mx_DeviceTypeIcon_deviceIcon {
+ height: 24px;
+ width: 24px;
+}
+
 .mx_DeviceTypeIcon_verificationIcon {
  position: absolute;
  bottom: 0;

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

@@ -18,6 +18,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
+import { Icon as DesktopIcon } from '../../../../../res/img/element-icons/settings/desktop.svg';
+import { Icon as WebIcon } from '../../../../../res/img/element-icons/settings/web.svg';
+import { Icon as MobileIcon } from '../../../../../res/img/element-icons/settings/mobile.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';
@@ -30,33 +33,51 @@ interface Props {
  deviceType?: DeviceType;
 }
 
+const deviceTypeIcon: Record<DeviceType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+ [DeviceType.Desktop]: DesktopIcon,
+ [DeviceType.Mobile]: MobileIcon,
+ [DeviceType.Web]: WebIcon,
+ [DeviceType.Unknown]: UnknownDeviceIcon,
+};
+const deviceTypeLabel: Record<DeviceType, string> = {
+ [DeviceType.Desktop]: _t('Desktop session'),
+ [DeviceType.Mobile]: _t('Mobile session'),
+ [DeviceType.Web]: _t('Web session'),
+ [DeviceType.Unknown]: _t('Unknown session type'),
+};
+
 export const DeviceTypeIcon: React.FC<Props> = ({
  isVerified,
  isSelected,
  deviceType,
-}) => (
- <div className={classNames('mx_DeviceTypeIcon', {
- mx_DeviceTypeIcon_selected: isSelected,
- })}
- >
- { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
- <UnknownDeviceIcon
- className='mx_DeviceTypeIcon_deviceIcon'
- role='img'
- aria-label={_t('Unknown device type')}
- />
- {
- isVerified
- ? <VerifiedIcon
- className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
- role='img'
- aria-label={_t('Verified')}
- />
- : <UnverifiedIcon
- className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+}) => {
+ const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown];
+ const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown];
+ return (
+ <div className={classNames('mx_DeviceTypeIcon', {
+ mx_DeviceTypeIcon_selected: isSelected,
+ })}
+ >
+ <div className='mx_DeviceTypeIcon_deviceIconWrapper'>
+ <Icon
+ className='mx_DeviceTypeIcon_deviceIcon'
  role='img'
- aria-label={_t('Unverified')}
+ aria-label={label}
  />
- }
- </div>);
+ </div>
+ {
+ isVerified
+ ? <VerifiedIcon
+ className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
+ role='img'
+ aria-label={_t('Verified')}
+ />
+ : <UnverifiedIcon
+ className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
+ role='img'
+ aria-label={_t('Unverified')}
+ />
+ }
+ </div>);
+};
 

src/i18n/strings/en_EN.json

@@ -1729,7 +1729,10 @@
  "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
  "Verified": "Verified",
  "Unverified": "Unverified",
- "Unknown device type": "Unknown device type",
+ "Desktop session": "Desktop session",
+ "Mobile session": "Mobile session",
+ "Web session": "Web session",
+ "Unknown session type": "Unknown session 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

@@ -115,10 +115,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -238,10 +242,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -320,10 +328,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"

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

@@ -18,6 +18,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
+import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
 
 describe('<DeviceTypeIcon />', () => {
  const defaultProps = {
@@ -41,4 +42,33 @@ describe('<DeviceTypeIcon />', () => {
  const { container } = render(getComponent({ isSelected: true }));
  expect(container).toMatchSnapshot();
  });
+
+ it('renders an unknown device icon when no device type given', () => {
+ const { getByLabelText } = render(getComponent());
+ expect(getByLabelText('Unknown session type')).toBeTruthy();
+ });
+
+ it('renders a desktop device type', () => {
+ const deviceType = DeviceType.Desktop;
+ const { getByLabelText } = render(getComponent({ deviceType }));
+ expect(getByLabelText('Desktop session')).toBeTruthy();
+ });
+
+ it('renders a web device type', () => {
+ const deviceType = DeviceType.Web;
+ const { getByLabelText } = render(getComponent({ deviceType }));
+ expect(getByLabelText('Web session')).toBeTruthy();
+ });
+
+ it('renders a mobile device type', () => {
+ const deviceType = DeviceType.Mobile;
+ const { getByLabelText } = render(getComponent({ deviceType }));
+ expect(getByLabelText('Mobile session')).toBeTruthy();
+ });
+
+ it('renders an unknown device type', () => {
+ const deviceType = DeviceType.Unknown;
+ const { getByLabelText } = render(getComponent({ deviceType }));
+ expect(getByLabelText('Unknown session type')).toBeTruthy();
+ });
 });

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

@@ -154,10 +154,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -270,10 +274,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"

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

@@ -10,10 +10,14 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -61,10 +65,14 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -112,10 +120,14 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -163,10 +175,14 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
  class="mx_DeviceTypeIcon"
  >
  <div
- aria-label="Unknown device type"
- class="mx_DeviceTypeIcon_deviceIcon"
- role="img"
- />
+ class="mx_DeviceTypeIcon_deviceIconWrapper"
+ >
+ <div
+ aria-label="Unknown session type"
+ class="mx_DeviceTypeIcon_deviceIcon"
+ role="img"
+ />
+ </div>
  <div
  aria-label="Unverified"
  class="mx_DeviceTypeIcon_verificationIcon unverified"