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

Commit 0dffc58

Browse files
author
Kerry
authored
Device manager - current session expandable details (PSG-644) (#9185)
* split current device section into component * add dropdown button for currentsession device details * test currentdevicesection * remove unnecc beforeEach * update type imports * i18n and lint
1 parent 0c5ad45 commit 0dffc58

File tree

15 files changed

+642
-43
lines changed

15 files changed

+642
-43
lines changed

‎res/css/_components.pcss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
@import "./components/views/messages/_MBeaconBody.pcss";
2929
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
3030
@import "./components/views/settings/devices/_DeviceDetails.pcss";
31+
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
3132
@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
3233
@import "./components/views/settings/devices/_DeviceTile.pcss";
3334
@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
@@ -333,12 +334,12 @@
333334
@import "./views/toasts/_IncomingCallToast.pcss";
334335
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
335336
@import "./views/typography/_Heading.pcss";
337+
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
336338
@import "./views/user-onboarding/_UserOnboardingFeedback.pcss";
337339
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
338340
@import "./views/user-onboarding/_UserOnboardingList.pcss";
339341
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
340342
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
341-
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
342343
@import "./views/verification/_VerificationShowSas.pcss";
343344
@import "./views/voip/CallView/_CallViewButtons.pcss";
344345
@import "./views/voip/_CallPreview.pcss";

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,20 @@ limitations under the License.
1717
.mx_DeviceDetails {
1818
display: flex;
1919
flex-direction: column;
20+
box-sizing: border-box;
2021

2122
width: 100%;
2223

24+
margin-top: $spacing-16;
2325
padding: $spacing-16;
2426
border-radius: 8px;
25-
border: 1px solid $system;
27+
border: 1px solid $quinary-content;
2628
}
2729

2830
.mx_DeviceDetails_section {
2931
padding-bottom: $spacing-16;
3032
margin-bottom: $spacing-16;
31-
border-bottom: 1px solid $system;
33+
border-bottom: 1px solid $quinary-content;
3234

3335
&:last-child {
3436
padding-bottom: 0;

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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_DeviceExpandDetailsButton {
18+
height: 32px;
19+
width: 32px;
20+
background: transparent;
21+
22+
border-radius: 4px;
23+
color: $secondary-content;
24+
25+
--icon-transform: rotate(-90deg);
26+
}
27+
28+
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
29+
--icon-transform: rotate(0deg);
30+
31+
background: $system;
32+
}
33+
34+
.mx_DeviceExpandDetailsButton_icon {
35+
height: 12px;
36+
width: 12px;
37+
38+
transition: all 0.3s;
39+
transform: var(--icon-transform);
40+
transform-origin: center;
41+
}

‎res/css/views/elements/_AccessibleButton.pcss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@ limitations under the License.
7676
mask-image: url('$(res)/img/feather-customised/x.svg');
7777
}
7878
}
79+
80+
&.mx_AccessibleButton_kind_icon {
81+
padding: 0;
82+
height: 32px;
83+
width: 32px;
84+
}
7985
}
8086

8187
&.mx_AccessibleButton_kind_primary,

‎res/img/feather-customised/dropdown-arrow.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/components/views/elements/AccessibleButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ type AccessibleButtonKind = | 'primary'
3333
| 'link_inline'
3434
| 'link_sm'
3535
| 'confirm_sm'
36-
| 'cancel_sm';
36+
| 'cancel_sm'
37+
| 'icon';
3738

