From f159ba73779c5967fdb5f6723ad38b27944092a2 Mon Sep 17 00:00:00 2001
From: dougfabris <deefabris@gmail.com>
Date: Wed, 24 Mar 2021 15:47:18 -0300
Subject: [PATCH 1/5] add threads on teams and headers items positions

---
 app/discussion/client/tabBar.ts                        |  2 +-
 app/threads/client/flextab/threadlist.tsx              |  4 ++--
 .../views/teams/contextualBar/{index.ts => tabBar.ts}  | 10 +++++-----
 client/views/teams/index.js                            |  2 +-
 client/views/teams/info/tabBar.ts                      |  2 +-
 client/views/teams/members/tabBar.ts                   |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)
 rename client/views/teams/contextualBar/{index.ts => tabBar.ts} (69%)

diff --git a/app/discussion/client/tabBar.ts b/app/discussion/client/tabBar.ts
index bcdfb59b80347..14bfe145c4386 100644
--- a/app/discussion/client/tabBar.ts
+++ b/app/discussion/client/tabBar.ts
@@ -15,6 +15,6 @@ addAction('discussions', () => {
 		icon: 'discussion',
 		template,
 		full: true,
-		order: 1,
+		order: 7,
 	} : null), [discussionEnabled]);
 });
diff --git a/app/threads/client/flextab/threadlist.tsx b/app/threads/client/flextab/threadlist.tsx
index 45bf968663312..75650d3dd6caa 100644
--- a/app/threads/client/flextab/threadlist.tsx
+++ b/app/threads/client/flextab/threadlist.tsx
@@ -22,7 +22,7 @@ addAction('thread', (options) => {
 	const room = options.room as unknown as ISubscription;
 	const threadsEnabled = useSetting('Threads_enabled');
 	return useMemo(() => (threadsEnabled ? {
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group', 'direct', 'team'],
 		id: 'thread',
 		full: true,
 		title: 'Threads',
@@ -35,6 +35,6 @@ addAction('thread', (options) => {
 				{ unread > 0 && <Header.Badge variant={variant}>{unread}</Header.Badge> }
 			</Header.ToolBoxAction>;
 		},
-		order: 2,
+		order: 4,
 	} : null), [threadsEnabled, room.tunread?.length, room.tunreadUser?.length, room.tunreadGroup?.length]);
 });
diff --git a/client/views/teams/contextualBar/index.ts b/client/views/teams/contextualBar/tabBar.ts
similarity index 69%
rename from client/views/teams/contextualBar/index.ts
rename to client/views/teams/contextualBar/tabBar.ts
index d2633b51a8615..d2f359a09f756 100644
--- a/client/views/teams/contextualBar/index.ts
+++ b/client/views/teams/contextualBar/tabBar.ts
@@ -1,14 +1,14 @@
-import { lazy, LazyExoticComponent, FC } from 'react';
+import { FC, lazy, LazyExoticComponent } from 'react';
 
 import { addAction } from '../../room/lib/Toolbox';
 
-addAction('team-channels', () => ({
+addAction('team-channels', {
 	groups: ['team'],
 	id: 'team-channels',
 	anonymous: true,
+	full: true,
 	title: 'Team_Channels',
 	icon: 'hash',
 	template: lazy(() => import('./TeamChannels')) as LazyExoticComponent<FC>,
-	full: true,
-	order: 8,
-}));
+	order: 2,
+});
diff --git a/client/views/teams/index.js b/client/views/teams/index.js
index 9a2bd377992cb..b97eb784c4cd6 100644
--- a/client/views/teams/index.js
+++ b/client/views/teams/index.js
@@ -1,4 +1,4 @@
-import './contextualBar';
+import './contextualBar/tabBar';
 import './info/tabBar.ts';
 import './members/tabBar';
 import './info';
diff --git a/client/views/teams/info/tabBar.ts b/client/views/teams/info/tabBar.ts
index 9202bb9f91ae2..ee8a103aa1023 100644
--- a/client/views/teams/info/tabBar.ts
+++ b/client/views/teams/info/tabBar.ts
@@ -10,5 +10,5 @@ addAction('team-info', {
 	title: 'Teams_Info',
 	icon: 'info-circled',
 	template: lazy(() => import('./index.js')) as LazyExoticComponent<FC>,
-	order: 7,
+	order: 1,
 });
diff --git a/client/views/teams/members/tabBar.ts b/client/views/teams/members/tabBar.ts
index 9495adf19ed74..2f8493f7ce851 100644
--- a/client/views/teams/members/tabBar.ts
+++ b/client/views/teams/members/tabBar.ts
@@ -10,5 +10,5 @@ addAction('team-members', {
 	title: 'Teams_members',
 	icon: 'members',
 	template: lazy(() => import('./index')),
-	order: 7,
+	order: 6,
 });

From 04486ab748f83d2934c4db89cc0a6ed03c40f943 Mon Sep 17 00:00:00 2001
From: dougfabris <deefabris@gmail.com>
Date: Wed, 24 Mar 2021 17:35:25 -0300
Subject: [PATCH 2/5] add click to view room

---
 .../List => }/hooks/usePreventProgation.tsx   |  0
 .../contextualBar/Info/RoomInfo/RoomInfo.js   |  5 ++-
 client/views/room/contextualBar/Info/index.js |  6 +--
 .../RoomMembers/List/components/MemberItem.js |  2 +-
 .../teams/contextualBar/TeamChannelItem.js    |  9 ++++-
 .../views/teams/contextualBar/TeamChannels.js | 40 +++++++++++++++----
 6 files changed, 48 insertions(+), 14 deletions(-)
 rename client/{views/room/contextualBar/RoomMembers/List => }/hooks/usePreventProgation.tsx (100%)

