[NEW] Rewrite admin pages (#17388)

Co-authored-by: Maria Eduarda Cunha <42151808+mariaeduardacunha@users.noreply.github.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Co-authored-by: Gabriel Henriques <gabriel.henriques@rocket.chat>
Co-authored-by: Martin Schoeler <martin.schoeler@rocket.chat>

.storybook/babel.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				shippedProposals: true,
+				useBuiltIns: 'usage',
+				corejs: '3',
+				modules: 'commonjs',
+			},
+		],
+		'@babel/preset-react',
+		'@babel/preset-flow',
+	],
+	plugins: [
+		'@babel/plugin-proposal-class-properties',
+		'@babel/plugin-proposal-optional-chaining',
+		'@babel/plugin-proposal-nullish-coalescing-operator',
+	],
+};

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+	stories: [
+		'../app/**/*.stories.js',
+		'../client/**/*.stories.js',
+		'../ee/app/**/*.stories.js',
+	],
+	addons: [
+		'@storybook/addon-actions',
+		'@storybook/addon-knobs',
+	],
+};

.storybook/mocks/meteor.js

@@ -4,7 +4,10 @@ export const Meteor = {
 	_localStorage: window.localStorage,
 	absoluteUrl: () => {},
 	userId: () => {},
-	Streamer: () => {},
+	Streamer: () => ({
+		on: () => {},
+		removeListener: () => {},
+	}),
 	startup: () => {},
 	methods: () => {},
 	call: () => {},
@@ -31,10 +34,13 @@ export const Mongo = {
 	}),
 };
 
