chore: add new icons to abac rooms (RocketChat#37424)

Author: MartinSchoeler

apps/meteor/client/components/ABAC/ABACHeaderTag.spec.tsx

@@ -0,0 +1,83 @@
+import { useRoomIcon } from './useRoomIcon';
+import { createFakeRoom } from '../../tests/mocks/data';
+
+const mockRooms = {
+	public: createFakeRoom({
+		t: 'c',
+		name: 'public',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+	}),
+	private: createFakeRoom({
+		t: 'p',
+		name: 'private',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+	}),
+	team: createFakeRoom({
+		t: 'c',
+		name: 'team',
+		teamMain: true,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+	}),
+	direct: createFakeRoom({
+		t: 'd',
+		name: 'direct',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+	}),
+	directMultiple: createFakeRoom({
+		t: 'd',
+		name: 'direct-multiple',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+		uids: ['user1', 'user2', 'user3'],
+	}),
+	federated: createFakeRoom({
+		t: 'c',
+		name: 'federated',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: false,
+		federated: true,
+	}),
+	abacRoom: createFakeRoom({
+		t: 'c',
+		name: 'abac-room',
+		teamMain: false,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: true,
+	}),
+	abacTeamRoom: createFakeRoom({
+		t: 'c',
+		name: 'abac-team-room',
+		teamMain: true,
+		// @ts-expect-error TODO: Implement ABAC attributes in rooms
+		abacAttributes: true,
+	}),
+};
+
+const expectedResults = {
+	public: { name: 'hash' },
+	private: { name: 'hashtag-lock' },
+	team: { name: 'team' },
+	federated: { name: 'globe' },
+	abacRoom: { name: 'hash-shield' },
+	abacTeamRoom: { name: 'team-shield' },
+	direct: { name: 'at' },
+	directMultiple: { name: 'balloon' },
+};
+
+describe('useRoomIcon', () => {
+	it('should return the correct icon for each room', () => {
+		Object.entries(mockRooms).forEach(([key, room]) => {
+			const result = useRoomIcon(room);
+			expect(result).toEqual(expectedResults[key as keyof typeof expectedResults]);
+		});
+	});
+});

apps/meteor/client/components/ABAC/ABACHeaderTag.tsx

@@ -8,6 +8,14 @@ import { ReactiveUserStatus } from '../components/UserStatus';
 export const useRoomIcon = (
 	room: Pick<IRoom, 't' | 'prid' | 'teamMain' | 'uids' | 'u'>,
 ): ComponentProps<typeof Icon> | ReactElement | null => {
+	// @ts-expect-error TODO: Implement ABAC attributes in rooms
+	if (room.abacAttributes) {
+		if (room.teamMain) {
+			return { name: 'team-shield' };
+		}
+		return { name: 'hash-shield' };
+	}
+
 	if (isRoomFederated(room)) {
 		return { name: 'globe' };
 	}

apps/meteor/client/components/ABAC/__snapshots__/ABACHeaderTag.spec.tsx.snap

@@ -82,6 +82,14 @@ roomCoordinator.add(
 		},
 
 		getIcon(room) {
+			// @ts-expect-error TODO: Implement ABAC attributes in rooms
+			if (room.abacAttributes) {
+				if (room.teamMain) {
+					return 'team-shield';
+				}
+				return 'hash-shield';
+			}
+
 			if (room.prid) {
 				return 'discussion';
 			}

apps/meteor/client/hooks/useRoomIcon.spec.tsx

@@ -13,7 +13,6 @@ 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';
 
@@ -51,7 +50,6 @@ 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} />

apps/meteor/client/hooks/useRoomIcon.tsx

@@ -12,7 +12,6 @@ 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 = {
@@ -44,7 +43,6 @@ 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} />

apps/meteor/client/lib/rooms/roomTypes/private.ts

@@ -264,7 +264,7 @@
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/http-router": "workspace:^",
 		"@rocket.chat/i18n": "workspace:^",
-		"@rocket.chat/icons": "~0.44.0",
+		"@rocket.chat/icons": "~0.45.0",
 		"@rocket.chat/instance-status": "workspace:^",
 		"@rocket.chat/jwt": "workspace:^",
 		"@rocket.chat/layout": "^0.33.1",

apps/meteor/client/views/room/Header/RoomHeader.tsx

@@ -77,8 +77,6 @@
   "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",