[IMPROVE] Better new channel popover

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>;
+}