-export const ReactiveVar = () => ({
-	get: () => {},
-	set: () => {},
-});
+export const ReactiveVar = (val) => {
+	let currentVal = val;
+	return {
+		get: () => currentVal,
+		set: (val) => { currentVal = val; },
+	};
+};
 
 export const ReactiveDict = () => ({
 	get: () => {},

.storybook/preview.js

@@ -0,0 +1,7 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { addDecorator } from '@storybook/react';
+
+import { rocketChatDecorator } from './mocks/decorators';
+
+addDecorator(rocketChatDecorator);
+addDecorator(withKnobs);

.storybook/webpack.config.js

@@ -31,15 +31,35 @@ module.exports = async ({ config }) => {
 		use: '@settlin/spacebars-loader',
 	});
 
-	config.plugins.push(new webpack.NormalModuleReplacementPlugin(
-		/^meteor/,
-		require.resolve('./mocks/meteor.js'),
-	));
-
-	config.plugins.push(new webpack.NormalModuleReplacementPlugin(
-		/\.\/server\/index.js/,
-		require.resolve('./mocks/empty.js'),
-	));
+	config.module.rules.push({
+		test: /\.(ts|tsx)$/,
+		use: [
+			{
+				loader: 'ts-loader',
+				options: {
+					compilerOptions: {
+						noEmit: false,
+					},
+				},
+			},
+			{
+				loader: 'react-docgen-typescript-loader',
+			},
+		],
+	});
+
+	config.resolve.extensions.push('.ts', '.tsx');
+
+	config.plugins.push(
+		new webpack.NormalModuleReplacementPlugin(
+			/^meteor/,
+			require.resolve('./mocks/meteor.js'),
+		),
+		new webpack.NormalModuleReplacementPlugin(
+			/\/server(\/index.js)$/,
+			require.resolve('./mocks/empty.js'),
+		),
+	);
 
 	config.mode = 'development';
 	config.optimization.usedExports = true;

app/api/server/lib/rooms.js

@@ -56,6 +56,34 @@ export async function findAdminRooms({ uid, filter, types = [], pagination: { of
 	};
 }
 
+export async function findAdminRoom({ uid, rid }) {
+	if (!await hasPermissionAsync(uid, 'view-room-administration')) {
+		throw new Error('error-not-authorized');
+	}
+	const fields = {
+		prid: 1,
+		fname: 1,
+		name: 1,
+		t: 1,
+		cl: 1,
+		u: 1,
+		usernames: 1,
+		usersCount: 1,
+		muted: 1,
+		unmuted: 1,
+		ro: 1,
+		default: 1,
+		favorite: 1,
+		featured: 1,
+		topic: 1,
+		msgs: 1,
+		archived: 1,
+		tokenpass: 1,
+	};
+
+	return Rooms.findOneById(rid, { fields });
+}
+
 export async function findChannelAndPrivateAutocomplete({ uid, selector }) {
 	if (!await hasPermissionAsync(uid, 'view-other-user-channels')) {
 		return { items: [] };

app/api/server/v1/rooms.js

@@ -4,7 +4,7 @@ import Busboy from 'busboy';
 import { FileUpload } from '../../../file-upload';
 import { Rooms, Messages } from '../../../models';
 import { API } from '../api';
-import { findAdminRooms, findChannelAndPrivateAutocomplete } from '../lib/rooms';
+import { findAdminRooms, findChannelAndPrivateAutocomplete, findAdminRoom } from '../lib/rooms';
 
 function findRoomByIdOrName({ params, checkedArchived = true }) {
 	if ((!params.roomId || !params.roomId.trim()) && (!params.roomName || !params.roomName.trim())) {
@@ -299,6 +299,22 @@ API.v1.addRoute('rooms.adminRooms', { authRequired: true }, {
 	},
 });
 
+API.v1.addRoute('rooms.adminRooms.getRoom', { authRequired: true }, {
+	get() {
+		const { rid } = this.requestParams();
+		const room = Promise.await(findAdminRoom({
+			uid: this.userId,
+			rid,
+		}));
+
+		if (!room) {
+			return API.v1.failure('not-allowed', 'Not Allowed');
+		}
+		return API.v1.success(room);
+	},
+});
+
+
 API.v1.addRoute('rooms.autocomplete.channelAndPrivate', { authRequired: true }, {
 	get() {
 		const { selector } = this.queryParams;
@@ -312,3 +328,28 @@ API.v1.addRoute('rooms.autocomplete.channelAndPrivate', { authRequired: true },
 		})));
 	},
 });
+
+API.v1.addRoute('rooms.saveRoomSettings', { authRequired: true }, {
+	post() {
+		const { rid, ...params } = this.bodyParams;
+
+		const result = Meteor.runAsUser(this.userId, () => Meteor.call('saveRoomSettings', rid, params));
+
+		return API.v1.success({ rid: result.rid });
+	},
+});
+
+API.v1.addRoute('rooms.changeArchivationState', { authRequired: true }, {
+	post() {
+		const { rid, action } = this.bodyParams;
+
+		let result;
+		if (action === 'archive') {
+			result = Meteor.runAsUser(this.userId, () => Meteor.call('archiveRoom', rid));
+		} else {
+			result = Meteor.runAsUser(this.userId, () => Meteor.call('unarchiveRoom', rid));
+		}
+
+		return API.v1.success({ result });
+	},
+});

app/api/server/v1/users.js

@@ -30,6 +30,8 @@ API.v1.addRoute('users.create', { authRequired: true }, {
 			password: String,
 			username: String,
 			active: Match.Maybe(Boolean),
+			bio: Match.Maybe(String),
+			statusText: Match.Maybe(String),
 			roles: Match.Maybe(Array),
 			joinDefaultChannels: Match.Maybe(Boolean),
 			requirePasswordChange: Match.Maybe(Boolean),
@@ -431,6 +433,7 @@ API.v1.addRoute('users.update', { authRequired: true, twoFactorRequired: true },
 				name: Match.Maybe(String),
 				password: Match.Maybe(String),
 				username: Match.Maybe(String),
+				bio: Match.Maybe(String),
 				statusText: Match.Maybe(String),
 				active: Match.Maybe(Boolean),
 				roles: Match.Maybe(Array),

app/apps/client/orchestrator.js

@@ -4,7 +4,7 @@ import toastr from 'toastr';
 
 import { AppWebsocketReceiver } from './communication';
 import { APIClient } from '../../utils';
-import { registerAdminSidebarItem } from '../../ui-admin/client';
+import { registerAdminSidebarItem } from '../../../client/admin';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { hasAtLeastOnePermission } from '../../authorization';
 import { handleI18nResources } from './i18n';

app/apps/client/routes.js

@@ -1,7 +1,7 @@
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 
-import { registerAdminRoute } from '../../ui-admin/client';
+import { registerAdminRoute } from '../../../client/admin';
 import { Apps } from './orchestrator';
 
 registerAdminRoute('/apps/what-is-it', {

app/authorization/client/route.js

@@ -1,6 +1,6 @@
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 
-import { registerAdminRoute } from '../../ui-admin/client';
+import { registerAdminRoute } from '../../../client/admin';
 import { t } from '../../utils/client';
 
 registerAdminRoute('/permissions', {

app/authorization/client/startup.js

@@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 
 import { hasAtLeastOnePermission } from './hasPermission';
-import { registerAdminSidebarItem } from '../../ui-admin/client';
+import { registerAdminSidebarItem } from '../../../client/admin';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { APIClient } from '../../utils/client';
 import { Roles } from '../../models/client';

app/channel-settings/client/views/Multiselect.js

@@ -4,7 +4,7 @@ import { createTemplateForComponent } from '../../../../client/reactAdapters';
 
 createTemplateForComponent(
 	'Multiselect',
-	() => import('../../../ui-admin/client/components/settings/inputs/MultiSelectSettingInput'),
+	() => import('../../../../client/admin/settings/inputs/MultiSelectSettingInput'),
 	{
 		// eslint-disable-next-line new-cap
 		renderContainerView: () => HTML.DIV({ class: 'rc-multiselect', style: 'display: flex;' }),

app/chatpal-search/client/route.js

@@ -1,6 +1,6 @@
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 
-import { registerAdminRoute } from '../../ui-admin/client';
+import { registerAdminRoute } from '../../../client/admin';
 import { t } from '../../utils';
 
 registerAdminRoute('/chatpal', {

app/cloud/client/index.js

@@ -4,7 +4,7 @@ import './admin/cloudRegisterManually';
 
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 
-import { registerAdminRoute, registerAdminSidebarItem } from '../../ui-admin/client';
+import { registerAdminRoute, registerAdminSidebarItem } from '../../../client/admin';
 import { hasAtLeastOnePermission } from '../../authorization';
 
 registerAdminRoute('/cloud', {