Regression: add view room action on Teams Channels

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,
@@ -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}

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

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

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;

client/views/teams/contextualBar/index.ts → 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,
 });