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

Commit eb2e61e

Browse files
author
Kerry
authored
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
1 parent 32478db commit eb2e61e

File tree

8 files changed

+210
-2
lines changed

8 files changed

+210
-2
lines changed

‎res/css/_components.pcss‎

Lines changed: 1 addition & 0 deletions
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/_DeviceTile.pcss";
31+
@import "./components/views/settings/shared/_SettingsSubsection.pcss";
3132
@import "./components/views/spaces/_QuickThemeSwitcher.pcss";
3233
@import "./structures/_AutoHideScrollbar.pcss";
3334
@import "./structures/_BackdropPanel.pcss";

‎res/css/components/views/settings/shared/_SettingsSubsection.pcss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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_SettingsSubsection {
18+
width: 100%;
19+
box-sizing: border-box;
20+
}
21+
22+
.mx_SettingsSubsection_heading {
23+
padding-bottom: $spacing-8;
24+
}
25+
26+
.mx_SettingsSubsection_description {
27+
width: 100%;
28+
box-sizing: inherit;
29+
line-height: $font-24px;
30+
margin-bottom: $spacing-32;
31+
color: $secondary-content;
32+
}
33+
34+
.mx_SettingsSubsection_content {
35+
width: 100%;
36+
}

‎res/css/views/settings/tabs/_SettingsTab.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,5 @@ limitations under the License.
103103
grid-template-columns: 1fr;
104104
grid-gap: $spacing-32;
105105

106-
padding: 0 $spacing-16;
106+
padding: $spacing-16 0;
107107
}

‎src/components/views/settings/shared/SettingsSubsection.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
19+
import Heading from "../../typography/Heading";
20+
21+
export interface SettingsSubsectionProps {
22+
heading: string;
23+
description?: string | React.ReactNode;
24+
children?: React.ReactNode;
25+
}
26+
27+
const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children }) => (
28+
<div className="mx_SettingsSubsection">
29+
<Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading>
30+
{ !!description && <div className="mx_SettingsSubsection_description">{ description }</div> }
31+
<div className="mx_SettingsSubsection_content">
32+
{ children }
33+
</div>
34+
</div>
35+
);
36+
37+
export default SettingsSubsection;

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

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

1919
import { _t } from "../../../../../languageHandler";
20+
import SettingsSubsection from '../../shared/SettingsSubsection';
2021
import SettingsTab from '../SettingsTab';
2122

2223
const SessionManagerTab: React.FC = () => {
23-
return <SettingsTab heading={_t('Sessions')} />;
24+
return <SettingsTab heading={_t('Sessions')}>
25+
<SettingsSubsection
26+
heading={_t('Current session')}
27+
// TODO session content coming here
28+
// in next PR
29+
/>
30+
</SettingsTab>;
2431
};
2532

2633
export default SessionManagerTab;

‎src/i18n/strings/en_EN.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1563,6 +1563,7 @@
15631563
"Where you're signed in": "Where you're signed in",
15641564
"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.",
15651565
"Sessions": "Sessions",
1566+
"Current session": "Current session",
15661567
"Sidebar": "Sidebar",
15671568
"Spaces to show": "Spaces to show",
15681569
"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.",

‎test/components/views/settings/shared/SettingsSubsection-test.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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 { render } from '@testing-library/react';
19+
20+
import SettingsSubsection from '../../../../../src/components/views/settings/shared/SettingsSubsection';
21+
22+
describe('<SettingsSubsection />', () => {
23+
const defaultProps = {
24+
heading: 'Test',
25+
children: <div>test settings content</div>,
26+
};
27+
const getComponent = (props = {}): React.ReactElement =>
28+
(<SettingsSubsection {...defaultProps} {...props} />);
29+
30+
it('renders without description', () => {
31+
const { container } = render(getComponent());
32+
expect(container).toMatchSnapshot();
33+
});
34+
35+
it('renders with plain text description', () => {
36+
const { container } = render(getComponent({ description: 'This describes the subsection' }));
37+
expect(container).toMatchSnapshot();
38+
});
39+
40+
it('renders with react element description', () => {
41+
const description = <p>This describes the section <a href='/#'>link</a></p>;
42+
const { container } = render(getComponent({ description }));
43+
expect(container).toMatchSnapshot();
44+
});
45+
});

‎test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<SettingsSubsection /> renders with plain text description 1`] = `
4+
<div>
5+
<div
6+
class="mx_SettingsSubsection"
7+
>
8+
<h3
9+
class="mx_Heading_h3 mx_SettingsSubsection_heading"
10+
>
11+
Test
12+
</h3>
13+
<div
14+
class="mx_SettingsSubsection_description"
15+
>
16+
This describes the subsection
17+
</div>
18+
<div
19+
class="mx_SettingsSubsection_content"
20+
>
21+
<div>
22+
test settings content
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
`;
28+
29+
exports[`<SettingsSubsection /> renders with react element description 1`] = `
30+
<div>
31+
<div
32+
class="mx_SettingsSubsection"
33+
>
34+
<h3
35+
class="mx_Heading_h3 mx_SettingsSubsection_heading"
36+
>
37+
Test
38+
</h3>
39+
<div
40+
class="mx_SettingsSubsection_description"
41+
>
42+
<p>
43+
This describes the section
44+
<a
45+
href="/#"
46+
>
47+
link
48+
</a>
49+
</p>
50+
</div>
51+
<div
52+
class="mx_SettingsSubsection_content"
53+
>
54+
<div>
55+
test settings content
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
`;
61+
62+
exports[`<SettingsSubsection /> renders without description 1`] = `
63+
<div>
64+
<div
65+
class="mx_SettingsSubsection"
66+
>
67+
<h3
68+
class="mx_Heading_h3 mx_SettingsSubsection_heading"
69+
>
70+
Test
71+
</h3>
72+
<div
73+
class="mx_SettingsSubsection_content"
74+
>
75+
<div>
76+
test settings content
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
`;

0 commit comments

Comments
 (0)