From 077d68ef5571bdb0c341eda5e5b693caf7268723 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:24:54 +0200 Subject: [PATCH 1/6] add learn more to filtered sessions --- res/css/_components.pcss | 7 +- .../components/views/elements/_LearnMore.pcss | 19 ++++ .../views/elements/AccessibleButton.tsx | 2 +- src/components/views/elements/LearnMore.tsx | 56 +++++++++++ .../settings/devices/FilteredDeviceList.tsx | 94 ++++++++++++++++--- src/i18n/strings/en_EN.json | 6 ++ .../views/elements/LearnMore-test.tsx | 57 +++++++++++ .../__snapshots__/LearnMore-test.tsx.snap | 14 +++ .../FilteredDeviceList-test.tsx.snap | 37 +++++++- 9 files changed, 271 insertions(+), 21 deletions(-) create mode 100644 res/css/components/views/elements/_LearnMore.pcss create mode 100644 src/components/views/elements/LearnMore.tsx create mode 100644 test/components/views/elements/LearnMore-test.tsx create mode 100644 test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 4417382b20b..9179085caba 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -4,7 +4,6 @@ @import "./_font-sizes.pcss"; @import "./_font-weights.pcss"; @import "./_spacing.pcss"; -@import "./compound/_Icon.pcss"; @import "./components/views/beacon/_BeaconListItem.pcss"; @import "./components/views/beacon/_BeaconStatus.pcss"; @import "./components/views/beacon/_BeaconStatusTooltip.pcss"; @@ -19,6 +18,7 @@ @import "./components/views/beacon/_StyledLiveBeaconIcon.pcss"; @import "./components/views/context_menus/_KebabContextMenu.pcss"; @import "./components/views/elements/_FilterDropdown.pcss"; +@import "./components/views/elements/_LearnMore.pcss"; @import "./components/views/location/_EnableLiveShare.pcss"; @import "./components/views/location/_LiveDurationDropdown.pcss"; @import "./components/views/location/_LocationShareMenu.pcss"; @@ -44,6 +44,7 @@ @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss"; @import "./components/views/spaces/_QuickThemeSwitcher.pcss"; @import "./components/views/typography/_Caption.pcss"; +@import "./compound/_Icon.pcss"; @import "./structures/_AutoHideScrollbar.pcss"; @import "./structures/_BackdropPanel.pcss"; @import "./structures/_CompatibilityPage.pcss"; @@ -299,10 +300,10 @@ @import "./views/rooms/_TopUnreadMessagesBar.pcss"; @import "./views/rooms/_VoiceRecordComposerTile.pcss"; @import "./views/rooms/_WhoIsTypingTile.pcss"; +@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss"; +@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss"; @import "./views/rooms/wysiwyg_composer/components/_Editor.pcss"; @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss"; -@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss"; -@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss"; @import "./views/settings/_AvatarSetting.pcss"; @import "./views/settings/_CrossSigningPanel.pcss"; @import "./views/settings/_CryptographyPanel.pcss"; diff --git a/res/css/components/views/elements/_LearnMore.pcss b/res/css/components/views/elements/_LearnMore.pcss new file mode 100644 index 00000000000..97f3b4c527d --- /dev/null +++ b/res/css/components/views/elements/_LearnMore.pcss @@ -0,0 +1,19 @@ +/* +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_LearnMore_button { + margin-left: $spacing-4; +} diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 7036575cd1e..6f11fa12bd5 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -75,7 +75,7 @@ type IProps = DynamicHtmlElementProps onClick: ((e: ButtonEvent) => void | Promise) | null; }; -interface IAccessibleButtonProps extends React.InputHTMLAttributes { +export interface IAccessibleButtonProps extends React.InputHTMLAttributes { ref?: React.Ref; } diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx new file mode 100644 index 00000000000..1a96e3d8f47 --- /dev/null +++ b/src/components/views/elements/LearnMore.tsx @@ -0,0 +1,56 @@ +/* +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 { _t } from '../../../languageHandler'; +import Modal from '../../../Modal'; +import InfoDialog from '../dialogs/InfoDialog'; +import AccessibleButton, { IAccessibleButtonProps } from './AccessibleButton'; + +interface Props extends IAccessibleButtonProps { + title: string; + description: string | React.ReactNode; +} + +const LearnMore: React.FC = ({ + title, + description, + ...rest +}) => { + const onClick = () => { + Modal.createDialog( + InfoDialog, + { + title, + description, + button: _t('Got it'), + hasCloseButton: true, + }, + ); + }; + + return + { _t('Learn more') } + ; +}; + +export default LearnMore; diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 9bc216a086e..1bf418b73b5 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -38,6 +38,7 @@ import { import { DevicesState } from './useOwnDevices'; import FilteredDeviceListHeader from './FilteredDeviceListHeader'; import Spinner from '../../elements/Spinner'; +import LearnMore from '../../elements/LearnMore'; interface Props { devices: DevicesDictionary; @@ -73,20 +74,89 @@ const getFilteredSortedDevices = (devices: DevicesDictionary, filter?: DeviceSec const ALL_FILTER_ID = 'ALL'; type DeviceFilterKey = DeviceSecurityVariation | typeof ALL_FILTER_ID; +const securityCardContent: Record = { + [DeviceSecurityVariation.Verified]: { + title: _t('Verified sessions'), + description: _t('For best security, sign out from any session that you don\'t recognize or use anymore.'), + learnMoreDescription: <> +

{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') } +

+

+ { _t( + `This means they hold encryption keys for your previous messages, ` + + `and confirm to other users you are communicating with that these sessions are really you.`, + ) + } +

+ , + }, + [DeviceSecurityVariation.Unverified]: { + title: _t('Unverified sessions'), + description: _t( + `Verify your sessions for enhanced secure messaging or ` + + `sign out from those you don't recognize or use anymore.`, + ), + learnMoreDescription: <> + +

{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') } +

+

+ { _t( + `You should make especially certain that you recognise these sessions ` + + `as they could represent an unauthorised use of your account.`, + ) + } +

+ , + }, + [DeviceSecurityVariation.Inactive]: { + title: _t('Inactive sessions'), + description: _t( + `Consider signing out from old sessions ` + + `(%(inactiveAgeDays)s days or older) you don't use anymore`, + { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }, + ), + learnMoreDescription: <> +

{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') } +

+

+ { _t( + `Removing inactive sessions improves security and performance, ` + + `and makes it easier for you to identify if a new session is suspicious.`, + ) + } +

+ , + }, + }; + const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => { + if ([ + DeviceSecurityVariation.Unverified, + DeviceSecurityVariation.Verified, + DeviceSecurityVariation.Inactive, + ].includes(filter as DeviceSecurityVariation)) { + const { title, description, learnMoreDescription } = securityCardContent[filter]; + return
+ + { description } + + } + /> +
+ ; + } switch (filter) { - case DeviceSecurityVariation.Verified: - return
- -
- ; case DeviceSecurityVariation.Unverified: return
', () => { + const defaultProps = { + title: 'Test', + description: 'test test test', + ['data-testid']: 'testid', + }; + const getComponent = (props = {}) => + (); + + const modalSpy = jest.spyOn(Modal, 'createDialog').mockReturnValue(undefined); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('renders button', () => { + const { container } = render(getComponent()); + expect(container).toMatchSnapshot(); + }); + + it('opens modal on click', async () => { + const { getByTestId } = render(getComponent()); + fireEvent.click(getByTestId('testid')); + + expect(modalSpy).toHaveBeenCalledWith( + InfoDialog, + { + button: 'Got it', + description: defaultProps.description, + hasCloseButton: true, + title: defaultProps.title, + }); + }); +}); diff --git a/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap b/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap new file mode 100644 index 00000000000..41904877c83 --- /dev/null +++ b/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders button 1`] = ` +
+
+ Learn more +
+
+`; diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap index c0f5b9af98c..59173f84b3a 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap @@ -19,7 +19,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard" >
- Consider signing out from old sessions (90 days or older) you don't use anymore + + Consider signing out from old sessions (90 days or older) you don't use anymore +
+ Learn more +
+

@@ -54,7 +63,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard" >
- Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. + + Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. +
+ Learn more +
+

@@ -107,7 +125,16 @@ HTMLCollection [

- For best security, sign out from any session that you don't recognize or use anymore. + + For best security, sign out from any session that you don't recognize or use anymore. +

+ Learn more +
+

From 3f6fc8465cb954376f11d197a91b95ddf9acd6ff Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:27:46 +0200 Subject: [PATCH 2/6] fullstop --- src/components/views/settings/devices/FilteredDeviceList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 1bf418b73b5..ba2820db3a4 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -117,7 +117,7 @@ const securityCardContent: Record From 0e81abf89ebaba538fce9d22c775cafcbd0405e3 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:28:51 +0200 Subject: [PATCH 3/6] update tests and i18n for fullstop --- src/i18n/strings/en_EN.json | 3 ++- .../devices/__snapshots__/FilteredDeviceList-test.tsx.snap | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 787d0ac4493..b57c983d55f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1785,9 +1785,10 @@ "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.", "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.", "Inactive sessions": "Inactive sessions", - "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", + "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.", "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.", "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.", + "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "No verified sessions found.": "No verified sessions found.", "No unverified sessions found.": "No unverified sessions found.", "No inactive sessions found.": "No inactive sessions found.", diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap index 59173f84b3a..095517b1308 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap @@ -38,7 +38,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard_description" > - Consider signing out from old sessions (90 days or older) you don't use anymore + Consider signing out from old sessions (90 days or older) you don't use anymore.
Date: Tue, 25 Oct 2022 17:30:07 +0200 Subject: [PATCH 4/6] remove unused switch --- .../settings/devices/FilteredDeviceList.tsx | 31 ++----------------- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 3 insertions(+), 30 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index ba2820db3a4..59a15d8fbb5 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -156,35 +156,8 @@ const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter })
; } - switch (filter) { - case DeviceSecurityVariation.Unverified: - return
- -
- ; - case DeviceSecurityVariation.Inactive: - return
- -
- ; - default: - return null; - } + + return null; }; const getNoResultsMessage = (filter?: DeviceSecurityVariation): string => { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b57c983d55f..8af41255fce 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1788,7 +1788,6 @@ "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.", "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.", "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.", - "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "No verified sessions found.": "No verified sessions found.", "No unverified sessions found.": "No unverified sessions found.", "No inactive sessions found.": "No inactive sessions found.", @@ -1808,6 +1807,7 @@ "Security recommendations": "Security recommendations", "Improve your account security by following these recommendations": "Improve your account security by following these recommendations", "View all": "View all", + "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "Failed to set pusher state": "Failed to set pusher state", "Unable to remove contact information": "Unable to remove contact information", "Remove %(email)s?": "Remove %(email)s?", From f64e70718bce63460759cafc696ec7c45cac44e2 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:32:36 +0200 Subject: [PATCH 5/6] whitespace --- src/components/views/settings/devices/FilteredDeviceList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 59a15d8fbb5..4d513850237 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -101,7 +101,6 @@ const securityCardContent: Record -

{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }

From 656745d1bd23cc57b146492527690ff7ac0506b4 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 26 Oct 2022 10:18:06 +0200 Subject: [PATCH 6/6] use correct card type --- .../views/settings/devices/FilteredDeviceList.tsx | 11 +++++------ .../__snapshots__/FilteredDeviceList-test.tsx.snap | 4 ++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index 4d513850237..a2afcc22f64 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -133,16 +133,15 @@ const securityCardContent: Record + Object.values(DeviceSecurityVariation).includes(filter); + const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => { - if ([ - DeviceSecurityVariation.Unverified, - DeviceSecurityVariation.Verified, - DeviceSecurityVariation.Inactive, - ].includes(filter as DeviceSecurityVariation)) { + if (isSecurityVariation(filter)) { const { title, description, learnMoreDescription } = securityCardContent[filter]; return

{ description } diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap index 095517b1308..62a6cd94d1e 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap @@ -19,7 +19,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard" >