feat(TDOPS-4687): checkbox widget can disable a single value in list (#…

…4809)
Talend · Jul 19, 2023 · 7a9a8db · 7a9a8db
1 parent fab2624
commit 7a9a8db
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/.changeset/orange-lobsters-poke.md b/.changeset/orange-lobsters-poke.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': minor
+---
+
+Forms - Allow to disable a single checkbox for checkbox widget list
diff --git a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.component.js
@@ -3,7 +3,7 @@ import SimpleCheckBox from './SimpleCheckBox.component';
 import FieldTemplate from '../FieldTemplate';
 import { generateDescriptionId, generateErrorId } from '../../Message/generateId';
 
-function getValues(value = [], itemValue, checked) {
+function getValues(itemValue, checked, value = []) {
 	if (checked) {
 		return value.concat(itemValue);
 	}
@@ -35,21 +35,21 @@ export default function CheckBoxes(props) {
 			{titleMap.map((item, index) => (
 				<SimpleCheckBox
 					describedby={`${descriptionId} ${errorId}`}
-					disabled={schema.disabled || valueIsUpdating}
+					disabled={item.disabled || schema.disabled || valueIsUpdating}
 					id={id}
 					key={index}
 					isValid={isValid}
 					label={item.name}
 					onChange={(event, payload) =>
 						onChange(event, {
 							schema: payload.schema,
-							value: getValues(value, item.value, payload.value),
+							value: getValues(item.value, payload.value, value),
 						})
 					}
 					onFinish={(event, payload) =>
 						onFinish(event, {
 							schema: payload.schema,
-							value: getValues(value, item.value, payload.value),
+							value: getValues(item.value, payload.value, value),
 						})
 					}
 					schema={schema}

diff --git a/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js b/packages/forms/src/UIForm/fields/CheckBox/CheckBoxes.test.js
@@ -88,6 +88,36 @@ describe('CheckBoxes field', () => {
 		expect(screen.getByRole('checkbox', { name: 'My lol title' })).toBeDisabled();
 	});
 
+	it('should render single disabled checkboxe', () => {
+		// given
+		const singleDisabledSchema = {
+			...schema,
+			titleMap: [
+				{ name: 'My foo title', value: 'foo' },
+				{ name: 'My bar title', value: 'bar', disabled: true },
+				{ name: 'My lol title', value: 'lol' },
+			],
+		};
+
+		// when
+		render(
+			<CheckBoxes
+				id="myForm"
+				isValid
+				errorMessage="My error message"
+				onChange={jest.fn()}
+				onFinish={jest.fn()}
+				schema={singleDisabledSchema}
+			/>,
+		);
+
+		// then
+		expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+		expect(screen.getByRole('checkbox', { name: 'My foo title' })).toBeEnabled();
+		expect(screen.getByRole('checkbox', { name: 'My bar title' })).toBeDisabled();
+		expect(screen.getByRole('checkbox', { name: 'My lol title' })).toBeEnabled();
+	});
+
 	describe('#onChange', () => {
 		it('should trigger callback, adding a value to existing values', async () => {
 			// given