[NEW] Enterprise tags

client/admin/sidebar/AdminSidebar.js

@@ -13,6 +13,7 @@ import { useAbsoluteUrl } from '../../contexts/ServerContext';
 import { useAtLeastOnePermission } from '../../contexts/AuthorizationContext';
 import SettingsProvider from '../../providers/SettingsProvider';
 import { sidebarItems } from '../sidebarItems';
+import PlanTag from '../../components/basic/PlanTag';
 
 const SidebarItem = React.memo(({ permissionGranted, pathGroup, href, icon, label, currentPath }) => {
 	const params = useMemo(() => ({ group: pathGroup }), [pathGroup]);
@@ -195,7 +196,9 @@ export default React.memo(function AdminSidebar() {
 	return <SettingsProvider privileged>
 		<Box display='flex' flexDirection='column' h='100vh'>
 			<Box is='header' pb='x16' pi='x24' display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-				<Box color='neutral-800' fontSize='p1' fontWeight='p1' fontWeight='p1' flexShrink={1} withTruncatedText>{t('Administration')}</Box>
+				<Box color='neutral-800' fontSize='p1' display='flex' flexDirection='row' alignItems='center' fontWeight='p1' fontWeight='p1' flexShrink={1} withTruncatedText>
+					{t('Administration')} <PlanTag />
+				</Box>
 				<Button square small ghost onClick={closeAdminFlex}><Icon name='cross' size='x20'/></Button>
 			</Box>
 			<Scrollable>

client/components/basic/PlanTag.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { Tag } from '@rocket.chat/fuselage';
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+
+import { useMethod } from '../../contexts/ServerContext';
+
+function PlanTag() {
+	const [plans, setPlans] = useSafely(useState([]));
+
+	const getTags = useMethod('license:getTags');
+
+	useEffect(() => {
+		(async () => {
+			const tags = await getTags();
+			const getBackgroundColor = (plan) => {
+				switch (plan) {
+					case 'bronze':
+						return '#BD5A0B';
+					case 'silver':
+						return '#9EA2A8';
+					case 'gold':
+						return '#F3BE08';
+					case 'development':
+						return 'primary-600';
+					default:
+						return '#2F343D';
+				}
+			};
+			setPlans([process.env.NODE_ENV === 'development' && 'development', ...tags].filter(Boolean).map((plan) => ({ plan, background: getBackgroundColor(plan) })));
+		})();
+	}, []);
+
+	return plans.map(({ plan, background }) => <Tag key={plan} backgroundColor={background} marginInline='x4' color='#fff' textTransform='capitalize'>{plan}</Tag>);
+}
+
+export default PlanTag;