Regression: Add view room action on Teams Channels (#21295)

* add threads on teams and headers items positions

* add click to view room

* Review

* Add enter action

* fix component pattern

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
Co-authored-by: Gabriel Henriques <gabriel.henriques@rocket.chat>

app/discussion/client/tabBar.ts

@@ -15,6 +15,6 @@ addAction('discussions', () => {
 		icon: 'discussion',
 		template,
 		full: true,
-		order: 1,
+		order: 7,
 	} : null), [discussionEnabled]);
 });

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]);
 });

client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js

@@ -49,6 +49,7 @@ export const RoomInfo = function RoomInfo({
 	rid,
 	icon,
 	retentionPolicy = {},
+	onClickBack,
 	onClickHide,
 	onClickClose,
 	onClickLeave,
@@ -56,6 +57,7 @@ export const RoomInfo = function RoomInfo({
 	onClickDelete,
 	onClickMoveToTeam,
 	onClickConvertToTeam,
+	onClickEnterRoom,
 }) {
 	const t = useTranslation();
 
@@ -67,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',
@@ -97,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);
 
@@ -127,7 +134,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>
@@ -186,9 +193,11 @@ export const RoomInfo = function RoomInfo({
 	);
 };
 
-export default ({
+const RoomInfoWithData = ({
 	rid,
 	openEditing,
+	onClickBack,
+	onEnterRoom,
 }) => {
 	const onClickClose = useTabBarClose();
 	const t = useTranslation();
@@ -328,12 +337,15 @@ export default ({
 		/>);
 	});
 
+	const onClickEnterRoom = useMutableCallback(() => onEnterRoom(room));
+
 	return (
 		<RoomInfo
 			archived={archived}
 			broadcast={broadcast}
 			icon={room.t === 'p' ? 'lock' : 'hashtag'}
 			retentionPolicy={retentionPolicyEnabled && retentionPolicy}
+			onClickBack={onClickBack}
 			onClickEdit={canEdit && openEditing}
 			onClickClose={onClickClose}
 			onClickDelete={canDelete && handleDelete}
@@ -341,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}/>}
@@ -348,3 +361,5 @@ export default ({
 		/>
 	);
 };
+
+export default RoomInfoWithData;

client/views/room/contextualBar/Info/index.js

@@ -1,11 +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 }) => {
+const RoomInfo = ({ rid, onClickBack, onEnterRoom }) => {
 	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
+		? <EditRoomInfoWithData onClickBack={backToView} rid={rid} />
+		: <RoomInfoWithData onClickBack={onClickBack} openEditing={setEditing} rid={rid} onEnterRoom={onEnterRoom} />;
 };
+
+export default RoomInfo;

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);

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';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 
 export const useReactModal = (Component, props) => {
@@ -93,24 +94,28 @@ const RoomActions = ({ room }) => {
 	/>;
 };
 
-export const TeamChannelItem = ({ room }) => {
+export const TeamChannelItem = ({ room, onClickView }) => {
 	const t = useTranslation();
 	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><Box display='inline-flex'>{roomTypes.getRoomName(room.t, room)} {room.teamDefault ? <Breadcrumbs.Tag>{t('Team_Auto-join')}</Breadcrumbs.Tag> : ''}</Box></Option.Content>
-			<Option.Menu>
+			<Option.Menu onClick={onClick}>
 				{showButton ? <RoomActions room={room} /> : <ActionButton
 					ghost
 					tiny

client/views/teams/contextualBar/TeamChannels.js

@@ -9,19 +9,24 @@ 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';
+
 
-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 +42,7 @@ const BaseTeamChannels = ({
 	onClickCreateNew,
 	total,
 	loadMoreItems,
+	onClickView,
 }) => {
 	const t = useTranslation();
 	const inputRef = useAutoFocus(true);
@@ -76,13 +82,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 +128,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,9 +162,23 @@ function TeamChannels({ teamId, tabBar }) {
 	}, []);
 
 	const addExisting = useReactModal(AddExistingModal, { teamId });
-
 	const createNew = useReactModal(CreateChannel, { teamId });
 
+	const goToRoom = useCallback((room) => roomTypes.openRouteLink(room.t, room), []);
+	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} onEnterRoom={goToRoom} />;
+	}
+
 	return (
 		<BaseTeamChannels
 			loading={phase === 'loading'}
@@ -161,12 +188,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;

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

client/views/teams/index.js

@@ -1,4 +1,4 @@
-import './contextualBar';
+import './contextualBar/tabBar';
 import './info/tabBar.ts';
 import './members/tabBar';
 import './info';

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,
 });

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,
 });

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",