[IMPROVE][Performance] Solves problems regarding settings editing performance on Administration

app/settings/client/lib/settings.ts

@@ -1,20 +1,13 @@
 import { Meteor } from 'meteor/meteor';
 import { ReactiveDict } from 'meteor/reactive-dict';
 
-import { CachedCollection } from '../../../ui-cached-collection';
+import { PublicSettingsCachedCollection } from '../../../../client/lib/settings/PublicSettingsCachedCollection';
 import { SettingsBase, SettingValue } from '../../lib/settings';
 
-const cachedCollection = new CachedCollection({
-	name: 'public-settings',
-	eventType: 'onAll',
-	userRelated: false,
-	listenChangesForLoggedUsersOnly: true,
-});
-
 class Settings extends SettingsBase {
-	cachedCollection = cachedCollection
+	cachedCollection = PublicSettingsCachedCollection.get()
 
-	collection = cachedCollection.collection;
+	collection = PublicSettingsCachedCollection.get().collection;
 
 	dict = new ReactiveDict<any>('settings');
 

client/admin/AdministrationRouter.js

@@ -1,17 +1,17 @@
 import React, { lazy, useMemo, Suspense } from 'react';
 
+import SettingsProvider from '../providers/SettingsProvider';
 import AdministrationLayout from './AdministrationLayout';
-import PrivilegedSettingsProvider from './PrivilegedSettingsProvider';
 import PageSkeleton from './PageSkeleton';
 
 function AdministrationRouter({ lazyRouteComponent, ...props }) {
 	const LazyRouteComponent = useMemo(() => lazy(lazyRouteComponent), [lazyRouteComponent]);
 	return <AdministrationLayout>
-		<PrivilegedSettingsProvider>
+		<SettingsProvider privileged>
 			<Suspense fallback={<PageSkeleton />}>
 				<LazyRouteComponent {...props} />
 			</Suspense>
-		</PrivilegedSettingsProvider>
+		</SettingsProvider>
 	</AdministrationLayout>;
 }
 

client/admin/settings/GroupPage.js

@@ -1,13 +1,80 @@
 import { Accordion, Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import React, { useMemo, memo } from 'react';
 
 import Page from '../../components/basic/Page';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useEditableSettingsDispatch, useEditableSettings } from '../../contexts/EditableSettingsContext';
+import { useSettingsDispatch, useSettings } from '../../contexts/SettingsContext';
+import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import { useTranslation, useLoadLanguage } from '../../contexts/TranslationContext';
+import { useUser } from '../../contexts/UserContext';
 import { Section } from './Section';
 
-const style = { margin: '0 auto', width: '100%', maxWidth: '590px' };
-export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) {
+function GroupPage({ children, headerButtons, _id, i18nLabel, i18nDescription }) {
+	const changedEditableSettings = useEditableSettings(useMemo(() => ({
+		group: _id,
+		changed: true,
+	}), [_id]));
+
+	const originalSettings = useSettings(useMemo(() => ({
+		_id: changedEditableSettings.map(({ _id }) => _id),
+	}), [changedEditableSettings]));
+
+	const dispatch = useSettingsDispatch();
+
+	const dispatchToastMessage = useToastMessageDispatch();
 	const t = useTranslation();
+	const loadLanguage = useLoadLanguage();
+	const user = useUser();
+
+	const save = useMutableCallback(async () => {
+		const changes = changedEditableSettings
+			.map(({ _id, value, editor }) => ({ _id, value, editor }));
+
+		if (changes.length === 0) {
+			return;
+		}
+
+		try {
+			await dispatch(changes);
+
+			if (changes.some(({ _id }) => _id === 'Language')) {
+				const lng = user?.language
+					|| changes.filter(({ _id }) => _id === 'Language').shift()?.value
+					|| 'en';
+
+				await loadLanguage(lng);
+				dispatchToastMessage({ type: 'success', message: t('Settings_updated', { lng }) });
+				return;
+			}
+
+			dispatchToastMessage({ type: 'success', message: t('Settings_updated') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const dispatchToEditing = useEditableSettingsDispatch();
+
+	const cancel = useMutableCallback(() => {
+		dispatchToEditing(
+			changedEditableSettings
+				.map(({ _id }) => originalSettings.find((setting) => setting._id === _id))
+				.map((setting) => {
+					if (!setting) {
+						return;
+					}
+
+					return {
+						_id: setting._id,
+						value: setting.value,
+						editor: setting.editor,
+						changed: false,
+					};
+				})
+				.filter(Boolean),
+		);
+	});
 
 	const handleSubmit = (event) => {
 		event.preventDefault();
@@ -34,11 +101,11 @@ export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabe
 	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>}
+				{changedEditableSettings.length > 0 && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>}
 				<Button
 					children={t('Save_changes')}
 					className='save'
-					disabled={!changed}
+					disabled={changedEditableSettings.length === 0}
 					primary
 					type='submit'
 					onClick={handleSaveClick}
@@ -48,7 +115,7 @@ export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabe
 		</Page.Header>
 
 		<Page.ScrollableContentWithShadow>
-			<Box style={style}>
+			<Box marginBlock='none' marginInline='auto' width='full' maxWidth='x580'>
 				{t.has(i18nDescription) && <Box is='p' color='hint' fontScale='p1'>{t(i18nDescription)}</Box>}
 
 				<Accordion className='page-settings'>
@@ -59,7 +126,7 @@ export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabe
 	</Page>;
 }
 
-export function GroupPageSkeleton() {
+function GroupPageSkeleton() {
 	const t = useTranslation();
 
 	return <Page>
@@ -89,4 +156,6 @@ export function GroupPageSkeleton() {
 	</Page>;
 }
 
-GroupPage.Skeleton = GroupPageSkeleton;
+export default Object.assign(memo(GroupPage), {
+	Skeleton: GroupPageSkeleton,
+});

client/admin/settings/GroupPage.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { GroupPage } from './GroupPage';
+import GroupPage from './GroupPage';
 
 export default {
 	title: 'admin/settings/GroupPage',