revert GenericTable

client/components/GenericModal.tsx

@@ -4,15 +4,10 @@ import React, { FC } from 'react';
 import { useTranslation } from '../contexts/TranslationContext';
 import { withDoNotAskAgain, RequiredModalProps } from './withDoNotAskAgain';
 
-enum Variant {
-	Danger = 'danger',
-	Warning = 'warning',
-	Info = 'info',
-	Success = 'success'
-}
+type VariantType = 'danger' | 'warning' | 'info' | 'success';
 
 type GenericModalProps = RequiredModalProps & {
-	variant?: Variant;
+	variant?: VariantType;
 	cancelText?: string;
 	confirmText?: string;
 	title?: string;
@@ -29,19 +24,19 @@ const iconMap = {
 	success: 'check',
 };
 
-const getButtonProps = (variant: Variant): ButtonProps => {
+const getButtonProps = (variant: VariantType): ButtonProps => {
 	switch (variant) {
-		case Variant.Danger:
+		case 'danger':
 			return { primary: true, danger: true };
-		case Variant.Warning:
+		case 'warning':
 			return { primary: true };
 		default:
 			return { };
 	}
 };
 
 const GenericModal: FC<GenericModalProps> = ({
-	variant = Variant.Info,
+	variant = 'info',
 	children,
 	cancelText,
 	confirmText,

client/components/GenericTable/index.js

@@ -18,7 +18,6 @@ const GenericTable = ({
 	results,
 	setParams = () => { },
 	total,
-	pagination = true,
 	...props
 }, ref) => {
 	const t = useTranslation();
@@ -70,7 +69,7 @@ const GenericTable = ({
 						</Table>
 					</ScrollableContentWrapper>
 				</Box>
-				{pagination && <Pagination
+				<Pagination
 					divider
 					current={current}
 					itemsPerPage={itemsPerPage}
@@ -79,7 +78,7 @@ const GenericTable = ({
 					count={total || 0}
 					onSetItemsPerPage={setItemsPerPage}
 					onSetCurrent={setCurrent}
-				/>}
+				/>
 			</>
 		}
 	</>;

client/components/Message/Attachments/DefaultAttachment.tsx

@@ -57,7 +57,15 @@ export const DefaultAttachment: FC<DefaultAttachmentProps> = (attachment) => {
 			{!collapsed && <>
 				{attachment.text && <Attachment.Text>{applyMardownFor('text', attachment.text)}</Attachment.Text>}
 				{/* {attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />} */}
-				{attachment.fields && <FieldsAttachment fields={attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText variant='inline' content={value as string} /> }))} />}
+				{attachment.fields && <FieldsAttachment fields={attachment.fields.map(({ value, ...rest }) => {
+					const cleanValue = (value as string).replace(/(.*)/g, (line: string) => {
+						if (line.trim() === '') {
+							return `${ line }  <br/>`;
+						}
+						return `${ line }  `;
+					});
+					return { ...rest, value: <MarkdownText variant='inline' content={cleanValue} /> };
+				})} />}
 				{attachment.image_url && <Attachment.Image {...attachment.image_dimensions as any} src={attachment.image_url} />}
 				{/* DEPRECATED */}
 				{isActionAttachment(attachment) && <ActionAttachment {...attachment} />}

client/sidebar/header/actions/CreateRoom.js

@@ -1,106 +1,26 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Sidebar } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
-import { popover, modal } from '../../../../app/ui-utils';
-import { useAtLeastOnePermission, usePermission } from '../../../contexts/AuthorizationContext';
-import { useSetting } from '../../../contexts/SettingsContext';
-import { useTranslation } from '../../../contexts/TranslationContext';
-import { useSetModal } from '../../../contexts/ModalContext';
-import CreateChannel from '../CreateChannel';
+import { createTemplateForComponent } from '../../../reactAdapters';
+import { popover } from '../../../../app/ui-utils';
+import { useAtLeastOnePermission } from '../../../contexts/AuthorizationContext';
 
 const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user'];
 
-const CREATE_CHANNEL_PERMISSIONS = ['create-c', 'create-p'];
+const CreateRoomList = createTemplateForComponent('CreateRoomList', () => import('./CreateRoomList'));
 
-const CREATE_DISCUSSION_PERMISSIONS = ['start-discussion', 'start-discussion-other-user'];
-
-const openPopover = (e, items) => popover.open({
-	columns: [
-		{
-			groups: [
-				{
-					items,
-				},
-			],
-		},
-	],
+const config = (e) => ({
+	template: CreateRoomList,
+	data: {
+		options: [],
+	},
 	currentTarget: e.currentTarget,
 	offsetVertical: e.currentTarget.clientHeight + 10,
 });
 
-const useReactModal = (setModal, Component) => useMutableCallback((e) => {
-	e.preventDefault();
-
-	const handleClose = () => {
-		setModal(null);
-	};
-
-	setModal(() => <Component
-		onClose={handleClose}
-	/>);
-});
-
-const useAction = (title, content) => useMutableCallback((e) => {
-	e.preventDefault();
-	modal.open({
-		title,
-		content,
-		data: {
-			onCreate() {
-				modal.close();
-			},
-		},
-		modifier: 'modal',
-		showConfirmButton: false,
-		showCancelButton: false,
-		confirmOnEnter: false,
-	});
-});
-
 const CreateRoom = (props) => {
-	const t = useTranslation();
-	const setModal = useSetModal();
-
 	const showCreate = useAtLeastOnePermission(CREATE_ROOM_PERMISSIONS);
-
-	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
-	const canCreateDirectMessages = usePermission('create-d');
-	const canCreateDiscussion = useAtLeastOnePermission(CREATE_DISCUSSION_PERMISSIONS);
-
-	const createChannel = useReactModal(setModal, CreateChannel);
-	const createDirectMessage = useAction(t('Direct_Messages'), 'CreateDirectMessage');
-	const createDiscussion = useAction(t('Discussion_title'), 'CreateDiscussion');
-
-	const discussionEnabled = useSetting('Discussion_enabled');
-
-	const items = useMemo(() => [
-		canCreateChannel && {
-			icon: 'hashtag',
-			name: t('Channel'),
-			qa: 'sidebar-create-channel',
-			action: createChannel,
-		},
-		canCreateDirectMessages && {
-			icon: 'team',
-			name: t('Direct_Messages'),
-			qa: 'sidebar-create-dm',
-			action: createDirectMessage,
-		},
-		discussionEnabled && canCreateDiscussion && {
-			icon: 'discussion',
-			name: t('Discussion'),
-			qa: 'sidebar-create-discussion',
-			action: createDiscussion,
-		},
-	].filter(Boolean), [canCreateChannel, canCreateDirectMessages, canCreateDiscussion, createChannel, createDirectMessage, createDiscussion, discussionEnabled, t]);
-
-	const onClick = useMutableCallback((e) => {
-		if (items.length === 1) {
-			return items[0].action(e);
-		}
-		openPopover(e, items);
-	});
+	const onClick = (e) => { popover.open(config(e)); };
 
 	return showCreate ? <Sidebar.TopBar.Action {...props} icon='edit-rounded' onClick={onClick}/> : null;
 };

client/sidebar/header/actions/CreateRoomList.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Box, Margins } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+
+import { modal } from '../../../../app/ui-utils';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useAtLeastOnePermission, usePermission } from '../../../contexts/AuthorizationContext';
+import { useSetting } from '../../../contexts/SettingsContext';
+import { useSetModal } from '../../../contexts/ModalContext';
+import CreateChannel from '../CreateChannel';
+import CreateRoomListItem from './CreateRoomListItem';
+
+const CREATE_CHANNEL_PERMISSIONS = ['create-c', 'create-p'];
+
+const CREATE_DISCUSSION_PERMISSIONS = ['start-discussion', 'start-discussion-other-user'];
+
+const style = {
+	textTransform: 'uppercase',
+};
+
+const useAction = (title, content) => useMutableCallback((e) => {
+	e.preventDefault();
+	modal.open({
+		title,
+		content,
+		data: {
+			onCreate() {
+				modal.close();
+			},
+		},
+		modifier: 'modal',
+		showConfirmButton: false,
+		showCancelButton: false,
+		confirmOnEnter: false,
+	});
+});
+
+const useReactModal = (setModal, Component) => useMutableCallback((e) => {
+	e.preventDefault();
+
+	const handleClose = () => {
+		setModal(null);
+	};
+
+	setModal(() => <Component
+		onClose={handleClose}
+	/>);
+});
+
+function CreateRoomList() {
+	const t = useTranslation();
+	const setModal = useSetModal();
+
+	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
+	const canCreateDirectMessages = usePermission('create-d');
+	const canCreateDiscussion = useAtLeastOnePermission(CREATE_DISCUSSION_PERMISSIONS);
+
+	const createChannel = useReactModal(setModal, CreateChannel);
+	const createDirectMessage = useAction(t('Direct_Messages'), 'CreateDirectMessage');
+	const createDiscussion = useAction(t('Discussion_title'), 'CreateDiscussion');
+
+	const discussionEnabled = useSetting('Discussion_enabled');
+
+	return <div className='rc-popover__column'>
+		<Margins block='x8'>
+			<Box is='p' style={style} fontScale='micro'>{t('Create_new')}</Box>
+		</Margins>
+		<ul className='rc-popover__list'>
+			<Margins block='x8'>
+				{canCreateChannel && <CreateRoomListItem icon={'hashtag'} text={t('Channel')} action={createChannel} />}
+				{canCreateDirectMessages && <CreateRoomListItem icon={'baloon-arrow-left'} text={t('Direct_Messages')} action={createDirectMessage} />}
+				{discussionEnabled && canCreateDiscussion && <CreateRoomListItem icon={'discussion'} text={t('Discussion')} action={createDiscussion} />}
+			</Margins>
+		</ul>
+	</div>;
+}
+
+export default CreateRoomList;

client/sidebar/header/actions/CreateRoomListItem.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Icon, Box, Flex, Margins } from '@rocket.chat/fuselage';
+
+export default function CreateRoomListItem({ text, icon, action }) {
+	return <Flex.Container>
+		<Box is='li' onClick={action}>
+			<Flex.Container>
+				<Box is='label' className='rc-popover__label' style={{ width: '100%' }}>
+					<Flex.Item grow={0}>
+						<Box className='rc-popover__icon'><Icon name={icon} size={20}/></Box>
+					</Flex.Item>
+					<Margins inline='x8'>
+						<Flex.Item grow={1}>
+							<Box is='span' fontScale='p2'>{text}</Box>
+						</Flex.Item>
+					</Margins>
+				</Box>
+			</Flex.Container>
+		</Box>
+	</Flex.Container>;
+}

client/views/room/contextualBar/Call/Jitsi/CallJitsi.js

@@ -105,12 +105,13 @@ const CallJitsWithData = ({ rid }) => {
 		}
 	}, [connected, handleClose]);
 
+	const rname = useHashName ? uniqueID + rid : encodeURIComponent(room.t === 'd' ? room.usernames.join(' x ') : room.name);
+
 	const jitsi = useMemo(() => {
 		if (isEnabledTokenAuth && ! accessToken) {
 			return;
 		}
 
-		const rname = useHashName ? uniqueID + rid : encodeURIComponent(room.t === 'd' ? room.usernames.join(' x ') : room.name);
 		const jitsiRoomName = prefix + rname + sufix;
 
 		return new JitsiBridge({
@@ -122,7 +123,7 @@ const CallJitsWithData = ({ rid }) => {
 			desktopSharingChromeExtId,
 			name: user.name || user.username,
 		}, HEARTBEAT);
-	}, [accessToken, desktopSharingChromeExtId, domain, isEnabledTokenAuth, openNewWindow, prefix, rid, room.name, room.t, room.usernames, ssl, sufix, uniqueID, useHashName, user.name, user.username]);
+	}, [accessToken, desktopSharingChromeExtId, domain, isEnabledTokenAuth, openNewWindow, prefix, rname, ssl, sufix, user.name, user.username]);
 
 	const testAndHandleTimeout = useMutableCallback(() => {
 		if (new Date() - new Date(room.jitsiTimeout) > TIMEOUT) {
@@ -152,6 +153,9 @@ const CallJitsWithData = ({ rid }) => {
 
 	const handleYes = useMutableCallback(() => {
 		setAccepted(true);
+		if (openNewWindow) {
+			handleClose();
+		}
 	});
 
 	useLayoutEffect(() => {