chore: disable invite link when in ABAC enabled room (RocketChat#37349)

Author: MartinSchoeler

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.spec.tsx

@@ -0,0 +1,23 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './RoomMembers.stories';
+
+jest.mock('../../hooks/useUserInfoActions', () => ({
+	useUserInfoActions: jest.fn(),
+}));
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	// Disable 'nested-interactive' rule because our `Select` component is still not a11y compliant
+	const results = await axe(container, { rules: { 'nested-interactive': { enabled: false } } });
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.tsx

@@ -47,3 +47,27 @@ Loading.args = {
 	loadMoreItems: action('loadMoreItems'),
 	reload: action('reload'),
 };
+
+export const WithABACRoom = Template.bind({});
+WithABACRoom.args = {
+	loading: false,
+	members: [
+		{
+			_id: 'rocket.cat',
+			username: 'rocket.cat',
+			status: UserStatus.ONLINE,
+			name: 'Rocket.Cat',
+		},
+	],
+	text: 'filter',
+	type: 'online',
+	setText: action('Lorem Ipsum'),
+	setType: action('online'),
+	total: 123,
+	loadMoreItems: action('loadMoreItems'),
+	rid: '!roomId',
+	isTeam: false,
+	isDirect: false,
+	reload: action('reload'),
+	isABACRoom: true,
+};

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx

@@ -44,13 +44,14 @@ type RoomMembersProps = {
 	loadMoreItems: () => void;
 	renderRow?: ElementType<ComponentProps<typeof RoomMembersRow>>;
 	reload: () => void;
+	isABACRoom?: boolean;
 };
 
 const RoomMembers = ({
 	loading,
 	members = [],
 	text,
-	type,
+	type = 'online',
 	setText,
 	setType,
 	onClickClose,
@@ -65,6 +66,7 @@ const RoomMembers = ({
 	isTeam,
 	isDirect,
 	reload,
+	isABACRoom = false,
 }: RoomMembersProps): ReactElement => {
 	const t = useTranslation();
 	const inputRef = useAutoFocus<HTMLInputElement>(true);
@@ -199,7 +201,14 @@ const RoomMembers = ({
 				<ContextualbarFooter>
 					<ButtonGroup stretch>
 						{onClickInvite && (
-							<Button icon='link' onClick={onClickInvite} width='50%'>
+							<Button
+								icon='link'
+								onClick={onClickInvite}
+								width='50%'
+								disabled={isABACRoom}
+								title={isABACRoom ? t('Not_available_for_ABAC_enabled_rooms') : undefined}
+								aria-label={t('Invite_Link')}
+							>
 								{t('Invite_Link')}
 							</Button>
 						)}

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx

@@ -39,7 +39,6 @@ const RoomMembersItem = ({
 	useRealName,
 }: RoomMembersItemProps): ReactElement => {
 	const [showButton, setShowButton] = useState();
-
 	const isReduceMotionEnabled = usePrefersReducedMotion();
 	const handleMenuEvent = {
 		[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: setShowButton,
@@ -62,7 +61,7 @@ const RoomMembersItem = ({
 				{showButton ? (
 					<UserActions username={username} name={name} rid={rid} _id={_id} freeSwitchExtension={freeSwitchExtension} reload={reload} />
 				) : (
-					<IconButton tiny icon='kebab' />
+					<IconButton tiny icon='kebab' aria-hidden tabIndex={-1} />
 				)}
 			</OptionMenu>
 		</Option>

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersWithData.tsx

@@ -34,7 +34,6 @@ const RoomMembersWithData = ({ rid }: { rid: IRoom['_id'] }): ReactElement => {
 	const isDirect = room && isDirectMessageRoom(room);
 	const hasPermissionToCreateInviteLinks = usePermission('create-invite-links', rid);
 	const isFederated = room && isRoomFederated(room);
-
 	// we are dropping the non native federation for now
 	const isFederationBlocked = room && !isRoomNativeFederated(room);
 
@@ -118,6 +117,8 @@ const RoomMembersWithData = ({ rid }: { rid: IRoom['_id'] }): ReactElement => {
 			reload={refetch}
 			onClickInvite={canCreateInviteLinks && canAddUsers ? openInvite : undefined}
 			onClickAdd={canAddUsers ? openAddUser : undefined}
+			// @ts-expect-error to be implemented in ABAC Feature branch
+			isABACRoom={Boolean(room?.abacAttributes)}
 		/>
 	);
 };