Teams Header

client/components/Breadcrumbs/index.js

@@ -5,6 +5,7 @@ import { css } from '@rocket.chat/css-in-js';
 
 const BreadcrumbsSeparator = () => <Box display='inline-block' fontScale='s2' mi='x4' fontWeight='600' color='neutral-500'>/</Box>;
 const BreadcrumbsIcon = ({ name, color, children }) => <Box w='x20' mi='x2' display='inline-flex' justifyContent='center' color={color}>{name ? <Icon size='x20' name={name}/> : children}</Box>;
+const BreadcrumbsIconSmall = ({ name, color, children }) => <Box w='x12' display='inline-flex' justifyContent='center' color={color}>{name ? <Icon size='x12' name={name}/> : children}</Box>;
 
 const BreadcrumbsLink = (props) => <BreadcrumbsText
 	is='a'
@@ -25,15 +26,18 @@ const BreadcrumbsLink = (props) => <BreadcrumbsText
 const BreadcrumbsText = (props) => <Box display='inline' is='span' mi='x2' color='default' {...props} />;
 
 const BreadcrumbsItem = (props) => <Box mi='neg-x2' display='inline-flex' flexDirection='row' alignItems='center' color='info' fontScale='s2' {...props} />;
+const BreadcrumbsTag = (props) => <Box backgroundColor='neutral-400' mis='x8' display='inline-flex' flexDirection='row' alignItems='center' color='neutral-700' fontSize='x12' borderRadius='x4' p='x4' lineHeight='x16' fontWeight='600' height='x20'{...props} />;
 
 const Breadcrumbs = ({ children }) => <Box withTruncatedText mie='x2' display='flex' flexDirection='row' alignItems='center'>{children}</Box>;
 
 Object.assign(Breadcrumbs, {
 	Text: BreadcrumbsText,
 	Link: BreadcrumbsLink,
 	Icon: BreadcrumbsIcon,
+	IconSmall: BreadcrumbsIconSmall,
 	Separator: BreadcrumbsSeparator,
 	Item: BreadcrumbsItem,
+	Tag: BreadcrumbsTag,
 });
 
 export default Breadcrumbs;

client/views/room/Header/Header.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { Meteor } from 'meteor/meteor';
 
 import Header from '../../../components/Header';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import { useRoomIcon } from '../../../hooks/useRoomIcon';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import Encrypted from './icons/Encrypted';
 import Favorite from './icons/Favorite';
 import Translate from './icons/Translate';
@@ -34,25 +37,42 @@ const HeaderIcon = ({ room }) => {
 	return <Breadcrumbs.Icon name={icon.name}>{!icon.name && icon}</Breadcrumbs.Icon>;
 };
 
-const RoomTitle = ({ room }) => {
+const RoomTitle = ({ room }) => <>
+	<HeaderIcon room={room}/>
+	<Header.Title>{room.name}</Header.Title>
+</>;
+
+const ParentRoom = ({ room }) => {
 	const prevSubscription = useUserSubscription(room.prid);
 	const prevRoomHref = prevSubscription ? roomTypes.getRouteLink(prevSubscription.t, prevSubscription) : null;
-
-	return <Breadcrumbs>
-		{room.prid && prevSubscription && <>
-			<Breadcrumbs.Item>
-				<HeaderIcon room={prevSubscription}/>
-				<Breadcrumbs.Link href={prevRoomHref}>{prevSubscription.name}</Breadcrumbs.Link>
-			</Breadcrumbs.Item>
-			<Breadcrumbs.Separator />
-		</>}
-		<Breadcrumbs.Item>
-			<HeaderIcon room={room}/>
-			<Header.Title>{room.name}</Header.Title>
-		</Breadcrumbs.Item>
-	</Breadcrumbs>;
+	return prevSubscription && <>
+		<Breadcrumbs.Tag>
+			<HeaderIcon room={prevSubscription}/>
+			<Breadcrumbs.Link href={prevRoomHref}>{prevSubscription.name}</Breadcrumbs.Link>
+		</Breadcrumbs.Tag>
+	</>;
 };
 
+const ParentTeam = ({ room }) => {
+	const query = useMemo(() => ({ teamId: room.teamId }), [room.teamId]);
+	const userTeamQuery = useMemo(() => ({ userId: Meteor.userId() }), []);
+
+	const { value, phase } = useEndpointData('teams.info', query);
+	const { value: userTeams, phase: userTeamsPhase } = useEndpointData('users.listTeams', userTeamQuery);
+
+	const teamLoading = phase === AsyncStatePhase.LOADING;
+	const userTeamsLoading = userTeamsPhase === AsyncStatePhase.LOADING;
+	const belongsToTeam = userTeams?.teams?.find((team) => team._id === room.teamId);
+
+	const teamMainRoom = useUserSubscription(value?.teamInfo?.roomId);
+	const teamMainRoomHref = teamMainRoom ? roomTypes.getRouteLink(teamMainRoom.t, teamMainRoom) : null;
+	const teamIcon = value?.t === 0 ? 'team' : 'team-lock';
+
+	return teamLoading || userTeamsLoading ? null : <Breadcrumbs.Tag>
+		<Breadcrumbs.IconSmall name={teamIcon}></Breadcrumbs.IconSmall>
+		<Breadcrumbs.Link href={belongsToTeam && teamMainRoomHref}>{teamMainRoom?.name}</Breadcrumbs.Link>
+	</Breadcrumbs.Tag>;
+};
 const DirectRoomHeader = ({ room }) => {
 	const userId = useUserId();
 	const directUserId = room.uids.filter((uid) => uid !== userId).shift();
@@ -74,6 +94,7 @@ const RoomHeader = ({ room, topic }) => {
 			<Header.Content.Row>
 				<RoomTitle room={room}/>
 				<Favorite room={room} />
+				{(room.prid || room.teamId) && ((room.prid && <ParentRoom room={room} />) || (room.teamId && <ParentTeam room={room} />))}
 				<Encrypted room={room} />
 				<Translate room={room} />
 			</Header.Content.Row>