[FIX] Setup Wizard inputs and Admin Settings

client/components/admin/info/DescriptionList.stories.js

@@ -1,17 +1,18 @@
 import React from 'react';
 
 import { DescriptionList } from './DescriptionList';
+import { Page } from '../../basic/Page';
 
 export default {
 	title: 'admin/info/DescriptionList',
 	component: DescriptionList,
 	decorators: [
 		(fn) => <div className='rc-old'>{fn()}</div>,
-		(fn) => <section className='page-container page-list'>
-			<div className='content'>
+		(fn) => <Page>
+			<Page.Content>
 				{fn()}
-			</div>
-		</section>,
+			</Page.Content>
+		</Page>,
 	],
 };
 

client/components/admin/info/InformationPage.js

@@ -1,8 +1,8 @@
-import { Button, Callout, Icon, Margins } from '@rocket.chat/fuselage';
+import { Button, ButtonGroup, Callout, Icon, Margins } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { Link } from '../../basic/Link';
-import { Header } from '../../header/Header';
+import { Page } from '../../basic/Page';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { RocketChatSection } from './RocketChatSection';
 import { CommitSection } from './CommitSection';
@@ -27,19 +27,19 @@ export function InformationPage({
 
 	const alertOplogForMultipleInstances = statistics && statistics.instanceCount > 1 && !statistics.oplogEnabled;
 
-	return <section className='page-container' data-qa='admin-info'>
-		<Header rawSectionName={t('Info')} hideHelp>
+	return <Page data-qa='admin-info'>
+		<Page.Header title={t('Info')}>
 			{canViewStatistics
-				&& <Header.ActionBlock>
+				&& <ButtonGroup>
 					<Button disabled={isLoading} primary type='button' onClick={onClickRefreshButton}>
 						<Icon name='reload' /> {t('Refresh')}
 					</Button>
-				</Header.ActionBlock>}
-		</Header>
+				</ButtonGroup>}
+		</Page.Header>
 
-		<div className='content'>
+		<Page.Content>
 			{alertOplogForMultipleInstances
-				&& <Margins blockEnd='16'>
+				&& <Margins blockEnd='x16'>
 					<Callout type='danger' title={t('Error_RocketChat_requires_oplog_tailing_when_running_in_multiple_instances')}>
 						<p>
 							{t('Error_RocketChat_requires_oplog_tailing_when_running_in_multiple_instances_details')}
@@ -58,6 +58,6 @@ export function InformationPage({
 			<BuildEnvironmentSection info={info} />
 			{canViewStatistics && <UsageSection statistics={statistics} isLoading={isLoading} />}
 			<InstancesSection instances={instances} />
-		</div>
-	</section>;
+		</Page.Content>
+	</Page>;
 }

client/components/admin/settings/GroupPage.js

@@ -1,92 +1,87 @@
-import { Accordion, Button, Paragraph, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
-import styled from 'styled-components';
+import { Accordion, Box, Button, ButtonGroup, Paragraph, Skeleton } from '@rocket.chat/fuselage';
+import React, { useMemo } from 'react';
 
-import { Header } from '../../header/Header';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { Section } from './Section';
+import { Page } from '../../basic/Page';
 
-const Wrapper = styled.div`
-	margin: 0 auto;
-	width: 100%;
-	max-width: 590px;
-`;
-
-export function GroupPage({ children, group, headerButtons }) {
+export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) {
 	const t = useTranslation();
 
 	const handleSubmit = (event) => {
 		event.preventDefault();
-		group.save();
+		save();
 	};
 
 	const handleCancelClick = (event) => {
 		event.preventDefault();
-		group.cancel();
+		cancel();
 	};
 
 	const handleSaveClick = (event) => {
 		event.preventDefault();
-		group.save();
+		save();
 	};
 
-	if (!group) {
-		return <section className='page-container page-static page-settings'>
-			<Header />
-			<div className='content' />
-		</section>;
+	if (!_id) {
+		return <Page>
+			<Page.Header />
+			<Page.Content />
+		</Page>;
 	}
 
-	return <form action='#' className='page-container' method='post' onSubmit={handleSubmit}>
-		<Header rawSectionName={t(group.i18nLabel)}>
-			<Header.ButtonSection>
-				{group.changed && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>}
+	return <Page is='form' action='#' method='post' onSubmit={handleSubmit}>
+		<Page.Header title={t(i18nLabel)}>
+			<ButtonGroup>
+				{changed && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>}
 				<Button
 					children={t('Save_changes')}
 					className='save'
-					disabled={!group.changed}
+					disabled={!changed}
 					primary
 					type='submit'
 					onClick={handleSaveClick}
 				/>
 				{headerButtons}
-			</Header.ButtonSection>
-		</Header>
+			</ButtonGroup>
+		</Page.Header>
 
-		<div className='content'>
-			<Wrapper>
-				{t.has(group.i18nDescription) && <Paragraph hintColor>{t(group.i18nDescription)}</Paragraph>}
+		<Page.Content>
+			<Box style={useMemo(() => ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}>
+				{t.has(i18nDescription) && <Paragraph hintColor>{t(i18nDescription)}</Paragraph>}
 
 				<Accordion className='page-settings'>
 					{children}
 				</Accordion>
-			</Wrapper>
-		</div>
-	</form>;
+			</Box>
+		</Page.Content>
+	</Page>;
 }
 
-GroupPage.Skeleton = function GroupPageSkeleton() {
+export function GroupPageSkeleton() {
 	const t = useTranslation();
 
-	return <div className='page-container'>
-		<Header rawSectionName={<Skeleton style={{ width: '20rem' }}/>}>
-			<Header.ButtonSection>
+	return <Page>
+		<Page.Header title={<Skeleton style={{ width: '20rem' }}/>}>
+			<ButtonGroup>
 				<Button
 					children={t('Save_changes')}
 					disabled
 					primary
 				/>
-			</Header.ButtonSection>
-		</Header>
+			</ButtonGroup>
+		</Page.Header>
 
-		<div className='content'>
-			<Wrapper>
+		<Page.Content>
+			<Box style={useMemo(() => ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}>
 				<Paragraph.Skeleton />
 
 				<Accordion className='page-settings'>
 					<Section.Skeleton />
 				</Accordion>
-			</Wrapper>
-		</div>
-	</div>;
-};
+			</Box>
+		</Page.Content>
+	</Page>;
+}
+
+GroupPage.Skeleton = GroupPageSkeleton;

client/components/admin/settings/GroupPage.stories.js

@@ -7,18 +7,20 @@ export default {
 	title: 'admin/settings/GroupPage',
 	component: GroupPage,
 	decorators: [
-		(storyFn) => <SettingsState>{storyFn()}</SettingsState>,
+		(storyFn) => <SettingsState>
+			{storyFn()}
+		</SettingsState>,
 	],
 };
 
-export const _default = () => <GroupPage />;
+export const _default = () =>
+	<GroupPage />;
 
 export const withGroup = () =>
 	<GroupPage
-		group={{
-			_id: 'General',
-			i18nLabel: 'General',
-		}}
+		_id='General'
+		i18nLabel='General'
 	/>;
 
-export const skeleton = () => <GroupPage.Skeleton />;
+export const skeleton = () =>
+	<GroupPage.Skeleton />;

client/components/admin/settings/GroupSelector.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { AssetsGroupPage } from './groups/AssetsGroupPage';
 import { OAuthGroupPage } from './groups/OAuthGroupPage';
@@ -9,15 +9,17 @@ import { useGroup } from './SettingsState';
 export function GroupSelector({ groupId }) {
 	const group = useGroup(groupId);
 
-	const children = useMemo(() => {
-		if (!group) {
-			return <GroupPage.Skeleton />;
-		}
+	if (!group) {
+		return <GroupPage.Skeleton />;
+	}
 
-		return (group._id === 'Assets' && <AssetsGroupPage group={group} />)
-			|| (group._id === 'OAuth' && <OAuthGroupPage group={group} />)
-			|| <GenericGroupPage group={group} />;
-	}, [group]);
+	if (groupId === 'Assets') {
+		return <AssetsGroupPage {...group} />;
+	}
 
-	return children;
+	if (groupId === 'OAuth') {
+		return <OAuthGroupPage {...group} />;
+	}
+
+	return <GenericGroupPage {...group} />;
 }

client/components/admin/settings/NotAuthorizedPage.js

@@ -1,13 +1,15 @@
+import { Paragraph } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
+import { Page } from '../../basic/Page';
 
 export function NotAuthorizedPage() {
 	const t = useTranslation();
 
-	return <section className='page-container page-static page-settings'>
-		<div className='content'>
-			<p>{t('You_are_not_authorized_to_view_this_page')}</p>
-		</div>
-	</section>;
+	return <Page>
+		<Page.Content>
+			<Paragraph>{t('You_are_not_authorized_to_view_this_page')}</Paragraph>
+		</Page.Content>
+	</Page>;
 }

client/components/admin/settings/ResetSettingButton.js

@@ -1,27 +1,20 @@
 import { Button, Icon } from '@rocket.chat/fuselage';
 import React from 'react';
-import styled from 'styled-components';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
 
-// TODO: get rid of it
-const StyledResetSettingButton = styled(Button)`
-	padding-block: 0 !important;
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-`;
-
 export function ResetSettingButton(props) {
 	const t = useTranslation();
 
-	return <StyledResetSettingButton
+	return <Button
 		aria-label={t('Reset')}
 		danger
 		ghost
 		small
 		title={t('Reset')}
+		style={{ padding: 0 }}
 		{...props}
 	>
 		<Icon name='undo' />
-	</StyledResetSettingButton>;
+	</Button>;
 }

client/components/admin/settings/Section.js

@@ -3,10 +3,12 @@ import React from 'react';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { Setting } from './Setting';
-import { useSection } from './SettingsState';
+import { useSection, useSectionChangedState } from './SettingsState';
 
 export function Section({ children, groupId, hasReset = true, help, sectionName, solo }) {
 	const section = useSection(groupId, sectionName);
+	const changed = useSectionChangedState(groupId, sectionName);
+
 	const t = useTranslation();
 
 	const handleResetSectionClick = () => {
@@ -23,7 +25,7 @@ export function Section({ children, groupId, hasReset = true, help, sectionName,
 		</Paragraph>}
 
 		<FieldGroup>
-			{section.settings.map((settingId) => <Setting key={settingId} settingId={settingId} />)}
+			{section.settings.map((settingId) => <Setting key={settingId} settingId={settingId} sectionChanged={changed} />)}
 
 			{hasReset && section.canReset && <Button
 				children={t('Reset_section_settings')}
@@ -38,7 +40,7 @@ export function Section({ children, groupId, hasReset = true, help, sectionName,
 	</Accordion.Item>;
 }
 
-Section.Skeleton = function SectionSkeleton() {
+export function SectionSkeleton() {
 	return <Accordion.Item
 		noncollapsible
 		title={<Skeleton />}
@@ -51,4 +53,6 @@ Section.Skeleton = function SectionSkeleton() {
 			{Array.from({ length: 10 }).map((_, i) => <Setting.Skeleton key={i} />)}
 		</FieldGroup>
 	</Accordion.Item>;
-};
+}
+
+Section.Skeleton = SectionSkeleton;