feat: Use IconButton to navigate to parent room

.changeset/four-dragons-warn.md

@@ -0,0 +1,8 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Replaces the parent room tag in room header in favor of a button to back to the parent room
+> This change is being tested under `Enhanced navigation experience` feature preview, in order to check it you need to enabled it

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentDiscussion/ParentDiscussion.tsx

@@ -0,0 +1,20 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useTranslation } from 'react-i18next';
+
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import ParentRoomButton from '../ParentRoomButton';
+
+type ParentDiscussionProps = {
+	loading?: boolean;
+	room: Pick<IRoom, '_id' | 't' | 'name' | 'fname' | 'prid' | 'u'>;
+};
+
+const ParentDiscussion = ({ loading = false, room }: ParentDiscussionProps) => {
+	const { t } = useTranslation();
+	const roomName = roomCoordinator.getRoomName(room.t, room);
+	const handleRedirect = (): void => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room });
+
+	return <ParentRoomButton loading={loading} onClick={handleRedirect} title={t('Back_to__roomName__channel', { roomName })} />;
+};
+
+export default ParentDiscussion;

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentDiscussion/ParentDiscussionRoute.tsx

@@ -0,0 +1,27 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import ParentDiscussion from './ParentDiscussion';
+import ParentDiscussionWithData from './ParentDiscussionWithData';
+
+type ParentDiscussionRouteProps = {
+	room: Pick<IRoom, '_id' | 't' | 'name' | 'fname' | 'prid' | 'u'>;
+};
+
+const ParentDiscussionRoute = ({ room }: ParentDiscussionRouteProps) => {
+	const { prid } = room;
+
+	if (!prid) {
+		throw new Error('Parent room ID is missing');
+	}
+
+	const subscription = useUserSubscription(prid);
+
+	if (subscription) {
+		return <ParentDiscussion room={subscription} />;
+	}
+
+	return <ParentDiscussionWithData rid={prid} />;
+};
+
+export default ParentDiscussionRoute;

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentDiscussion/ParentDiscussionWithData.tsx

@@ -0,0 +1,16 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+
+import ParentDiscussion from './ParentDiscussion';
+import { useRoomInfoEndpoint } from '../../../../../hooks/useRoomInfoEndpoint';
+
+const ParentDiscussionWithData = ({ rid }: { rid: IRoom['_id'] }) => {
+	const { data, isPending, isError } = useRoomInfoEndpoint(rid);
+
+	if (isError || !data?.room) {
+		return null;
+	}
+
+	return <ParentDiscussion loading={isPending} room={data.room} />;
+};
+
+export default ParentDiscussionWithData;

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentDiscussion/index.ts

@@ -0,0 +1 @@
+export { default } from './ParentDiscussionRoute';

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentRoom.tsx

@@ -0,0 +1,22 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+
+import ParentDiscussion from './ParentDiscussion';
+import ParentTeam from './ParentTeam';
+
+const ParentRoom = ({ room }: { room: IRoom }) => {
+	const parentRoomId = Boolean(room.prid || (room.teamId && !room.teamMain));
+
+	if (!parentRoomId) {
+		return null;
+	}
+
+	if (room.prid) {
+		return <ParentDiscussion room={room} />;
+	}
+
+	if (room.teamId && !room.teamMain) {
+		return <ParentTeam room={room} />;
+	}
+};
+
+export default ParentRoom;

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentRoomButton.tsx

