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

Commit 825a0af

Browse files
Kerryturt2live
Kerry
and
turt2live
authored
Device manager - device type and verification icons on device tile (PSG-637) (#9197)
* add unknown device icon * add device type and verification icon component * test * stylelint * fix securitycard spacing Co-authored-by: Travis Ralston <[email protected]>
1 parent 5aae974 commit 825a0af

18 files changed

+480
-27
lines changed

‎res/css/_components.pcss

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
3232
@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
3333
@import "./components/views/settings/devices/_DeviceTile.pcss";
34+
@import "./components/views/settings/devices/_DeviceType.pcss";
3435
@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
3536
@import "./components/views/settings/devices/_SecurityRecommendations.pcss";
3637
@import "./components/views/settings/devices/_SelectableDeviceTile.pcss";

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

+4
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,7 @@ limitations under the License.
6868
font-size: $font-12px;
6969
color: $secondary-content;
7070
}
71+
72+
.mx_DeviceSecurityCard_actions {
73+
margin-top: $spacing-16;
74+
}

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_DeviceType {
18+
flex: 0 0 auto;
19+
position: relative;
20+
margin-right: $spacing-8;
21+
/* creates space for verification icon to overlap */
22+
padding: 0 $spacing-8 $spacing-8 0;
23+
}
24+
25+
.mx_DeviceType_deviceIcon {
26+
--background-color: $system;
27+
--icon-color: $secondary-content;
28+
29+
height: 40px;
30+
width: 40px;
31+
box-sizing: border-box;
32+
33+
border: $spacing-8 solid var(--background-color);
34+
border-radius: 50%;
35+
color: var(--icon-color);
36+
background-color: var(--background-color);
37+
}
38+
39+
.mx_DeviceType_selected .mx_DeviceType_deviceIcon {
40+
--background-color: $primary-content;
41+
--icon-color: $background;
42+
}
43+
44+
.mx_DeviceType_verificationIcon {
45+
position: absolute;
46+
bottom: 0;
47+
right: 0;
48+
height: 24px;
49+
width: 24px;
50+
box-sizing: border-box;
51+
padding: $spacing-4;
52+
53+
border: 1px solid $system;
54+
border-radius: 50%;
55+
background-color: $background;
56+
57+
color: var(--v-icon-color);
58+
59+
&.verified {
60+
--v-icon-color: $e2e-verified-color;
61+
}
62+
63+
&.unverified {
64+
--v-icon-color: $e2e-warning-color;
65+
}
66+
}

‎res/css/views/settings/_DevicesPanel.pcss

+6
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@ limitations under the License.
5757
margin-block: 10px;
5858
min-height: 35px;
5959
padding: 0 $spacing-8;
60+
61+
.mx_DeviceType {
62+
/* hide the new device type in legacy device list
63+
for backwards compat reasons */
64+
display: none;
65+
}
6066
}
6167

