snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesContextualBar.tsx

@@ -0,0 +1,102 @@
+import { ContextualbarClose, ContextualbarHeader, ContextualbarTitle } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouteParameter, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { AttributesFormFormData } from './AttributesForm';
+import AttributesForm from './AttributesForm';
+import { ABACQueryKeys } from '../../../../lib/queryKeys';
+
+export type AttributesContextualBarProps = {
+	attributeId?: string;
+	attributeData?: {
+		key: string;
+		values: string[];
+	};
+	onClose: () => void;
+};
+
+const AttributesContextualBar = ({ attributeData, onClose }: AttributesContextualBarProps) => {
+	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+
+	const methods = useForm<{
+		name: string;
+		attributeValues: { value: string }[];
+		lockedAttributes: { value: string }[];
+	}>({
+		defaultValues: attributeData
+			? {
+					name: attributeData.key,
+					attributeValues: [],
+					lockedAttributes: attributeData.values.map((value) => ({ value })),
+				}
+			: {
+					name: '',
+					attributeValues: [{ value: '' }],
+					lockedAttributes: [],
+				},
+		mode: 'onChange',
+	});
+
+	const { getValues } = methods;
+
+	const attributeId = useRouteParameter('id');
+	const createAttribute = useEndpoint('POST', '/v1/abac/attributes');
+	const updateAttribute = useEndpoint('PUT', '/v1/abac/attributes/:_id', {
+		_id: attributeId ?? '',
+	});
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const saveMutation = useMutation({
+		mutationFn: async (data: AttributesFormFormData) => {
+			const payload = {
+				key: data.name,
+				values: [...data.lockedAttributes.map((attribute) => attribute.value), ...data.attributeValues.map((attribute) => attribute.value)],
+			};
+			if (attributeId) {
+				await updateAttribute(payload);
+			} else {
+				await createAttribute(payload);
+			}
+		},
+		onSuccess: () => {
+			if (attributeId) {
+				dispatchToastMessage({ type: 'success', message: t('ABAC_Attribute_updated', { attributeName: getValues('name') }) });
+			} else {
+				dispatchToastMessage({ type: 'success', message: t('ABAC_Attribute_created', { attributeName: getValues('name') }) });
+			}
+			onClose();
+		},
+		onError: (error: { errorType: string; error: string }) => {
+			if (error.errorType === 'invalid-params') {
+				dispatchToastMessage({ type: 'error', message: t('ABAC_Invalid_attribute') });
+			} else {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		onSettled: () => {
+			queryClient.invalidateQueries({ queryKey: ABACQueryKeys.roomAttributes.list() });
+		},
+	});
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t(attributeId ? 'ABAC_Edit_attribute' : 'ABAC_New_attribute')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<FormProvider {...methods}>
+				<AttributesForm
+					onSave={(values) => saveMutation.mutateAsync(values)}
+					onCancel={onClose}
+					description={t(attributeId ? 'ABAC_Edit_attribute_description' : 'ABAC_New_attribute_description')}
+				/>
+			</FormProvider>
+		</>
+	);
+};
+
+export default AttributesContextualBar;