Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit bd74664

Browse files
Kerryweeman1337
Kerry
authored and
weeman1337
committed
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
1 parent 1eb771e commit bd74664

File tree

13 files changed

+222
-90
lines changed

13 files changed

+222
-90
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ limitations under the License.
2222
padding: 0 $spacing-8 $spacing-8 0;
2323
}
2424

25-
.mx_DeviceTypeIcon_deviceIcon {
25+
.mx_DeviceTypeIcon_deviceIconWrapper {
2626
--background-color: $system;
2727
--icon-color: $secondary-content;
2828

@@ -36,11 +36,16 @@ limitations under the License.
3636
background-color: var(--background-color);
3737
}
3838

39-
.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIcon {
39+
.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
4040
--background-color: $primary-content;
4141
--icon-color: $background;
4242
}
4343

44+
.mx_DeviceTypeIcon_deviceIcon {
45+
height: 24px;
46+
width: 24px;
47+
}
48+
4449
.mx_DeviceTypeIcon_verificationIcon {
4550
position: absolute;
4651
bottom: 0;

‎res/img/element-icons/settings/desktop.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/element-icons/settings/mobile.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/element-icons/settings/web.svg‎

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import React from 'react';
1818
import classNames from 'classnames';
1919

2020
import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
21+
import { Icon as DesktopIcon } from '../../../../../res/img/element-icons/settings/desktop.svg';
22+
import { Icon as WebIcon } from '../../../../../res/img/element-icons/settings/web.svg';
23+
import { Icon as MobileIcon } from '../../../../../res/img/element-icons/settings/mobile.svg';
2124
import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
2225
import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
2326
import { _t } from '../../../../languageHandler';
@@ -30,33 +33,51 @@ interface Props {
3033
deviceType?: DeviceType;
3134
}
3235

36+
const deviceTypeIcon: Record<DeviceType, React.FC<React.SVGProps<SVGSVGElement>>> = {
37+
[DeviceType.Desktop]: DesktopIcon,
38+
[DeviceType.Mobile]: MobileIcon,
39+
[DeviceType.Web]: WebIcon,
40+
[DeviceType.Unknown]: UnknownDeviceIcon,
41+
};
42+
const deviceTypeLabel: Record<DeviceType, string> = {
43+
[DeviceType.Desktop]: _t('Desktop session'),
44+
[DeviceType.Mobile]: _t('Mobile session'),
45+
[DeviceType.Web]: _t('Web session'),
46+
[DeviceType.Unknown]: _t('Unknown session type'),
47+
};
48+
3349
export const DeviceTypeIcon: React.FC<Props> = ({
3450
isVerified,
3551
isSelected,
3652
deviceType,
37-
}) => (
38-
<div className={classNames('mx_DeviceTypeIcon', {
39-
mx_DeviceTypeIcon_selected: isSelected,
40-
})}
41-
>
42-
{ /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
43-
<UnknownDeviceIcon
44-
className='mx_DeviceTypeIcon_deviceIcon'
45-
role='img'
46-
aria-label={_t('Unknown device type')}
47-
/>
48-
{
49-
isVerified
50-
? <VerifiedIcon
51-
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
52-
role='img'
53-
aria-label={_t('Verified')}
54-
/>
55-
: <UnverifiedIcon
56-
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
53+
}) => {
54+
const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown];
55+
const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown];
56+
return (
57+
<div className={classNames('mx_DeviceTypeIcon', {
58+
mx_DeviceTypeIcon_selected: isSelected,
59+
})}
60+
>
61+
<div className='mx_DeviceTypeIcon_deviceIconWrapper'>
62+
<Icon
63+
className='mx_DeviceTypeIcon_deviceIcon'
5764
role='img'
58-
aria-label={_t('Unverified')}
65+
aria-label={label}
5966
/>
60-
}
61-
</div>);
67+
</div>
68+
{
69+
isVerified
70+
? <VerifiedIcon
71+
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
72+
role='img'
73+
aria-label={_t('Verified')}
74+
/>
75+
: <UnverifiedIcon
76+
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
77+
role='img'
78+
aria-label={_t('Unverified')}
79+
/>
80+
}
81+
</div>);
82+
};
6283