3839
/**
3940
* This type construct allows us to specifically pass those props down to the element we’re creating that the element

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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, { useState } from 'react';
18+
19+
import { _t } from '../../../../languageHandler';
20+
import Spinner from '../../elements/Spinner';
21+
import SettingsSubsection from '../shared/SettingsSubsection';
22+
import DeviceDetails from './DeviceDetails';
23+
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
24+
import DeviceSecurityCard from './DeviceSecurityCard';
25+
import DeviceTile from './DeviceTile';
26+
import {
27+
DeviceSecurityVariation,
28+
DeviceWithVerification,
29+
} from './types';
30+
31+
interface Props {
32+
device?: DeviceWithVerification;
33+
isLoading: boolean;
34+
}
35+
36+
const CurrentDeviceSection: React.FC<Props> = ({
37+
device, isLoading,
38+
}) => {
39+
const [isExpanded, setIsExpanded] = useState(false);
40+
const securityCardProps = device?.isVerified ? {
41+
variation: DeviceSecurityVariation.Verified,
42+
heading: _t('Verified session'),
43+
description: _t('This session is ready for secure messaging.'),
44+
} : {
45+
variation: DeviceSecurityVariation.Unverified,
46+
heading: _t('Unverified session'),
47+
description: _t('Verify or sign out from this session for best security and reliability.'),
48+
};
49+
return <SettingsSubsection
50+
heading={_t('Current session')}
51+
data-testid='current-session-section'
52+
>
53+
{ isLoading && <Spinner /> }
54+
{ !!device && <>
55+
<DeviceTile
56+
device={device}
57+
>
58+
<DeviceExpandDetailsButton
59+
data-testid='current-session-toggle-details'
60+
isExpanded={isExpanded}
61+
onClick={() => setIsExpanded(!isExpanded)}
62+
/>
63+
</DeviceTile>
64+
{ isExpanded && <DeviceDetails device={device} /> }
65+
<br />
66+
<DeviceSecurityCard
67+
{...securityCardProps}
68+
/>
69+
</>
70+
}
71+
</SettingsSubsection>;
72+
};
73+
74+
export default CurrentDeviceSection;

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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 classNames from 'classnames';
18+
import React from 'react';
19+
20+
import { Icon as CaretIcon } from '../../../../../res/img/feather-customised/dropdown-arrow.svg';
21+
import AccessibleButton from '../../elements/AccessibleButton';
22+
23+
interface Props {
24+
isExpanded: boolean;
25+
onClick: () => void;
26+
}
27+
28+
const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
29+
return <AccessibleButton
30+
{...rest}
31+
kind='icon'
32+
className={classNames('mx_DeviceExpandDetailsButton', {
33+
mx_DeviceExpandDetailsButton_expanded: isExpanded,
34+
})}
35+
onClick={onClick}
36+
>
37+
<CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
38+
</AccessibleButton>;
39+
};
40+
41+
export default DeviceExpandDetailsButton;

‎src/components/views/settings/tabs/user/SessionManagerTab.tsx‎

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,10 @@ limitations under the License.
1717
import React from 'react';
1818

1919
import { _t } from "../../../../../languageHandler";
20-
import Spinner from '../../../elements/Spinner';
2120
import { useOwnDevices } from '../../devices/useOwnDevices';
22-
import DeviceTile from '../../devices/DeviceTile';
23-
import DeviceSecurityCard from '../../devices/DeviceSecurityCard';
2421
import SettingsSubsection from '../../shared/SettingsSubsection';
2522
import FilteredDeviceList from '../../devices/FilteredDeviceList';
26-
import { DeviceSecurityVariation } from '../../devices/types';
23+
import CurrentDeviceSection from '../../devices/CurrentDeviceSection';
2724
import SecurityRecommendations from '../../devices/SecurityRecommendations';
2825
import SettingsTab from '../SettingsTab';
2926

@@ -33,34 +30,12 @@ const SessionManagerTab: React.FC = () => {
3330
const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
3431
const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
3532

36-
const securityCardProps = currentDevice?.isVerified ? {
37-
variation: DeviceSecurityVariation.Verified,
38-
heading: _t('Verified session'),
39-
description: _t('This session is ready for secure messaging.'),
40-
} : {
41-
variation: DeviceSecurityVariation.Unverified,
42-
heading: _t('Unverified session'),
43-
description: _t('Verify or sign out from this session for best security and reliability.'),
44-
};
45-
4633
return <SettingsTab heading={_t('Sessions')}>
4734
<SecurityRecommendations devices={devices} />
48-
<SettingsSubsection
49-
heading={_t('Current session')}
50-
data-testid='current-session-section'
51-
>
52-
{ isLoading && <Spinner /> }
53-
{ !!currentDevice && <>
54-
<DeviceTile
55-
device={currentDevice}
56-
/>
57-
<br />
58-
<DeviceSecurityCard
59-
{...securityCardProps}
60-
/>
61-
</>
62-
}
63-
</SettingsSubsection>
35+
<CurrentDeviceSection
36+
device={currentDevice}
37+
isLoading={isLoading}
38+
/>
6439
{
6540
shouldShowOtherSessions &&
6641
<SettingsSubsection

‎src/i18n/strings/en_EN.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1555,12 +1555,7 @@
15551555
"Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Share anonymous data to help us identify issues. Nothing personal. No third parties.",
15561556
"Where you're signed in": "Where you're signed in",
15571557
"Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
1558-
"Verified session": "Verified session",
1559-
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
1560-
"Unverified session": "Unverified session",
1561-
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
15621558
"Sessions": "Sessions",
1563-
"Current session": "Current session",
15641559
"Other sessions": "Other sessions",
15651560
"For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.",
15661561
"Sidebar": "Sidebar",
@@ -1691,6 +1686,11 @@
16911686
"Please enter verification code sent via text.": "Please enter verification code sent via text.",
16921687
"Verification code": "Verification code",
16931688
"Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
1689+
"Verified session": "Verified session",
1690+
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
1691+
"Unverified session": "Unverified session",
1692+
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
1693+
"Current session": "Current session",
16941694
"Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Confirm logging out these devices by using Single Sign On to prove your identity.",
16951695
"Confirm logging out these devices by using Single Sign On to prove your identity.|one": "Confirm logging out this device by using Single Sign On to prove your identity.",
16961696
"Confirm signing out these devices|other": "Confirm signing out these devices",

0 commit comments

Comments
 (0)