chore: ABAC Attributes room info view

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.spec.tsx

@@ -0,0 +1,79 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import RoomInfoABACSection from './RoomInfoABACSection';
+import { createFakeRoom } from '../../../../../../../tests/mocks/data';
+
+type RoomWithABAC = IRoom & {
+	abacAttributes?: {
+		key: string;
+		values: string[];
+	}[];
+};
+
+describe('RoomInfoABACSection', () => {
+	const createRoomWithABAC = (attributes: { key: string; values: string[] }[]): RoomWithABAC => {
+		const room = createFakeRoom();
+		return {
+			...room,
+			abacAttributes: attributes,
+		} as RoomWithABAC;
+	};
+
+	const appRootWithABACEnabled = mockAppRoot().withSetting('ABAC_Enabled', true).withSetting('ABAC_ShowAttributesInRooms', true).build();
+
+	describe('Conditional rendering', () => {
+		it('should return null when ABAC_Enabled is false', () => {
+			const room = createRoomWithABAC([{ key: 'Test', values: ['Value1'] }]);
+			const appRoot = mockAppRoot().withSetting('ABAC_Enabled', false).withSetting('ABAC_ShowAttributesInRooms', true).build();
+
+			render(<RoomInfoABACSection room={room} />, { wrapper: appRoot });
+			expect(screen.queryByText('ABAC_Managed')).not.toBeInTheDocument();
+		});
+
+		it('should return null when ABAC_ShowAttributesInRooms is false', () => {
+			const room = createRoomWithABAC([{ key: 'Test', values: ['Value1'] }]);
+			const appRoot = mockAppRoot().withSetting('ABAC_Enabled', true).withSetting('ABAC_ShowAttributesInRooms', false).build();
+
+			render(<RoomInfoABACSection room={room} />, { wrapper: appRoot });
+			expect(screen.queryByText('ABAC_Managed')).not.toBeInTheDocument();
+		});
+
+		it('should return null when abacAttributes is empty', () => {
+			const room = createRoomWithABAC([]);
+			render(<RoomInfoABACSection room={room} />, { wrapper: appRootWithABACEnabled });
+			expect(screen.queryByText('ABAC_Managed')).not.toBeInTheDocument();
+		});
+
+		it('should render when all conditions are met', () => {
+			const room = createRoomWithABAC([{ key: 'Test', values: ['Value1'] }]);
+			render(<RoomInfoABACSection room={room} />, { wrapper: appRootWithABACEnabled });
+			expect(screen.getByText('ABAC_Managed')).toBeInTheDocument();
+		});
+	});
+
+	describe('Accessibility', () => {
+		it('should have no accessibility violations', async () => {
+			const room = createRoomWithABAC([
+				{ key: 'Chat-sensitivity', values: ['Classified', 'Top-Secret'] },
+				{ key: 'Country', values: ['US-only'] },
+			]);
+			const { container } = render(<RoomInfoABACSection room={room} />, { wrapper: appRootWithABACEnabled });
+
+			const results = await axe(container);
+			expect(results).toHaveNoViolations();
+		});
+	});
+	describe('Snapshot', () => {
+		it('should match the snapshot', () => {
+			const room = createRoomWithABAC([
+				{ key: 'Chat-sensitivity', values: ['Classified', 'Top-Secret'] },
+				{ key: 'Country', values: ['US-only'] },
+			]);
+			const { baseElement } = render(<RoomInfoABACSection room={room} />, { wrapper: appRootWithABACEnabled });
+			expect(baseElement).toMatchSnapshot();
+		});
+	});
+});

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx

