imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - current session expandable details (PSG-644) (#9185)

Browse source 
* split current device section into component

* add dropdown button for currentsession device details

* test currentdevicesection

* remove unnecc beforeEach

* update type imports

* i18n and lint
This commit is contained in:
Kerry 2022-08-15 17:30:18 +02:00 • committed by GitHub
parent 0c5ad457f0
commit 0dffc582e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 642 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

3
res/css/_components.pcss
View file

@ -28,6 +28,7 @@
@import "./components/views/messages/_MBeaconBody.pcss";
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
@import "./components/views/settings/devices/_DeviceTile.pcss";
@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
@ -333,12 +334,12 @@
@import "./views/toasts/_IncomingCallToast.pcss";
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
@import "./views/typography/_Heading.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@import "./views/user-onboarding/_UserOnboardingFeedback.pcss";
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
@import "./views/user-onboarding/_UserOnboardingList.pcss";
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@import "./views/verification/_VerificationShowSas.pcss";
@import "./views/voip/CallView/_CallViewButtons.pcss";
@import "./views/voip/_CallPreview.pcss";

6
res/css/components/views/settings/devices/_DeviceDetails.pcss
View file

@ -17,18 +17,20 @@ limitations under the License.
.mx_DeviceDetails {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
margin-top: $spacing-16;
padding: $spacing-16;
border-radius: 8px;
border: 1px solid $system;
border: 1px solid $quinary-content;
}
.mx_DeviceDetails_section {
padding-bottom: $spacing-16;
margin-bottom: $spacing-16;
border-bottom: 1px solid $system;
border-bottom: 1px solid $quinary-content;
&:last-child {
padding-bottom: 0;

41
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss Normal file
View file

@ -0,0 +1,41 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DeviceExpandDetailsButton {
height: 32px;
width: 32px;
background: transparent;
border-radius: 4px;
color: $secondary-content;
--icon-transform: rotate(-90deg);
}
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
--icon-transform: rotate(0deg);
background: $system;
}
.mx_DeviceExpandDetailsButton_icon {
height: 12px;
width: 12px;
transition: all 0.3s;
transform: var(--icon-transform);
transform-origin: center;
}

6
res/css/views/elements/_AccessibleButton.pcss
View file

@ -76,6 +76,12 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/x.svg');
}
}
&.mx_AccessibleButton_kind_icon {
padding: 0;
height: 32px;
width: 32px;
}
}
&.mx_AccessibleButton_kind_primary,

2
res/img/feather-customised/dropdown-arrow.svg
View file

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
<g fill="none" fill-rule="evenodd" stroke="#4e5054" stroke-linecap="round" stroke-width="1.3" transform="translate(1 1)">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.3" transform="translate(1 1)">
<path d="m.5.5 3.85868526 3.25422271"/>
<path d="m8.13193273.56042139-3.77324747 3.19380132"/>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 B

After

Width:  |  Height:  |  Size: 340 B

Before After
Before After

3
src/components/views/elements/AccessibleButton.tsx
View file