6268
.mx_DevicesPanel_icon {

‎res/img/element-icons/settings/unknown-device.svg

+3
Loading

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ const DeviceSecurityCard: React.FC<Props> = ({ variation, heading, description,
4747
<div className='mx_DeviceSecurityCard_content'>
4848
<p className='mx_DeviceSecurityCard_heading'>{ heading }</p>
4949
<p className='mx_DeviceSecurityCard_description'>{ description }</p>
50-
{ children }
50+
{ !!children && <div className='mx_DeviceSecurityCard_actions'>
51+
{ children }
52+
</div> }
5153
</div>
5254
</div>;
5355
};

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

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { Alignment } from "../../elements/Tooltip";
2424
import Heading from "../../typography/Heading";
2525
import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
2626
import { DeviceWithVerification } from "./types";
27+
import { DeviceType } from "./DeviceType";
2728
export interface DeviceTileProps {
2829
device: DeviceWithVerification;
2930
children?: React.ReactNode;
@@ -93,6 +94,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
9394
];
9495

9596
return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
97+
<DeviceType isVerified={device.isVerified} />
9698
<div className="mx_DeviceTile_info" onClick={onClick}>
9799
<DeviceTileName device={device} />
98100
<div className="mx_DeviceTile_metadata">

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import classNames from 'classnames';
19+
20+
import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
21+
import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
22+
import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
23+
import { _t } from '../../../../languageHandler';
24+
import { DeviceWithVerification } from './types';
25+
26+
interface Props {
27+
isVerified?: DeviceWithVerification['isVerified'];
28+
isSelected?: boolean;
29+
}
30+
31+
export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
32+
<div className={classNames('mx_DeviceType', {
33+
mx_DeviceType_selected: isSelected,
34+
})}
35+
>
36+
{ /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
37+
<UnknownDeviceIcon
38+
className='mx_DeviceType_deviceIcon'
39+
role='img'
40+
aria-label={_t('Unknown device type')}
41+
/>
42+
{
43+
isVerified
44+
? <VerifiedIcon
45+
className={classNames('mx_DeviceType_verificationIcon', 'verified')}
46+
role='img'
47+
aria-label={_t('Verified')}
48+
/>
49+
: <UnverifiedIcon
50+
className={classNames('mx_DeviceType_verificationIcon', 'unverified')}
51+
role='img'
52+
aria-label={_t('Unverified')}
53+
/>
54+
}
55+
</div>);
56+

‎src/i18n/strings/en_EN.json

+1
Original file line numberDiff line numberDiff line change
@@ -1712,6 +1712,7 @@
17121712
"Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
17131713
"Verified": "Verified",
17141714
"Unverified": "Unverified",
1715+
"Unknown device type": "Unknown device type",
17151716
"Verified session": "Verified session",
17161717
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
17171718
"Unverified session": "Unverified session",

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

+42
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
111111
class="mx_DeviceTile"
112112
data-testid="device-tile-device_1"
113113
>
114+
<div
115+
class="mx_DeviceType"
116+
>
117+
<div
118+
aria-label="Unknown device type"
119+
class="mx_DeviceType_deviceIcon"
120+
role="img"
121+
/>
122+
<div
123+
aria-label="Unverified"
124+
class="mx_DeviceType_verificationIcon unverified"
125+
role="img"
126+
/>
127+
</div>
114128
<div
115129
class="mx_DeviceTile_info"
116130
>
@@ -215,6 +229,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
215229
class="mx_DeviceTile"
216230
data-testid="device-tile-device_2"
217231
>
232+
<div
233+
class="mx_DeviceType"
234+
>
235+
<div
236+
aria-label="Unknown device type"
237+
class="mx_DeviceType_deviceIcon"
238+
role="img"
239+
/>
240+
<div
241+
aria-label="Unverified"
242+
class="mx_DeviceType_verificationIcon unverified"
243+
role="img"
244+
/>
245+
</div>
218246
<div
219247
class="mx_DeviceTile_info"
220248
>
@@ -278,6 +306,20 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
278306
class="mx_DeviceTile"
279307
data-testid="device-tile-device_3"
280308
>
309+
<div
310+
class="mx_DeviceType"
311+
>
312+
<div
313+
aria-label="Unknown device type"
314+
class="mx_DeviceType_deviceIcon"
315+
role="img"
316+
/>
317+
<div
318+
aria-label="Unverified"
319+
class="mx_DeviceType_verificationIcon unverified"
320+
role="img"
321+
/>
322+
</div>
281323
<div
282324
class="mx_DeviceTile_info"
283325
>

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { render } from '@testing-library/react';
18+
import React from 'react';
19+
20+
import { DeviceType } from '../../../../../src/components/views/settings/devices/DeviceType';
21+
22+
describe('<DeviceType />', () => {
23+
const defaultProps = {
24+
isVerified: false,
25+
isSelected: false,
26+
};
27+
const getComponent = (props = {}) =>
28+
<DeviceType {...defaultProps} {...props} />;
29+
30+
it('renders an unverified device', () => {
31+
const { container } = render(getComponent());
32+
expect(container).toMatchSnapshot();
33+
});
34+
35+
it('renders a verified device', () => {
36+
const { container } = render(getComponent({ isVerified: true }));
37+
expect(container).toMatchSnapshot();
38+
});
39+
40+
it('renders correctly when selected', () => {
41+
const { container } = render(getComponent({ isSelected: true }));
42+
expect(container).toMatchSnapshot();
43+
});
44+
});

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

+28
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,20 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
141141
class="mx_DeviceTile"
142142
data-testid="device-tile-alices_device"
143143
>
144+
<div
145+
class="mx_DeviceType"
146+
>
147+
<div
148+
aria-label="Unknown device type"
149+
class="mx_DeviceType_deviceIcon"
150+
role="img"
151+
/>
152+
<div
153+
aria-label="Unverified"
154+
class="mx_DeviceType_verificationIcon unverified"
155+
role="img"
156+
/>
157+
</div>
144158
<div
145159
class="mx_DeviceTile_info"
146160
>
@@ -227,6 +241,20 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
227241
class="mx_DeviceTile"
228242
data-testid="device-tile-alices_device"
229243
>
244+
<div
245+
class="mx_DeviceType"
246+
>
247+
<div
248+
aria-label="Unknown device type"
249+
class="mx_DeviceType_deviceIcon"
250+
role="img"
251+
/>
252+
<div
253+
aria-label="Unverified"
254+
class="mx_DeviceType_verificationIcon unverified"
255+
role="img"
256+
/>
257+
</div>
230258
<div
231259
class="mx_DeviceTile_info"
232260
>

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,12 @@ exports[`<DeviceSecurityCard /> renders with children 1`] = `
5757
>
5858
nice
5959
</p>
60-
<div>
61-
hey
60+
<div
61+
class="mx_DeviceSecurityCard_actions"
62+
>
63+
<div>
64+
hey
65+
</div>
6266
</div>
6367
</div>
6468
</div>

0 commit comments

Comments
 (0)