Prototype of rewritten Administration > Users and Administration > Rooms

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/lib/lib/roomTypes/direct.js

@@ -73,7 +73,7 @@ export class DirectMessageRoomType extends RoomTypeConfig {
 			: Subscriptions.findOne({ rid: roomData._id });
 
 		if (subscription === undefined) {
-			return console.log('roomData', roomData);
+			return;
 		}
 
 		if (settings.get('UI_Use_Real_Name') && subscription.fname) {

app/ui-admin/client/components/info/InformationPage.js

@@ -41,7 +41,7 @@ export function InformationPage({
 				</ButtonGroup>}
 		</Page.Header>
 
-		<Page.Content>
+		<Page.ContentShadowScroll>
 			{alertOplogForMultipleInstances
 				&& <Margins blockEnd='x16'>
 					<Callout type='danger' title={t('Error_RocketChat_requires_oplog_tailing_when_running_in_multiple_instances')}>
@@ -62,6 +62,6 @@ export function InformationPage({
 			<BuildEnvironmentSection info={info} />
 			{canViewStatistics && <UsageSection statistics={statistics} isLoading={isLoading} />}
 			<InstancesSection instances={instances} />
-		</Page.Content>
+		</Page.ContentShadowScroll>
 	</Page>;
 }

app/ui-admin/client/routes.js

@@ -1,5 +1,5 @@
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
+// import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 import { Meteor } from 'meteor/meteor';
 
 import { renderRouteComponent } from '../../../client/reactAdapters';
@@ -43,20 +43,16 @@ registerAdminRoute('/mailer', {
 	lazyRouteComponent: () => import('./components/mailer/MailerRoute'),
 });
 
-registerAdminRoute('/users', {
+registerAdminRoute('/users/:context?/:id?', {
 	name: 'admin-users',
-	action: async () => {
-		await import('./users/views');
-		BlazeLayout.render('main', { center: 'adminUsers' });
-	},
+	lazyRouteComponent: () => import('../../../client/admin/users/AdminUsersRoute'),
+	tab: 'users',
 });
 
-registerAdminRoute('/rooms', {
+registerAdminRoute('/rooms/:context?/:id?', {
 	name: 'admin-rooms',
-	action: async () => {
-		await import('./rooms/views');
-		BlazeLayout.render('main', { center: 'adminRooms' });
-	},
+	lazyRouteComponent: () => import('../../../client/admin/rooms/AdminRoomsRoute'),
+	tab: 'rooms',
 });
 
 Meteor.startup(() => {

app/ui/client/views/app/components/Directory/DirectoryTable.js → app/ui/client/components/GenericTable.js

@@ -1,9 +1,9 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Icon, Pagination, Skeleton, Table, Flex, TextInput, Tile } from '@rocket.chat/fuselage';
+import { Box, Pagination, Skeleton, Table, Flex, Tile, Scrollable } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
-import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
-import { Markdown as mrkd } from '../../../../../../markdown/client';
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import { Markdown as mrkd } from '../../../markdown/client';
 
 function SortIcon({ direction }) {
 	return <Box is='svg' width='x16' height='x16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
@@ -42,33 +42,28 @@ const LoadingRow = ({ cols }) => <Table.Row>
 	</Table.Cell>)}
 </Table.Row>;
 
-const style = { minHeight: '40px' };
-
-export function DirectoryTable({
-	data = {},
+export function GenericTable({
+	results,
+	total,
 	renderRow,
 	header,
-	searchPlaceholder = 'placeholder',
 	setParams = () => { },
+	params: paramsDefault = '',
+	FilterComponent = () => null,
 }) {
 	const t = useTranslation();
 
-	const [text, setText] = useState('');
+	const [filter, setFilter] = useState(paramsDefault);
 
 	const [itemsPerPage, setItemsPerPage] = useState(25);
 
 	const [current, setCurrent] = useState(0);
 
-	const term = useDebouncedValue(text, 500);
+	const params = useDebouncedValue(filter, 500);
 
 	useEffect(() => {
-		setParams({ term, current, itemsPerPage });
-	}, [term, current, itemsPerPage]);
-
-	const { result: channels, total } = data;
-
-
-	const handleChange = useCallback((event) => setText(event.currentTarget.value), []);
+		setParams({ ...params, current, itemsPerPage });
+	}, [params, current, itemsPerPage]);
 
 	const Loading = useCallback(() => Array.from({ length: 10 }, (_, i) => <LoadingRow cols={header.length} key={i}/>), [header && header.length]);
 
@@ -77,40 +72,40 @@ export function DirectoryTable({
 	const itemsPerPageLabel = useCallback(() => t('Items_per_page:'), []);
 
 	return <>
-		<Flex.Container direction='column'>
-			<Box>
-				<Box mb='x16' display='flex' flexDirection='column' style={style}>
-					<TextInput placeholder={searchPlaceholder} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
-				</Box>
-				{channels && !channels.length
-					? <Tile textStyle='p1' elevation='0' textColor='info' style={{ textAlign: 'center' }}>
-						{t('No_data_found')}
-					</Tile>
-					: <>
-						<Table fixed>
-							{ header && <Table.Head>
-								<Table.Row>
-									{header}
-								</Table.Row>
-							</Table.Head> }
-							<Table.Body>
-								{channels
-									? channels.map(renderRow)
-									:	<Loading/>}
-							</Table.Body>
-						</Table>
-						<Pagination
-							current={current}
-							itemsPerPage={itemsPerPage}
-							itemsPerPageLabel={itemsPerPageLabel}
-							showingResultsLabel={showingResultsLabel}
-							count={total || 0}
-							onSetItemsPerPage={setItemsPerPage}
-							onSetCurrent={setCurrent}
-						/>
-					</>
-				}
-			</Box>
-		</Flex.Container>
+		<>
+			<FilterComponent setFilter={setFilter}/>
+			{results && !results.length
+				? <Tile textStyle='p1' elevation='0' textColor='info' style={{ textAlign: 'center' }}>
+					{t('No_data_found')}
+				</Tile>
+				: <>
+					<Scrollable>
+						<Box mi={'neg-x24'} pi={'x24'} flexGrow={1}>
+							<Table fixed>
+								{ header && <Table.Head>
+									<Table.Row>
+										{header}
+									</Table.Row>
+								</Table.Head> }
+								<Table.Body>
+									{results
+										? results.map(renderRow)
+										:	<Loading/>}
+								</Table.Body>
+							</Table>
+						</Box>
+					</Scrollable>
+					<Pagination
+						current={current}
+						itemsPerPage={itemsPerPage}
+						itemsPerPageLabel={itemsPerPageLabel}
+						showingResultsLabel={showingResultsLabel}
+						count={total || 0}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+					/>
+				</>
+			}
+		</>
 	</>;
 }

app/ui/client/components/GenericTable.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextInput, Box, Icon } from '@rocket.chat/fuselage';
+
+import { GenericTable, Th } from './GenericTable';
+
+
+export default {
+	title: 'directory/table',
+	component: GenericTable,
+	decorators: [(fn) => <div children={fn()} style={{ height: '100vh' }} />],
+};
+
+
+export const _default = () => {
+	const Search = () => <Box mb='x16' is='form' display='flex' flexDirection='column'>
+		<TextInput placeholder='Search...' addon={<Icon name='magnifier' size='x20'/>}/>
+	</Box>;
+
+
+	const header = [
+		<Th>Name</Th>,
+		<Th>Email</Th>,
+		<Th>Data</Th>,
+		<Th>Info</Th>,
+	];
+	return <GenericTable FilterComponent={Search} header={header} />;
+};