From 5d9dba09b783b862df7f5e1db7fcd0add396c8f3 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Thu, 18 Mar 2021 17:01:33 -0300
Subject: [PATCH 01/24] team channels button on header

---
 client/main.js                                  |  1 +
 client/views/room/lib/Toolbox/index.tsx         |  2 +-
 client/views/room/providers/ToolboxProvider.tsx |  3 ++-
 .../views/teams/contextualBar/TeamChannels.tsx  |  5 +++++
 client/views/teams/contextualBar/index.ts       | 17 +++++++++++++++++
 client/views/teams/index.js                     |  1 +
 definition/IRoom.ts                             |  1 +
 7 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 client/views/teams/contextualBar/TeamChannels.tsx
 create mode 100644 client/views/teams/contextualBar/index.ts

diff --git a/client/main.js b/client/main.js
index 0557c789eba6..9ee80d00c408 100644
--- a/client/main.js
+++ b/client/main.js
@@ -21,4 +21,5 @@ import './startup';
 import './views/admin';
 import './views/login';
 import './views/room/adapters';
+import './views/teams';
 import './adapters';
diff --git a/client/views/room/lib/Toolbox/index.tsx b/client/views/room/lib/Toolbox/index.tsx
index 62ce552917ad..abdd6072e286 100644
--- a/client/views/room/lib/Toolbox/index.tsx
+++ b/client/views/room/lib/Toolbox/index.tsx
@@ -28,7 +28,7 @@ export type ToolboxActionConfig = {
 	full?: true;
 	renderOption?: OptionRenderer;
 	order?: number;
-	groups: Array<'group' | 'channel' | 'live' | 'direct' | 'direct_multiple'>;
+	groups: Array<'group' | 'channel' | 'live' | 'direct' | 'direct_multiple' | 'team'>;
 	hotkey?: string;
 	action?: (e: MouseEvent<HTMLElement>) => void;
 	template?: string | FC | LazyExoticComponent<FC<{ rid: string; tabBar: any }>>;
diff --git a/client/views/room/providers/ToolboxProvider.tsx b/client/views/room/providers/ToolboxProvider.tsx
index a9f246f24c26..904e84406d1d 100644
--- a/client/views/room/providers/ToolboxProvider.tsx
+++ b/client/views/room/providers/ToolboxProvider.tsx
@@ -21,7 +21,8 @@ const groupsDict = {
 const VirtualAction = React.memo(({ handleChange, room, action, id }: { id: string; action: ToolboxAction; room: IRoom; handleChange: Function}): null => {
 	const config = typeof action === 'function' ? action({ room }) : action;
 
-	const group = groupsDict[room.t];
+	const group = room.teamMain ? 'team' : groupsDict[room.t];
+
 	const visible = config && (!config.groups || (groupsDict[room.t] && config.groups.includes(group as any)));
 
 	useLayoutEffect(() => {
diff --git a/client/views/teams/contextualBar/TeamChannels.tsx b/client/views/teams/contextualBar/TeamChannels.tsx
new file mode 100644
index 000000000000..74ca9d696fa1
--- /dev/null
+++ b/client/views/teams/contextualBar/TeamChannels.tsx
@@ -0,0 +1,5 @@
+import React, { memo } from 'react';
+
+export const TeamChannel = () => <p></p>;
+
+export default memo(TeamChannel);
diff --git a/client/views/teams/contextualBar/index.ts b/client/views/teams/contextualBar/index.ts
new file mode 100644
index 000000000000..d59b1a88d30f
--- /dev/null
+++ b/client/views/teams/contextualBar/index.ts
@@ -0,0 +1,17 @@
+import { lazy, LazyExoticComponent, FC, useMemo } from 'react';
+
+import { addAction } from '../../room/lib/Toolbox';
+
+addAction('team-channels', () => {
+	const t = true;
+	return useMemo(() => (t ? {
+		groups: ['team'],
+		id: 'team-channels',
+		anonymous: true,
+		title: 'Team-Channels',
+		icon: 'hash',
+		template: lazy(() => import('./TeamChannels')) as LazyExoticComponent<FC>,
+		full: true,
+		order: 8,
+	} : null), [t]);
+});
diff --git a/client/views/teams/index.js b/client/views/teams/index.js
index e69de29bb2d1..e1e22a859ebb 100644
--- a/client/views/teams/index.js
+++ b/client/views/teams/index.js
@@ -0,0 +1 @@
+import './contextualBar';
diff --git a/definition/IRoom.ts b/definition/IRoom.ts
index 7955a7eda6be..733b803daead 100644
--- a/definition/IRoom.ts
+++ b/definition/IRoom.ts
@@ -16,6 +16,7 @@ export interface IRoom extends IRocketChatRecord {
 	broadcast?: true;
 	featured?: true;
 	encrypted?: boolean;
+	teamMain?: boolean;
 
 	u: Pick<IUser, '_id' | 'username' | 'name'>;
 

From 8007011a33f82cd7856e3afc7ebe5514991d59e0 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Sat, 20 Mar 2021 00:16:11 -0300
Subject: [PATCH 02/24] TeamChannels component

---
 .../views/room/providers/ToolboxProvider.tsx  |  12 +-
 .../teams/contextualBar/TeamChannelItem.js    |  51 ++++++
 .../views/teams/contextualBar/TeamChannels.js | 163 ++++++++++++++++++
 .../teams/contextualBar/TeamChannels.tsx      |   5 -
 packages/rocketchat-i18n/i18n/en.i18n.json    |   3 +
 5 files changed, 228 insertions(+), 6 deletions(-)
 create mode 100644 client/views/teams/contextualBar/TeamChannelItem.js
 create mode 100644 client/views/teams/contextualBar/TeamChannels.js
 delete mode 100644 client/views/teams/contextualBar/TeamChannels.tsx

diff --git a/client/views/room/providers/ToolboxProvider.tsx b/client/views/room/providers/ToolboxProvider.tsx
index 904e84406d1d..1d8f66a84a01 100644
--- a/client/views/room/providers/ToolboxProvider.tsx
+++ b/client/views/room/providers/ToolboxProvider.tsx
@@ -17,11 +17,21 @@ const groupsDict = {
 	c: 'channel',
 };
 
+const getGroup = (room: IRoom): string => {
+	console.log(room.t);
+
+	return 'team';
+	// if (room.teamMain) {
+	// 	return 'team';
+	// }
+
+	// return groupsDict[room.t];
+};
 
 const VirtualAction = React.memo(({ handleChange, room, action, id }: { id: string; action: ToolboxAction; room: IRoom; handleChange: Function}): null => {
 	const config = typeof action === 'function' ? action({ room }) : action;
 
-	const group = room.teamMain ? 'team' : groupsDict[room.t];
+	const group = getGroup(room);
 
 	const visible = config && (!config.groups || (groupsDict[room.t] && config.groups.includes(group as any)));
 
diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
new file mode 100644
index 000000000000..cc75738dc318
--- /dev/null
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { ActionButton, Icon, /* Menu,*/ Option } from '@rocket.chat/fuselage';
+import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
+
+// import { useUserInfoActions, useUserInfoActionsSpread } from '../../../hooks/useUserInfoActions';
+import RoomAvatar from '../../../components/avatar/RoomAvatar';
+
+// const UserActions = ({ room }) => {
+// 	const { menu: menuOptions } = useUserInfoActionsSpread(useUserInfoActions({ _id, username }, rid), 0);
+// 	if (!menuOptions) {
+// 		return null;
+// 	}
+// 	return <Menu
+// 		flexShrink={0}
+// 		key='menu'
+// 		tiny
+// 		renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
+// 		options={menuOptions}
+// 	/>;
+// };
+
+export const TeamChannelItem = ({ room }) => {
+	const [showButton, setShowButton] = useState();
+
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: setShowButton };
+
+	return (
+		<Option
+			id={room._id}
+			{ ...handleMenuEvent }
+		>
+			<Option.Avatar>
+				<RoomAvatar room={room} size='x28' />
+			</Option.Avatar>
+			<Option.Column>{room.t === 'c' ? <Icon name='hash' size='x15'/> : <Icon name='hashtag-lock' size='x15'/>}</Option.Column>
+			<Option.Content>
+				<Option.Description>({room.name})</Option.Description>
+			</Option.Content>
+			<Option.Menu>
+				{showButton ? /* <UserActions username={username} rid={rid} _id={_id} /> */ null : <ActionButton
+					ghost
+					tiny
+					icon='kebab'
+				/>}
+			</Option.Menu>
+		</Option>
+	);
+};
+
+TeamChannelItem.Skeleton = Option.Skeleton;
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
new file mode 100644
index 000000000000..5d88945fc377
--- /dev/null
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -0,0 +1,163 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Box, Icon, TextInput, Margins, Select, Throbber, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import { Virtuoso } from 'react-virtuoso';
+import { useMutableCallback, useLocalStorage, useAutoFocus } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useEndpoint } from '../../../contexts/ServerContext';
+import { useSetModal } from '../../../contexts/ModalContext';
+import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
+import { useRecordList } from '../../../hooks/lists/useRecordList';
+import { RecordList } from '../../../lib/lists/RecordList.ts';
+import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import VerticalBar from '../../../components/VerticalBar';
+import AddExistingModal from '../modals/AddExistingModal';
+import { TeamChannelItems } from './TeamChannelItem';
+
+const Row = memo(({ room }) => {
+	if (!room) {
+		return <TeamChannels.Option.Skeleton />;
+	}
+
+	return <TeamChannels.Option
+		room={room}
+	/>;
+});
+
+export const TeamChannels = ({
+	loading,
+	channels = [],
+	text,
+	type,
+	setText,
+	setType,
+	onClickClose,
+	onClickAddExisting,
+	onClickCreateNew,
+	total,
+	loadMoreItems,
+}) => {
+	const t = useTranslation();
+	const inputRef = useAutoFocus(true);
+
+	const options = useMemo(() => [
+		['all', t('All')],
+		['autoJoin', t('Auto-join')],
+	], [t]);
+
+	const lm = useMutableCallback((start) => loadMoreItems(start + 1, Math.min(50, start + 1 - channels.length)));
+
+	return (
+		<>
+			<VerticalBar.Header>
+				<VerticalBar.Icon name='hash'/>
+				<VerticalBar.Text>{t('Channels')}</VerticalBar.Text>
+				{ onClickClose && <VerticalBar.Close onClick={onClickClose} /> }
+			</VerticalBar.Header>
+
+			<VerticalBar.Content p='x12'>
+				<Box display='flex' flexDirection='row' p='x12' flexShrink={0}>
+					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
+						<Margins inline='x4'>
+							<TextInput placeholder={t('Search')} value={text} ref={inputRef} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
+							<Select
+								flexGrow={0}
+								width='110px'
+								onChange={setType}
+								value={type}
+								options={options} />
+						</Margins>
+					</Box>
+				</Box>
+
+				{loading && <Box pi='x24' pb='x12'><Throbber size='x12' /></Box>}
+				{!loading && channels.length <= 0 && <Box pi='x24' pb='x12'>{t('No_results_found')}</Box>}
+
+				<Box w='full' h='full' overflow='hidden' flexShrink={1}>
+					{!loading && channels && channels.length > 0 && <Virtuoso
+						style={{ height: '100%', width: '100%' }}
+						totalCount={total}
+						endReached={lm}
+						overscan={50}
+						data={channels}
+						components={{ Scroller: ScrollableContentWrapper }}
+						itemContent={(index, data) => <Row
+							room={data}
+						/>}
+					/>}
+				</Box>
+			</VerticalBar.Content>
+
+			<VerticalBar.Footer>
+				<ButtonGroup stretch>
+					{ onClickAddExisting && <Button onClick={onClickAddExisting} width='50%'>{t('Team_Add_existing')}</Button> }
+					{ onClickCreateNew && <Button onClick={onClickCreateNew} width='50%' primary>{t('Create_new')}</Button> }
+				</ButtonGroup>
+			</VerticalBar.Footer>
+		</>
+	);
+};
+
+TeamChannels.Option = TeamChannelItems;
+
+const useReactModal = (Component) => {
+	const setModal = useSetModal();
+
+	return useMutableCallback((e) => {
+		e.preventDefault();
+
+		const handleClose = () => {
+			setModal(null);
+		};
+
+		setModal(() => <Component
+			onClose={handleClose}
+		/>);
+	});
+};
+
+export default ({ rid, tabBar }) => {
+	const [type, setType] = useLocalStorage('channels-list-type', 'all');
+	const [text, setText] = useState('');
+	const [roomList] = useState(() => new RecordList());
+
+	const roomInfoEndpoint = useEndpoint('GET', 'rooms.info');
+	const roomListEndpoint = useEndpoint('GET', 'teams.listRooms');
+
+	const fetchData = useCallback(async () => {
+		const { room: { teamId } } = await roomInfoEndpoint({ roomId: rid });
+		await roomListEndpoint({ teamId });
+	}, [rid, roomInfoEndpoint, roomListEndpoint]);
+
+	const { loadMoreItems } = useScrollableRecordList(
+		roomList,
+		fetchData,
+	);
+	const { phase, items, itemCount } = useRecordList(roomList);
+
+	const handleTextChange = useCallback((event) => {
+		setText(event.currentTarget.value);
+	}, []);
+
+	const addExisting = useReactModal(AddExistingModal);
+
+	const createNew = useMutableCallback(() => {
+
+	});
+
+	return (
+		<TeamChannels
+			loading={phase === 'loading'}
+			type={type}
+			text={text}
+			setType={setType}
+			setText={handleTextChange}
+			channels={items}
+			total={itemCount}
+			onClickClose={tabBar.close}
+			onClickAddExisting={addExisting}
+			onClickCreateNew={createNew}
+			loadMoreItems={loadMoreItems}
+		/>
+	);
+};
diff --git a/client/views/teams/contextualBar/TeamChannels.tsx b/client/views/teams/contextualBar/TeamChannels.tsx
deleted file mode 100644
index 74ca9d696fa1..000000000000
--- a/client/views/teams/contextualBar/TeamChannels.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React, { memo } from 'react';
-
-export const TeamChannel = () => <p></p>;
-
-export default memo(TeamChannel);
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 958c35116962..ac1d101ceeae 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3705,6 +3705,9 @@
   "TargetRoom": "Target Room",
   "TargetRoom_Description": "The room where messages will be sent which are a result of this event being fired. Only one target room is allowed and it must exist.",
   "Team": "Team",
+  "Team_Auto-join": "Auto-join",
+  "Team_Add_existing": "Add Existing",
+  "Team_Add_existing_channels": "Add Existing Channels",
   "Teams_Errors_Already_exists": "The team `__name__` already exists.",
   "Teams_New_Title": "Create Team",
   "Teams_New_Name_Label": "Name",

From f2e8f1120b6ebd4ff303598c0d4976d65720dd67 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Sat, 20 Mar 2021 00:16:27 -0300
Subject: [PATCH 03/24] AddExistingModal

---
 .../AddExistingModal/AddExistingModal.js      | 64 +++++++++++++++
 .../modals/AddExistingModal/ChannelsInput.tsx | 82 +++++++++++++++++++
 .../teams/modals/AddExistingModal/index.ts    |  1 +
 3 files changed, 147 insertions(+)
 create mode 100644 client/views/teams/modals/AddExistingModal/AddExistingModal.js
 create mode 100644 client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
 create mode 100644 client/views/teams/modals/AddExistingModal/index.ts

diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.js b/client/views/teams/modals/AddExistingModal/AddExistingModal.js
new file mode 100644
index 000000000000..5949492498f1
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.js
@@ -0,0 +1,64 @@
+import React, { memo, useCallback } from 'react';
+import { Box, ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
+
+import { useForm } from '../../../../hooks/useForm';
+import { useTranslation } from '../../../../contexts/TranslationContext';
+// import { useEndpoint } from '../../../../contexts/ServerContext';
+import ChannelsInput from './ChannelsInput';
+
+const useExistingModalState = () => {
+	// const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
+
+	const { values, handlers, hasUnsavedChanges } = useForm({
+		channels: [],
+	});
+
+	const { channels } = values;
+	const { handleChannels } = handlers;
+
+	const onChangeChannels = useCallback((value, action) => {
+		if (!action) {
+			if (channels.includes(value)) {
+				return;
+			}
+			return handleChannels([...channels, value]);
+		}
+		handleChannels(channels.filter(({ _id }) => _id !== value));
+	}, [handleChannels, channels]);
+
+	const onAdd = useCallback(() => {
+		// addRoomEndpoint({
+
+		// });
+	}, []);
+
+	return { onAdd, channels, onChangeChannels, hasUnsavedChanges };
+};
+
+const AddExistingModal = ({ onClose }) => {
+	const t = useTranslation();
+	const { onAdd, channels, onChangeChannels, hasUnsavedChanges } = useExistingModalState();
+
+	const isAddButtonEnabled = hasUnsavedChanges;
+
+	return <Modal>
+		<Modal.Header>
+			<Modal.Title>{t('Team_Add_existing_channels')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content>
+			<Field mbe='x24'>
+				<Field.Label>{t('Teams_New_Add_members_Label')} <Box is='span' color='neutral-600'>({t('optional')})</Box></Field.Label>
+				<ChannelsInput value={channels} onChange={onChangeChannels} />
+			</Field>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onClose}>{t('Cancel')}</Button>
+				<Button disabled={!isAddButtonEnabled} onClick={onAdd} primary>{t('Add')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default memo(AddExistingModal);
diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
new file mode 100644
index 000000000000..73c3afdeeb1f
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -0,0 +1,82 @@
+import { AutoComplete, Box, Icon, Option, Options, Chip, AutoCompleteProps } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import React, { FC, memo, useCallback, useMemo, useState } from 'react';
+
+import { IRoom } from '../../../../../definition/IRoom';
+import RoomAvatar from '../../../../components/avatar/RoomAvatar';
+import { useEndpointData } from '../../../../hooks/useEndpointData';
+
+type ChannelsInputProps = {
+	value: unknown[];
+	onChange: (value: unknown, action: 'remove' | undefined) => void;
+};
+
+type UsersAutoCompleteEndpoint = {
+	params: {
+		selector: string;
+	};
+	value: {
+		items: IRoom[];
+	};
+};
+
+type AutoCompleteValueProps = {
+	_id: string;
+	name: string;
+	t: string;
+}
+
+const useChannelsAutoComplete = (term: string): AutoCompleteProps['options'] => {
+	const params = useMemo<UsersAutoCompleteEndpoint['params']>(() => ({
+		selector: JSON.stringify({ term }),
+	}), [term]);
+	const { value: data } = useEndpointData<UsersAutoCompleteEndpoint['value']>('rooms.autocomplete.channelAndPrivate', params);
+
+	return useMemo<AutoCompleteProps['options']>(() => {
+		if (!data) {
+			return [];
+		}
+
+		return data.items.map((room) => ({
+			label: room.name ?? '',
+			value: room ?? '',
+		})) || [];
+	}, [data]);
+};
+
+const ChannelsInput: FC<ChannelsInputProps> = ({ onChange, ...props }) => {
+	const [filter, setFilter] = useState('');
+	const options = useChannelsAutoComplete(useDebouncedValue(filter, 1000));
+
+	const onClickSelected = useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		onChange(e.currentTarget.value, 'remove');
+	}, [onChange]);
+
+	const renderSelected = useCallback<FC<{ value?: AutoCompleteValueProps[] }>>(
+		({ value: selected }) => <>
+			{selected?.map(({ _id, name, t }) => <Chip key={_id} {...props} height='x20' value={_id} onClick={onClickSelected} mie='x4'>
+				<Icon name={t === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
+				<Box is='span' margin='none' mis='x4'>{name}</Box>
+			</Chip>)}
+		</>, [onClickSelected, props],
+	);
+
+	const renderItem = useCallback<FC<{ value: string }>>(
+		({ value, ...props }) => <Option key={value} {...props} avatar={<RoomAvatar room={value} size={Options.AvatarSize} />} />, [],
+	);
+
+	return <AutoComplete
+		{...props}
+		filter={filter}
+		options={options}
+		renderSelected={renderSelected}
+		renderItem={renderItem}
+		setFilter={setFilter}
+		onChange={onChange}
+	/>;
+};
+
+export default memo(ChannelsInput);
diff --git a/client/views/teams/modals/AddExistingModal/index.ts b/client/views/teams/modals/AddExistingModal/index.ts
new file mode 100644
index 000000000000..3e17de58e8ae
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/index.ts
@@ -0,0 +1 @@
+export { default } from './AddExistingModal';

From 663db2bc441fa51a6db1cc282d2a66dc73f2da52 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Sat, 20 Mar 2021 01:11:49 -0300
Subject: [PATCH 04/24] TS refactoring AddExistingModal

---
 ...dExistingModal.js => AddExistingModal.tsx} | 25 +++++++++++++------
 .../modals/AddExistingModal/ChannelsInput.tsx |  8 +++---
 2 files changed, 22 insertions(+), 11 deletions(-)
 rename client/views/teams/modals/AddExistingModal/{AddExistingModal.js => AddExistingModal.tsx} (71%)

diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.js b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
similarity index 71%
rename from client/views/teams/modals/AddExistingModal/AddExistingModal.js
rename to client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index 5949492498f1..f8006f31e14d 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.js
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, FC, useCallback } from 'react';
 import { Box, ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
 
 import { useForm } from '../../../../hooks/useForm';
@@ -6,24 +6,35 @@ import { useTranslation } from '../../../../contexts/TranslationContext';
 // import { useEndpoint } from '../../../../contexts/ServerContext';
 import ChannelsInput from './ChannelsInput';
 
-const useExistingModalState = () => {
+type ExistingModalState = {
+	onAdd: any;
+	channels: any;
+	onChangeChannels: any;
+	hasUnsavedChanges: boolean;
+}
+
+type AddExistingModalProps = {
+	onClose: () => void;
+};
+
+const useExistingModalState = (): ExistingModalState => {
 	// const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
 
 	const { values, handlers, hasUnsavedChanges } = useForm({
 		channels: [],
 	});
 
-	const { channels } = values;
+	const { channels } = values as {channels: string[]};
 	const { handleChannels } = handlers;
 
-	const onChangeChannels = useCallback((value, action) => {
+	const onChangeChannels = useCallback((value: any, action: string) => {
 		if (!action) {
-			if (channels.includes(value)) {
+			if (channels.filter((current: any) => current._id === value._id).length > 0) {
 				return;
 			}
 			return handleChannels([...channels, value]);
 		}
-		handleChannels(channels.filter(({ _id }) => _id !== value));
+		handleChannels(channels.filter((current: any) => current._id !== value));
 	}, [handleChannels, channels]);
 
 	const onAdd = useCallback(() => {
@@ -35,7 +46,7 @@ const useExistingModalState = () => {
 	return { onAdd, channels, onChangeChannels, hasUnsavedChanges };
 };
 
-const AddExistingModal = ({ onClose }) => {
+const AddExistingModal: FC<AddExistingModalProps> = ({ onClose }) => {
 	const t = useTranslation();
 	const { onAdd, channels, onChangeChannels, hasUnsavedChanges } = useExistingModalState();
 
diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
index 73c3afdeeb1f..866b0d7a6ba2 100644
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -57,15 +57,15 @@ const ChannelsInput: FC<ChannelsInputProps> = ({ onChange, ...props }) => {
 
 	const renderSelected = useCallback<FC<{ value?: AutoCompleteValueProps[] }>>(
 		({ value: selected }) => <>
-			{selected?.map(({ _id, name, t }) => <Chip key={_id} {...props} height='x20' value={_id} onClick={onClickSelected} mie='x4'>
+			{selected?.map(({ _id, name, t }) => <Chip key={_id} height='x20' value={_id} onClick={onClickSelected} mie='x4'>
 				<Icon name={t === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
 				<Box is='span' margin='none' mis='x4'>{name}</Box>
 			</Chip>)}
-		</>, [onClickSelected, props],
+		</>, [onClickSelected],
 	);
 
-	const renderItem = useCallback<FC<{ value: string }>>(
-		({ value, ...props }) => <Option key={value} {...props} avatar={<RoomAvatar room={value} size={Options.AvatarSize} />} />, [],
+	const renderItem = useCallback<FC<{ value: AutoCompleteValueProps }>>(
+		({ value: { _id, name, t }, ...props }) => <Option key={_id} {...props} avatar={<RoomAvatar room={{ _id, name, t }} size={Options.AvatarSize} />} />, [],
 	);
 
 	return <AutoComplete

From fc205907b238d147f28f6d1bfd68c8746eb5bd00 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Sat, 20 Mar 2021 01:54:50 -0300
Subject: [PATCH 05/24] prepare new channel action button

---
 client/sidebar/header/CreateChannel.js           | 3 +++
 client/views/teams/contextualBar/TeamChannels.js | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/sidebar/header/CreateChannel.js b/client/sidebar/header/CreateChannel.js
index c5515e10c478..6655f69f517a 100644
--- a/client/sidebar/header/CreateChannel.js
+++ b/client/sidebar/header/CreateChannel.js
@@ -129,6 +129,7 @@ export const CreateChannel = ({
 
 export default memo(({
 	onClose,
+	teamId = '',
 }) => {
 	const createChannel = useEndpointActionExperimental('POST', 'channels.create');
 	const createPrivateChannel = useEndpointActionExperimental('POST', 'groups.create');
@@ -206,6 +207,7 @@ export default memo(({
 			name,
 			members: users,
 			readOnly,
+			...teamId && { teamId },
 			extraData: {
 				broadcast,
 				encrypted,
@@ -238,6 +240,7 @@ export default memo(({
 		readOnly,
 		setChannelDescription,
 		setPrivateChannelDescription,
+		teamId,
 		type,
 		users,
 	]);
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 5d88945fc377..6b215ee90925 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -13,6 +13,7 @@ import ScrollableContentWrapper from '../../../components/ScrollableContentWrapp
 import VerticalBar from '../../../components/VerticalBar';
 import AddExistingModal from '../modals/AddExistingModal';
 import { TeamChannelItems } from './TeamChannelItem';
+import CreateChannel from '../../../sidebar/header/CreateChannel';
 
 const Row = memo(({ room }) => {
 	if (!room) {
@@ -100,7 +101,7 @@ export const TeamChannels = ({
 
 TeamChannels.Option = TeamChannelItems;
 
-const useReactModal = (Component) => {
+const useReactModal = (Component, props) => {
 	const setModal = useSetModal();
 
 	return useMutableCallback((e) => {
@@ -112,6 +113,7 @@ const useReactModal = (Component) => {
 
 		setModal(() => <Component
 			onClose={handleClose}
+			{...props}
 		/>);
 	});
 };
@@ -141,9 +143,7 @@ export default ({ rid, tabBar }) => {
 
 	const addExisting = useReactModal(AddExistingModal);
 
-	const createNew = useMutableCallback(() => {
-
-	});
+	const createNew = useReactModal(CreateChannel, { teamId: 'aaaaa' });
 
 	return (
 		<TeamChannels

From 8fb4a105cbadf3b65d6d92eb27dae3b74a3516fe Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 00:19:43 -0300
Subject: [PATCH 06/24] [WIP] TeamChannelsItem component

---
 .../teams/contextualBar/TeamChannelItem.js    | 104 ++++++++++++++----
 .../views/teams/contextualBar/TeamChannels.js |  18 ++-
 .../ConfirmationModal/ConfirmationModal.tsx   |  33 ++++++
 .../teams/modals/ConfirmationModal/index.ts   |   1 +
 packages/rocketchat-i18n/i18n/en.i18n.json    |   4 +
 5 files changed, 136 insertions(+), 24 deletions(-)
 create mode 100644 client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
 create mode 100644 client/views/teams/modals/ConfirmationModal/index.ts

diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
index cc75738dc318..85e65b0e6631 100644
--- a/client/views/teams/contextualBar/TeamChannelItem.js
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -1,23 +1,89 @@
 import React, { useState } from 'react';
-import { ActionButton, Icon, /* Menu,*/ Option } from '@rocket.chat/fuselage';
-import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
+import { ActionButton, Box, Icon, Menu, Option } from '@rocket.chat/fuselage';
+import { usePrefersReducedMotion, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
-// import { useUserInfoActions, useUserInfoActionsSpread } from '../../../hooks/useUserInfoActions';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useSetModal } from '../../../contexts/ModalContext';
 import RoomAvatar from '../../../components/avatar/RoomAvatar';
+import ConfirmationModal from '../modals/ConfirmationModal';
 
-// const UserActions = ({ room }) => {
-// 	const { menu: menuOptions } = useUserInfoActionsSpread(useUserInfoActions({ _id, username }, rid), 0);
-// 	if (!menuOptions) {
-// 		return null;
-// 	}
-// 	return <Menu
-// 		flexShrink={0}
-// 		key='menu'
-// 		tiny
-// 		renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
-// 		options={menuOptions}
-// 	/>;
-// };
+export const useReactModal = (Component, props) => {
+	const setModal = useSetModal();
+
+	return useMutableCallback(() => {
+		const handleClose = () => {
+			setModal(null);
+		};
+
+		setModal(() => <Component
+			onClose={handleClose}
+			{...props}
+		/>);
+	});
+};
+
+const useRoomActions = (room) => {
+	const t = useTranslation();
+
+	const AutoJoinAtion = () => {
+		// TODO
+	};
+
+	const RemoveFromTeamAction = useReactModal(ConfirmationModal, {
+		onConfirmAction: () => {
+			// TODO
+		},
+		labelButton: t('Remove'),
+		content: <Box is='span' size='14px'>{t('Team_Remove_from_team_modal_content')}</Box>,
+	});
+
+	const DeleteChannelAction = useReactModal(ConfirmationModal, {
+		onConfirmAction: () => {
+			// TODO
+		},
+		labelButton: t('Delete'),
+		content: <>
+			<Box is='span' size='14px' color='danger-500' fontWeight='600'>{t('Team_Delete_Channel_modal_content_danger')}</Box>
+			<Box is='span' size='14px'> {t('Team_Delete_Channel_modal_content')}</Box>
+		</>,
+	});
+
+	return [
+		{
+			label: {
+				label: t('Team_Auto-join'),
+				icon: room.t === 'c' ? 'hash' : 'hashtag-lock',
+			},
+			action: AutoJoinAtion,
+		},
+		{
+			label: {
+				label: t('Team_Remove_from_team'),
+				icon: 'cross',
+			},
+			action: RemoveFromTeamAction,
+		},
+		{
+			label: {
+				label: t('Delete'),
+				icon: 'trash',
+			},
+			action: DeleteChannelAction,
+		},
+	];
+};
+
+const RoomActions = ({ room }) => {
+	const menuOptions = useRoomActions(room);
+
+	return <Menu
+		flexShrink={0}
+		key='menu'
+		tiny
+		renderItem={({ label: { label, icon }, ...props }) => (icon.match(/hash/) ? <Option {...props} label={label} icon={icon} /> : <Box color='danger-600'><Option {...props} label={label} icon={icon} /></Box>)}
+		options={menuOptions}
+	/>;
+};
 
 export const TeamChannelItem = ({ room }) => {
 	const [showButton, setShowButton] = useState();
@@ -34,11 +100,9 @@ export const TeamChannelItem = ({ room }) => {
 				<RoomAvatar room={room} size='x28' />
 			</Option.Avatar>
 			<Option.Column>{room.t === 'c' ? <Icon name='hash' size='x15'/> : <Icon name='hashtag-lock' size='x15'/>}</Option.Column>
-			<Option.Content>
-				<Option.Description>({room.name})</Option.Description>
-			</Option.Content>
+			<Option.Content>{room.name}</Option.Content>
 			<Option.Menu>
-				{showButton ? /* <UserActions username={username} rid={rid} _id={_id} /> */ null : <ActionButton
+				{showButton ? <RoomActions room={room} /> : <ActionButton
 					ghost
 					tiny
 					icon='kebab'
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 6b215ee90925..38d36a701455 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -12,7 +12,7 @@ import { RecordList } from '../../../lib/lists/RecordList.ts';
 import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
 import VerticalBar from '../../../components/VerticalBar';
 import AddExistingModal from '../modals/AddExistingModal';
-import { TeamChannelItems } from './TeamChannelItem';
+import { TeamChannelItem } from './TeamChannelItem';
 import CreateChannel from '../../../sidebar/header/CreateChannel';
 
 const Row = memo(({ room }) => {
@@ -99,9 +99,9 @@ export const TeamChannels = ({
 	);
 };
 
-TeamChannels.Option = TeamChannelItems;
+TeamChannels.Option = TeamChannelItem;
 
-const useReactModal = (Component, props) => {
+export const useReactModal = (Component, props) => {
 	const setModal = useSetModal();
 
 	return useMutableCallback((e) => {
@@ -125,10 +125,20 @@ export default ({ rid, tabBar }) => {
 
 	const roomInfoEndpoint = useEndpoint('GET', 'rooms.info');
 	const roomListEndpoint = useEndpoint('GET', 'teams.listRooms');
+	// const roomListEndpoint = useEndpoint('GET', 'channels.list');
 
-	const fetchData = useCallback(async () => {
+	const fetchData = useCallback(async (/* start, end*/) => {
 		const { room: { teamId } } = await roomInfoEndpoint({ roomId: rid });
 		await roomListEndpoint({ teamId });
+		const { channels, total } = await roomListEndpoint();
+		const channelsDated = channels.map((channel) => {
+			channel._updatedAt = new Date(channel._updatedAt);
+			return { ...channel };
+		});
+		return {
+			items: channelsDated,
+			itemCount: total,
+		};
 	}, [rid, roomInfoEndpoint, roomListEndpoint]);
 
 	const { loadMoreItems } = useScrollableRecordList(
diff --git a/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
new file mode 100644
index 000000000000..0133f6dc4db3
--- /dev/null
+++ b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
@@ -0,0 +1,33 @@
+import React, { memo, FC } from 'react';
+import { Box, ButtonGroup, Button, Icon, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../../contexts/TranslationContext';
+
+type ConfirmationModalProps = {
+	onClose: () => void;
+	onConfirmAction: any;
+	labelButton: string;
+	content: string;
+}
+
+const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmAction, labelButton, content }) => {
+	const t = useTranslation();
+
+	return <Modal>
+		<Modal.Header>
+			<Modal.Title display='flex'><Box mie='x12' ><Icon size='x20' name='modal-warning' color='warning-700'/></Box>{t('Confirmation')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content>
+			{content}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onClose}>{t('Cancel')}</Button>
+				<Button onClick={onConfirmAction} primary danger>{labelButton}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default memo(ConfirmationModal);
diff --git a/client/views/teams/modals/ConfirmationModal/index.ts b/client/views/teams/modals/ConfirmationModal/index.ts
new file mode 100644
index 000000000000..70dcc831cc1a
--- /dev/null
+++ b/client/views/teams/modals/ConfirmationModal/index.ts
@@ -0,0 +1 @@
+export { default } from './ConfirmationModal';
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index ac1d101ceeae..2cf84c7f97e9 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3708,6 +3708,10 @@
   "Team_Auto-join": "Auto-join",
   "Team_Add_existing": "Add Existing",
   "Team_Add_existing_channels": "Add Existing Channels",
+  "Team_Remove_from_team": "Remove from team",
+  "Team_Remove_from_team_modal_content": "Would you like to remove this Channel from Design? The Channel will be moved back to the workspace.",
+  "Team_Delete_Channel_modal_content": "Would you like to delete this Channel?",
+  "Team_Delete_Channel_modal_content_danger": "This can’t be undone.",
   "Teams_Errors_Already_exists": "The team `__name__` already exists.",
   "Teams_New_Title": "Create Team",
   "Teams_New_Name_Label": "Name",

From f6d9a951458aeebcd6142d84381dd1c482012f79 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 00:41:04 -0300
Subject: [PATCH 07/24] fix last commit errors

---
 client/views/teams/contextualBar/TeamChannels.js | 13 +++++++------
 packages/rocketchat-i18n/i18n/en.i18n.json       |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 38d36a701455..81625170a3ac 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -129,14 +129,15 @@ export default ({ rid, tabBar }) => {
 
 	const fetchData = useCallback(async (/* start, end*/) => {
 		const { room: { teamId } } = await roomInfoEndpoint({ roomId: rid });
-		await roomListEndpoint({ teamId });
-		const { channels, total } = await roomListEndpoint();
-		const channelsDated = channels.map((channel) => {
-			channel._updatedAt = new Date(channel._updatedAt);
-			return { ...channel };
+		console.log(teamId);
+		const { rooms, total } = await roomListEndpoint({ teamId });
+		// const { channels: rooms, total } = await roomListEndpoint();
+		const roomsDated = rooms.map((rooms) => {
+			rooms._updatedAt = new Date(rooms._updatedAt);
+			return { ...rooms };
 		});
 		return {
-			items: channelsDated,
+			items: roomsDated,
 			itemCount: total,
 		};
 	}, [rid, roomInfoEndpoint, roomListEndpoint]);
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 38181dd6eb8c..c1133f6cf8db 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -893,6 +893,7 @@
   "Confirm_new_password": "Confirm New Password",
   "Confirm_New_Password_Placeholder": "Please re-enter new password...",
   "Confirm_password": "Confirm your password",
+  "Confirmation": "Confirmation",
   "Connect": "Connect",
   "Connect_SSL_TLS": "Connect with SSL/TLS",
   "Connection_Closed": "Connection closed",

From 1a6e757e6efdbce9646f3808100786587484a3c9 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 11:41:42 -0300
Subject: [PATCH 08/24] Fix build errors

---
 .../views/teams/contextualBar/TeamChannels.js |  1 -
 client/views/teams/contextualBar/index.ts     | 25 ++++++++-----------
 packages/rocketchat-i18n/i18n/en.i18n.json    |  1 +
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 81625170a3ac..5567f1e4c1c5 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -129,7 +129,6 @@ export default ({ rid, tabBar }) => {
 
 	const fetchData = useCallback(async (/* start, end*/) => {
 		const { room: { teamId } } = await roomInfoEndpoint({ roomId: rid });
-		console.log(teamId);
 		const { rooms, total } = await roomListEndpoint({ teamId });
 		// const { channels: rooms, total } = await roomListEndpoint();
 		const roomsDated = rooms.map((rooms) => {
diff --git a/client/views/teams/contextualBar/index.ts b/client/views/teams/contextualBar/index.ts
index d59b1a88d30f..d2633b51a861 100644
--- a/client/views/teams/contextualBar/index.ts
+++ b/client/views/teams/contextualBar/index.ts
@@ -1,17 +1,14 @@
-import { lazy, LazyExoticComponent, FC, useMemo } from 'react';
+import { lazy, LazyExoticComponent, FC } from 'react';
 
 import { addAction } from '../../room/lib/Toolbox';
 
-addAction('team-channels', () => {
-	const t = true;
-	return useMemo(() => (t ? {
-		groups: ['team'],
-		id: 'team-channels',
-		anonymous: true,
-		title: 'Team-Channels',
-		icon: 'hash',
-		template: lazy(() => import('./TeamChannels')) as LazyExoticComponent<FC>,
-		full: true,
-		order: 8,
-	} : null), [t]);
-});
+addAction('team-channels', () => ({
+	groups: ['team'],
+	id: 'team-channels',
+	anonymous: true,
+	title: 'Team_Channels',
+	icon: 'hash',
+	template: lazy(() => import('./TeamChannels')) as LazyExoticComponent<FC>,
+	full: true,
+	order: 8,
+}));
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index c1133f6cf8db..b826b1062bba 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3726,6 +3726,7 @@
   "Team_Auto-join": "Auto-join",
   "Team_Add_existing": "Add Existing",
   "Team_Add_existing_channels": "Add Existing Channels",
+  "Team_Channels": "Team Channels",
   "Team_Remove_from_team": "Remove from team",
   "Team_Remove_from_team_modal_content": "Would you like to remove this Channel from Design? The Channel will be moved back to the workspace.",
   "Team_Delete_Channel_modal_content": "Would you like to delete this Channel?",

From 9a75455e70b740fd52d9c5cb99f9eba4ae0ab277 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 12:05:34 -0300
Subject: [PATCH 09/24] fix TS definitions

---
 client/contexts/ServerContext/endpoints.ts                | 2 ++
 .../endpoints/v1/rooms/autocompleteChannelAndPrivate.ts   | 5 +++++
 .../views/teams/modals/AddExistingModal/ChannelsInput.tsx | 8 ++++----
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts

diff --git a/client/contexts/ServerContext/endpoints.ts b/client/contexts/ServerContext/endpoints.ts
index 4354dcbf1a12..4629c7d7c53b 100644
--- a/client/contexts/ServerContext/endpoints.ts
+++ b/client/contexts/ServerContext/endpoints.ts
@@ -2,6 +2,7 @@ import { FollowMessageEndpoint as ChatFollowMessageEndpoint } from './endpoints/
 import { GetMessageEndpoint as ChatGetMessageEndpoint } from './endpoints/v1/chat/getMessage';
 import { UnfollowMessageEndpoint as ChatUnfollowMessageEndpoint } from './endpoints/v1/chat/unfollowMessage';
 import { AutocompleteEndpoint as UsersAutocompleteEndpoint } from './endpoints/v1/users/autocomplete';
+import { AutocompleteChannelAndPrivateEndpoint as RoomsAutocompleteEndpoint } from './endpoints/v1/rooms/autocompleteChannelAndPrivate';
 import { AppearanceEndpoint as LivechatAppearanceEndpoint } from './endpoints/v1/livechat/appearance';
 import { ListEndpoint as CustomUserStatusListEndpoint } from './endpoints/v1/custom-user-status/list';
 import { ExternalComponentsEndpoint as AppsExternalComponentsEndpoint } from './endpoints/apps/externalComponents';
@@ -28,6 +29,7 @@ export type ServerEndpoints = {
 	'livechat/appearance': LivechatAppearanceEndpoint;
 	'custom-user-status.list': CustomUserStatusListEndpoint;
 	'/apps/externalComponents': AppsExternalComponentsEndpoint;
+	'rooms.autocomplete.channelAndPrivate': RoomsAutocompleteEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;
diff --git a/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts b/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts
new file mode 100644
index 000000000000..0b84607ca8d9
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts
@@ -0,0 +1,5 @@
+import { IRoom } from '../../../../../../definition/IRoom';
+
+export type AutocompleteChannelAndPrivateEndpoint = {
+	GET: (params: { selector: string }) => { items: IRoom[] };
+};
diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
index 866b0d7a6ba2..b3814be2c9b1 100644
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -11,7 +11,7 @@ type ChannelsInputProps = {
 	onChange: (value: unknown, action: 'remove' | undefined) => void;
 };
 
-type UsersAutoCompleteEndpoint = {
+type ChannelsAutoCompleteEndpoint = {
 	params: {
 		selector: string;
 	};
@@ -27,17 +27,17 @@ type AutoCompleteValueProps = {
 }
 
 const useChannelsAutoComplete = (term: string): AutoCompleteProps['options'] => {
-	const params = useMemo<UsersAutoCompleteEndpoint['params']>(() => ({
+	const params = useMemo<ChannelsAutoCompleteEndpoint['params']>(() => ({
 		selector: JSON.stringify({ term }),
 	}), [term]);
-	const { value: data } = useEndpointData<UsersAutoCompleteEndpoint['value']>('rooms.autocomplete.channelAndPrivate', params);
+	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', params);
 
 	return useMemo<AutoCompleteProps['options']>(() => {
 		if (!data) {
 			return [];
 		}
 
-		return data.items.map((room) => ({
+		return data.items.map((room: IRoom) => ({
 			label: room.name ?? '',
 			value: room ?? '',
 		})) || [];

From 01871ad1c85baf75f79133dc5bd0355c05306c16 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 13:08:44 -0300
Subject: [PATCH 10/24] fname from room

---
 client/views/teams/modals/AddExistingModal/ChannelsInput.tsx | 2 +-
 definition/IRoom.ts                                          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
index b3814be2c9b1..8b03b6ba7995 100644
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -38,7 +38,7 @@ const useChannelsAutoComplete = (term: string): AutoCompleteProps['options'] =>
 		}
 
 		return data.items.map((room: IRoom) => ({
-			label: room.name ?? '',
+			label: room.fname ?? room.name,
 			value: room ?? '',
 		})) || [];
 	}, [data]);
diff --git a/definition/IRoom.ts b/definition/IRoom.ts
index 733b803daead..f9389f57122c 100644
--- a/definition/IRoom.ts
+++ b/definition/IRoom.ts
@@ -11,6 +11,7 @@ export interface IRoom extends IRocketChatRecord {
 	_id: RoomID;
 	t: RoomType;
 	name: string;
+	fname: string;
 	msgs: number;
 	default?: true;
 	broadcast?: true;

From ce7257db96afec38320495cde2d29aaabbec1081 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 16:45:49 -0300
Subject: [PATCH 11/24] [WIP] addExistingChannel action

---
 client/contexts/ServerContext/endpoints.ts    |  2 ++
 .../endpoints/v1/teams/addRooms.ts            |  9 ++++++++
 client/views/room/index.js                    |  2 +-
 .../views/teams/contextualBar/TeamChannels.js |  6 +++---
 .../AddExistingModal/AddExistingModal.tsx     | 21 +++++++++++--------
 5 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts

diff --git a/client/contexts/ServerContext/endpoints.ts b/client/contexts/ServerContext/endpoints.ts
index 4629c7d7c53b..0fc3e1a17f06 100644
--- a/client/contexts/ServerContext/endpoints.ts
+++ b/client/contexts/ServerContext/endpoints.ts
@@ -9,6 +9,7 @@ import { ExternalComponentsEndpoint as AppsExternalComponentsEndpoint } from './
 import { ManualRegisterEndpoint as CloudManualRegisterEndpoint } from './endpoints/v1/cloud/manualRegister';
 import { FilesEndpoint as GroupsFilesEndpoint } from './endpoints/v1/groups/files';
 import { FilesEndpoint as ImFilesEndpoint } from './endpoints/v1/im/files';
+import { AddRoomsEndpoint as TeamsAddRoomsEndpoint } from './endpoints/v1/teams/addRooms';
 import { FilesEndpoint as ChannelsFilesEndpoint } from './endpoints/v1/channels/files';
 import { ListEndpoint as EmojiCustomListEndpoint } from './endpoints/v1/emoji-custom/list';
 import { GetDiscussionsEndpoint as ChatGetDiscussionsEndpoint } from './endpoints/v1/chat/getDiscussions';
@@ -30,6 +31,7 @@ export type ServerEndpoints = {
 	'custom-user-status.list': CustomUserStatusListEndpoint;
 	'/apps/externalComponents': AppsExternalComponentsEndpoint;
 	'rooms.autocomplete.channelAndPrivate': RoomsAutocompleteEndpoint;
+	'teams.addRooms': TeamsAddRoomsEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;
diff --git a/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
new file mode 100644
index 000000000000..960de32cfd10
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
@@ -0,0 +1,9 @@
+import { IRoom } from '../../../../../../definition/IRoom';
+
+export type AddRoomsEndpoint = {
+	POST: (params: { rooms: string[]; teamId: string }) => {
+		success: true;
+		statusCode: 200;
+		body: IRoom[];
+	};
+};
diff --git a/client/views/room/index.js b/client/views/room/index.js
index 593ebec9cbf7..b272971bbfd5 100644
--- a/client/views/room/index.js
+++ b/client/views/room/index.js
@@ -31,7 +31,7 @@ const Room = () => {
 		<RoomTemplate.Body><BlazeTemplate onClick={hideFlexTab ? close : undefined} name='roomOld' tabBar={tabBar} rid={room._id} _id={room._id} /></RoomTemplate.Body>
 		{ tab && <RoomTemplate.Aside data-qa-tabbar-name={tab.id}>
 			{ typeof tab.template === 'string' && <VerticalBarOldActions {...tab} name={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} /> }
-			{ typeof tab.template !== 'string' && <LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} /> }
+			{ typeof tab.template !== 'string' && <LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} teamId={room.teamId} _id={room._id} /> }
 		</RoomTemplate.Aside>}
 	</RoomTemplate>;
 };
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 5567f1e4c1c5..826b5a0e7e79 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -118,7 +118,7 @@ export const useReactModal = (Component, props) => {
 	});
 };
 
-export default ({ rid, tabBar }) => {
+export default ({ rid, teamId, tabBar }) => {
 	const [type, setType] = useLocalStorage('channels-list-type', 'all');
 	const [text, setText] = useState('');
 	const [roomList] = useState(() => new RecordList());
@@ -151,9 +151,9 @@ export default ({ rid, tabBar }) => {
 		setText(event.currentTarget.value);
 	}, []);
 
-	const addExisting = useReactModal(AddExistingModal);
+	const addExisting = useReactModal(AddExistingModal, { teamId });
 
-	const createNew = useReactModal(CreateChannel, { teamId: 'aaaaa' });
+	const createNew = useReactModal(CreateChannel, { teamId });
 
 	return (
 		<TeamChannels
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index f8006f31e14d..8396707a960a 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -3,7 +3,7 @@ import { Box, ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
 
 import { useForm } from '../../../../hooks/useForm';
 import { useTranslation } from '../../../../contexts/TranslationContext';
-// import { useEndpoint } from '../../../../contexts/ServerContext';
+import { useEndpoint } from '../../../../contexts/ServerContext';
 import ChannelsInput from './ChannelsInput';
 
 type ExistingModalState = {
@@ -15,10 +15,11 @@ type ExistingModalState = {
 
 type AddExistingModalProps = {
 	onClose: () => void;
+	teamId: string;
 };
 
-const useExistingModalState = (): ExistingModalState => {
-	// const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
+const useExistingModalState = (onClose: () => void, teamId: string): ExistingModalState => {
+	const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
 
 	const { values, handlers, hasUnsavedChanges } = useForm({
 		channels: [],
@@ -38,17 +39,19 @@ const useExistingModalState = (): ExistingModalState => {
 	}, [handleChannels, channels]);
 
 	const onAdd = useCallback(() => {
-		// addRoomEndpoint({
-
-		// });
-	}, []);
+		addRoomEndpoint({
+			rooms: channels,
+			teamId,
+		});
+		onClose();
+	}, [addRoomEndpoint, channels, onClose, teamId]);
 
 	return { onAdd, channels, onChangeChannels, hasUnsavedChanges };
 };
 
-const AddExistingModal: FC<AddExistingModalProps> = ({ onClose }) => {
+const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 	const t = useTranslation();
-	const { onAdd, channels, onChangeChannels, hasUnsavedChanges } = useExistingModalState();
+	const { onAdd, channels, onChangeChannels, hasUnsavedChanges } = useExistingModalState(onClose, teamId);
 
 	const isAddButtonEnabled = hasUnsavedChanges;
 

From 18ccdbc897c863be034fb00e1c36b8c19dc898dd Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 17:51:06 -0300
Subject: [PATCH 12/24] prevent redirect create channel from team

---
 client/sidebar/header/CreateChannel.js                   | 4 ++--
 client/views/teams/contextualBar/TeamChannels.js         | 9 +++------
 .../teams/modals/AddExistingModal/AddExistingModal.tsx   | 5 +++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/sidebar/header/CreateChannel.js b/client/sidebar/header/CreateChannel.js
index 6655f69f517a..c762558580d4 100644
--- a/client/sidebar/header/CreateChannel.js
+++ b/client/sidebar/header/CreateChannel.js
@@ -217,10 +217,10 @@ export default memo(({
 
 		if (type) {
 			roomData = await createPrivateChannel(params);
-			goToRoom(roomData.group._id);
+			!teamId && goToRoom(roomData.group._id);
 		} else {
 			roomData = await createChannel(params);
-			goToRoom(roomData.channel._id);
+			!teamId && goToRoom(roomData.channel._id);
 		}
 
 		if (roomData.success && roomData.group && description) {
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 826b5a0e7e79..24de8752466a 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -118,19 +118,16 @@ export const useReactModal = (Component, props) => {
 	});
 };
 
-export default ({ rid, teamId, tabBar }) => {
+export default ({ teamId, tabBar }) => {
 	const [type, setType] = useLocalStorage('channels-list-type', 'all');
 	const [text, setText] = useState('');
 	const [roomList] = useState(() => new RecordList());
 
-	const roomInfoEndpoint = useEndpoint('GET', 'rooms.info');
 	const roomListEndpoint = useEndpoint('GET', 'teams.listRooms');
-	// const roomListEndpoint = useEndpoint('GET', 'channels.list');
 
 	const fetchData = useCallback(async (/* start, end*/) => {
-		const { room: { teamId } } = await roomInfoEndpoint({ roomId: rid });
 		const { rooms, total } = await roomListEndpoint({ teamId });
-		// const { channels: rooms, total } = await roomListEndpoint();
+
 		const roomsDated = rooms.map((rooms) => {
 			rooms._updatedAt = new Date(rooms._updatedAt);
 			return { ...rooms };
@@ -139,7 +136,7 @@ export default ({ rid, teamId, tabBar }) => {
 			items: roomsDated,
 			itemCount: total,
 		};
-	}, [rid, roomInfoEndpoint, roomListEndpoint]);
+	}, [roomListEndpoint, teamId]);
 
 	const { loadMoreItems } = useScrollableRecordList(
 		roomList,
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index 8396707a960a..05b4ffd66eed 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -5,6 +5,7 @@ import { useForm } from '../../../../hooks/useForm';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useEndpoint } from '../../../../contexts/ServerContext';
 import ChannelsInput from './ChannelsInput';
+import { IRoom } from '../../../../../definition/IRoom';
 
 type ExistingModalState = {
 	onAdd: any;
@@ -25,7 +26,7 @@ const useExistingModalState = (onClose: () => void, teamId: string): ExistingMod
 		channels: [],
 	});
 
-	const { channels } = values as {channels: string[]};
+	const { channels } = values as {channels: IRoom[]};
 	const { handleChannels } = handlers;
 
 	const onChangeChannels = useCallback((value: any, action: string) => {
@@ -40,7 +41,7 @@ const useExistingModalState = (onClose: () => void, teamId: string): ExistingMod
 
 	const onAdd = useCallback(() => {
 		addRoomEndpoint({
-			rooms: channels,
+			rooms: channels.map((channel) => channel._id),
 			teamId,
 		});
 		onClose();

From afea633085ab91e2d70a5ac3e02c1eabc57b3041 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 18:29:53 -0300
Subject: [PATCH 13/24] create delete and remove actions from kebab

---
 client/views/teams/contextualBar/TeamChannelItem.js      | 9 ++++++---
 .../teams/modals/ConfirmationModal/ConfirmationModal.tsx | 7 ++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
index 85e65b0e6631..72ccffb7396b 100644
--- a/client/views/teams/contextualBar/TeamChannelItem.js
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -3,6 +3,7 @@ import { ActionButton, Box, Icon, Menu, Option } from '@rocket.chat/fuselage';
 import { usePrefersReducedMotion, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
+import { useEndpoint } from '../../../contexts/ServerContext';
 import { useSetModal } from '../../../contexts/ModalContext';
 import RoomAvatar from '../../../components/avatar/RoomAvatar';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -24,6 +25,8 @@ export const useReactModal = (Component, props) => {
 
 const useRoomActions = (room) => {
 	const t = useTranslation();
+	const removeRoomEndpoint = useEndpoint('POST', 'teams.removeRoom');
+	const deleteRoomEndpoint = useEndpoint('POST', room.t === 'c' ? 'channels.delete' : 'groups.delete');
 
 	const AutoJoinAtion = () => {
 		// TODO
@@ -31,7 +34,7 @@ const useRoomActions = (room) => {
 
 	const RemoveFromTeamAction = useReactModal(ConfirmationModal, {
 		onConfirmAction: () => {
-			// TODO
+			removeRoomEndpoint({ teamId: room.teamId, roomId: room._id });
 		},
 		labelButton: t('Remove'),
 		content: <Box is='span' size='14px'>{t('Team_Remove_from_team_modal_content')}</Box>,
@@ -39,7 +42,7 @@ const useRoomActions = (room) => {
 
 	const DeleteChannelAction = useReactModal(ConfirmationModal, {
 		onConfirmAction: () => {
-			// TODO
+			deleteRoomEndpoint({ roomId: room._id });
 		},
 		labelButton: t('Delete'),
 		content: <>
@@ -100,7 +103,7 @@ export const TeamChannelItem = ({ room }) => {
 				<RoomAvatar room={room} size='x28' />
 			</Option.Avatar>
 			<Option.Column>{room.t === 'c' ? <Icon name='hash' size='x15'/> : <Icon name='hashtag-lock' size='x15'/>}</Option.Column>
-			<Option.Content>{room.name}</Option.Content>
+			<Option.Content>{room.fname || room.name}</Option.Content>
 			<Option.Menu>
 				{showButton ? <RoomActions room={room} /> : <ActionButton
 					ghost
diff --git a/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
index 0133f6dc4db3..15f6d1cb92be 100644
--- a/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
+++ b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
@@ -13,6 +13,11 @@ type ConfirmationModalProps = {
 const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmAction, labelButton, content }) => {
 	const t = useTranslation();
 
+	const handleConfirm = (): void => {
+		onConfirmAction();
+		onClose();
+	};
+
 	return <Modal>
 		<Modal.Header>
 			<Modal.Title display='flex'><Box mie='x12' ><Icon size='x20' name='modal-warning' color='warning-700'/></Box>{t('Confirmation')}</Modal.Title>
@@ -24,7 +29,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmActio
 		<Modal.Footer>
 			<ButtonGroup align='end'>
 				<Button onClick={onClose}>{t('Cancel')}</Button>
-				<Button onClick={onConfirmAction} primary danger>{labelButton}</Button>
+				<Button onClick={handleConfirm} primary danger>{labelButton}</Button>
 			</ButtonGroup>
 		</Modal.Footer>
 	</Modal>;

From 1f265538529d914dee1fdba06bc391e21a2a7da9 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 22 Mar 2021 18:53:06 -0300
Subject: [PATCH 14/24] fix input filter

---
 .../views/teams/modals/AddExistingModal/ChannelsInput.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
index 8b03b6ba7995..00811eb7f346 100644
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -26,10 +26,10 @@ type AutoCompleteValueProps = {
 	t: string;
 }
 
-const useChannelsAutoComplete = (term: string): AutoCompleteProps['options'] => {
+const useChannelsAutoComplete = (name: string): AutoCompleteProps['options'] => {
 	const params = useMemo<ChannelsAutoCompleteEndpoint['params']>(() => ({
-		selector: JSON.stringify({ term }),
-	}), [term]);
+		selector: JSON.stringify({ name }),
+	}), [name]);
 	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', params);
 
 	return useMemo<AutoCompleteProps['options']>(() => {

From a07cd40f393ffc64145547515ec936021322f3e7 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 09:48:07 -0300
Subject: [PATCH 15/24] Auto-Join component

---
 .../teams/contextualBar/TeamChannelItem.js    | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
index 72ccffb7396b..6534f5420d6c 100644
--- a/client/views/teams/contextualBar/TeamChannelItem.js
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { ActionButton, Box, Icon, Menu, Option } from '@rocket.chat/fuselage';
+import React, { useMemo, useState } from 'react';
+import { ActionButton, Box, CheckBox, Icon, Menu, Option } from '@rocket.chat/fuselage';
 import { usePrefersReducedMotion, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
@@ -23,15 +23,12 @@ export const useReactModal = (Component, props) => {
 	});
 };
 
-const useRoomActions = (room) => {
+const RoomActions = ({ room }) => {
 	const t = useTranslation();
+	const updateRoomEndpoint = useEndpoint('POST', 'teams.updateRoom');
 	const removeRoomEndpoint = useEndpoint('POST', 'teams.removeRoom');
 	const deleteRoomEndpoint = useEndpoint('POST', room.t === 'c' ? 'channels.delete' : 'groups.delete');
 
-	const AutoJoinAtion = () => {
-		// TODO
-	};
-
 	const RemoveFromTeamAction = useReactModal(ConfirmationModal, {
 		onConfirmAction: () => {
 			removeRoomEndpoint({ teamId: room.teamId, roomId: room._id });
@@ -51,13 +48,20 @@ const useRoomActions = (room) => {
 		</>,
 	});
 
-	return [
-		{
+	const menuOptions = useMemo(() => {
+		const AutoJoinAction = () => {
+			updateRoomEndpoint({
+				roomId: room._id,
+				isDefault: !room.teamDefault,
+			});
+		};
+
+		return [{
 			label: {
 				label: t('Team_Auto-join'),
 				icon: room.t === 'c' ? 'hash' : 'hashtag-lock',
 			},
-			action: AutoJoinAtion,
+			action: AutoJoinAction,
 		},
 		{
 			label: {
@@ -72,18 +76,17 @@ const useRoomActions = (room) => {
 				icon: 'trash',
 			},
 			action: DeleteChannelAction,
-		},
-	];
-};
-
-const RoomActions = ({ room }) => {
-	const menuOptions = useRoomActions(room);
+		}];
+	}, [DeleteChannelAction, RemoveFromTeamAction, room._id, room.t, room.teamDefault, t, updateRoomEndpoint]);
 
 	return <Menu
 		flexShrink={0}
 		key='menu'
 		tiny
-		renderItem={({ label: { label, icon }, ...props }) => (icon.match(/hash/) ? <Option {...props} label={label} icon={icon} /> : <Box color='danger-600'><Option {...props} label={label} icon={icon} /></Box>)}
+		renderItem={({ label: { label, icon }, ...props }) =>
+			(icon.match(/hash/)
+				? <Option {...props} label={label} icon={icon}><CheckBox checked={room.teamDefault} /></Option>
+				: <Box color='danger-600'><Option {...props} label={label} icon={icon} /></Box>)}
 		options={menuOptions}
 	/>;
 };

From eccbc2ec06b25babcc82a72f2194ccee803a8a67 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 11:32:23 -0300
Subject: [PATCH 16/24] Review

---
 client/main.js                                                | 1 -
 .../views/teams/modals/AddExistingModal/AddExistingModal.tsx  | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/main.js b/client/main.js
index a0f3caf67b6c..9ee80d00c408 100644
--- a/client/main.js
+++ b/client/main.js
@@ -23,4 +23,3 @@ import './views/login';
 import './views/room/adapters';
 import './views/teams';
 import './adapters';
-import './views/teams';
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index 05b4ffd66eed..a9ad7cf265f9 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -1,5 +1,5 @@
 import React, { memo, FC, useCallback } from 'react';
-import { Box, ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
+import { ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
 
 import { useForm } from '../../../../hooks/useForm';
 import { useTranslation } from '../../../../contexts/TranslationContext';
@@ -63,7 +63,7 @@ const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 		</Modal.Header>
 		<Modal.Content>
 			<Field mbe='x24'>
-				<Field.Label>{t('Teams_New_Add_members_Label')} <Box is='span' color='neutral-600'>({t('optional')})</Box></Field.Label>
+				<Field.Label>{t('Channels')}</Field.Label>
 				<ChannelsInput value={channels} onChange={onChangeChannels} />
 			</Field>
 		</Modal.Content>

From 616a602a72d0a17ca6ffff2c0feda70749fc1a71 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 11:45:56 -0300
Subject: [PATCH 17/24] Review

---
 client/views/teams/modals/AddExistingModal/ChannelsInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
index 00811eb7f346..93e2e12e543d 100644
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
@@ -39,7 +39,7 @@ const useChannelsAutoComplete = (name: string): AutoCompleteProps['options'] =>
 
 		return data.items.map((room: IRoom) => ({
 			label: room.fname ?? room.name,
-			value: room ?? '',
+			value: room,
 		})) || [];
 	}, [data]);
 };
@@ -70,6 +70,7 @@ const ChannelsInput: FC<ChannelsInputProps> = ({ onChange, ...props }) => {
 
 	return <AutoComplete
 		{...props}
+		getValue={({ value: room }): IRoom['_id'] => (room as IRoom)._id}
 		filter={filter}
 		options={options}
 		renderSelected={renderSelected}

From 65967bb90625c13fe1cd62b01989f824dd4308dd Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 15:07:26 -0300
Subject: [PATCH 18/24] Review

---
 .../teams/contextualBar/TeamChannelItem.js    |  3 +-
 .../AddExistingModal/AddExistingModal.tsx     | 31 ++++---
 .../modals/AddExistingModal/ChannelsInput.tsx | 83 ------------------
 .../modals/AddExistingModal/RoomsInput.tsx    | 86 +++++++++++++++++++
 packages/rocketchat-i18n/i18n/en.i18n.json    |  2 +-
 5 files changed, 109 insertions(+), 96 deletions(-)
 delete mode 100644 client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
 create mode 100644 client/views/teams/modals/AddExistingModal/RoomsInput.tsx

diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
index 6534f5420d6c..495fde584a8c 100644
--- a/client/views/teams/contextualBar/TeamChannelItem.js
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -7,6 +7,7 @@ import { useEndpoint } from '../../../contexts/ServerContext';
 import { useSetModal } from '../../../contexts/ModalContext';
 import RoomAvatar from '../../../components/avatar/RoomAvatar';
 import ConfirmationModal from '../modals/ConfirmationModal';
+import { roomTypes } from '../../../../app/utils/client';
 
 export const useReactModal = (Component, props) => {
 	const setModal = useSetModal();
@@ -34,7 +35,7 @@ const RoomActions = ({ room }) => {
 			removeRoomEndpoint({ teamId: room.teamId, roomId: room._id });
 		},
 		labelButton: t('Remove'),
-		content: <Box is='span' size='14px'>{t('Team_Remove_from_team_modal_content')}</Box>,
+		content: <Box is='span' size='14px'>{t('Team_Remove_from_team_modal_content', { teamName: roomTypes.getRoomName(room.t, room) })}</Box>,
 	});
 
 	const DeleteChannelAction = useReactModal(ConfirmationModal, {
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index a9ad7cf265f9..1244c6d27981 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -4,12 +4,12 @@ import { ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
 import { useForm } from '../../../../hooks/useForm';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useEndpoint } from '../../../../contexts/ServerContext';
-import ChannelsInput from './ChannelsInput';
+import RoomsInput from './RoomsInput';
 import { IRoom } from '../../../../../definition/IRoom';
 
-type ExistingModalState = {
+type AddExistingModalState = {
 	onAdd: any;
-	channels: any;
+	channels: IRoom[];
 	onChangeChannels: any;
 	hasUnsavedChanges: boolean;
 }
@@ -19,23 +19,27 @@ type AddExistingModalProps = {
 	teamId: string;
 };
 
-const useExistingModalState = (onClose: () => void, teamId: string): ExistingModalState => {
+const useAddExistingModalState = (onClose: () => void, teamId: string): AddExistingModalState => {
 	const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
 
 	const { values, handlers, hasUnsavedChanges } = useForm({
-		channels: [],
+		channels: [] as IRoom[],
 	});
 
-	const { channels } = values as {channels: IRoom[]};
+	const { channels } = values as { channels: IRoom[] };
 	const { handleChannels } = handlers;
 
-	const onChangeChannels = useCallback((value: any, action: string) => {
+	const onChangeChannels = useCallback((value: IRoom, action: string) => {
 		if (!action) {
-			if (channels.filter((current: any) => current._id === value._id).length > 0) {
+			if (channels.some((current: IRoom) => current._id === value._id)) {
 				return;
 			}
-			return handleChannels([...channels, value]);
+
+			handleChannels([...channels, value]);
+
+			return;
 		}
+
 		handleChannels(channels.filter((current: any) => current._id !== value));
 	}, [handleChannels, channels]);
 
@@ -52,7 +56,12 @@ const useExistingModalState = (onClose: () => void, teamId: string): ExistingMod
 
 const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 	const t = useTranslation();
-	const { onAdd, channels, onChangeChannels, hasUnsavedChanges } = useExistingModalState(onClose, teamId);
+	const {
+		channels,
+		onAdd,
+		onChangeChannels,
+		hasUnsavedChanges,
+	} = useAddExistingModalState(onClose, teamId);
 
 	const isAddButtonEnabled = hasUnsavedChanges;
 
@@ -64,7 +73,7 @@ const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 		<Modal.Content>
 			<Field mbe='x24'>
 				<Field.Label>{t('Channels')}</Field.Label>
-				<ChannelsInput value={channels} onChange={onChangeChannels} />
+				<RoomsInput value={channels} onChange={onChangeChannels} />
 			</Field>
 		</Modal.Content>
 		<Modal.Footer>
diff --git a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx b/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
deleted file mode 100644
index 93e2e12e543d..000000000000
--- a/client/views/teams/modals/AddExistingModal/ChannelsInput.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { AutoComplete, Box, Icon, Option, Options, Chip, AutoCompleteProps } from '@rocket.chat/fuselage';
-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { FC, memo, useCallback, useMemo, useState } from 'react';
-
-import { IRoom } from '../../../../../definition/IRoom';
-import RoomAvatar from '../../../../components/avatar/RoomAvatar';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
-
-type ChannelsInputProps = {
-	value: unknown[];
-	onChange: (value: unknown, action: 'remove' | undefined) => void;
-};
-
-type ChannelsAutoCompleteEndpoint = {
-	params: {
-		selector: string;
-	};
-	value: {
-		items: IRoom[];
-	};
-};
-
-type AutoCompleteValueProps = {
-	_id: string;
-	name: string;
-	t: string;
-}
-
-const useChannelsAutoComplete = (name: string): AutoCompleteProps['options'] => {
-	const params = useMemo<ChannelsAutoCompleteEndpoint['params']>(() => ({
-		selector: JSON.stringify({ name }),
-	}), [name]);
-	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', params);
-
-	return useMemo<AutoCompleteProps['options']>(() => {
-		if (!data) {
-			return [];
-		}
-
-		return data.items.map((room: IRoom) => ({
-			label: room.fname ?? room.name,
-			value: room,
-		})) || [];
-	}, [data]);
-};
-
-const ChannelsInput: FC<ChannelsInputProps> = ({ onChange, ...props }) => {
-	const [filter, setFilter] = useState('');
-	const options = useChannelsAutoComplete(useDebouncedValue(filter, 1000));
-
-	const onClickSelected = useCallback((e) => {
-		e.stopPropagation();
-		e.preventDefault();
-
-		onChange(e.currentTarget.value, 'remove');
-	}, [onChange]);
-
-	const renderSelected = useCallback<FC<{ value?: AutoCompleteValueProps[] }>>(
-		({ value: selected }) => <>
-			{selected?.map(({ _id, name, t }) => <Chip key={_id} height='x20' value={_id} onClick={onClickSelected} mie='x4'>
-				<Icon name={t === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
-				<Box is='span' margin='none' mis='x4'>{name}</Box>
-			</Chip>)}
-		</>, [onClickSelected],
-	);
-
-	const renderItem = useCallback<FC<{ value: AutoCompleteValueProps }>>(
-		({ value: { _id, name, t }, ...props }) => <Option key={_id} {...props} avatar={<RoomAvatar room={{ _id, name, t }} size={Options.AvatarSize} />} />, [],
-	);
-
-	return <AutoComplete
-		{...props}
-		getValue={({ value: room }): IRoom['_id'] => (room as IRoom)._id}
-		filter={filter}
-		options={options}
-		renderSelected={renderSelected}
-		renderItem={renderItem}
-		setFilter={setFilter}
-		onChange={onChange}
-	/>;
-};
-
-export default memo(ChannelsInput);
diff --git a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
new file mode 100644
index 000000000000..e37f80310939
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
@@ -0,0 +1,86 @@
+import { AutoComplete, Box, Icon, Option, Options, Chip, AutoCompleteProps } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import React, { FC, memo, useCallback, useMemo, useState } from 'react';
+
+import { IRoom } from '../../../../../definition/IRoom';
+import RoomAvatar from '../../../../components/avatar/RoomAvatar';
+import { useEndpointData } from '../../../../hooks/useEndpointData';
+
+type RoomsInputProps = {
+	value: IRoom[];
+	onChange: (value: unknown, action: 'remove' | undefined) => void;
+};
+
+// TODO: Make AutoComplete accept arbitrary kinds of values
+const useRoomsAutoComplete = (name: string): {
+	rooms: Record<IRoom['_id'], IRoom>;
+	options: AutoCompleteProps['options'];
+} => {
+	const params = useMemo(() => ({
+		selector: JSON.stringify({ name }),
+	}), [name]);
+	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', params);
+
+	const options = useMemo<AutoCompleteProps['options']>(() => {
+		if (!data) {
+			return [];
+		}
+
+		return data.items.map((room: IRoom) => ({
+			label: room.fname ?? room.name,
+			value: room._id,
+		}));
+	}, [data]);
+
+	const rooms = useMemo<Record<IRoom['_id'], IRoom>>(() => data?.items.reduce((obj, room) => {
+		obj[room._id] = room;
+		return obj;
+	}, {} as Record<IRoom['_id'], IRoom>) ?? {}, [data]);
+
+	return {
+		options,
+		rooms,
+	};
+};
+
+const RoomsInput: FC<RoomsInputProps> = ({ onChange, ...props }) => {
+	const [filter, setFilter] = useState('');
+	const { rooms, options } = useRoomsAutoComplete(useDebouncedValue(filter, 1000));
+
+	const onClickSelected = useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		onChange(rooms[e.currentTarget.value], 'remove');
+	}, [onChange, rooms]);
+
+	const handleChange = useCallback<AutoCompleteProps['onChange']>((value, action) => {
+		onChange(rooms[value as IRoom['_id']], action);
+	}, [onChange, rooms]);
+
+	const renderSelected = useCallback<FC<{ value?: IRoom[] }>>(
+		({ value: selected }) => <>
+			{selected?.map((room) => (<Chip key={room._id} height='x20' value={room._id} onClick={onClickSelected} mie='x4'>
+				<Icon name={room.t === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
+				<Box is='span' margin='none' mis='x4'>{room.name}</Box>
+			</Chip>))}
+		</>, [onClickSelected],
+	);
+
+	const renderItem = useCallback<FC<{ value: IRoom['_id'] }>>(
+		({ value: rid, ...props }) => <Option key={rooms[rid]._id} {...props} avatar={<RoomAvatar room={rooms[rid]} size={Options.AvatarSize} />} />,
+		[rooms],
+	);
+
+	return <AutoComplete
+		{...props}
+		filter={filter}
+		options={options}
+		renderSelected={renderSelected}
+		renderItem={renderItem}
+		setFilter={setFilter}
+		onChange={handleChange}
+	/>;
+};
+
+export default memo(RoomsInput);
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index c35055488dcc..04b67e5ed7cc 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3732,7 +3732,7 @@
   "Team_Delete_Channel_modal_content_danger": "This can’t be undone.",
   "Team_Delete_Channel_modal_content": "Would you like to delete this Channel?",
   "Team_Info": "Team Info",
-  "Team_Remove_from_team_modal_content": "Would you like to remove this Channel from Design? The Channel will be moved back to the workspace.",
+  "Team_Remove_from_team_modal_content": "Would you like to remove this Channel from __teamName__? The Channel will be moved back to the workspace.",
   "Team_Remove_from_team": "Remove from team",
   "Team_what_is_this_team_about": "What is this team about",
   "Team": "Team",

From f0bd5ab60d242d9f7938795a5e0d836c53eb73d3 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 15:07:55 -0300
Subject: [PATCH 19/24] Review

---
 definition/IRoom.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/definition/IRoom.ts b/definition/IRoom.ts
index 17b3f7adb152..e0dfee5b605a 100644
--- a/definition/IRoom.ts
+++ b/definition/IRoom.ts
@@ -17,7 +17,6 @@ export interface IRoom extends IRocketChatRecord {
 	broadcast?: true;
 	featured?: true;
 	encrypted?: boolean;
-	teamMain?: boolean;
 
 	u: Pick<IUser, '_id' | 'username' | 'name'>;
 

From 534d84095e84d0020b863c4c73f63dfc80605c37 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 15:19:03 -0300
Subject: [PATCH 20/24] Review

---
 .../endpoints/v1/teams/addRooms.ts            |  2 +-
 .../AddExistingModal/AddExistingModal.tsx     | 32 +++++++++----------
 .../modals/AddExistingModal/RoomsInput.tsx    |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
index 960de32cfd10..cc1a8fc9ef47 100644
--- a/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
+++ b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
@@ -1,7 +1,7 @@
 import { IRoom } from '../../../../../../definition/IRoom';
 
 export type AddRoomsEndpoint = {
-	POST: (params: { rooms: string[]; teamId: string }) => {
+	POST: (params: { rooms: IRoom['_id'][]; teamId: string }) => {
 		success: true;
 		statusCode: 200;
 		body: IRoom[];
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index 1244c6d27981..b053faccc7f7 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -9,8 +9,8 @@ import { IRoom } from '../../../../../definition/IRoom';
 
 type AddExistingModalState = {
 	onAdd: any;
-	channels: IRoom[];
-	onChangeChannels: any;
+	rooms: IRoom[];
+	onChange: (value: IRoom, action: 'remove' | undefined) => void;
 	hasUnsavedChanges: boolean;
 }
 
@@ -23,43 +23,43 @@ const useAddExistingModalState = (onClose: () => void, teamId: string): AddExist
 	const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
 
 	const { values, handlers, hasUnsavedChanges } = useForm({
-		channels: [] as IRoom[],
+		rooms: [] as IRoom[],
 	});
 
-	const { channels } = values as { channels: IRoom[] };
-	const { handleChannels } = handlers;
+	const { rooms } = values as { rooms: IRoom[] };
+	const { handleRooms } = handlers;
 
-	const onChangeChannels = useCallback((value: IRoom, action: string) => {
+	const onChange = useCallback<AddExistingModalState['onChange']>((value, action) => {
 		if (!action) {
-			if (channels.some((current: IRoom) => current._id === value._id)) {
+			if (rooms.some((current: IRoom) => current._id === value._id)) {
 				return;
 			}
 
-			handleChannels([...channels, value]);
+			handleRooms([...rooms, value]);
 
 			return;
 		}
 
-		handleChannels(channels.filter((current: any) => current._id !== value));
-	}, [handleChannels, channels]);
+		handleRooms(rooms.filter((current: any) => current._id !== value));
+	}, [handleRooms, rooms]);
 
 	const onAdd = useCallback(() => {
 		addRoomEndpoint({
-			rooms: channels.map((channel) => channel._id),
+			rooms: rooms.map((room) => room._id),
 			teamId,
 		});
 		onClose();
-	}, [addRoomEndpoint, channels, onClose, teamId]);
+	}, [addRoomEndpoint, rooms, onClose, teamId]);
 
-	return { onAdd, channels, onChangeChannels, hasUnsavedChanges };
+	return { onAdd, rooms, onChange, hasUnsavedChanges };
 };
 
 const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 	const t = useTranslation();
 	const {
-		channels,
+		rooms,
 		onAdd,
-		onChangeChannels,
+		onChange,
 		hasUnsavedChanges,
 	} = useAddExistingModalState(onClose, teamId);
 
@@ -73,7 +73,7 @@ const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
 		<Modal.Content>
 			<Field mbe='x24'>
 				<Field.Label>{t('Channels')}</Field.Label>
-				<RoomsInput value={channels} onChange={onChangeChannels} />
+				<RoomsInput value={rooms} onChange={onChange} />
 			</Field>
 		</Modal.Content>
 		<Modal.Footer>
diff --git a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
index e37f80310939..06d30971ec1a 100644
--- a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
@@ -8,7 +8,7 @@ import { useEndpointData } from '../../../../hooks/useEndpointData';
 
 type RoomsInputProps = {
 	value: IRoom[];
-	onChange: (value: unknown, action: 'remove' | undefined) => void;
+	onChange: (value: IRoom, action: 'remove' | undefined) => void;
 };
 
 // TODO: Make AutoComplete accept arbitrary kinds of values

From c87365bb9052bdd738c7062994a882161b376545 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 15:43:39 -0300
Subject: [PATCH 21/24] Fix lint issues

---
 client/views/directory/TeamsTab.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/views/directory/TeamsTab.js b/client/views/directory/TeamsTab.js
index 616cda508b8a..4661c9fff6ea 100644
--- a/client/views/directory/TeamsTab.js
+++ b/client/views/directory/TeamsTab.js
@@ -1,8 +1,8 @@
 import { Box, Margins, Table, Avatar, Tag } from '@rocket.chat/fuselage';
-import { useMediaQuery, useAutoFocus } from '@rocket.chat/fuselage-hooks';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useState, useCallback } from 'react';
 
-import FilterByText from '../../components/FilterByText';
+// import FilterByText from '../../components/FilterByText';
 import GenericTable from '../../components/GenericTable';
 import NotAuthorizedPage from '../../components/NotAuthorizedPage';
 import { usePermission } from '../../contexts/AuthorizationContext';
@@ -27,12 +27,11 @@ function RoomTags({ room }) {
 
 function TeamsTable() {
 	const t = useTranslation();
-	const refAutoFocus = useAutoFocus(true);
 	const [sort, setSort] = useState(['name', 'asc']);
 	const [params, setParams] = useState({ current: 0, itemsPerPage: 25 });
 
 	const mediaQuery = useMediaQuery('(min-width: 768px)');
-	
+
 	const onHeaderClick = useCallback((id) => {
 		const [sortBy, sortDirection] = sort;
 
@@ -56,7 +55,7 @@ function TeamsTable() {
 
 	const { value: data = { result: [] } } = useEndpointData('teams.list', query);
 
-	console.log(data)
+	console.log(data);
 
 	const onClick = useMemo(() => (name, type) => (e) => {
 		if (e.type === 'click' || e.key === 'Enter') {
@@ -95,7 +94,6 @@ function TeamsTable() {
 
 	return <GenericTable
 		header={header}
-		// renderFilter={({ onChange, ...props }) => <FilterByText placeholder={t('Search_Teams')} inputRef={refAutoFocus} onChange={onChange} {...props} />}
 		renderRow={renderRow}
 		results={data.teams}
 		setParams={setParams}

From 38165ca3c96a6fa6540bf7641bec915bf259ceaf Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 15:58:24 -0300
Subject: [PATCH 22/24] Review

---
 client/views/teams/modals/AddExistingModal/RoomsInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
index 06d30971ec1a..4c23bcfd60a9 100644
--- a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
+++ b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
@@ -5,6 +5,7 @@ import React, { FC, memo, useCallback, useMemo, useState } from 'react';
 import { IRoom } from '../../../../../definition/IRoom';
 import RoomAvatar from '../../../../components/avatar/RoomAvatar';
 import { useEndpointData } from '../../../../hooks/useEndpointData';
+import { roomTypes } from '../../../../../app/utils/client';
 
 type RoomsInputProps = {
 	value: IRoom[];
@@ -27,7 +28,7 @@ const useRoomsAutoComplete = (name: string): {
 		}
 
 		return data.items.map((room: IRoom) => ({
-			label: room.fname ?? room.name,
+			label: roomTypes.getRoomName(room.t, room),
 			value: room._id,
 		}));
 	}, [data]);

From bb59a27cedcbb3e73e01efc126edd084d86301df Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 16:03:33 -0300
Subject: [PATCH 23/24] Review

---
 .../AddExistingModal/AddExistingModal.tsx     | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
index b053faccc7f7..0b078bacfdfa 100644
--- a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useEndpoint } from '../../../../contexts/ServerContext';
 import RoomsInput from './RoomsInput';
 import { IRoom } from '../../../../../definition/IRoom';
+import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
 
 type AddExistingModalState = {
 	onAdd: any;
@@ -43,13 +44,19 @@ const useAddExistingModalState = (onClose: () => void, teamId: string): AddExist
 		handleRooms(rooms.filter((current: any) => current._id !== value));
 	}, [handleRooms, rooms]);
 
-	const onAdd = useCallback(() => {
-		addRoomEndpoint({
-			rooms: rooms.map((room) => room._id),
-			teamId,
-		});
-		onClose();
-	}, [addRoomEndpoint, rooms, onClose, teamId]);
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const onAdd = useCallback(async () => {
+		try {
+			await addRoomEndpoint({
+				rooms: rooms.map((room) => room._id),
+				teamId,
+			});
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [addRoomEndpoint, rooms, teamId, onClose, dispatchToastMessage]);
 
 	return { onAdd, rooms, onChange, hasUnsavedChanges };
 };

From 50d848e78d28e48d48f9e6e86ab92e363b28af0a Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 23 Mar 2021 16:08:43 -0300
Subject: [PATCH 24/24] Review

---
 .../views/teams/contextualBar/TeamChannels.js  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 24de8752466a..c3f116089242 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -15,17 +15,17 @@ import AddExistingModal from '../modals/AddExistingModal';
 import { TeamChannelItem } from './TeamChannelItem';
 import CreateChannel from '../../../sidebar/header/CreateChannel';
 
-const Row = memo(({ room }) => {
+const Row = memo(function Row({ room }) {
 	if (!room) {
-		return <TeamChannels.Option.Skeleton />;
+		return <BaseTeamChannels.Option.Skeleton />;
 	}
 
-	return <TeamChannels.Option
+	return <BaseTeamChannels.Option
 		room={room}
 	/>;
 });
 
-export const TeamChannels = ({
+const BaseTeamChannels = ({
 	loading,
 	channels = [],
 	text,
@@ -99,7 +99,7 @@ export const TeamChannels = ({
 	);
 };
 
-TeamChannels.Option = TeamChannelItem;
+BaseTeamChannels.Option = TeamChannelItem;
 
 export const useReactModal = (Component, props) => {
 	const setModal = useSetModal();
@@ -118,7 +118,7 @@ export const useReactModal = (Component, props) => {
 	});
 };
 
-export default ({ teamId, tabBar }) => {
+function TeamChannels({ teamId, tabBar }) {
 	const [type, setType] = useLocalStorage('channels-list-type', 'all');
 	const [text, setText] = useState('');
 	const [roomList] = useState(() => new RecordList());
@@ -153,7 +153,7 @@ export default ({ teamId, tabBar }) => {
 	const createNew = useReactModal(CreateChannel, { teamId });
 
 	return (
-		<TeamChannels
+		<BaseTeamChannels
 			loading={phase === 'loading'}
 			type={type}
 			text={text}
@@ -167,4 +167,6 @@ export default ({ teamId, tabBar }) => {
 			loadMoreItems={loadMoreItems}
 		/>
 	);
-};
+}
+
+export default TeamChannels;