Device manager - device type icon (#9355)

* record device client inforamtion events on app start

* matrix-client-information -> matrix_client_information

* fix types

* remove another unused export

* add docs link

* display device client information in device details

* update snapshots

* integration-ish test client information in metadata

* tests

* fix tests

* export helper

* DeviceClientInformation type

* Device manager - select all devices (#9330)

* add device selection that does nothing

* multi select and sign out of sessions

* test multiple selection

* fix type after rebase

* select all sessions

* rename type

* use ExtendedDevice type everywhere

* rename clientName to appName for less collision with UA parser

* fix bad find and replace

* rename ExtendedDeviceInfo to ExtendedDeviceAppInfo

* rename DeviceType comp to DeviceTypeIcon

* update tests for new required property deviceType

* add stubbed user agent parsing

* add icons

* set device type icon

* device type icon tets

* update snapshots for device type icon changes

* desktop icon viewbox

* i18n

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"

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

@@ -6,10 +6,14 @@ exports[`<DeviceTypeIcon /> renders a verified device 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="Verified"
       class="mx_DeviceTypeIcon_verificationIcon verified"
@@ -25,10 +29,14 @@ exports[`<DeviceTypeIcon /> renders an unverified device 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"
@@ -44,10 +52,14 @@ exports[`<DeviceTypeIcon /> renders correctly when selected 1`] = `
     class="mx_DeviceTypeIcon mx_DeviceTypeIcon_selected"
   >
     <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__/SelectableDeviceTile-test.tsx.snap

@@ -42,10 +42,14 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 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/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -97,10 +97,14 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
         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="Verified"
           class="mx_DeviceTypeIcon_verificationIcon verified"
@@ -199,10 +203,14 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
         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"
@@ -301,10 +309,14 @@ exports[`<SessionManagerTab /> sets device verification status correctly 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="Verified"
       class="mx_DeviceTypeIcon_verificationIcon verified"