diff --git a/client/views/room/contextualBar/RoomMembers/List/hooks/usePreventProgation.tsx b/client/hooks/usePreventProgation.tsx
similarity index 100%
rename from client/views/room/contextualBar/RoomMembers/List/hooks/usePreventProgation.tsx
rename to client/hooks/usePreventProgation.tsx
diff --git a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
index f76b254196743..90769b2774b1d 100644
--- a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
+++ b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
@@ -49,6 +49,7 @@ export const RoomInfo = function RoomInfo({
 	rid,
 	icon,
 	retentionPolicy = {},
+	onClickBack,
 	onClickHide,
 	onClickClose,
 	onClickLeave,
@@ -127,7 +128,7 @@ export const RoomInfo = function RoomInfo({
 	return (
 		<>
 			<VerticalBar.Header>
-				<VerticalBar.Icon name='info-circled'/>
+				{onClickBack ? <VerticalBar.Back onClick={onClickBack} /> : <VerticalBar.Icon name='info-circled'/>}
 				<VerticalBar.Text>{t('Room_Info')}</VerticalBar.Text>
 				{ onClickClose && <VerticalBar.Close onClick={onClickClose} /> }
 			</VerticalBar.Header>
@@ -189,6 +190,7 @@ export const RoomInfo = function RoomInfo({
 export default ({
 	rid,
 	openEditing,
+	onClickBack,
 }) => {
 	const onClickClose = useTabBarClose();
 	const t = useTranslation();
@@ -334,6 +336,7 @@ export default ({
 			broadcast={broadcast}
 			icon={room.t === 'p' ? 'lock' : 'hashtag'}
 			retentionPolicy={retentionPolicyEnabled && retentionPolicy}
+			onClickBack={onClickBack}
 			onClickEdit={canEdit && openEditing}
 			onClickClose={onClickClose}
 			onClickDelete={canDelete && handleDelete}
diff --git a/client/views/room/contextualBar/Info/index.js b/client/views/room/contextualBar/Info/index.js
index 40f9e52914fab..d81105659cb91 100644
--- a/client/views/room/contextualBar/Info/index.js
+++ b/client/views/room/contextualBar/Info/index.js
@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import EditChannelWithData from './EditRoomInfo';
 import RoomInfo from './RoomInfo';
 
-export default ({ rid }) => {
+export default ({ rid, onClickBack }) => {
 	const [editing, setEditing] = useState(false);
-	const onClickBack = useMutableCallback(() => setEditing(false));
-	return editing ? <EditChannelWithData onClickBack={onClickBack} rid={rid} /> : <RoomInfo openEditing={setEditing} rid={rid} />;
+	const backToView = useMutableCallback(() => setEditing(false));
+	return editing ? <EditChannelWithData onClickBack={backToView} rid={rid} /> : <RoomInfo onClickBack={onClickBack} openEditing={setEditing} rid={rid} />;
 };
diff --git a/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js b/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
index b7ef8063c4526..fd470fbf404a2 100644
--- a/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
+++ b/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js
@@ -11,7 +11,7 @@ import { useUserInfoActions } from '../../../../hooks/useUserInfoActions';
 import { useActionSpread } from '../../../../../hooks/useActionSpread';
 import UserAvatar from '../../../../../../components/avatar/UserAvatar';
 import { ReactiveUserStatus } from '../../../../../../components/UserStatus';
-import { usePreventProgation } from '../hooks/usePreventProgation';
+import { usePreventProgation } from '../../../../../../hooks/usePreventProgation';
 
 const UserActions = ({ username, _id, rid }) => {
 	const { menu: menuOptions } = useActionSpread(useUserInfoActions({ _id, username }, rid), 0);
diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
index 495fde584a8c3..dd6beb19800b3 100644
--- a/client/views/teams/contextualBar/TeamChannelItem.js
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -8,6 +8,7 @@ import { useSetModal } from '../../../contexts/ModalContext';
 import RoomAvatar from '../../../components/avatar/RoomAvatar';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { roomTypes } from '../../../../app/utils/client';
+import { usePreventProgation } from '../../../hooks/usePreventProgation';
 
 export const useReactModal = (Component, props) => {
 	const setModal = useSetModal();
@@ -92,23 +93,27 @@ const RoomActions = ({ room }) => {
 	/>;
 };
 
-export const TeamChannelItem = ({ room }) => {
+export const TeamChannelItem = ({ room, onClickView }) => {
 	const [showButton, setShowButton] = useState();
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: setShowButton };
 
+	const onClick = usePreventProgation();
+
 	return (
 		<Option
 			id={room._id}
+			data-rid={room._id}
 			{ ...handleMenuEvent }
+			onClick={onClickView}
 		>
 			<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>{room.fname || room.name}</Option.Content>
-			<Option.Menu>
+			<Option.Menu onClick={onClick}>
 				{showButton ? <RoomActions room={room} /> : <ActionButton
 					ghost
 					tiny
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index c3f116089242c..8c31ea51c446b 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -14,14 +14,18 @@ import VerticalBar from '../../../components/VerticalBar';
 import AddExistingModal from '../modals/AddExistingModal';
 import { TeamChannelItem } from './TeamChannelItem';
 import CreateChannel from '../../../sidebar/header/CreateChannel';
+import RoomInfo from '../../room/contextualBar/Info';
+import { useTabBarClose } from '../../room/providers/ToolboxProvider';
 
-const Row = memo(function Row({ room }) {
+
+const Row = memo(function Row({ room, onClickView }) {
 	if (!room) {
 		return <BaseTeamChannels.Option.Skeleton />;
 	}
 
 	return <BaseTeamChannels.Option
 		room={room}
+		onClickView={onClickView}
 	/>;
 });
 
@@ -37,6 +41,7 @@ const BaseTeamChannels = ({
 	onClickCreateNew,
 	total,
 	loadMoreItems,
+	onClickView,
 }) => {
 	const t = useTranslation();
 	const inputRef = useAutoFocus(true);
@@ -76,13 +81,17 @@ const BaseTeamChannels = ({
 
 				<Box w='full' h='full' overflow='hidden' flexShrink={1}>
 					{!loading && channels && channels.length > 0 && <Virtuoso
-						style={{ height: '100%', width: '100%' }}
+						style={{
+							height: '100%',
+							width: '100%',
+						}}
 						totalCount={total}
 						endReached={lm}
 						overscan={50}
 						data={channels}
 						components={{ Scroller: ScrollableContentWrapper }}
 						itemContent={(index, data) => <Row
+							onClickView={onClickView}
 							room={data}
 						/>}
 					/>}
@@ -118,14 +127,17 @@ export const useReactModal = (Component, props) => {
 	});
 };
 
-function TeamChannels({ teamId, tabBar }) {
+const TeamChannels = ({ teamId }) => {
+	const [state, setState] = useState({});
+	const onClickClose = useTabBarClose();
+
 	const [type, setType] = useLocalStorage('channels-list-type', 'all');
 	const [text, setText] = useState('');
 	const [roomList] = useState(() => new RecordList());
 
 	const roomListEndpoint = useEndpoint('GET', 'teams.listRooms');
 
-	const fetchData = useCallback(async (/* start, end*/) => {
+	const fetchData = useCallback(async () => {
 		const { rooms, total } = await roomListEndpoint({ teamId });
 
 		const roomsDated = rooms.map((rooms) => {
@@ -149,8 +161,21 @@ function TeamChannels({ teamId, tabBar }) {
 	}, []);
 
 	const addExisting = useReactModal(AddExistingModal, { teamId });
-
 	const createNew = useReactModal(CreateChannel, { teamId });
+	const handleBack = useCallback(() => setState({}), [setState]);
+
+	const viewRoom = useMutableCallback((e) => {
+		const { rid } = e.currentTarget.dataset;
+
+		setState({
+			tab: 'RoomInfo',
+			rid,
+		});
+	});
+
+	if (state.tab === 'RoomInfo') {
+		return <RoomInfo rid={state.rid} onClickClose={onClickClose} onClickBack={handleBack} />;
+	}
 
 	return (
 		<BaseTeamChannels
@@ -161,12 +186,13 @@ function TeamChannels({ teamId, tabBar }) {
 			setText={handleTextChange}
 			channels={items}
 			total={itemCount}
-			onClickClose={tabBar.close}
+			onClickClose={onClickClose}
 			onClickAddExisting={addExisting}
 			onClickCreateNew={createNew}
+			onClickView={viewRoom}
 			loadMoreItems={loadMoreItems}
 		/>
 	);
-}
+};
 
 export default TeamChannels;

From 889a4e0489c0bcfc2e1ad8faf5b453944c5bc047 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 25 Mar 2021 14:42:26 -0300
Subject: [PATCH 3/5] Review

---
 client/hooks/{usePreventProgation.tsx => usePreventProgation.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename client/hooks/{usePreventProgation.tsx => usePreventProgation.ts} (100%)

diff --git a/client/hooks/usePreventProgation.tsx b/client/hooks/usePreventProgation.ts
similarity index 100%
rename from client/hooks/usePreventProgation.tsx
rename to client/hooks/usePreventProgation.ts

From 1caaff20ddec4533b530659c9a1c52546711c8ba Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Thu, 25 Mar 2021 15:56:22 -0300
Subject: [PATCH 4/5] Add enter action

---
 .../room/contextualBar/Info/RoomInfo/RoomInfo.js     | 12 +++++++++++-
 client/views/room/contextualBar/Info/index.js        |  6 ++++--
 client/views/teams/contextualBar/TeamChannels.js     | 10 ++++++----
 packages/rocketchat-i18n/i18n/en.i18n.json           |  1 +
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
index 90769b2774b1d..fc01ed9c12f00 100644
--- a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
+++ b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
@@ -57,6 +57,7 @@ export const RoomInfo = function RoomInfo({
 	onClickDelete,
 	onClickMoveToTeam,
 	onClickConvertToTeam,
+	onClickEnterRoom,
 }) {
 	const t = useTranslation();
 
@@ -68,6 +69,11 @@ export const RoomInfo = function RoomInfo({
 	} = retentionPolicy;
 
 	const memoizedActions = useMemo(() => ({
+		...onClickEnterRoom && { enter: {
+			label: t('Enter'),
+			icon: 'login',
+			action: onClickEnterRoom,
+		} },
 		...onClickEdit && { edit: {
 			label: t('Edit'),
 			icon: 'edit',
@@ -98,7 +104,7 @@ export const RoomInfo = function RoomInfo({
 			action: onClickLeave,
 			icon: 'sign-out',
 		} },
-	}), [onClickEdit, t, onClickDelete, onClickMoveToTeam, onClickConvertToTeam, onClickHide, onClickLeave]);
+	}), [onClickEdit, t, onClickDelete, onClickMoveToTeam, onClickConvertToTeam, onClickHide, onClickLeave, onClickEnterRoom]);
 
 	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(memoizedActions);
 
@@ -191,6 +197,7 @@ export default ({
 	rid,
 	openEditing,
 	onClickBack,
+	onEnterRoom,
 }) => {
 	const onClickClose = useTabBarClose();
 	const t = useTranslation();
@@ -330,6 +337,8 @@ export default ({
 		/>);
 	});
 
+	const onClickEnterRoom = useMutableCallback(() => onEnterRoom(room));
+
 	return (
 		<RoomInfo
 			archived={archived}
@@ -344,6 +353,7 @@ export default ({
 			onClickHide={joined && handleHide}
 			onClickMoveToTeam={!room.teamId && onMoveToTeam}
 			onClickConvertToTeam={!room.teamId && canConvertRoomToTeam && onConvertToTeam}
+			onClickEnterRoom={onEnterRoom && onClickEnterRoom}
 			{...room}
 			announcement={room.announcement && <MarkdownText content={room.announcement}/>}
 			description={room.description && <MarkdownText content={room.description}/>}
diff --git a/client/views/room/contextualBar/Info/index.js b/client/views/room/contextualBar/Info/index.js
index d81105659cb91..1c6c22bcd8500 100644
--- a/client/views/room/contextualBar/Info/index.js
+++ b/client/views/room/contextualBar/Info/index.js
@@ -4,8 +4,10 @@ import React, { useState } from 'react';
 import EditChannelWithData from './EditRoomInfo';
 import RoomInfo from './RoomInfo';
 
-export default ({ rid, onClickBack }) => {
+export default ({ rid, onClickBack, onEnterRoom }) => {
 	const [editing, setEditing] = useState(false);
 	const backToView = useMutableCallback(() => setEditing(false));
-	return editing ? <EditChannelWithData onClickBack={backToView} rid={rid} /> : <RoomInfo onClickBack={onClickBack} openEditing={setEditing} rid={rid} />;
+	return editing
+		? <EditChannelWithData onClickBack={backToView} rid={rid} />
+		: <RoomInfo onClickBack={onClickBack} openEditing={setEditing} rid={rid} onEnterRoom={onEnterRoom} />;
 };
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
index 8c31ea51c446b..33a33726355e9 100644
--- a/client/views/teams/contextualBar/TeamChannels.js
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -9,13 +9,14 @@ 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 { TeamChannelItem } from './TeamChannelItem';
+import { useTabBarClose } from '../../room/providers/ToolboxProvider';
+import { roomTypes } from '../../../../app/utils';
 import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
 import VerticalBar from '../../../components/VerticalBar';
 import AddExistingModal from '../modals/AddExistingModal';
-import { TeamChannelItem } from './TeamChannelItem';
 import CreateChannel from '../../../sidebar/header/CreateChannel';
 import RoomInfo from '../../room/contextualBar/Info';
-import { useTabBarClose } from '../../room/providers/ToolboxProvider';
 
 
 const Row = memo(function Row({ room, onClickView }) {
@@ -162,8 +163,9 @@ const TeamChannels = ({ teamId }) => {
 
 	const addExisting = useReactModal(AddExistingModal, { teamId });
 	const createNew = useReactModal(CreateChannel, { teamId });
-	const handleBack = useCallback(() => setState({}), [setState]);
 
+	const goToRoom = useCallback((room) => roomTypes.openRouteLink(room.t, room), []);
+	const handleBack = useCallback(() => setState({}), [setState]);
 	const viewRoom = useMutableCallback((e) => {
 		const { rid } = e.currentTarget.dataset;
 
@@ -174,7 +176,7 @@ const TeamChannels = ({ teamId }) => {
 	});
 
 	if (state.tab === 'RoomInfo') {
-		return <RoomInfo rid={state.rid} onClickClose={onClickClose} onClickBack={handleBack} />;
+		return <RoomInfo rid={state.rid} onClickClose={onClickClose} onClickBack={handleBack} onEnterRoom={goToRoom} />;
 	}
 
 	return (
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 1892dccccdc93..e22bf9ce7cf72 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1536,6 +1536,7 @@
   "End": "End",
   "End_OTR": "End OTR",
   "Engagement_Dashboard": "Engagement Dashboard",
+  "Enter": "Enter",
   "Enter_a_custom_message": "Enter a custom message",
   "Enter_a_department_name": "Enter a department name",
   "Enter_a_name": "Enter a name",

From e5adceb3403864706eb355bc057dd2996453aeb9 Mon Sep 17 00:00:00 2001
From: dougfabris <deefabris@gmail.com>
Date: Thu, 25 Mar 2021 17:24:29 -0300
Subject: [PATCH 5/5] fix component pattern

---
 .../room/contextualBar/Info/RoomInfo/RoomInfo.js     |  4 +++-
 client/views/room/contextualBar/Info/index.js        | 12 +++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
index fc01ed9c12f00..116ec42ae34be 100644
--- a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
+++ b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
@@ -193,7 +193,7 @@ export const RoomInfo = function RoomInfo({
 	);
 };
 
-export default ({
+const RoomInfoWithData = ({
 	rid,
 	openEditing,
 	onClickBack,
@@ -361,3 +361,5 @@ export default ({
 		/>
 	);
 };
+
+export default RoomInfoWithData;
diff --git a/client/views/room/contextualBar/Info/index.js b/client/views/room/contextualBar/Info/index.js
index 1c6c22bcd8500..f0a262c83c39d 100644
--- a/client/views/room/contextualBar/Info/index.js
+++ b/client/views/room/contextualBar/Info/index.js
@@ -1,13 +1,15 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { useState } from 'react';
 
-import EditChannelWithData from './EditRoomInfo';
-import RoomInfo from './RoomInfo';
+import EditRoomInfoWithData from './EditRoomInfo';
+import RoomInfoWithData from './RoomInfo';
 
-export default ({ rid, onClickBack, onEnterRoom }) => {
+const RoomInfo = ({ rid, onClickBack, onEnterRoom }) => {
 	const [editing, setEditing] = useState(false);
 	const backToView = useMutableCallback(() => setEditing(false));
 	return editing
-		? <EditChannelWithData onClickBack={backToView} rid={rid} />
-		: <RoomInfo onClickBack={onClickBack} openEditing={setEditing} rid={rid} onEnterRoom={onEnterRoom} />;
+		? <EditRoomInfoWithData onClickBack={backToView} rid={rid} />
+		: <RoomInfoWithData onClickBack={onClickBack} openEditing={setEditing} rid={rid} onEnterRoom={onEnterRoom} />;
 };
+
+export default RoomInfo;