From 5cc2df581e13f0f6f2d4855c3d25482a0ba4ce84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Tue, 25 Apr 2023 18:01:51 -0300
Subject: [PATCH] fix: `HeaderTag` (#28961)

---
 .../room/Header/FederatedRoomOriginServer.tsx |  6 ++---
 .../client/views/room/Header/ParentRoom.tsx   | 11 ++++----
 .../client/views/room/Header/ParentTeam.tsx   | 15 ++---------
 .../src/components/Header/HeaderLink.tsx      | 26 -------------------
 .../src/components/Header/HeaderTag.tsx       |  8 +++---
 .../src/components/Header/HeaderTagIcon.tsx   | 15 ++++++-----
 .../ui-client/src/components/Header/index.ts  |  2 --
 7 files changed, 20 insertions(+), 63 deletions(-)
 delete mode 100644 packages/ui-client/src/components/Header/HeaderLink.tsx

diff --git a/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx b/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx
index 46381442d4c..911a10676d8 100644
--- a/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx
+++ b/apps/meteor/client/views/room/Header/FederatedRoomOriginServer.tsx
@@ -15,10 +15,8 @@ const FederatedRoomOriginServer = ({ room }: FederatedRoomProps): ReactElement |
 	}
 	return (
 		<Header.Tag data-qa='federated-origin-server-name'>
-			<>
-				<Header.Tag.Icon icon={{ name: 'globe' }} />
-				{originServerName}
-			</>
+			<Header.Tag.Icon icon={{ name: 'globe' }} />
+			{originServerName}
 		</Header.Tag>
 	);
 };
diff --git a/apps/meteor/client/views/room/Header/ParentRoom.tsx b/apps/meteor/client/views/room/Header/ParentRoom.tsx
index ca9f9d0390a..23e5238e184 100644
--- a/apps/meteor/client/views/room/Header/ParentRoom.tsx
+++ b/apps/meteor/client/views/room/Header/ParentRoom.tsx
@@ -11,15 +11,14 @@ type ParentRoomProps = {
 };
 
 const ParentRoom = ({ room }: ParentRoomProps): ReactElement => {
-	const href = roomCoordinator.getRouteLink(room.t, room) || undefined;
 	const icon = useRoomIcon(room);
 
+	const handleClick = (): void => roomCoordinator.openRouteLink(room.t, { rid: room._id, ...room });
+
 	return (
-		<Header.Tag>
-			<Header.Link href={href}>
-				<Header.Tag.Icon icon={icon} />
-				{roomCoordinator.getRoomName(room.t, room)}
-			</Header.Link>
+		<Header.Tag onClick={handleClick}>
+			<Header.Tag.Icon icon={icon} />
+			{roomCoordinator.getRoomName(room.t, room)}
 		</Header.Tag>
 	);
 };
diff --git a/apps/meteor/client/views/room/Header/ParentTeam.tsx b/apps/meteor/client/views/room/Header/ParentTeam.tsx
index 64286ade12d..0fce0420dab 100644
--- a/apps/meteor/client/views/room/Header/ParentTeam.tsx
+++ b/apps/meteor/client/views/room/Header/ParentTeam.tsx
@@ -40,7 +40,7 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 	const userBelongsToTeam = userTeams?.teams?.find((team) => team._id === teamId) || false;
 	const isTeamPublic = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;
 
