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"