Fix design review (#17133)

app/api/server/lib/rooms.js

@@ -18,6 +18,7 @@ export async function findAdminRooms({ uid, filter, types = [], pagination: { of
 		unmuted: 1,
 		ro: 1,
 		default: 1,
+		featured: 1,
 		topic: 1,
 		msgs: 1,
 		archived: 1,

app/ui-admin/client/rooms/adminRooms.html

@@ -34,7 +34,8 @@
 								<th width="20%"><div class="table-fake-th">{{_ "Type"}}</div></th>
 								<th width="20%"><div class="table-fake-th">{{_ "Users"}}</div></th>
 								<th width="10%"><div class="table-fake-th">{{_ "Msgs"}}</div></th>
-								<th width="20%"><div class="table-fake-th">{{_ "Default"}}</div></th>
+								<th width="10%"><div class="table-fake-th">{{_ "Default"}}</div></th>
+								<th width="10%"><div class="table-fake-th">{{_ "Featured"}}</div></th>
 							</tr>
 						</thead>
 						<tbody>
@@ -51,7 +52,8 @@
 									<td width="20%"><div class="rc-table-wrapper">{{type}}</div></td>
 									<td width="20%"><div class="rc-table-wrapper">{{usersCount}}</div></td>
 									<td width="10%"><div class="rc-table-wrapper">{{msgs}}</div></td>
-									<td width="20%"><div class="rc-table-wrapper">{{default}}</div></td>
+									<td width="10%"><div class="rc-table-wrapper">{{default}}</div></td>
+									<td width="10%"><div class="rc-table-wrapper">{{#if featured}}True{{else}}False{{/if}}</div></td>
 								</tr>
 							 {{else}} {{# with searchText}}
 							<tr class="table-no-click">

app/ui/client/views/app/components/Directory/ChannelsTab.js

@@ -1,21 +1,24 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { Box, Margins, Table, Flex, Avatar, Tag } from '@rocket.chat/fuselage';
+import { Box, Margins, Table, Avatar, Tag, Icon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
 import { useEndpointData } from '../../../../../../../ee/app/engagement-dashboard/client/hooks/useEndpointData';
-import { DirectoryTable, Th } from './DirectoryTable';
+import { DirectoryTable, Th, Markdown } from './DirectoryTable';
 import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
 import { useRoute } from '../../../../../../../client/contexts/RouterContext';
 import { useQuery, useFormatDate } from '../hooks';
+import { roomTypes } from '../../../../../../utils/client';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
 function RoomTags({ room }) {
 	const t = useTranslation();
-	return <Margins inline='x2'>
-		{room.default && <Tag variant='primary'>{t('default')}</Tag>}
-		{room.featured && <Tag variant='primary'>{t('featured')}</Tag>}
-	</Margins>;
+	return <Box mi='x4' alignItems='center' display='flex'>
+		<Margins inline='x2'>
+			{room.default && <Tag variant='primary'>{t('default')}</Tag>}
+			{room.featured && <Tag variant='primary'>{t('featured')}</Tag>}
+		</Margins>
+	</Box>;
 }
 
 export function ChannelsTab() {
@@ -57,21 +60,15 @@ export function ChannelsTab() {
 	const formatDate = useFormatDate();
 	const renderRow = useCallback(({ _id, ts, name, fname, description, usersCount, lastMessage, topic, ...room }) => <Table.Row key={_id} onKeyDown={onClick(name)} onClick={onClick(name)} tabIndex={0} role='link' action>
 		<Table.Cell>
-			<Flex.Container>
-				<Box>
-					<Flex.Item>
-						<Avatar size='x40' title={fname || name} url={`%40${ fname || name }`} />
-					</Flex.Item>
-					<Margins inline='x8'>
-						<Flex.Item grow={1}>
-							<Box>
-								<Box textStyle='p2'>{fname || name} <RoomTags room={room} style={style} /></Box>
-								{topic && <Box textStyle='p1' textColor='hint' style={style}>{topic}</Box> }
-							</Box>
-						</Flex.Item>
-					</Margins>
+			<Box display='flex'>
+				<Avatar size='x40' title={fname || name} url={`%40${ fname || name }`} flexGrow={0} />
+				<Box grow={1} mi='x8' style={style}>
+					<Box display='flex' alignItems='center'>
+						<Icon name={roomTypes.getIcon(room)} textColor='hint' /> <Box textStyle='p2' textColor='default' mi='x4'>{fname || name}</Box><RoomTags room={room} style={style} />
+					</Box>
+					{topic && <Markdown textStyle='p1' textColor='hint' style={style}>{topic}</Markdown> }
 				</Box>
-			</Flex.Container>
+			</Box>
 		</Table.Cell>
 		<Table.Cell textStyle='p1' textColor='hint' style={style}>
 			{usersCount}

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

@@ -1,8 +1,9 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Icon, Margins, Pagination, Skeleton, Table, Flex, TextInput, Tile } from '@rocket.chat/fuselage';
+import { Box, Icon, Pagination, Skeleton, Table, Flex, TextInput, Tile } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
 import { useDebounce } from '../hooks';
+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'>
@@ -14,12 +15,16 @@ function SortIcon({ direction }) {
 export function Th({ children, active, direction, sort, onClick, align, ...props }) {
 	const fn = useMemo(() => () => onClick && onClick(sort), [sort, onClick]);
 	return <Table.Cell clickable={!!sort} onClick={fn} { ...props }>
-		<Flex.Container alignItems='center' wrap='no-wrap'>
-			<Box>{children}{sort && <SortIcon mod-active={active} direction={active && direction} />}</Box>
-		</Flex.Container>
+		<Box display='flex' alignItems='center' wrap='no-wrap'>{children}{sort && <SortIcon mod-active={active} direction={active && direction} />}</Box>
 	</Table.Cell>;
 }
 
+export function Markdown({ children, ...props }) {
+	return React.Children.map(children, function(text, index) {
+		return <Box { ...props } key={index} dangerouslySetInnerHTML={{ __html: mrkd.parse(text) }}/>;
+	});
+}
+
 const LoadingRow = ({ cols }) => <Table.Row>
 	<Table.Cell>
 		<Flex.Container>
@@ -27,14 +32,10 @@ const LoadingRow = ({ cols }) => <Table.Row>
 				<Flex.Item>
 					<Skeleton variant='rect' height={40} width={40} />
 				</Flex.Item>
-				<Margins inline='x8'>
-					<Flex.Item grow={1}>
-						<Box>
-							<Skeleton width='100%' />
-							<Skeleton width='100%' />
-						</Box>
-					</Flex.Item>
-				</Margins>
+				<Box mi='x8' grow={1}>
+					<Skeleton width='100%' />
+					<Skeleton width='100%' />
+				</Box>
 			</Box>
 		</Flex.Container>
 	</Table.Cell>
@@ -78,9 +79,9 @@ export function DirectoryTable({
 	return <>
 		<Flex.Container direction='column'>
 			<Box>
-				<Margins block='x16'>
+				<Box mb='x16' display='flex'>
 					<TextInput placeholder={searchPlaceholder} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
-				</Margins>
+				</Box>
 				{channels && !channels.length
 					? <Tile textStyle='p1' elevation='0' textColor='info' style={{ textAlign: 'center' }}>
 						{t('No_data_found')}

app/ui/client/views/app/components/Directory/UserTab.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { Box, Margins, Table, Flex, Avatar } from '@rocket.chat/fuselage';
+import { Box, Table, Flex, Avatar } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
 import { useEndpointData } from '../../../../../../../ee/app/engagement-dashboard/client/hooks/useEndpointData';
@@ -34,11 +34,9 @@ export function UserTab({
 		}
 		setSort([id, 'asc']);
 	};
-	const bioStyle = useMemo(() => ({ ...style, width: '200px' }), [mediaQuery]);
 
 	const header = useMemo(() => [
 		<Th key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name'>{t('Name')}</Th>,
-		<Th key={'bio'} direction={sort[1]} active={sort[0] === 'bio'} onClick={onHeaderClick} sort='bio' style={bioStyle}>{t('Bio')}</Th>,
 		mediaQuery && canViewFullOtherUserInfo && <Th key={'email'} direction={sort[1]} active={sort[0] === 'email'} onClick={onHeaderClick} sort='email' style={{ width: '200px' }} >{t('Email')}</Th>,
 		federation && <Th key={'origin'} direction={sort[1]} active={sort[0] === 'origin'} onClick={onHeaderClick} sort='origin' style={{ width: '200px' }} >{t('Domain')}</Th>,
 		mediaQuery && <Th key={'createdAt'} direction={sort[1]} active={sort[0] === 'createdAt'} onClick={onHeaderClick} sort='createdAt' style={{ width: '200px' }}>{t('Joined_at')}</Th>,
@@ -64,22 +62,15 @@ export function UserTab({
 					<Flex.Item>
 						<Avatar size='x40' title={username} url={username} />
 					</Flex.Item>
-					<Margins inline='x8'>
-						<Flex.Item grow={1}>
-							<Box style={style}>
-								<Box textStyle='p2' style={style}>{name || username}</Box>
-								<Box textStyle='p1' textColor='hint' style={style}>{name && username}</Box>
-							</Box>
-						</Flex.Item>
-					</Margins>
+					<Box style={style} grow={1} mi='x8'>
+						<Box display='flex'>
+							<Box textStyle='p2' style={style} textColor='default'>{name || username}</Box> <Box mi='x4'/> <Box textStyle='p1' textColor='hint' style={style}>{username}</Box>
+						</Box>
+						<Box textStyle='p1' textColor='hint' style={style}> {bio} </Box>
+					</Box>
 				</Box>
 			</Flex.Container>
 		</Table.Cell>
-		<Table.Cell textStyle='p1' textColor='hint' style={ bioStyle }>
-			<Box is='div' style={ style }>
-				{bio}
-			</Box>
-		</Table.Cell>
 		{mediaQuery && canViewFullOtherUserInfo
 			&& <Table.Cell style={style} >
 				{emails && emails[0].address}

server/methods/browseChannels.js

@@ -85,6 +85,7 @@ Meteor.methods({
 					...sort,
 				},
 				fields: {
+					t: 1,
 					description: 1,
 					topic: 1,
 					name: 1,
@@ -95,6 +96,7 @@ Meteor.methods({
 					default: 1,
 					featured: 1,
 					usersCount: 1,
+					prid: 1,
 				},
 			});
 
@@ -114,8 +116,6 @@ Meteor.methods({
 			return;
 		}
 
-		const exceptions = [user.username];
-
 		const forcedSearchFields = workspace === 'all' && ['username', 'name', 'emails.address'];
 
 		const options = {
@@ -133,11 +133,11 @@ Meteor.methods({
 
 		let result;
 		if (workspace === 'all') {
-			result = Users.findByActiveUsersExcept(text, exceptions, options, forcedSearchFields);
+			result = Users.findByActiveUsersExcept(text, [], options, forcedSearchFields);
 		} else if (workspace === 'external') {
-			result = Users.findByActiveExternalUsersExcept(text, exceptions, options, forcedSearchFields, getFederationDomain());
+			result = Users.findByActiveExternalUsersExcept(text, [], options, forcedSearchFields, getFederationDomain());
 		} else {
-			result = Users.findByActiveLocalUsersExcept(text, exceptions, options, forcedSearchFields, getFederationDomain());
+			result = Users.findByActiveLocalUsersExcept(text, [], options, forcedSearchFields, getFederationDomain());
 		}
 
 		const total = result.count(); // count ignores the `skip` and `limit` options