@ -33,7 +33,8 @@ type AccessibleButtonKind = | 'primary'
| 'link_inline'
| 'link_sm'
| 'confirm_sm'
| 'cancel_sm';
| 'cancel_sm'
| 'icon';
/**
* This type construct allows us to specifically pass those props down to the element we’re creating that the element

74
src/components/views/settings/devices/CurrentDeviceSection.tsx Normal file
View file

@ -0,0 +1,74 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState } from 'react';
import { _t } from '../../../../languageHandler';
import Spinner from '../../elements/Spinner';
import SettingsSubsection from '../shared/SettingsSubsection';
import DeviceDetails from './DeviceDetails';
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
import DeviceSecurityCard from './DeviceSecurityCard';
import DeviceTile from './DeviceTile';
import {
DeviceSecurityVariation,
DeviceWithVerification,
} from './types';
interface Props {
device?: DeviceWithVerification;
isLoading: boolean;
}
const CurrentDeviceSection: React.FC<Props> = ({
device, isLoading,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const securityCardProps = device?.isVerified ? {
variation: DeviceSecurityVariation.Verified,
heading: _t('Verified session'),
description: _t('This session is ready for secure messaging.'),
} : {
variation: DeviceSecurityVariation.Unverified,
heading: _t('Unverified session'),
description: _t('Verify or sign out from this session for best security and reliability.'),
};
return <SettingsSubsection
heading={_t('Current session')}
data-testid='current-session-section'
>
{ isLoading && <Spinner /> }
{ !!device && <>
<DeviceTile
device={device}
>
<DeviceExpandDetailsButton
data-testid='current-session-toggle-details'
isExpanded={isExpanded}
onClick={() => setIsExpanded(!isExpanded)}
/>
</DeviceTile>
{ isExpanded && <DeviceDetails device={device} /> }
<br />
<DeviceSecurityCard
{...securityCardProps}
/>
</>
}
</SettingsSubsection>;
};
export default CurrentDeviceSection;

41
src/components/views/settings/devices/DeviceExpandDetailsButton.tsx Normal file
View file

@ -0,0 +1,41 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from 'classnames';
import React from 'react';
import { Icon as CaretIcon } from '../../../../../res/img/feather-customised/dropdown-arrow.svg';
import AccessibleButton from '../../elements/AccessibleButton';
interface Props {
isExpanded: boolean;
onClick: () => void;
}
const DeviceExpandDetailsButton: React.FC<Props> = ({ isExpanded, onClick, ...rest }) => {
return <AccessibleButton
{...rest}
kind='icon'
className={classNames('mx_DeviceExpandDetailsButton', {
mx_DeviceExpandDetailsButton_expanded: isExpanded,
})}
onClick={onClick}
>
<CaretIcon className='mx_DeviceExpandDetailsButton_icon' />
</AccessibleButton>;
};
export default DeviceExpandDetailsButton;

35
src/components/views/settings/tabs/user/SessionManagerTab.tsx
View file

@ -17,13 +17,10 @@ limitations under the License.
import React from 'react';
import { _t } from "../../../../../languageHandler";
import Spinner from '../../../elements/Spinner';
import { useOwnDevices } from '../../devices/useOwnDevices';
import DeviceTile from '../../devices/DeviceTile';
import DeviceSecurityCard from '../../devices/DeviceSecurityCard';
import SettingsSubsection from '../../shared/SettingsSubsection';
import FilteredDeviceList from '../../devices/FilteredDeviceList';
import { DeviceSecurityVariation } from '../../devices/types';
import CurrentDeviceSection from '../../devices/CurrentDeviceSection';
import SecurityRecommendations from '../../devices/SecurityRecommendations';
import SettingsTab from '../SettingsTab';
@ -33,34 +30,12 @@ const SessionManagerTab: React.FC = () => {
const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
const securityCardProps = currentDevice?.isVerified ? {
variation: DeviceSecurityVariation.Verified,
heading: _t('Verified session'),
description: _t('This session is ready for secure messaging.'),
} : {
variation: DeviceSecurityVariation.Unverified,
heading: _t('Unverified session'),
description: _t('Verify or sign out from this session for best security and reliability.'),
};
return <SettingsTab heading={_t('Sessions')}>
<SecurityRecommendations devices={devices} />
<SettingsSubsection
heading={_t('Current session')}
data-testid='current-session-section'
>
{ isLoading && <Spinner /> }
{ !!currentDevice && <>
<DeviceTile
device={currentDevice}
/>
<br />
<DeviceSecurityCard
{...securityCardProps}
/>
</>
}
</SettingsSubsection>
<CurrentDeviceSection
device={currentDevice}
isLoading={isLoading}
/>
{
shouldShowOtherSessions &&
<SettingsSubsection

10
src/i18n/strings/en_EN.json
View file

@ -1555,12 +1555,7 @@
"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.",
"Where you're signed in": "Where you're signed in",
"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.",
"Verified session": "Verified session",
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
"Unverified session": "Unverified session",
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
"Sessions": "Sessions",
"Current session": "Current session",
"Other sessions": "Other sessions",
"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.",
"Sidebar": "Sidebar",
@ -1691,6 +1686,11 @@
"Please enter verification code sent via text.": "Please enter verification code sent via text.",
"Verification code": "Verification code",
"Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
"Verified session": "Verified session",
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
"Unverified session": "Unverified session",
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
"Current session": "Current session",
"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.",
"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.",
"Confirm signing out these devices|other": "Confirm signing out these devices",

78
test/components/views/settings/devices/CurrentDeviceSection-test.tsx Normal file
View file

@ -0,0 +1,78 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import CurrentDeviceSection from '../../../../../src/components/views/settings/devices/CurrentDeviceSection';
describe('<CurrentDeviceSection />', () => {
const deviceId = 'alices_device';
const alicesVerifiedDevice = {
device_id: deviceId,
isVerified: false,
};
const alicesUnverifiedDevice = {
device_id: deviceId,
isVerified: false,
};
const defaultProps = {
device: alicesVerifiedDevice,
isLoading: false,
};
const getComponent = (props = {}): React.ReactElement =>
(<CurrentDeviceSection {...defaultProps} {...props} />);
it('renders spinner while device is loading', () => {
const { container } = render(getComponent({ device: undefined, isLoading: true }));
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
});
it('handles when device is falsy', async () => {
const { container } = render(getComponent({ device: undefined }));
expect(container).toMatchSnapshot();
});
it('renders device and correct security card when device is verified', () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders device and correct security card when device is unverified', () => {
const { container } = render(getComponent({ device: alicesUnverifiedDevice }));
expect(container).toMatchSnapshot();
});
it('displays device details on toggle click', () => {
const { container, getByTestId } = render(getComponent({ device: alicesUnverifiedDevice }));
act(() => {
fireEvent.click(getByTestId('current-session-toggle-details'));
});
expect(container.getElementsByClassName('mx_DeviceDetails')).toMatchSnapshot();
act(() => {
fireEvent.click(getByTestId('current-session-toggle-details'));
});
// device details are hidden
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
});
});

47
test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx Normal file
View file

@ -0,0 +1,47 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
describe('<DeviceExpandDetailsButton />', () => {
const defaultProps = {
isExpanded: false,
onClick: jest.fn(),
};
const getComponent = (props = {}) =>
<DeviceExpandDetailsButton {...defaultProps} {...props} />;
it('renders when not expanded', () => {
const { container } = render(getComponent());
expect({ container }).toMatchSnapshot();
});
it('renders when expanded', () => {
const { container } = render(getComponent({ isExpanded: true }));
expect({ container }).toMatchSnapshot();
});
it('calls onClick', () => {
const onClick = jest.fn();
const { getByTestId } = render(getComponent({ 'data-testid': 'test', onClick }));
fireEvent.click(getByTestId('test'));
expect(onClick).toHaveBeenCalled();
});
});

267
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap Normal file
View file

@ -0,0 +1,267 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] = `
HTMLCollection [
<div
class="mx_DeviceDetails"
>
<section
class="mx_DeviceDetails_section"
>
<h3
class="mx_Heading_h3"
>
alices_device
</h3>
</section>
<section
class="mx_DeviceDetails_section"
>
<p
class="mx_DeviceDetails_sectionHeading"
>
Session details
</p>
<table
class="mxDeviceDetails_metadataTable"
>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Session ID
</td>
<td
class="mxDeviceDetails_metadataValue"
>
alices_device
</td>
</tr>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Last activity
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
<table
class="mxDeviceDetails_metadataTable"
>
<thead>
<tr>
<th>
Device
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
IP address
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
</section>
</div>,
]
`;
exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
<div>
<div
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<div
class="mx_SettingsSubsection_content"
/>
</div>
</div>
`;
exports[`<CurrentDeviceSection /> renders device and correct security card when device is unverified 1`] = `
<div>
<div
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
data-testid="device-tile-alices_device"
>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
alices_device
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>
</div>
<br />
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Unverified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Unverified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
</p>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<CurrentDeviceSection /> renders device and correct security card when device is verified 1`] = `
<div>
<div
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
data-testid="device-tile-alices_device"
>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
alices_device
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>
</div>
<br />
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Unverified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Unverified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
</p>
</div>
</div>
</div>
</div>
</div>
`;

33
test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap Normal file
View file

@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
Object {
"container": <div>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>,
}
`;
exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
Object {
"container": <div>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>,
}
`;

39
test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View file

@ -39,7 +39,18 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
</div>
<div
class="mx_DeviceTile_actions"
/>
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>
</div>
<br />
<div
@ -111,7 +122,18 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
</div>
<div
class="mx_DeviceTile_actions"
/>
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>
</div>
<br />
<div
@ -171,6 +193,17 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
</div>
<div
class="mx_DeviceTile_actions"
/>
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>
</div>
`;