Improve: Rewrite admin sidebar in React

.storybook/webpack.config.js

@@ -42,7 +42,6 @@ module.exports = async ({ config }) => {
 					},
 				},
 			},
-			'react-docgen-typescript-loader',
 		],
 	});
 

app/ui-sidenav/client/sidebarHeader.js

@@ -159,8 +159,6 @@ const toolbarButtons = (/* user */) => [{
 				type: 'open',
 				id: 'administration',
 				action: () => {
-					SideNav.setFlex('adminFlex');
-					SideNav.openFlex();
 					FlowRouter.go('admin', { group: 'info' });
 					popover.close();
 				},

app/ui-utils/client/lib/SideNav.js

@@ -32,11 +32,13 @@ export const SideNav = new class {
 		}
 
 		if (window.DISABLE_ANIMATION === true) {
+			!this.flexNav.opened && this.setFlex();
 			this.animating = false;
 			return typeof callback === 'function' && callback();
 		}
 
 		return setTimeout(() => {
+			!this.flexNav.opened && this.setFlex();
 			this.animating = false;
 			return typeof callback === 'function' && callback();
 		}, 500);
@@ -62,10 +64,7 @@ export const SideNav = new class {
 		return this.flexNav.opened;
 	}
 
-	setFlex(template, data) {
-		if (data == null) {
-			data = {};
-		}
+	setFlex(template, data = {}) {
 		Session.set('flex-nav-template', template);
 		return Session.set('flex-nav-data', data);
 	}

app/ui-utils/client/lib/openRoom.js

@@ -31,15 +31,18 @@ const getDomOfLoading = mem(function getDomOfLoading() {
 function replaceCenterDomBy(dom) {
 	document.dispatchEvent(new CustomEvent('main-content-destroyed'));
 
-	const mainNode = document.querySelector('.main-content');
-	if (mainNode) {
-		for (const child of Array.from(mainNode.children)) {
-			if (child) { mainNode.removeChild(child); }
-		}
-		mainNode.appendChild(dom);
-	}
-
-	return mainNode;
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			const mainNode = document.querySelector('.main-content');
+			if (mainNode) {
+				for (const child of Array.from(mainNode.children)) {
+					if (child) { mainNode.removeChild(child); }
+				}
+				mainNode.appendChild(dom);
+			}
+			resolve(mainNode);
+		}, 1);
+	});
 }
 
 const waitUntilRoomBeInserted = async (type, rid) => new Promise((resolve) => {
@@ -69,7 +72,7 @@ export const openRoom = async function(type, name) {
 				if (settings.get('Accounts_AllowAnonymousRead')) {
 					BlazeLayout.render('main');
 				}
-				replaceCenterDomBy(getDomOfLoading());
+				await replaceCenterDomBy(getDomOfLoading());
 				return;
 			}
 
@@ -85,7 +88,7 @@ export const openRoom = async function(type, name) {
 			}
 
 			const roomDom = RoomManager.getDomOfRoom(type + name, room._id, roomTypes.getConfig(type).mainTemplate);
-			const mainNode = replaceCenterDomBy(roomDom);
+			const mainNode = await replaceCenterDomBy(roomDom);
 
 			if (mainNode) {
 				if (roomDom.classList.contains('room-container')) {

client/admin/AdministrationLayout.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, FC } from 'react';
+
+import { SideNav } from '../../app/ui-utils/client';
+
+const AdministrationLayout: FC = ({ children }) => {
+	useEffect(() => {
+		SideNav.setFlex('adminFlex');
+		SideNav.openFlex();
+	}, []);
+
+	return <>
+		{children}
+	</>;
+};
+
+export default AdministrationLayout;

client/admin/AdministrationRouter.js

@@ -1,19 +1,19 @@
-import React, { lazy, useMemo, Suspense, useEffect } from 'react';
+import React, { lazy, useMemo, Suspense } from 'react';
 
-import { SideNav } from '../../app/ui-utils/client';
+import AdministrationLayout from './AdministrationLayout';
+import PrivilegedSettingsProvider from './PrivilegedSettingsProvider';
 import PageSkeleton from './PageSkeleton';
 
 function AdministrationRouter({ lazyRouteComponent, ...props }) {
-	useEffect(() => {
-		SideNav.setFlex('adminFlex');
-		SideNav.openFlex();
-	}, []);
-
 	const LazyRouteComponent = useMemo(() => lazy(lazyRouteComponent), [lazyRouteComponent]);
 
-	return <Suspense fallback={<PageSkeleton />}>
-		<LazyRouteComponent {...props} />
-	</Suspense>;
+	return <PrivilegedSettingsProvider>
+		<AdministrationLayout>
+			<Suspense fallback={<PageSkeleton />}>
+				<LazyRouteComponent {...props} />
+			</Suspense>
+		</AdministrationLayout>
+	</PrivilegedSettingsProvider>;
 }
 
 export default AdministrationRouter;

client/admin/PrivateSettingsCachedCollection.ts

@@ -0,0 +1,29 @@
+import { CachedCollection } from '../../app/ui-cached-collection/client';
+import { Notifications } from '../../app/notifications/client';
+
+export class PrivateSettingsCachedCollection extends CachedCollection {
+	constructor() {
+		super({
+			name: 'private-settings',
+			eventType: 'onLogged',
+		});
+	}
+
+	async setupListener(): Promise<void> {
+		Notifications.onLogged(this.eventName, async (t: string, { _id, ...record }: { _id: string }) => {
+			this.log('record received', t, { _id, ...record });
+			this.collection.upsert({ _id }, record);
+			this.sync();
+		});
+	}
+
+	static instance: PrivateSettingsCachedCollection;
+
+	static get(): PrivateSettingsCachedCollection {
+		if (!PrivateSettingsCachedCollection.instance) {
+			PrivateSettingsCachedCollection.instance = new PrivateSettingsCachedCollection();
+		}
+
+		return PrivateSettingsCachedCollection.instance;
+	}
+}

client/admin/settings/SettingsState.js → client/admin/PrivilegedSettingsProvider.js

@@ -1,20 +1,11 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { Mongo } from 'meteor/mongo';
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { Tracker } from 'meteor/tracker';
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
-import { PrivateSettingsCachedCollection } from '../PrivateSettingsCachedCollection';
-import { PrivateSettingsContext } from '../../contexts/PrivateSettingsContext';
-
-let privateSettingsCachedCollection; // Remove this singleton (╯°□°)╯︵ ┻━┻
-
-const getPrivateSettingsCachedCollection = () => {
-	if (privateSettingsCachedCollection) {
-		return [privateSettingsCachedCollection, Promise.resolve()];
-	}
-
-	privateSettingsCachedCollection = new PrivateSettingsCachedCollection();
-
-	return [privateSettingsCachedCollection, privateSettingsCachedCollection.init()];
-};
+import { PrivilegedSettingsContext } from '../contexts/PrivilegedSettingsContext';
+import { useAtLeastOnePermission } from '../contexts/AuthorizationContext';
+import { PrivateSettingsCachedCollection } from './PrivateSettingsCachedCollection';
 
 const compareStrings = (a = '', b = '') => {
 	if (a === b || (!a && !b)) {
@@ -79,39 +70,37 @@ const settingsReducer = (states, { type, payload }) => {
 	return states;
 };
 
-export function SettingsState({ children }) {
+function AuthorizedPrivilegedSettingsProvider({ cachedCollection, children }) {
 	const [isLoading, setLoading] = useState(true);
 
-	const [subscribers] = useState(new Set());
+	const subscribersRef = useRef();
+	if (!subscribersRef.current) {
+		subscribersRef.current = new Set();
+	}
 
 	const stateRef = useRef({ settings: [], persistedSettings: [] });
 
-	const enhancedReducer = useCallback((state, action) => {
-		const newState = settingsReducer(state, action);
-
-		stateRef.current = newState;
-
-		subscribers.forEach((subscriber) => {
-			subscriber(newState);
-		});
-
-		return newState;
-	}, [settingsReducer, subscribers]);
+	const [state, dispatch] = useReducer(settingsReducer, { settings: [], persistedSettings: [] });
+	stateRef.current = state;
 
-	const [, dispatch] = useReducer(enhancedReducer, { settings: [], persistedSettings: [] });
+	subscribersRef.current.forEach((subscriber) => {
+		subscriber(state);
+	});
 
 	const collectionsRef = useRef({});
 
 	useEffect(() => {
-		const [privateSettingsCachedCollection, loadingPromise] = getPrivateSettingsCachedCollection();
-
 		const stopLoading = () => {
 			setLoading(false);
 		};
 
-		loadingPromise.then(stopLoading, stopLoading);
+		if (!Tracker.nonreactive(() => cachedCollection.ready.get())) {
+			cachedCollection.init().then(stopLoading, stopLoading);
+		} else {
+			stopLoading();
+		}
 
-		const { collection: persistedSettingsCollection } = privateSettingsCachedCollection;
+		const { collection: persistedSettingsCollection } = cachedCollection;
 		const settingsCollection = new Mongo.Collection(null);
 
 		collectionsRef.current = {
@@ -163,21 +152,21 @@ export function SettingsState({ children }) {
 
 	const updateTimersRef = useRef({});
 
-	const updateAtCollection = useCallback(({ _id, ...data }) => {
+	const updateAtCollection = useMutableCallback(({ _id, ...data }) => {
 		const { current: { settingsCollection } } = collectionsRef;
 		const { current: updateTimers } = updateTimersRef;
 		clearTimeout(updateTimers[_id]);
 		updateTimers[_id] = setTimeout(() => {
 			settingsCollection.update(_id, { $set: data });
 		}, 70);
-	}, [collectionsRef, updateTimersRef]);
+	});
 
-	const hydrate = useCallback((changes) => {
+	const hydrate = useMutableCallback((changes) => {
 		changes.forEach(updateAtCollection);
 		dispatch({ type: 'hydrate', payload: changes });
-	}, [updateAtCollection, dispatch]);
+	});
 
-	const isDisabled = useCallback(({ blocked, enableQuery }) => {
+	const isDisabled = useMutableCallback(({ blocked, enableQuery }) => {
 		if (blocked) {
 			return true;
 		}
@@ -190,28 +179,39 @@ export function SettingsState({ children }) {
 
 		const queries = [].concat(typeof enableQuery === 'string' ? JSON.parse(enableQuery) : enableQuery);
 		return !queries.every((query) => !!settingsCollection.findOne(query));
-	}, [collectionsRef]);
+	});
 
 	const contextValue = useMemo(() => ({
-		subscribers,
+		authorized: true,
+		loading: isLoading,
+		subscribers: subscribersRef.current,
 		stateRef,
 		hydrate,
 		isDisabled,
 	}), [
-		subscribers,
-		stateRef,
+		isLoading,
 		hydrate,
 		isDisabled,
 	]);
 
-	return <PrivateSettingsContext.Provider children={children} value={contextValue} />;
+	return <PrivilegedSettingsContext.Provider children={children} value={contextValue} />;
+}
+
+function PrivilegedSettingsProvider({ children }) {
+	const hasPermission = useAtLeastOnePermission([
+		'view-privileged-setting',
+		'edit-privileged-setting',
+		'manage-selected-settings',
+	]);
+
+	if (!hasPermission) {
+		return children;
+	}
+
+	return <AuthorizedPrivilegedSettingsProvider
+		cachedCollection={PrivateSettingsCachedCollection.get()}
+		children={children}
+	/>;
 }
 
-export {
-	usePrivateSettingsGroup as useGroup,
-	usePrivateSettingsSection as useSection,
-	usePrivateSettingActions as useSettingActions,
-	usePrivateSettingDisabledState as useSettingDisabledState,
-	usePrivateSettingsSectionChangedState as useSectionChangedState,
-	usePrivateSetting as useSetting,
-} from '../../contexts/PrivateSettingsContext';
+export default PrivilegedSettingsProvider;