@@ -0,0 +1,66 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { Box, Divider, Tag } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { InfoPanelField, InfoPanelLabel } from '../../../../../../components/InfoPanel';
+import { RoomIcon } from '../../../../../../components/RoomIcon';
+
+// TODO: Remove type union when ABAC is implemented
+type RoomInfoABACSectionProps = {
+	room: IRoom & {
+		abacAttributes?: {
+			key: string;
+			values: string[];
+		}[];
+	};
+};
+
+const RoomInfoABACSection = ({ room }: RoomInfoABACSectionProps) => {
+	const { t } = useTranslation();
+
+	const abacEnabled = useSetting('ABAC_Enabled');
+	const showAttributesInRoom = useSetting('ABAC_ShowAttributesInRooms');
+
+	if (!abacEnabled || !showAttributesInRoom || !room.abacAttributes?.length) {
+		return null;
+	}
+
+	return (
+		<>
+			<Divider mb={32} width='full' />
+			<InfoPanelField>
+				<Box display='flex' mbe={16}>
+					<Tag medium>
+						<Box display='flex' alignItems='center'>
+							<RoomIcon room={room} />
+							<Box mis={2}>{t('ABAC_Managed')}</Box>
+						</Box>
+					</Tag>
+				</Box>
+
+				{t('ABAC_Managed_description')}
+
+				<InfoPanelLabel id='room-attributes-list-label'>{t('ABAC_Room_Attributes')}</InfoPanelLabel>
+				<Box is='ul' aria-labelledby='room-attributes-list-label'>
+					{room.abacAttributes.map((attribute) => (
+						<Box is='li' key={attribute.key} mb={16}>
+							<Box is='span' id={`room-attribute-${attribute.key}-label`}>
+								{attribute.key}
+							</Box>
+							<Box is='ul' display='flex' mbs={8} alignItems='center' aria-labelledby={`room-attribute-${attribute.key}-label`}>
+								{attribute.values.map((value) => (
+									<Box is='li' mie={4} key={value}>
+										<Tag medium>{value}</Tag>
+									</Box>
+								))}
+							</Box>
+						</Box>
+					))}
+				</Box>
+			</InfoPanelField>
+		</>
+	);
+};
+
+export default RoomInfoABACSection;

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/__snapshots__/RoomInfoABACSection.spec.tsx.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`RoomInfoABACSection Snapshot should match the snapshot 1`] = `
+<body>
+  <div>
+    <hr
+      class="rcx-box rcx-box--full rcx-divider rcx-css-1972bnv"
+    />
+    <div
+      class="rcx-box rcx-box--full rcx-css-1jagyun"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-ukxwz6"
+      >
+        <span
+          class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+        >
+          <span
+            class="rcx-tag__inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-127j9mz"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-hash-shield rcx-icon rcx-css-1g87xs3"
+              >
+                
+              </i>
+              <div
+                class="rcx-box rcx-box--full rcx-css-1hq8wl6"
+              >
+                ABAC_Managed
+              </div>
+            </div>
+          </span>
+        </span>
+      </div>
+      ABAC_Managed_description
+      <div
+        class="rcx-box rcx-box--full rcx-css-f0ql1y"
+        id="room-attributes-list-label"
+      >
+        ABAC_Room_Attributes
+      </div>
+      <ul
+        aria-labelledby="room-attributes-list-label"
+        class="rcx-box rcx-box--full"
+      >
+        <li
+          class="rcx-box rcx-box--full rcx-css-1jagyun"
+        >
+          <span
+            class="rcx-box rcx-box--full"
+            id="room-attribute-Chat-sensitivity-label"
+          >
+            Chat-sensitivity
+          </span>
+          <ul
+            aria-labelledby="room-attribute-Chat-sensitivity-label"
+            class="rcx-box rcx-box--full rcx-css-q18nro"
+          >
+            <li
+              class="rcx-box rcx-box--full rcx-css-sdt442"
+            >
+              <span
+                class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+              >
+                <span
+                  class="rcx-tag__inner"
+                >
+                  Classified
+                </span>
+              </span>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-css-sdt442"
+            >
+              <span
+                class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+              >
+                <span
+                  class="rcx-tag__inner"
+                >
+                  Top-Secret
+                </span>
+              </span>
+            </li>
+          </ul>
+        </li>
+        <li
+          class="rcx-box rcx-box--full rcx-css-1jagyun"
+        >
+          <span
+            class="rcx-box rcx-box--full"
+            id="room-attribute-Country-label"
+          >
+            Country
+          </span>
+          <ul
+            aria-labelledby="room-attribute-Country-label"
+            class="rcx-box rcx-box--full rcx-css-q18nro"
+          >
+            <li
+              class="rcx-box rcx-box--full rcx-css-sdt442"
+            >
+              <span
+                class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+              >
+                <span
+                  class="rcx-tag__inner"
+                >
+                  US-only
+                </span>
+              </span>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.tsx

@@ -1,7 +1,9 @@
 import type { RoomType } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import RoomInfo from './RoomInfo';
+import FakeRoomProvider from '../../../../../../tests/mocks/client/FakeRoomProvider';
 import { Contextualbar } from '../../../../../components/Contextualbar';
 
 export default {
@@ -10,7 +12,13 @@ export default {
 		layout: 'fullscreen',
 		actions: { argTypesRegex: '^on[A-Z].*' },
 	},
-	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+	decorators: [
+		(fn) => (
+			<FakeRoomProvider roomOverrides={roomArgs}>
+				<Contextualbar height='100vh'>{fn()}</Contextualbar>
+			</FakeRoomProvider>
+		),
+	],
 	args: {
 		icon: 'lock',
 	},
@@ -61,3 +69,25 @@ Broadcast.args = {
 		broadcast: true,
 	},
 };
+
+export const ABAC = Template.bind({});
+ABAC.decorators = [
+	mockAppRoot().withSetting('ABAC_Enabled', true).withSetting('ABAC_ShowAttributesInRooms', true).buildStoryDecorator(),
+	(fn) => (
+		<FakeRoomProvider roomOverrides={roomArgs}>
+			<Contextualbar height='100vh'>{fn()}</Contextualbar>
+		</FakeRoomProvider>
+	),
+];
+ABAC.args = {
+	...Default.args,
+	room: {
+		...roomArgs,
+		// @ts-expect-error - abacAttributes is not yet implemented in Rooms properties
+		abacAttributes: [
+			{ name: 'Chat-sensitivity', values: ['Classified', 'Top-Secret'] },
+			{ name: 'Country', values: ['US-only'] },
+			{ name: 'Project', values: ['Ruminator-2000'] },
+		],
+	},
+};

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx

@@ -29,6 +29,7 @@ import MarkdownText from '../../../../../components/MarkdownText';
 import { useRetentionPolicy } from '../../../hooks/useRetentionPolicy';
 import { useRoomActions } from '../hooks/useRoomActions';
 import { useSplitRoomActions } from '../hooks/useSplitRoomActions';
+import RoomInfoABACSection from './ABAC/RoomInfoABACSection';
 
 type RoomInfoProps = {
 	room: IRoom;
@@ -128,6 +129,7 @@ const RoomInfo = ({ room, icon, onClickBack, onClickClose, onClickEnterRoom, onC
 						)}
 
 						{retentionPolicy?.isActive && <RetentionPolicyCallout room={room} />}
+						<RoomInfoABACSection room={room} />
 					</InfoPanelSection>
 				</InfoPanel>
 			</ContextualbarScrollableContent>

packages/i18n/src/locales/en.i18n.json

@@ -77,6 +77,9 @@
   "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "A new owner will be assigned automatically to those <bold>{{count}}</bold> rooms:<br/> {{rooms}}.",
   "A_secure_and_highly_private_self-managed_solution_for_conference_calls": "A secure and highly private self-managed solution for conference calls.",
   "A_workspace_admin_needs_to_install_and_configure_a_conference_call_app": "A workspace admin needs to install and configure a conference call app.",
+  "ABAC_Managed": "ABAC Managed",
+  "ABAC_Managed_description": "Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access.",
+  "ABAC_Room_Attributes": "Room Attributes",
   "Accept": "Accept",
   "Accept_Call": "Accept Call",
   "Accept_incoming_livechat_requests_even_if_there_are_no_online_agents": "Accept incoming omnichannel requests even if there are no online agents",