From 5e18abe7f76f20ee4de5893ce691c7e165e0d6cd Mon Sep 17 00:00:00 2001 From: Kerry Date: Thu, 6 Oct 2022 12:34:11 +0200 Subject: [PATCH] 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 --- .../settings/devices/_DeviceTypeIcon.pcss | 9 ++- res/img/element-icons/settings/desktop.svg | 3 + res/img/element-icons/settings/mobile.svg | 3 + res/img/element-icons/settings/web.svg | 3 + .../views/settings/devices/DeviceTypeIcon.tsx | 67 ++++++++++++------- src/i18n/strings/en_EN.json | 5 +- .../__snapshots__/DevicesPanel-test.tsx.snap | 36 ++++++---- .../settings/devices/DeviceTypeIcon-test.tsx | 30 +++++++++ .../CurrentDeviceSection-test.tsx.snap | 24 ++++--- .../__snapshots__/DeviceTile-test.tsx.snap | 48 ++++++++----- .../DeviceTypeIcon-test.tsx.snap | 36 ++++++---- .../SelectableDeviceTile-test.tsx.snap | 12 ++-- .../SessionManagerTab-test.tsx.snap | 36 ++++++---- 13 files changed, 222 insertions(+), 90 deletions(-) create mode 100644 res/img/element-icons/settings/desktop.svg create mode 100644 res/img/element-icons/settings/mobile.svg create mode 100644 res/img/element-icons/settings/web.svg diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index 546d4f7ea1..a092112d8a 100644 --- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/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; diff --git a/res/img/element-icons/settings/desktop.svg b/res/img/element-icons/settings/desktop.svg new file mode 100644 index 0000000000..7d6ca10079 --- /dev/null +++ b/res/img/element-icons/settings/desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/mobile.svg b/res/img/element-icons/settings/mobile.svg new file mode 100644 index 0000000000..45170b2c15 --- /dev/null +++ b/res/img/element-icons/settings/mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/settings/web.svg b/res/img/element-icons/settings/web.svg new file mode 100644 index 0000000000..95bd1ba24e --- /dev/null +++ b/res/img/element-icons/settings/web.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/settings/devices/DeviceTypeIcon.tsx b/src/components/views/settings/devices/DeviceTypeIcon.tsx index 03b921f711..5ae30485eb 100644 --- a/src/components/views/settings/devices/DeviceTypeIcon.tsx +++ b/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.Desktop]: DesktopIcon, + [DeviceType.Mobile]: MobileIcon, + [DeviceType.Web]: WebIcon, + [DeviceType.Unknown]: UnknownDeviceIcon, +}; +const deviceTypeLabel: Record = { + [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 = ({ isVerified, isSelected, deviceType, -}) => ( -
- { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ } - - { - isVerified - ? { + const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown]; + const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown]; + return ( +
+
+ - : - } -
); +
+ { + isVerified + ? + : + } +
); +}; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2fc9052b43..2f8de1d2f0 100644 --- a/src/i18n/strings/en_EN.json +++ b/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", diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap index 05c0ca8c98..96ec4a13bd 100644 --- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap @@ -115,10 +115,14 @@ exports[` renders device panel with devices 1`] = ` class="mx_DeviceTypeIcon" >