[IMPROVE] Rewrite contextualbar RoomMembers - AddUsers as React Compo…

…nent (#19803)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>

app/ui-flextab/client/index.js

@@ -1,8 +1,6 @@
 import './flexTabBar.html';
-import './tabs/inviteUsers.html';
 import './tabs/membersList.html';
 import './tabs/uploadedFilesList.html';
 import './flexTabBar';
-import './tabs/inviteUsers';
 import './tabs/membersList';
 import './tabs/uploadedFilesList';

app/ui-flextab/client/tabs/membersList.js

@@ -157,7 +157,7 @@ Template.membersList.helpers({
 
 Template.membersList.events({
 	'click .js-add'(e, instance) {
-		instance.tabBar.setTemplate('inviteUsers');
+		instance.innerTab.set('AddUsers');
 	},
 	'click .js-invite'(e, instance) {
 		instance.innerTab.set('InviteUsers');

client/components/AutoComplete.stories.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import AutoComplete from './AutoComplete';
+import { UserAutoComplete } from './AutoComplete';
 
 export default {
 	title: 'components/AutoComplete',
-	component: AutoComplete,
+	component: UserAutoComplete,
 };
 
-export const Example = () => <AutoComplete/>;
+export const Example = () => <UserAutoComplete/>;

client/views/room/adapters.js

@@ -38,6 +38,10 @@ createTemplateForComponent('EditInvite', () => import('./contextualBar/RoomMembe
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });
 
+createTemplateForComponent('AddUsers', () => import('./contextualBar/RoomMembers/AddUsers'), {
+	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
+});
+
 createTemplateForComponent('OTR', () => import('./contextualBar/OTR'), {
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });

client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Field, Button } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import UserAutoCompleteMultiple from '../../../../../../ee/client/audit/UserAutoCompleteMultiple';
+import VerticalBar from '../../../../../components/VerticalBar';
+import { useTranslation } from '../../../../../contexts/TranslationContext';
+import { useForm } from '../../../../../hooks/useForm';
+import { useMethod } from '../../../../../contexts/ServerContext';
+import { useToastMessageDispatch } from '../../../../../contexts/ToastMessagesContext';
+
+export const AddUsers = ({
+	onClickClose,
+	onClickBack,
+	onClickSave,
+	value,
+	onChange,
+	errors,
+}) => {
+	const t = useTranslation();
+
+	return (
+		<>
+			<VerticalBar.Header>
+				{onClickBack && <VerticalBar.Back onClick={onClickBack} />}
+				<VerticalBar.Text>{t('Add_users')}</VerticalBar.Text>
+				{onClickClose && <VerticalBar.Close onClick={onClickClose} />}
+			</VerticalBar.Header>
+			<VerticalBar.ScrollableContent>
+				<Field >
+					<Field.Label flexGrow={0}>{t('Choose_users')}</Field.Label>
+					<UserAutoCompleteMultiple errors={errors.users} value={value} onChange={onChange} placeholder={t('Choose_users')} />
+					{errors.users && <Field.Error>
+						{errors.users}
+					</Field.Error>}
+				</Field>
+			</VerticalBar.ScrollableContent>
+			<VerticalBar.Footer>
+				<Button primary disabled={!value || value.length === 0} onClick={onClickSave}>{t('Add_users')}</Button>
+			</VerticalBar.Footer>
+		</>
+	);
+};
+
+export default ({
+	rid,
+	tabBar,
+	onClickBack,
+}) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const [errors, setErrors] = useState({});
+
+	const onClickClose = useMutableCallback(() => tabBar && tabBar.close());
+	const saveAction = useMethod('addUsersToRoom');
+
+	const { values, handlers } = useForm({ users: [] });
+	const { users } = values;
+	const { handleUsers } = handlers;
+
+	const onChangeUsers = useMutableCallback((value, action) => {
+		if (!action) {
+			if (users.includes(value)) {
+				return;
+			}
+			return handleUsers([...users, value]);
+		}
+		handleUsers(users.filter((current) => current !== value));
+	});
+
+	const handleSave = useMutableCallback(async () => {
+		if (users.length < 1) {
+			return setErrors({
+				users: t('Select_at_least_one_user'),
+			});
+		}
+
+		try {
+			await saveAction({ rid, users });
+			dispatchToastMessage({ type: 'success', message: t('Users_added') });
+			onClickBack();
+		} catch (e) {
+			dispatchToastMessage({ type: 'error', message: e });
+		}
+
+		setErrors({});
+	});
+
+	return (
+		<AddUsers
+			onClickClose={onClickClose}
+			onClickBack={onClickBack}
+			onClickSave={handleSave}
+			value={users}
+			onChange={onChangeUsers}
+			errors={errors}
+		/>
+	);
+};

client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { AddUsers } from './AddUsers';
+import VerticalBar from '../../../../../components/VerticalBar';
+
+export default {
+	title: 'components/RoomMembers/AddUsers',
+	component: AddUsers,
+};
+
+export const Default = () => <VerticalBar>
+	<AddUsers
+		onClickBack={alert}
+		onClickClose={alert}
+		onClickSave={alert}
+		value={[]}
+		errors={{}}
+	/>
+</VerticalBar>;
+
+export const Error = () => <VerticalBar>
+	<AddUsers
+		onClickBack={alert}
+		onClickClose={alert}
+		onClickSave={alert}
+		value={[]}
+		errors={{ users: 'With Test Error' }}
+	/>
+</VerticalBar>;

client/views/room/contextualBar/RoomMembers/AddUsers/index.js

@@ -0,0 +1,3 @@
+import AddUsers from './AddUsers';
+
+export default AddUsers;

client/views/room/contextualBar/RoomMembers/EditInvite/EditInvite.js

@@ -72,7 +72,6 @@ export default ({
 	captionText,
 	days: _days,
 	maxUses: _maxUses,
-
 }) => {
 	const onClickClose = useMutableCallback(() => tabBar && tabBar.close());
 

ee/client/audit/UserAutoCompleteMultiple.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { AutoComplete, Option, Options, Chip } from '@rocket.chat/fuselage';
+import { AutoComplete, Box, Option, Options, Chip } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import UserAvatar from '../../../client/components/avatar/UserAvatar';
@@ -18,11 +18,12 @@ const UserAutoCompleteMultiple = React.memo((props) => {
 		e.preventDefault();
 		props.onChange(e.currentTarget.value, 'remove');
 	});
+
 	return <AutoComplete
 		{...props}
 		filter={filter}
 		setFilter={setFilter}
-		renderSelected={({ value: selected }) => selected?.map((value) => <Chip key={value} {...props} height='x20' value={value} onClick={onClickRemove} mie='x4'><UserAvatar size='x20' username={value} />{value}</Chip>)}
+		renderSelected={({ value: selected }) => selected?.map((value) => <Chip key={value} {...props} height='x20' value={value} onClick={onClickRemove} mie='x4'><UserAvatar size='x20' username={value} /><Box is='span' margin='none' mis='x4'>{value}</Box></Chip>)}
 		renderItem={({ value, ...props }) => <Option key={value} {...props} avatar={<Avatar value={value} />} />}
 		options={ options }
 	/>;