‎src/i18n/strings/en_EN.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1729,7 +1729,10 @@
17291729
"Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
17301730
"Verified": "Verified",
17311731
"Unverified": "Unverified",
1732-
"Unknown device type": "Unknown device type",
1732+
"Desktop session": "Desktop session",
1733+
"Mobile session": "Mobile session",
1734+
"Web session": "Web session",
1735+
"Unknown session type": "Unknown session type",
17331736
"Verified session": "Verified session",
17341737
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
17351738
"Unverified session": "Unverified session",

‎test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
115115
class="mx_DeviceTypeIcon"
116116
>
117117
<div
118-
aria-label="Unknown device type"
119-
class="mx_DeviceTypeIcon_deviceIcon"
120-
role="img"
121-
/>
118+
class="mx_DeviceTypeIcon_deviceIconWrapper"
119+
>
120+
<div
121+
aria-label="Unknown session type"
122+
class="mx_DeviceTypeIcon_deviceIcon"
123+
role="img"
124+
/>
125+
</div>
122126
<div
123127
aria-label="Unverified"
124128
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -238,10 +242,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
238242
class="mx_DeviceTypeIcon"
239243
>
240244
<div
241-
aria-label="Unknown device type"
242-
class="mx_DeviceTypeIcon_deviceIcon"
243-
role="img"
244-
/>
245+
class="mx_DeviceTypeIcon_deviceIconWrapper"
246+
>
247+
<div
248+
aria-label="Unknown session type"
249+
class="mx_DeviceTypeIcon_deviceIcon"
250+
role="img"
251+
/>
252+
</div>
245253
<div
246254
aria-label="Unverified"
247255
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -320,10 +328,14 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
320328
class="mx_DeviceTypeIcon"
321329
>
322330
<div
323-
aria-label="Unknown device type"
324-
class="mx_DeviceTypeIcon_deviceIcon"
325-
role="img"
326-
/>
331+
class="mx_DeviceTypeIcon_deviceIconWrapper"
332+
>
333+
<div
334+
aria-label="Unknown session type"
335+
class="mx_DeviceTypeIcon_deviceIcon"
336+
role="img"
337+
/>
338+
</div>
327339
<div
328340
aria-label="Unverified"
329341
class="mx_DeviceTypeIcon_verificationIcon unverified"

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { render } from '@testing-library/react';
1818
import React from 'react';
1919

2020
import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
21+
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
2122

