From 8399b63e7a2efa81f33b61f1d75bb9eb189e85b1 Mon Sep 17 00:00:00 2001 From: Kerry Date: Thu, 6 Oct 2022 10:35:06 +0200 Subject: [PATCH 1/5] fix threadsupport type issues in tests (#9359) --- .../views/context_menus/MessageContextMenu-test.tsx | 4 ++-- test/components/views/messages/MessageActionBar-test.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/components/views/context_menus/MessageContextMenu-test.tsx b/test/components/views/context_menus/MessageContextMenu-test.tsx index 38c646cfe85..10017376bbb 100644 --- a/test/components/views/context_menus/MessageContextMenu-test.tsx +++ b/test/components/views/context_menus/MessageContextMenu-test.tsx @@ -27,7 +27,7 @@ import { EventType, } from 'matrix-js-sdk/src/matrix'; import { ExtensibleEvent, MessageEvent, M_POLL_KIND_DISCLOSED, PollStartEvent } from 'matrix-events-sdk'; -import { Thread } from "matrix-js-sdk/src/models/thread"; +import { FeatureSupport, Thread } from "matrix-js-sdk/src/models/thread"; import { mocked } from "jest-mock"; import { act } from '@testing-library/react'; @@ -469,7 +469,7 @@ describe('MessageContextMenu', () => { const eventContent = MessageEvent.from("hello"); const mxEvent = new MatrixEvent(eventContent.serialize()); - Thread.hasServerSideSupport = true; + Thread.hasServerSideSupport = FeatureSupport.Stable; const context = { canSendMessages: true, }; diff --git a/test/components/views/messages/MessageActionBar-test.tsx b/test/components/views/messages/MessageActionBar-test.tsx index d4dcb1a2dff..670d39ec64c 100644 --- a/test/components/views/messages/MessageActionBar-test.tsx +++ b/test/components/views/messages/MessageActionBar-test.tsx @@ -25,7 +25,7 @@ import { MsgType, Room, } from 'matrix-js-sdk/src/matrix'; -import { Thread } from 'matrix-js-sdk/src/models/thread'; +import { FeatureSupport, Thread } from 'matrix-js-sdk/src/models/thread'; import MessageActionBar from '../../../../src/components/views/messages/MessageActionBar'; import { @@ -388,13 +388,13 @@ describe('', () => { describe('thread button', () => { beforeEach(() => { - Thread.setServerSideSupport(true, false); + Thread.setServerSideSupport(FeatureSupport.Stable); }); describe('when threads feature is not enabled', () => { it('does not render thread button when threads does not have server support', () => { jest.spyOn(SettingsStore, 'getValue').mockReturnValue(false); - Thread.setServerSideSupport(false, false); + Thread.setServerSideSupport(FeatureSupport.None); const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent }); expect(queryByLabelText('Reply in thread')).toBeFalsy(); }); From 5e18abe7f76f20ee4de5893ce691c7e165e0d6cd Mon Sep 17 00:00:00 2001 From: Kerry Date: Thu, 6 Oct 2022 12:34:11 +0200 Subject: [PATCH 2/5] 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 546d4f7ea12..a092112d8a1 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 00000000000..7d6ca100792 --- /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 00000000000..45170b2c15b --- /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 00000000000..95bd1ba24ee --- /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 03b921f711d..5ae30485eb0 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 2fc9052b43a..2f8de1d2f09 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 05c0ca8c98d..96ec4a13bd1 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" >