From eb2e61e9cfa8d54760dddc82b7e8f98a58d5df8a Mon Sep 17 00:00:00 2001 From: Kerry Date: Tue, 9 Aug 2022 10:14:30 +0200 Subject: [PATCH] Device manager: generic settings subsection component (PSG-636) (#9147) * add feature_new_device_manager labs flag * add generic settings tab container * settingstab section styles * add session manager tab to user settings * add sessions tab case to UserSettingDialog test * fussy import ordering * remove posthog tracking * i18n * add generic settings subsection component --- res/css/_components.pcss | 1 + .../settings/shared/_SettingsSubsection.pcss | 36 +++++++++ res/css/views/settings/tabs/_SettingsTab.pcss | 2 +- .../settings/shared/SettingsSubsection.tsx | 37 +++++++++ .../settings/tabs/user/SessionManagerTab.tsx | 9 ++- src/i18n/strings/en_EN.json | 1 + .../shared/SettingsSubsection-test.tsx | 45 +++++++++++ .../SettingsSubsection-test.tsx.snap | 81 +++++++++++++++++++ 8 files changed, 210 insertions(+), 2 deletions(-) create mode 100644 res/css/components/views/settings/shared/_SettingsSubsection.pcss create mode 100644 src/components/views/settings/shared/SettingsSubsection.tsx create mode 100644 test/components/views/settings/shared/SettingsSubsection-test.tsx create mode 100644 test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap diff --git a/res/css/_components.pcss b/res/css/_components.pcss index fe23a1c388..d4d7ecc316 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -28,6 +28,7 @@ @import "./components/views/messages/_MBeaconBody.pcss"; @import "./components/views/messages/shared/_MediaProcessingError.pcss"; @import "./components/views/settings/devices/_DeviceTile.pcss"; +@import "./components/views/settings/shared/_SettingsSubsection.pcss"; @import "./components/views/spaces/_QuickThemeSwitcher.pcss"; @import "./structures/_AutoHideScrollbar.pcss"; @import "./structures/_BackdropPanel.pcss"; diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss new file mode 100644 index 0000000000..9eb51696ba --- /dev/null +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -0,0 +1,36 @@ +/* +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_SettingsSubsection { + width: 100%; + box-sizing: border-box; +} + +.mx_SettingsSubsection_heading { + padding-bottom: $spacing-8; +} + +.mx_SettingsSubsection_description { + width: 100%; + box-sizing: inherit; + line-height: $font-24px; + margin-bottom: $spacing-32; + color: $secondary-content; +} + +.mx_SettingsSubsection_content { + width: 100%; +} diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 8b4d17d8e9..544b5c623b 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -103,5 +103,5 @@ limitations under the License. grid-template-columns: 1fr; grid-gap: $spacing-32; - padding: 0 $spacing-16; + padding: $spacing-16 0; } diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx new file mode 100644 index 0000000000..5dcdc9dad6 --- /dev/null +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -0,0 +1,37 @@ +/* +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 Heading from "../../typography/Heading"; + +export interface SettingsSubsectionProps { + heading: string; + description?: string | React.ReactNode; + children?: React.ReactNode; +} + +const SettingsSubsection: React.FC = ({ heading, description, children }) => ( +
+ { heading } + { !!description &&
{ description }
} +
+ { children } +
+
+); + +export default SettingsSubsection; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index afa663392b..17c09aeb7a 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -17,10 +17,17 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; +import SettingsSubsection from '../../shared/SettingsSubsection'; import SettingsTab from '../SettingsTab'; const SessionManagerTab: React.FC = () => { - return ; + return + + ; }; export default SessionManagerTab; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9716fc9813..e601003ecb 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1563,6 +1563,7 @@ "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.", "Sessions": "Sessions", + "Current session": "Current session", "Sidebar": "Sidebar", "Spaces to show": "Spaces to show", "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.", diff --git a/test/components/views/settings/shared/SettingsSubsection-test.tsx b/test/components/views/settings/shared/SettingsSubsection-test.tsx new file mode 100644 index 0000000000..acc2e6db95 --- /dev/null +++ b/test/components/views/settings/shared/SettingsSubsection-test.tsx @@ -0,0 +1,45 @@ +/* +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 { render } from '@testing-library/react'; + +import SettingsSubsection from '../../../../../src/components/views/settings/shared/SettingsSubsection'; + +describe('', () => { + const defaultProps = { + heading: 'Test', + children:
test settings content
, + }; + const getComponent = (props = {}): React.ReactElement => + (); + + it('renders without description', () => { + const { container } = render(getComponent()); + expect(container).toMatchSnapshot(); + }); + + it('renders with plain text description', () => { + const { container } = render(getComponent({ description: 'This describes the subsection' })); + expect(container).toMatchSnapshot(); + }); + + it('renders with react element description', () => { + const description =

This describes the section link

; + const { container } = render(getComponent({ description })); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap b/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap new file mode 100644 index 0000000000..10309d2f67 --- /dev/null +++ b/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders with plain text description 1`] = ` +
+
+

+ Test +

+
+ This describes the subsection +
+
+
+ test settings content +
+
+
+
+`; + +exports[` renders with react element description 1`] = ` +
+
+

+ Test +

+
+

+ This describes the section + + link + +

+
+
+
+ test settings content +
+
+
+
+`; + +exports[` renders without description 1`] = ` +
+
+

+ Test +

+
+
+ test settings content +
+
+
+
+`;