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 = 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) {
@@ -59,24 +62,16 @@ const ParentTeam = ({ room }: ParentTeamProps) => {
 		goToRoomById(rid);
 	};
 
-	if (teamInfoLoading || userTeamsLoading) {
-		return <HeaderTagSkeleton />;
-	}
-
 	if (teamInfoError) {
 		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 Encrypted from './icons/Encrypted';
@@ -37,13 +36,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/ee/server/services/package.json

@@ -48,7 +48,7 @@
 		"ws": "^8.18.0"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@types/cookie": "^0.5.4",
 		"@types/cookie-parser": "^1.4.7",
 		"@types/ejson": "^2.2.2",

apps/meteor/package.json

@@ -255,7 +255,7 @@
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/i18n": "workspace:^",
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@rocket.chat/instance-status": "workspace:^",
 		"@rocket.chat/jwt": "workspace:^",
 		"@rocket.chat/layout": "~0.32.0",

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 }) => {

apps/meteor/tests/e2e/feature-preview.spec.ts

@@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker';
 
 import { Users } from './fixtures/userStates';
 import { AccountProfile, HomeChannel } from './page-objects';
-import { createTargetChannel, createTargetTeam, deleteChannel, deleteTeam, setSettingValueById } from './utils';
+import { createTargetChannel, createTargetTeam, deleteChannel, deleteTeam, setSettingValueById, createTargetDiscussion } from './utils';
 import { setUserPreferences } from './utils/setUserPreferences';
 import { test, expect } from './utils/test';
 
@@ -12,12 +12,14 @@ test.describe.serial('feature preview', () => {
 	let poHomeChannel: HomeChannel;
 	let poAccountProfile: AccountProfile;
 	let targetChannel: string;
+	let targetDiscussion: string;
 	let sidepanelTeam: string;
 	const targetChannelNameInTeam = `channel-from-team-${faker.number.int()}`;
 
 	test.beforeAll(async ({ api }) => {
 		await setSettingValueById(api, 'Accounts_AllowFeaturePreview', true);
 		targetChannel = await createTargetChannel(api, { members: ['user1'] });
+		targetDiscussion = await createTargetDiscussion(api);
 	});
 
 	test.afterAll(async ({ api }) => {
@@ -172,11 +174,22 @@ test.describe.serial('feature preview', () => {
 			await expect(page.locator('role=navigation[name="header"]')).not.toBeVisible();
 		});
 
-		test('should not display avatar in room header', async ({ page }) => {
+		test('should display the room header properly', async ({ page }) => {
 			await page.goto('/home');
+			await poHomeChannel.sidebar.openChat(targetDiscussion);
 
-			await poHomeChannel.sidebar.openChat(targetChannel);
-			await expect(page.locator('main').locator('header').getByRole('figure')).not.toBeVisible();
+			await test.step('should not display avatar in room header', async () => {
+				await expect(page.locator('main').locator('header').getByRole('figure')).not.toBeVisible();
+			});
+
+			await test.step('should display the back button in the room header when accessing a room with parent', async () => {
+				await expect(
+					page
+						.locator('main')
+						.locator('header')
+						.getByRole('button', { name: /Back to/ }),
+				).toBeVisible();
+			});
 		});
 	});
 

apps/uikit-playground/package.json

@@ -24,7 +24,7 @@
     "@rocket.chat/fuselage-toastbar": "^0.35.0",
     "@rocket.chat/fuselage-tokens": "~0.33.2",
     "@rocket.chat/fuselage-ui-kit": "workspace:~",
-    "@rocket.chat/icons": "^0.40.0",
+    "@rocket.chat/icons": "~0.41.0",
     "@rocket.chat/logo": "^0.32.0",
     "@rocket.chat/styled": "~0.32.0",
     "@rocket.chat/ui-avatar": "workspace:^",

ee/packages/ui-theming/package.json

@@ -6,7 +6,7 @@
 		"@rocket.chat/css-in-js": "~0.31.25",
 		"@rocket.chat/fuselage": "~0.61.0",
 		"@rocket.chat/fuselage-hooks": "~0.35.0",
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@rocket.chat/ui-contexts": "workspace:~",
 		"@types/react": "~18.3.17",
 		"eslint": "~8.45.0",

packages/core-services/package.json

@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",

packages/core-typings/package.json

@@ -24,7 +24,7 @@
 		"/dist"
 	],
 	"dependencies": {
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/ui-kit": "workspace:~",
 		"@types/express": "^4.17.21"

packages/fuselage-ui-kit/package.json

@@ -55,7 +55,7 @@
 		"@rocket.chat/fuselage": "~0.61.0",
 		"@rocket.chat/fuselage-hooks": "~0.35.0",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
-		"@rocket.chat/icons": "^0.40.0",
+		"@rocket.chat/icons": "~0.41.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/prettier-config": "~0.31.25",