feat: settings enhancement

src/app.jsx

@@ -22,7 +22,7 @@ import { SyncDataHandler } from './views/sidebar/sync-data-handler';
 import { mailToSharedFunction, openComposerSharedFunction } from './integrations/shared-functions';
 import Notifications from './views/notifications';
 import { ParticipantRole } from './types/participant';
-import { MAILS_ROUTE, MAIL_APP_ID } from './constants';
+import { MAILS_ROUTE, MAIL_APP_ID, settingsSubSections } from './constants';
 
 const LazyAppView = lazy(() =>
 	import(/* webpackChunkName: "mails-folder-panel-view" */ './views/app-view')
@@ -85,6 +85,11 @@ const App = () => {
 		addSettingsView({
 			route: MAILS_ROUTE,
 			label: t('label.app_name', 'Mails'),
+			subSections: settingsSubSections.map((item) => ({
+				id: t(item.label, item.fallback).replace(/\s/g, ''),
+				label: t(item.label, item.fallback)
+			})),
+
 			component: SettingsView
 		});
 		addSearchView({

src/constants/index.jsx

@@ -212,3 +212,24 @@ export const emailStatusItemsConstant = [
 ];
 
 export const MAIL_APP_ID = 'carbonio-mails-ui';
+
+export const settingsSubSections = [
+	{
+		label: 'settings.label.display_messages',
+		fallback: 'Displaying Messages'
+	},
+	{
+		label: 'label.receive_message',
+		fallback: 'Receiving Messages'
+	},
+	{
+		label: 'signatures.signature_heading',
+		fallback: 'Signatures'
+	},
+	{
+		label: 'label.set_default_signatures',
+		fallback: 'Set Default Signatures'
+	},
+
+	{ label: 'filters.filters', fallback: 'Filters' }
+];

src/views/settings/displaying-messages-settings.jsx

@@ -10,8 +10,7 @@ import {
 	FormSubSection,
 	Select,
 	Input,
-	Checkbox,
-	Padding
+	Checkbox
 } from '@zextras/carbonio-design-system';
 import Heading from './components/settings-heading';
 import {
@@ -21,6 +20,7 @@ import {
 	findLabel,
 	ConversationSortingSettings
 } from './components/utils';
+import { settingsSubSections } from '../../constants';
 
 export default function DisplayingMessagesSettings({ t, settingsObj, updateSettings }) {
 	const checkNewMailOptions = useMemo(
@@ -35,11 +35,15 @@ export default function DisplayingMessagesSettings({ t, settingsObj, updateSetti
 	const displayMailOptions = useMemo(() => DisplayMailOptions(t), [t]);
 	const messageSelectionOptions = useMemo(() => MessageSelectionOptions(t), [t]);
 	const conversationSortingSettings = useMemo(() => ConversationSortingSettings(t), [t]);
-
+	const sectionTitle = useMemo(
+		() => t(settingsSubSections[0].label, settingsSubSections[0].fallback),
+		[t]
+	);
 	return (
 		<FormSubSection
-			label={t('settings.label.display_messages', 'Displaying Messages')}
+			label={sectionTitle}
 			padding={{ all: 'medium' }}
+			id={sectionTitle.replace(/\s/g, '')}
 		>
 			<Row width="100%" padding={{ horizontal: 'small', vertical: 'small' }}>
 				<Select
@@ -73,7 +77,9 @@ export default function DisplayingMessagesSettings({ t, settingsObj, updateSetti
 					label={t('settings.label.display_mail', 'Display mail')}
 					items={displayMailOptions}
 					onChange={(view) =>
-						updateSettings({ target: { name: 'zimbraPrefMessageViewHtmlPreferred', value: view } })
+						updateSettings({
+							target: { name: 'zimbraPrefMessageViewHtmlPreferred', value: view }
+						})
 					}
 					defaultSelection={{
 						label: findLabel(displayMailOptions, settingsObj.zimbraPrefMessageViewHtmlPreferred),

src/views/settings/filters/index.tsx

@@ -3,37 +3,43 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useMemo } from 'react';
 import { Container, Text, Divider } from '@zextras/carbonio-design-system';
 import { TFunction } from 'i18next';
 import FilterTabs from './parts/filter-tabs';
 import Heading from '../components/settings-heading';
+import { settingsSubSections } from '../../../constants';
 
 type ComponentProps = {
 	t: TFunction;
 };
 
-const FilterModule: FC<ComponentProps> = ({ t }): ReactElement => (
-	<Container background="gray6" padding={{ horizontal: 'medium', bottom: 'large' }}>
-		<Container
-			orientation="horizontal"
-			padding={{ horizontal: 'medium', top: 'medium' }}
-			mainAllignment="space-between"
-		>
-			<Container width="50%">
-				<Heading title={t('filters.filters', 'Filters')} size="medium" />
+const FilterModule: FC<ComponentProps> = ({ t }): ReactElement => {
+	const sectionTitle = useMemo(
+		() => t(settingsSubSections[4].label, settingsSubSections[4].fallback),
+		[t]
+	);
+	return (
+		<Container background="gray6" padding={{ horizontal: 'medium', bottom: 'large' }}>
+			<Container
+				orientation="horizontal"
+				padding={{ horizontal: 'medium', top: 'medium' }}
+				mainAllignment="space-between"
+			>
+				<Container width="50%" id={sectionTitle}>
+					<Heading title={sectionTitle} size="medium" />
+				</Container>
+				<Container width="50%" crossAlignment="flex-end">
+					<Text size="extrasmall">
+						{t('filters.filter_note', 'Note: changes to filter rules are saved immediately')}
+					</Text>
+				</Container>
 			</Container>
-			<Container width="50%" crossAlignment="flex-end">
-				<Text size="extrasmall">
-					{t('filters.filter_note', 'Note: changes to filter rules are saved immediately')}
-				</Text>
+			<Divider />
+			<Container padding={{ all: 'medium', bottom: 'small' }}>
+				<FilterTabs t={t} />
 			</Container>
 		</Container>
-		<Divider />
-		<Container padding={{ all: 'medium', bottom: 'small' }}>
-			<FilterTabs t={t} />
-		</Container>
-	</Container>
-);
-
+	);
+};
 export default FilterModule;

src/views/settings/receiving-messages-settings.jsx

@@ -14,14 +14,19 @@ import {
 } from '@zextras/carbonio-design-system';
 import Heading from './components/settings-heading';
 import { NotifyFolderOpts, ReadReceiptOpts, MsgsFromMeOpts, findLabel } from './components/utils';
+import { settingsSubSections } from '../../constants';
 
 export default function ReceivingMessagesSettings({ t, settingsObj, updateSettings }) {
 	const notifyFolderOptn = useMemo(() => NotifyFolderOpts(t), [t]);
 	const readReceiptOptn = useMemo(() => ReadReceiptOpts(t), [t]);
 	const msgsFromMeOpts = useMemo(() => MsgsFromMeOpts(t), [t]);
+	const sectionTitle = useMemo(
+		() => t(settingsSubSections[1].label, settingsSubSections[1].fallback),
+		[t]
+	);
 
 	return (
-		<FormSubSection label={t('label.receive_message', 'Receiving Messages')}>
+		<FormSubSection label={sectionTitle} id={sectionTitle.replace(/\s/g, '')}>
 			<Container crossAlignment="baseline" padding={{ all: 'small' }}>
 				<Heading title="Message Arrival" />
 				<Input
@@ -114,7 +119,9 @@ export default function ReceivingMessagesSettings({ t, settingsObj, updateSettin
 					items={msgsFromMeOpts}
 					name="zimbraPrefDedupeMessagesSentToSelf"
 					onChange={(view) =>
-						updateSettings({ target: { name: 'zimbraPrefDedupeMessagesSentToSelf', value: view } })
+						updateSettings({
+							target: { name: 'zimbraPrefDedupeMessagesSentToSelf', value: view }
+						})
 					}
 					defaultSelection={{
 						label: findLabel(msgsFromMeOpts, settingsObj.zimbraPrefDedupeMessagesSentToSelf),

src/views/settings/settings-view.jsx

@@ -4,19 +4,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import React, { useState, useMemo, useCallback, useContext } from 'react';
-import { useUserSettings, useUserAccount, editSettings } from '@zextras/carbonio-shell-ui';
+import {
+	useUserSettings,
+	useUserAccount,
+	editSettings,
+	SettingsHeader
+} from '@zextras/carbonio-shell-ui';
 import { useDispatch } from 'react-redux';
 import { map, forEach, isEqual, filter, find, cloneDeep } from 'lodash';
-import {
-	Container,
-	Padding,
-	Text,
-	Button,
-	Row,
-	Divider,
-	FormSection,
-	SnackbarManagerContext
-} from '@zextras/carbonio-design-system';
+import { Container, FormSection, SnackbarManagerContext } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
 import { differenceObject } from './components/utils';
 import DisplayMessagesSettings from './displaying-messages-settings';
@@ -226,49 +222,13 @@ export default function SettingsView() {
 			});
 		}
 	}, [signItems, signItemsUpdated, settingsToUpdate, dispatch, account, createSnackbar, t, flag]);
+
+	const title = useMemo(() => t('label.mail_settings', 'Mails settings'), [t]);
 	return loading ? (
 		<LoadingShimmer />
 	) : (
-		<Container
-			orientation="vertical"
-			mainAlignment="space-around"
-			background="gray5"
-			style={{ overflowY: 'auto' }}
-		>
-			<Row orientation="horizontal" width="100%">
-				<Row
-					padding={{ all: 'small' }}
-					mainAlignment="flex-start"
-					width="50%"
-					crossAlignment="flex-start"
-				>
-					<Text size="large" weight="regular">
-						{t('label.mail_settings', 'Mails settings')}
-					</Text>
-				</Row>
-				<Row
-					padding={{ all: 'small' }}
-					width="50%"
-					mainAlignment="flex-end"
-					crossAlignment="flex-end"
-				>
-					<Padding right="small">
-						<Button
-							label={t('label.discard_changes', 'DISCARD CHANGES')}
-							onClick={onClose}
-							color="secondary"
-							disabled={isDisabled}
-						/>
-					</Padding>
-					<Button
-						label={t('label.save', 'Save')}
-						color="primary"
-						onClick={saveChanges}
-						disabled={isDisabled}
-					/>
-				</Row>
-			</Row>
-			<Divider />
+		<>
+			<SettingsHeader onSave={saveChanges} onCancel={onClose} isDirty={!isDisabled} title={title} />
 			<Container
 				orientation="vertical"
 				mainAlignment="baseline"
@@ -302,6 +262,6 @@ export default function SettingsView() {
 					<FilterModule t={t} />
 				</FormSection>
 			</Container>
-		</Container>
+		</>
 	);
 }

src/views/settings/signature-settings.jsx

@@ -19,6 +19,7 @@ import styled from 'styled-components';
 
 import { useIntegratedComponent, useUserAccount } from '@zextras/carbonio-shell-ui';
 import { map, find, findIndex, merge, escape, unescape } from 'lodash';
+import { settingsSubSections } from '../../constants';
 import Heading from './components/settings-heading';
 import { GetAllSignatures } from '../../store/actions/signatures';
 import { getSignatures } from '../../store/editor-slice-utils';
@@ -213,12 +214,21 @@ export default function SignatureSettings({
 		);
 	};
 	const [Composer, composerIsAvailable] = useIntegratedComponent('composer');
+	const sectionTitleSignatures = useMemo(
+		() => t(settingsSubSections[2].label, settingsSubSections[2].fallback),
+		[t]
+	);
+	const sectionTitleSetSignatures = useMemo(
+		() => t(settingsSubSections[3].label, settingsSubSections[3].fallback),
+		[t]
+	);
 
 	return (
 		<>
 			<FormSubSection
-				label={t('signatures.signature_heading', 'Signatures')}
+				label={sectionTitleSignatures}
 				padding={{ all: 'large' }}
+				id={sectionTitleSignatures.replace(/\s/g, '')}
 			>
 				<Container crossAlignment="flex-start" orientation="horizontal" padding={{ all: 'medium' }}>
 					<Container width="25%" padding={{ right: 'medium' }}>
@@ -279,7 +289,10 @@ export default function SignatureSettings({
 					</Container>
 				</Container>
 			</FormSubSection>
-			<FormSubSection label="Set Default Signatures">
+			<FormSubSection
+				label={sectionTitleSetSignatures}
+				id={sectionTitleSetSignatures.replace(/\s/g, '')}
+			>
 				<Container crossAlignment="baseline" padding={{ all: 'small' }}>
 					<Heading title={t('title.new_messages', 'New Messages')} />
 					<Select

translations/en.json

@@ -269,6 +269,7 @@
         "sending": "Sending",
         "sent": "Sent",
         "sent_to_address": "Sent to (address)",
+        "set_default_signatures": "Set Default Signatures",
         "share": "Share",
         "shared_folders": "Shared Folders",
         "shared_item": "Shared item",