@@ -0,0 +1,14 @@
+import { IconButton, Skeleton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+type ParentRoomButtonProps = Omit<ComponentProps<typeof IconButton>, 'icon'> & { loading: boolean };
+
+const ParentRoomButton = ({ loading, ...props }: ParentRoomButtonProps) => {
+	if (loading) {
+		return <Skeleton variant='rect' size={28} />;
+	}
+
+	return <IconButton small icon='arrow-back-up' {...props} />;
+};
+
+export default ParentRoomButton;

apps/meteor/client/views/room/HeaderV2/ParentTeam.tsx → apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentTeam.tsx

@@ -2,9 +2,10 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
 import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 
-import { HeaderTag, HeaderTagIcon, HeaderTagSkeleton } from '../../../components/Header';
-import { goToRoomById } from '../../../lib/utils/goToRoomById';
+import ParentRoomButton from './ParentRoomButton';
+import { goToRoomById } from '../../../../lib/utils/goToRoomById';
 
 type APIErrorResult = { success: boolean; error: string };
 
@@ -13,7 +14,9 @@ type ParentTeamProps = {
 };
 
 const ParentTeam = ({ room }: ParentTeamProps) => {
+	const { t } = useTranslation();
 	const { teamId } = room;
+
 	const userId = useUserId();
 
 	if (!teamId) {
@@ -43,40 +46,29 @@ const ParentTeam = ({ room }: ParentTeamProps) => {
 		queryFn: async () => userTeamsListEndpoint({ userId }),
 	});
 
-	const userBelongsToTeam = userTeams?.teams?.find((team) => team._id === teamId) || false;
-	const isTeamPublic = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;
+	const userBelongsToTeam = Boolean(userTeams?.teams?.find((team) => team._id === teamId)) || false;
+	const isPublicTeam = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;
+	const shouldDisplayTeam = isPublicTeam || userBelongsToTeam;
 
 	const redirectToMainRoom = (): void => {
 		const rid = teamInfoData?.teamInfo.roomId;
 		if (!rid) {
 			return;
 		}
 
-		if (!(isTeamPublic || userBelongsToTeam)) {
-			return;
-		}
-
 		goToRoomById(rid);
 	};
 
-	if (teamInfoLoading || userTeamsLoading) {
-		return <HeaderTagSkeleton />;
-	}
-
-	if (teamInfoError) {
+	if (teamInfoError || !shouldDisplayTeam) {
 		return null;
 	}
 
 	return (
-		<HeaderTag
-			role='button'
-			tabIndex={0}
-			onKeyDown={(e) => (e.code === 'Space' || e.code === 'Enter') && redirectToMainRoom()}
+		<ParentRoomButton
+			loading={teamInfoLoading || userTeamsLoading}
 			onClick={redirectToMainRoom}
-		>
-			<HeaderTagIcon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
-			{teamInfoData?.teamInfo.name}
-		</HeaderTag>
+			title={t('Back_to__roomName__team', { roomName: teamInfoData?.teamInfo.name })}
+		/>
 	);
 };
 

apps/meteor/client/views/room/HeaderV2/ParentRoom/index.ts

@@ -0,0 +1 @@
+export { default } from './ParentRoom';

apps/meteor/client/views/room/HeaderV2/RoomHeader.tsx

@@ -5,8 +5,7 @@ import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FederatedRoomOriginServer from './FederatedRoomOriginServer';
-import ParentRoomWithData from './ParentRoomWithData';
-import ParentTeam from './ParentTeam';
+import ParentRoom from './ParentRoom';
 import RoomTitle from './RoomTitle';
 import RoomToolbox from './RoomToolbox';
 import RoomTopic from './RoomTopic';
@@ -38,13 +37,12 @@ const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => {
 	return (
 		<Header>
 			{slots?.start}
+			<ParentRoom room={room} />
 			{slots?.preContent}
 			<HeaderContent>
 				<HeaderContentRow>
 					<RoomTitle room={room} />
 					<Favorite room={room} />
-					{room.prid && <ParentRoomWithData room={room} />}
-					{room.teamId && !room.teamMain && <ParentTeam room={room} />}
 					{isRoomFederated(room) && <FederatedRoomOriginServer room={room} />}
 					<Encrypted room={room} />
 					<Translate room={room} />

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -134,7 +134,7 @@ test.describe.serial('channel-management', () => {
 		targetChannel = hugeName;
 
 		await page.setViewportSize({ width: 640, height: 460 });
-		await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '411px');
+		await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '407px');
 	});
 
 	test('should open sidebar clicking on sidebar toggler', async ({ page }) => {