2223
describe('<DeviceTypeIcon />', () => {
2324
const defaultProps = {
@@ -41,4 +42,33 @@ describe('<DeviceTypeIcon />', () => {
4142
const { container } = render(getComponent({ isSelected: true }));
4243
expect(container).toMatchSnapshot();
4344
});
45+
46+
it('renders an unknown device icon when no device type given', () => {
47+
const { getByLabelText } = render(getComponent());
48+
expect(getByLabelText('Unknown session type')).toBeTruthy();
49+
});
50+
51+
it('renders a desktop device type', () => {
52+
const deviceType = DeviceType.Desktop;
53+
const { getByLabelText } = render(getComponent({ deviceType }));
54+
expect(getByLabelText('Desktop session')).toBeTruthy();
55+
});
56+
57+
it('renders a web device type', () => {
58+
const deviceType = DeviceType.Web;
59+
const { getByLabelText } = render(getComponent({ deviceType }));
60+
expect(getByLabelText('Web session')).toBeTruthy();
61+
});
62+
63+
it('renders a mobile device type', () => {
64+
const deviceType = DeviceType.Mobile;
65+
const { getByLabelText } = render(getComponent({ deviceType }));
66+
expect(getByLabelText('Mobile session')).toBeTruthy();
67+
});
68+
69+
it('renders an unknown device type', () => {
70+
const deviceType = DeviceType.Unknown;
71+
const { getByLabelText } = render(getComponent({ deviceType }));
72+
expect(getByLabelText('Unknown session type')).toBeTruthy();
73+
});
4474
});

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
154154
class="mx_DeviceTypeIcon"
155155
>
156156
<div
157-
aria-label="Unknown device type"
158-
class="mx_DeviceTypeIcon_deviceIcon"
159-
role="img"
160-
/>
157+
class="mx_DeviceTypeIcon_deviceIconWrapper"
158+
>
159+
<div
160+
aria-label="Unknown session type"
161+
class="mx_DeviceTypeIcon_deviceIcon"
162+
role="img"
163+
/>
164+
</div>
161165
<div
162166
aria-label="Unverified"
163167
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -270,10 +274,14 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
270274
class="mx_DeviceTypeIcon"
271275
>
272276
<div
273-
aria-label="Unknown device type"
274-
class="mx_DeviceTypeIcon_deviceIcon"
275-
role="img"
276-
/>
277+
class="mx_DeviceTypeIcon_deviceIconWrapper"
278+
>
279+
<div
280+
aria-label="Unknown session type"
281+
class="mx_DeviceTypeIcon_deviceIcon"
282+
role="img"
283+
/>
284+
</div>
277285
<div
278286
aria-label="Unverified"
279287
class="mx_DeviceTypeIcon_verificationIcon unverified"

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

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
1010
class="mx_DeviceTypeIcon"
1111
>
1212
<div
13-
aria-label="Unknown device type"
14-
class="mx_DeviceTypeIcon_deviceIcon"
15-
role="img"
16-
/>
13+
class="mx_DeviceTypeIcon_deviceIconWrapper"
14+
>
15+
<div
16+
aria-label="Unknown session type"
17+
class="mx_DeviceTypeIcon_deviceIcon"
18+
role="img"
19+
/>
20+
</div>
1721
<div
1822
aria-label="Unverified"
1923
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -61,10 +65,14 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
6165
class="mx_DeviceTypeIcon"
6266
>
6367
<div
64-
aria-label="Unknown device type"
65-
class="mx_DeviceTypeIcon_deviceIcon"
66-
role="img"
67-
/>
68+
class="mx_DeviceTypeIcon_deviceIconWrapper"
69+
>
70+
<div
71+
aria-label="Unknown session type"
72+
class="mx_DeviceTypeIcon_deviceIcon"
73+
role="img"
74+
/>
75+
</div>
6876
<div
6977
aria-label="Unverified"
7078
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -112,10 +120,14 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
112120
class="mx_DeviceTypeIcon"
113121
>
114122
<div
115-
aria-label="Unknown device type"
116-
class="mx_DeviceTypeIcon_deviceIcon"
117-
role="img"
118-
/>
123+
class="mx_DeviceTypeIcon_deviceIconWrapper"
124+
>
125+
<div
126+
aria-label="Unknown session type"
127+
class="mx_DeviceTypeIcon_deviceIcon"
128+
role="img"
129+
/>
130+
</div>
119131
<div
120132
aria-label="Unverified"
121133
class="mx_DeviceTypeIcon_verificationIcon unverified"
@@ -163,10 +175,14 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
163175
class="mx_DeviceTypeIcon"
164176
>
165177
<div
166-
aria-label="Unknown device type"
167-
class="mx_DeviceTypeIcon_deviceIcon"
168-
role="img"
169-
/>
178+
class="mx_DeviceTypeIcon_deviceIconWrapper"
179+
>
180+
<div
181+
aria-label="Unknown session type"
182+
class="mx_DeviceTypeIcon_deviceIcon"
183+
role="img"
184+
/>
185+
</div>
170186
<div
171187
aria-label="Unverified"
172188
class="mx_DeviceTypeIcon_verificationIcon unverified"

0 commit comments

Comments
 (0)