chore: new field for ABAC Attributes on user info

apps/meteor/client/components/UserInfo/UserInfo.tsx

@@ -22,6 +22,7 @@ import {
 import MarkdownText from '../MarkdownText';
 import UTCClock from '../UTCClock';
 import { UserCardRoles } from '../UserCard';
+import UserInfoABACAttributes from './UserInfoABACAttributes';
 import UserInfoAvatar from './UserInfoAvatar';
 
 type UserInfoDataProps = Serialized<
@@ -70,6 +71,8 @@ const UserInfo = ({
 	canViewAllInfo,
 	actions,
 	reason,
+	// @ts-expect-error - abacAttributes is not yet implemented in Users properties
+	abacAttributes = null,
 	...props
 }: UserInfoProps): ReactElement => {
 	const { t } = useTranslation();
@@ -175,6 +178,12 @@ const UserInfo = ({
 						</InfoPanelField>
 					)}
 
+					{abacAttributes && abacAttributes.length > 0 && (
+						<InfoPanelField>
+							<InfoPanelLabel title={t('ABAC_Attributes_description')}>{t('ABAC_Attributes')}</InfoPanelLabel>
+							<UserInfoABACAttributes abacAttributes={abacAttributes} />
+						</InfoPanelField>
+					)}
 					{userCustomFields?.map(
 						(customField) =>
 							customField?.value && (

apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx

@@ -0,0 +1,12 @@
+import { Tag } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+type UserInfoABACAttributeProps = {
+	attribute: string;
+};
+
+const UserInfoABACAttribute = ({ attribute }: UserInfoABACAttributeProps): ReactElement => {
+	return <Tag variant='secondary-warning' children={attribute} />;
+};
+
+export default UserInfoABACAttribute;

apps/meteor/client/components/UserInfo/UserInfoABACAttributes.spec.tsx

@@ -0,0 +1,32 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import UserInfoABACAttributes from './UserInfoABACAttributes';
+
+const appRoot = mockAppRoot()
+	.withTranslations('en', 'core', {
+		ABAC_attributes: 'ABAC Attributes',
+		ABAC_Attributes_description: 'Attribute-Based Access Control',
+	})
+	.build();
+
+describe('UserInfoABACAttributes', () => {
+	it('should render with multiple attributes', () => {
+		const attributes = ['Classified', 'Top Secret', 'Confidential'];
+		const { baseElement } = render(<UserInfoABACAttributes abacAttributes={attributes} />, { wrapper: appRoot });
+
+		expect(baseElement).toMatchSnapshot();
+		expect(screen.getByText('Classified')).toBeInTheDocument();
+		expect(screen.getByText('Top Secret')).toBeInTheDocument();
+		expect(screen.getByText('Confidential')).toBeInTheDocument();
+	});
+
+	it('should have no accessibility violations with multiple attributes', async () => {
+		const attributes = ['Classified', 'Top Secret', 'Confidential'];
+		const { container } = render(<UserInfoABACAttributes abacAttributes={attributes} />, { wrapper: appRoot });
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

apps/meteor/client/components/UserInfo/UserInfoABACAttributes.stories.tsx

@@ -0,0 +1,39 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import UserInfoABACAttributes from './UserInfoABACAttributes';
+
+const meta = {
+	component: UserInfoABACAttributes,
+	parameters: {
+		layout: 'centered',
+	},
+	args: {
+		abacAttributes: ['Classified', 'Top Secret', 'Confidential'],
+	},
+	decorators: [
+		(Story) => {
+			const AppRoot = mockAppRoot()
+				.withTranslations('en', 'core', {
+					ABAC_attributes: 'ABAC Attributes',
+					ABAC_Attributes_description: 'Attribute-Based Access Control',
+				})
+				.build();
+
+			return (
+				<AppRoot>
+					<Story />
+				</AppRoot>
+			);
+		},
+	],
+} satisfies Meta<typeof UserInfoABACAttributes>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		abacAttributes: ['Top Secret', 'Classified', 'Confidential', 'Restricted', 'Internal'],
+	},
+};

apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx

@@ -0,0 +1,22 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement } from 'react';
+
+import UserInfoABACAttribute from './UserInfoABACAttribute';
+
+type UserCardABACAttributesProps = {
+	abacAttributes: string[];
+} & ComponentProps<typeof Box>;
+
+const UserInfoABACAttributes = ({ abacAttributes }: UserCardABACAttributesProps): ReactElement => {
+	return (
+		<Box flexWrap='wrap' display='flex'>
+			{abacAttributes.map((attribute, index) => (
+				<Margins inline={2} blockEnd={4} key={index}>
+					<UserInfoABACAttribute attribute={attribute} />
+				</Margins>
+			))}
+		</Box>
+	);
+};
+
+export default UserInfoABACAttributes;

apps/meteor/client/components/UserInfo/__snapshots__/UserInfoABACAttributes.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`UserInfoABACAttributes should render with multiple attributes 1`] = `
+<body>
+  <div>
+    <span
+      class="rcx-box rcx-box--full rcx-css-zr2f9f"
+    >
+      <span
+        class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-wcp0mp"
+      >
+        <span
+          class="rcx-tag__inner"
+        >
+          Classified
+        </span>
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-wcp0mp"
+      >
+        <span
+          class="rcx-tag__inner"
+        >
+          Top Secret
+        </span>
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-wcp0mp"
+      >
+        <span
+          class="rcx-tag__inner"
+        >
+          Confidential
+        </span>
+      </span>
+    </span>
+  </div>
+</body>
+`;

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

@@ -698,6 +698,8 @@
   "Attribute_based_access_control": "Attribute-Based Access Control",
   "Attribute_based_access_control_title": "Automate complex access management across your entire organization",
   "Attribute_based_access_control_description": "ABAC automates room access, granting or revoking access based on dynamic user attributes rather than fixed roles.",
+  "ABAC_Attributes": "Subject attributes",
+  "ABAC_Attributes_description": "User characteristics ABAC uses to determine room access",
   "Audio": "Audio",
   "Audio_Notification_Value_Description": "Can be any custom sound or the default ones: beep, chelle, ding, droplet, highbell, seasons",
   "Audio_Notifications_Default_Alert": "Audio Notifications Default Alert",