RocketChat · kodiakhq · Oct 6, 2025 · Oct 2, 2025 · Oct 2, 2025 · Oct 2, 2025
@@ -0,0 +1,62 @@
+import type { IRoom } from '@rocket.chat/apps-engine/definition/rooms';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import ABACHeaderTag from './ABACHeaderTag';
+
+const appRoot = mockAppRoot()
+	.withTranslations('en', 'core', {
+		ABAC_header_tag_title: 'Only compliant users have access to attribute-based access controlled rooms.',
+		ABAC_header_tag: 'ABAC',
+	})
+	.build();
+
+const createMockRoom = (overrides: Partial<IRoom> = {}) => ({
+	_id: 'room-id',
+	t: 'c' as const,
+	name: 'test-room',
+	msgs: 0,
+	u: { _id: 'user-id', username: 'testuser' },
+	usersCount: 1,
+	_updatedAt: new Date(),
+	...overrides,
+});
+
+describe('ABACHeaderTag', () => {
+	it('should render the ABAC tag when room has ABAC attributes', () => {
+		const room = createMockRoom({
+			// @ts-expect-error to be implemented
+			abacAttributes: { someAttribute: 'value' },
+		});
+
+		const { baseElement } = render(<ABACHeaderTag room={room} />, { wrapper: appRoot });
+		expect(baseElement).toMatchSnapshot();
+	});
+
+	it('should not render when room has no ABAC attributes', () => {
+		const room = createMockRoom();
+
+		render(<ABACHeaderTag room={room} />, { wrapper: appRoot });
+		expect(screen.queryByText('ABAC')).not.toBeInTheDocument();
+	});
+
+	it('should have no accessibility violations when rendered', async () => {
+		const room = createMockRoom({
+			// @ts-expect-error to be implemented
+			abacAttributes: { someAttribute: 'value' },
+		});
+
+		const { container } = render(<ABACHeaderTag room={room} />, { wrapper: appRoot });
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should have no accessibility violations when not rendered', async () => {
+		const room = createMockRoom();
+
+		const { container } = render(<ABACHeaderTag room={room} />, { wrapper: appRoot });
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});
@@ -0,0 +1,28 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { Box, Palette } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { HeaderTag } from '../Header';
+
+type ABACHeaderTagProps = {
+	room: IRoom;
+};
+
+const ABACHeaderTag = ({ room }: ABACHeaderTagProps) => {
+	const { t } = useTranslation();
+
+	// @ts-expect-error to be implemented
+	if (!room.abacAttributes) {
+		return null;
+	}
+
+	return (
+		<HeaderTag title={t('ABAC_header_tag_title')}>
+			<Box color={Palette.statusColor['status-font-on-warning'].toString()} fontWeight='700'>
+				{t('ABAC_header_tag')}
+			</Box>
+		</HeaderTag>
+	);
+};
+
+export default ABACHeaderTag;
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ABACHeaderTag should render the ABAC tag when room has ABAC attributes 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-1kopyx3"
+    >
+      <span
+        class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+        title="Only compliant users have access to attribute-based access controlled rooms."
+      >
+        <span
+          class="rcx-tag__inner"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-12a8uky"
+          >
+            ABAC
+          </div>
+        </span>
+      </span>
+    </div>
+  </div>
+</body>
+`;
@@ -13,6 +13,7 @@ import RoomToolbox from './RoomToolbox';
 import Encrypted from './icons/Encrypted';
 import Favorite from './icons/Favorite';
 import Translate from './icons/Translate';
+import ABACHeaderTag from '../../../components/ABAC/ABACHeaderTag';
 import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbar } from '../../../components/Header';
 import MarkdownText from '../../../components/MarkdownText';
 
@@ -50,6 +51,7 @@ const RoomHeader = ({ room, topic = '', slots = {}, roomToolbox }: RoomHeaderPro
 					<Favorite room={room} />
 					{room.prid && <ParentRoomWithData room={room} />}
 					{room.teamId && !room.teamMain && <ParentTeam room={room} />}
+					<ABACHeaderTag room={room} />
 					{isRoomFederated(room) && <FederatedRoomOriginServer room={room} />}
 					<Encrypted room={room} />
 					<Translate room={room} />

@@ -12,6 +12,7 @@ import RoomTopic from './RoomTopic';
 import Encrypted from './icons/Encrypted';
 import Favorite from './icons/Favorite';
 import Translate from './icons/Translate';
+import ABACHeaderTag from '../../../components/ABAC/ABACHeaderTag';
 import { Header, HeaderContent, HeaderContentRow, HeaderToolbar } from '../../../components/Header';
 
 export type RoomHeaderProps = {
@@ -43,6 +44,7 @@ const RoomHeader = ({ room, slots = {}, roomToolbox }: RoomHeaderProps) => {
 				<HeaderContentRow>
 					<RoomTitle room={room} />
 					<Favorite room={room} />
+					<ABACHeaderTag room={room} />
 					{isRoomFederated(room) && <FederatedRoomOriginServer room={room} />}
 					<Encrypted room={room} />
 					<Translate room={room} />

diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
@@ -77,6 +77,8 @@
   "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_header_tag_title": "Only compliant users have access to attribute-based access controlled rooms.",
+  "ABAC_header_tag": "ABAC",
   "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",

diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
@@ -2,7 +2,7 @@ import { Box, Tag } from '@rocket.chat/fuselage';
 import type { ComponentProps, FC } from 'react';
 
 const HeaderTag: FC<ComponentProps<typeof Tag>> = ({ children, ...props }) => (
-	<Box p={4} withTruncatedText minWidth='x64'>
+	<Box p={4} withTruncatedText minWidth='x32'>
 		<Tag medium {...props}>
 			{children}
 		</Tag>

diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.spec.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.spec.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+
+import HeaderTag from './HeaderTag';
+
+it('should match snapshot', () => {
+	const { baseElement } = render(<HeaderTag>Test Tag</HeaderTag>);
+	expect(baseElement).toMatchSnapshot();
+});
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx b/packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx
@@ -4,7 +4,7 @@ import type { ComponentProps } from 'react';
 type HeaderTagProps = ComponentProps<typeof Tag>;
 
 const HeaderTag = ({ children, ...props }: HeaderTagProps) => (
-	<Box p={4} withTruncatedText minWidth='x64'>
+	<Box p={4} withTruncatedText minWidth='x32'>
 		<Tag medium {...props}>
 			{children}
 		</Tag>

diff --git a/packages/ui-client/src/components/HeaderV2/HeaderTag/__snapshots__/HeaderTag.spec.tsx.snap b/packages/ui-client/src/components/HeaderV2/HeaderTag/__snapshots__/HeaderTag.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`should match snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-1kopyx3"
+    >
+      <span
+        class="rcx-box rcx-box--full rcx-tag rcx-tag--medium"
+      >
+        <span
+          class="rcx-tag__inner"
+        >
+          Test Tag
+        </span>
+      </span>
+    </div>
+  </div>
+</body>
+`;