New/teams

app/api/server/v1/teams.ts

@@ -146,6 +146,28 @@ API.v1.addRoute('teams.listRooms', { authRequired: true }, {
 	},
 });
 
+API.v1.addRoute('teams.listRoomsOfUser', { authRequired: true }, {
+	get() {
+		const { offset, count } = this.getPaginationItems();
+		const { teamId, userId } = this.queryParams;
+
+		const allowPrivateTeam = hasPermission(this.userId, 'view-all-teams');
+
+		if (!hasPermission(this.userId, 'view-all-team-channels')) {
+			return API.v1.unauthorized();
+		}
+
+		const { records, total } = Promise.await(Team.listRoomsOfUser(this.userId, teamId, userId, allowPrivateTeam, { offset, count }));
+
+		return API.v1.success({
+			rooms: records,
+			total,
+			count: records.length,
+			offset: 0,
+		});
+	},
+});
+
 API.v1.addRoute('teams.members', { authRequired: true }, {
 	get() {
 		const { offset, count } = this.getPaginationItems();
@@ -196,10 +218,14 @@ API.v1.addRoute('teams.removeMembers', { authRequired: true }, {
 			return API.v1.unauthorized();
 		}
 
-		const { teamId, teamName, members } = this.bodyParams;
+		const { teamId, teamName, members, rooms } = this.bodyParams;
 
 		Promise.await(Team.removeMembers(teamId, teamName, members));
 
+		if (rooms?.length) {
+			Subscriptions.removeByRoomIdsAndUserId(rooms, this.userId);
+		}
+
 		return API.v1.success();
 	},
 });

app/apps/client/gameCenter/tabBar.ts

@@ -18,7 +18,7 @@ addAction('game-center', () => {
 		&& !hasError
 		&& hasExternalComponents
 			? {
-				groups: ['channel', 'group', 'direct'],
+				groups: ['channel', 'group', 'direct', 'team'],
 				id: 'game-center',
 				title: 'Apps_Game_Center',
 				icon: 'game',

app/autotranslate/client/lib/tabBar.ts

@@ -8,7 +8,7 @@ addAction('autotranslate', () => {
 	const hasPermission = usePermission('auto-translate');
 	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
 	return useMemo(() => (hasPermission && autoTranslateEnabled ? {
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group', 'direct', 'team'],
 		id: 'autotranslate',
 		title: 'Auto_Translate',
 		icon: 'language',

app/discussion/client/tabBar.ts

@@ -9,7 +9,7 @@ addAction('discussions', () => {
 	const discussionEnabled = useSetting('Discussion_enabled');
 
 	return useMemo(() => (discussionEnabled ? {
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group', 'direct', 'team'],
 		id: 'discussions',
 		title: 'Discussions',
 		icon: 'discussion',

app/e2e/client/tabbar.ts

@@ -21,7 +21,7 @@ addAction('e2e', ({ room }) => {
 	const enabledOnRoom = !!room.encrypted;
 
 	return useMemo(() => (e2eEnabled && hasPermission ? {
-		groups: ['direct', 'group'],
+		groups: ['direct', 'group', 'team'],
 		id: 'e2e',
 		title: enabledOnRoom ? 'E2E_disable' : 'E2E_enable',
 		icon: 'key',

app/livestream/client/tabBar.tsx

@@ -13,7 +13,7 @@ addAction('livestream', ({ room }) => {
 	const isLive = room && room.streamingOptions && room.streamingOptions.id && room.streamingOptions.type === 'livestream';
 
 	return useMemo(() => (enabled ? {
-		groups: ['channel', 'group'],
+		groups: ['channel', 'group', 'team'],
 		id: 'livestream',
 		title: 'Livestream',
 		icon: 'podcast',

app/mentions-flextab/client/tabBar.ts

@@ -1,7 +1,7 @@
 import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('mentions', {
-	groups: ['channel', 'group'],
+	groups: ['channel', 'group', 'team'],
 	id: 'mentions',
 	title: 'Mentions',
 	icon: 'at',

app/message-pin/client/tabBar.ts

@@ -6,7 +6,7 @@ import { useSetting } from '../../../client/contexts/SettingsContext';
 addAction('pinned-messages', () => {
 	const pinningAllowed = useSetting('Message_AllowPinning');
 	return useMemo(() => (pinningAllowed ? {
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group', 'direct', 'team'],
 		id: 'pinned-messages',
 		title: 'Pinned_Messages',
 		icon: 'pin',

app/message-snippet/client/tabBar/tabBar.ts

@@ -6,7 +6,7 @@ import { useSetting } from '../../../../client/contexts/SettingsContext';
 addAction('snippeted-messages', () => {
 	const snippetingEnabled = useSetting('Message_AllowSnippeting');
 	return useMemo(() => (snippetingEnabled ? {
-		groups: ['channel', 'group', 'direct'],
+		groups: ['channel', 'group', 'direct', 'team'],
 		id: 'snippeted-messages',
 		title: 'snippet-message',
 		icon: 'code',

app/message-star/client/tabBar.ts

@@ -1,7 +1,7 @@
 import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('starred-messages', {
-	groups: ['channel', 'group', 'direct', 'live'],
+	groups: ['channel', 'group', 'direct', 'live', 'team'],
 	id: 'starred-messages',
 	title: 'Starred_Messages',
 	icon: 'star',

app/push-notifications/client/tabBar.ts

@@ -3,7 +3,7 @@ import { lazy } from 'react';
 import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('push-notifications', {
-	groups: ['channel', 'group', 'direct', 'live'],
+	groups: ['channel', 'group', 'direct', 'live', 'team'],
 	id: 'push-notifications',
 	title: 'Notifications_Preferences',
 	icon: 'bell',

app/ui-cached-collection/client/models/CachedCollection.js

@@ -125,7 +125,7 @@ export class CachedCollection extends Emitter {
 		userRelated = true,
 		listenChangesForLoggedUsersOnly = false,
 		useSync = true,
-		version = 15,
+		version = 16,
 		maxCacheTime = 60 * 60 * 24 * 30,
 		onSyncData = (/* action, record */) => {},
 	}) {

client/components/ScrollableContentWrapper.tsx

@@ -17,7 +17,7 @@ export type CustomScrollbarsProps = {
 	renderTrackHorizontal?: typeof Scrollbars.defaultProps.renderTrackHorizontal;
 }
 
-const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(({ children, style, onScroll, renderView, renderTrackHorizontal }, ref) => {
+const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(({ children, style, onScroll, renderView }, ref) => {
 	const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 
 	return <Scrollbars
@@ -27,12 +27,15 @@ const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(
 		style={scrollbarsStyle}
 		onScrollFrame={onScroll}
 		renderView={renderView}
-		renderTrackHorizontal={renderTrackHorizontal}
+		renderTrackHorizontal={(props): React.ReactElement => <div {...props} className='track-horizontal' style={{ display: 'none' }}/>}
 		renderThumbVertical={
 			({ style, ...props }): JSX.Element => (
 				<div
 					{...props}
-					style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: '7px' }}
+					style={{ ...style,
+						backgroundColor: 'rgba(0, 0, 0, 0.5)',
+						borderRadius: '7px',
+					}}
 				/>
 			)
 		}

client/hooks/useRoomIcon.tsx

@@ -16,6 +16,10 @@ export const useRoomIcon = (room: IRoom, small = true): JSX.Element | { name: st
 		return { name: 'baloons' };
 	}
 
+	if (room.teamMain) {
+		return { name: room.t === 'p' ? 'team-lock' : 'team' };
+	}
+
 	switch (room.t) {
 		case 'p':
 			return { name: 'hashtag-lock' };

client/main.js

@@ -22,3 +22,4 @@ import './views/admin';
 import './views/login';
 import './views/room/adapters';
 import './adapters';
+import './views/teams';

client/sidebar/hooks/useRoomList.ts

@@ -26,6 +26,7 @@ export const useRoomList = (): Array<ISubscription> => {
 	useEffect(() => {
 		setRoomList(() => {
 			const favorite = new Set();
+			const team = new Set();
 			const omnichannel = new Set();
 			const unread = new Set();
 			const _private = new Set();
@@ -43,6 +44,10 @@ export const useRoomList = (): Array<ISubscription> => {
 					return favorite.add(room);
 				}
 
+				if (room.teamMain) {
+					return team.add(room);
+				}
+
 				if (showDiscussion && room.prid) {
 					return discussion.add(room);
 				}
@@ -73,6 +78,7 @@ export const useRoomList = (): Array<ISubscription> => {
 			showOmnichannel && inquiries.enabled && omnichannel.size && groups.set('Open_Livechats', omnichannel);
 			sidebarShowUnread && unread.size && groups.set('Unread', unread);
 			favoritesEnabled && favorite.size && groups.set('Favorites', favorite);
+			team.size && groups.set('Teams', team);
 			showDiscussion && discussion.size && groups.set('Discussions', discussion);
 			sidebarGroupByType && _private.size && groups.set('Private', _private);
 			sidebarGroupByType && _public.size && groups.set('Public', _public);

client/views/InfoPanel/InfoPanel.stories.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import InfoPanel, { RetentionPolicyCallout } from '.';
+
+export default {
+	title: 'components/InfoPanel',
+	component: InfoPanel,
+};
+
+const room = {
+	fname: 'rocketchat-frontend-team',
+	description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero',
+	announcement: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero',
+	topic: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero',
+};
+
+export const Default = () => <InfoPanel>
+	<InfoPanel.Avatar />
+	<InfoPanel.Section>
+		<InfoPanel.Title title={room.fname} icon={'hashtag'}/>
+	</InfoPanel.Section>
+
+	<InfoPanel.Section>
+		<InfoPanel.Field>
+			<InfoPanel.Label>Description</InfoPanel.Label>
+			<InfoPanel.Text>{room.description}</InfoPanel.Text>
+		</InfoPanel.Field>
+		<InfoPanel.Field>
+			<InfoPanel.Label>Announcement</InfoPanel.Label>
+			<InfoPanel.Text>{room.announcement}</InfoPanel.Text>
+		</InfoPanel.Field>
+		<InfoPanel.Field>
+			<InfoPanel.Label>Topic</InfoPanel.Label>
+			<InfoPanel.Text>{room.topic}</InfoPanel.Text>
+		</InfoPanel.Field>
+	</InfoPanel.Section>
+
+	<InfoPanel.Section>
+		<RetentionPolicyCallout maxAgeDefault={30} filesOnlyDefault={false} excludePinnedDefault={true} />
+	</InfoPanel.Section>
+</InfoPanel>;
+
+
+// export const Archived = () => <VerticalBar height={800}>
+// 	<RoomInfo
+// 		{...room}
+// 		icon='lock'
+// 		onClickHide={alert}
+// 		onClickLeave={alert}
+// 		onClickEdit={alert}
+// 		onClickDelete={alert}
+// 		archived
+// 	/>
+// </VerticalBar>;
+
+
+// export const Broadcast = () => <VerticalBar height={800}>
+// 	<RoomInfo
+// 		{...room}
+// 		icon='lock'
+// 		onClickHide={alert}
+// 		onClickLeave={alert}
+// 		onClickEdit={alert}
+// 		onClickDelete={alert}
+// 		broadcast
+// 	/>
+// </VerticalBar>;

client/views/InfoPanel/InfoPanel.tsx

@@ -0,0 +1,62 @@
+import React, { FC, ReactNode } from 'react';
+import { Box, Icon, BoxProps, Button, ButtonProps, ButtonGroup, ButtonGroupProps } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+
+type TitleProps = {
+	title: string;
+	icon: string | ReactNode;
+}
+
+const wordBreak = css`
+	word-break: break-word;
+`;
+
+const InfoPanel: FC = ({ children }) => <Box flexGrow={1} mb='neg-x24'>{children}</Box>;
+
+const Section: FC<BoxProps> = (props) => <Box mb='x24' {...props} />;
+
+const Title: FC<TitleProps> = ({ title, icon }) => <Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='s2' color='default' withTruncatedText>
+	{
+		typeof icon === 'string'
+			? <Icon name={icon} size='x22' />
+			: icon
+	}
+	<Box mis='x16' flexGrow={1} withTruncatedText>{title}</Box>
+</Box>;
+
+const Label: FC<BoxProps> = (props) => <Box mb='x8' fontScale='p2' color='default' {...props} />;
+
+const Text: FC<BoxProps> = (props) => <Box
+	mb='x8'
+	fontScale='p1'
+	color='hint'
+	withTruncatedText
+	className={wordBreak}
+	{...props}
+/>;
+
+const Action: FC<ButtonProps & { icon: string; label: string }> = ({ label, icon, ...props }) => <Button title={label} aria-label={label} {...props} mi='x4'>
+	<Icon name={icon} size='x20' mie='x4' />
+	{label}
+</Button>;
+
+const ActionGroup: FC<ButtonGroupProps> = (props) => <Section><ButtonGroup flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center' {...props}/></Section>;
+
+const Field: FC = ({ children }) => <Box mb='x12'>{children}</Box>;
+
+const Avatar: FC = ({ children }) => <Section display='flex' justifyContent='center'>
+	{children}
+</Section>;
+
+Object.assign(InfoPanel, {
+	Title,
+	Label,
+	Text,
+	Avatar,
+	Field,
+	Action,
+	Section,
+	ActionGroup,
+});
+
+export default InfoPanel;

client/views/InfoPanel/RetentionPolicyCallout.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { Callout } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+
+type RetentionPolicyCalloutProps = {
+	filesOnlyDefault: boolean;
+	excludePinnedDefault: boolean;
+	maxAgeDefault: number;
+}
+
+const RetentionPolicyCallout: FC<RetentionPolicyCalloutProps> = ({ filesOnlyDefault, excludePinnedDefault, maxAgeDefault }) => {
+	const t = useTranslation();
+	return <Callout type='warning'>
+		{filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_FilesOnly', { time: maxAgeDefault })}</p>}
+		{filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_UnpinnedFilesOnly', { time: maxAgeDefault })}</p>}
+		{!filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning', { time: maxAgeDefault })}</p>}
+		{!filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_Unpinned', { time: maxAgeDefault })}</p>}
+	</Callout>;
+};
+
+export default RetentionPolicyCallout;

client/views/InfoPanel/index.ts

@@ -0,0 +1,6 @@
+import InfoPanel from './InfoPanel';
+import RetentionPolicyCallout from './RetentionPolicyCallout';
+
+export { RetentionPolicyCallout };
+
+export default InfoPanel;

client/views/admin/users/UserInfoActions.js

@@ -1,7 +1,7 @@
 import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
 import React, { useCallback, useMemo } from 'react';
 
-import { useUserInfoActionsSpread } from '../../room/hooks/useUserInfoActions';
+import { useActionSpread } from '../../hooks/useActionSpread';
 import ConfirmOwnerChangeWarningModal from '../../../components/ConfirmOwnerChangeWarningModal';
 import { UserInfo } from '../../room/contextualBar/UserInfo';
 import { usePermission } from '../../../contexts/AuthorizationContext';
@@ -234,7 +234,7 @@ export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange })
 		username,
 	]);
 
-	const { actions: actionsDefinition, menu: menuOptions } = useUserInfoActionsSpread(options);
+	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(options);
 
 	const menu = useMemo(() => {
 		if (!menuOptions) {