fix: `HeaderTag` (#28961)

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

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

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>

packages/ui-client/src/components/Header/HeaderLink.tsx

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

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

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;

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,