-	const teamMainRoomHref = (): void => {
+	const redirectToMainRoom = (): void => {
 		const rid = teamInfoData?.teamInfo.roomId;
 
 		if (!rid) {
@@ -58,19 +58,8 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 		return null;
 	}
 
-	if (isTeamPublic || userBelongsToTeam) {
-		return (
-			<Header.Tag>
-				<Header.Link onClick={teamMainRoomHref}>
-					<Header.Tag.Icon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
-					{teamInfoData?.teamInfo.name}
-				</Header.Link>
-			</Header.Tag>
-		);
-	}
-
 	return (
-		<Header.Tag>
+		<Header.Tag onClick={isTeamPublic || userBelongsToTeam ? redirectToMainRoom : undefined}>
 			<Header.Tag.Icon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
 			{teamInfoData?.teamInfo.name}
 		</Header.Tag>
diff --git a/packages/ui-client/src/components/Header/HeaderLink.tsx b/packages/ui-client/src/components/Header/HeaderLink.tsx
deleted file mode 100644
index fa71f278bab..00000000000
--- a/packages/ui-client/src/components/Header/HeaderLink.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-import { Box, Palette } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC } from 'react';
-
-const HeaderLink: FC<ComponentProps<typeof Box>> = (props) => (
-	<Box
-		is='a'
-		{...props}
-		withTruncatedText
-		className={[
-			css`
-				color: ${Palette.text['font-hint']} !important;
-				display: flex;
-				&:hover,
-				&:focus {
-					color: ${Palette.text['font-default']} !important;
-				}
-				&:visited {
-					color: ${Palette.text['font-default']};
-				}
-			`,
-		]}
-	/>
-);
-
-export default HeaderLink;
diff --git a/packages/ui-client/src/components/Header/HeaderTag.tsx b/packages/ui-client/src/components/Header/HeaderTag.tsx
index 0eb1946179e..6594fb9bc3d 100644
--- a/packages/ui-client/src/components/Header/HeaderTag.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag.tsx
@@ -2,11 +2,9 @@ import { Box, Tag } from '@rocket.chat/fuselage';
 import type { ComponentProps, FC } from 'react';
 
 const HeaderTag: FC<ComponentProps<typeof Tag>> = ({ children, ...props }) => (
-	<Box display='flex' minWidth='65px' mi='x4'>
-		<Tag {...props}>
-			<Box alignItems='center' fontScale='c2' display='flex' minWidth={0}>
-				{children}
-			</Box>
+	<Box mi='x4' withTruncatedText minWidth='x64'>
+		<Tag medium {...props}>
+			{children}
 		</Tag>
 	</Box>
 );
diff --git a/packages/ui-client/src/components/Header/HeaderTagIcon.tsx b/packages/ui-client/src/components/Header/HeaderTagIcon.tsx
index 9d1661fa884..5104ef548fa 100644
--- a/packages/ui-client/src/components/Header/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTagIcon.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Icon } from '@rocket.chat/fuselage';
 import type { ComponentProps, FC, ReactElement } from 'react';
 import { isValidElement } from 'react';
 
@@ -6,11 +6,12 @@ type HeaderIconProps = {
 	icon: ReactElement | Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null;
 };
 
-const HeaderTagIcon: FC<HeaderIconProps> = ({ icon }) =>
-	icon ? (
-		<Box w='x16' mie='x2' display='inline-flex' justifyContent='center'>
-			{isValidElement<any>(icon) ? icon : <Icon size='x16' color='hint' {...icon} />}
-		</Box>
-	) : null;
+const HeaderTagIcon: FC<HeaderIconProps> = ({ icon }) => {
+	if (!icon) {
+		return null;
+	}
+
+	return isValidElement<any>(icon) ? icon : <Icon size='x12' mie='x4' {...icon} />;
+};
 
 export default HeaderTagIcon;
diff --git a/packages/ui-client/src/components/Header/index.ts b/packages/ui-client/src/components/Header/index.ts
index 431c24c25e1..18aa0c6481d 100644
--- a/packages/ui-client/src/components/Header/index.ts
+++ b/packages/ui-client/src/components/Header/index.ts
@@ -4,7 +4,6 @@ import HeaderContent from './HeaderContent';
 import HeaderContentRow from './HeaderContentRow';
 import HeaderDivider from './HeaderDivider';
 import HeaderIcon from './HeaderIcon';
-import HeaderLink from './HeaderLink';
 import HeaderState from './HeaderState';
 import HeaderSubtitle from './HeaderSubtitle';
 import HeaderTag from './HeaderTag';
@@ -23,7 +22,6 @@ export default Object.assign(Header, {
 	Subtitle: HeaderSubtitle,
 	Divider: HeaderDivider,
 	Icon: HeaderIcon,
-	Link: HeaderLink,
 	ToolBox: Object.assign(ToolBox, {
 		Action: ToolBox.Action,
 		ActionBadge: ToolBox.ActionBadge,