From b2c008c14a816bd0ef6e0857d87223df85c8bf8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Wilby?= <rbrki07@gmail.com>
Date: Fri, 5 Apr 2024 09:30:29 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20add=20new=20attribute=20'hiddenFields'?=
 =?UTF-8?q?=20to=20configure=20which=20fields=20shou=E2=80=A6=20(#2294)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding a new attribute hiddenFields for AutoForm component allowing to hide certain fields in the form. This feature tries to achive a kind of api parity between AutoGrid and AutoGrid, because #2279 introduced hiddenColumns to AutoGrid.
---
 packages/ts/react-crud/src/autoform.tsx       | 15 ++++++++++-
 packages/ts/react-crud/test/autoform.spec.tsx | 26 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/ts/react-crud/src/autoform.tsx b/packages/ts/react-crud/src/autoform.tsx
index 5d9ca9d7b9..b9b9973035 100644
--- a/packages/ts/react-crud/src/autoform.tsx
+++ b/packages/ts/react-crud/src/autoform.tsx
@@ -170,6 +170,13 @@ export type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentSt
      * but don't exist in the model, will be ignored.
      */
     visibleFields?: string[];
+    /**
+     * Defines the fields to hide in the form, keeping the default order. This takes
+     * an array of property names. Properties that are not included in this
+     * array will not be hidden in the form, and properties that are included,
+     * but don't exist in the model, will be ignored.
+     */
+    hiddenFields?: string[];
     /**
      * Allows to customize the FormLayout used by default. This is especially useful
      * to define the `responsiveSteps`. See the
@@ -258,6 +265,7 @@ export function AutoForm<M extends AbstractModel>({
   disabled,
   layoutRenderer: LayoutRenderer,
   visibleFields,
+  hiddenFields,
   formLayoutProps,
   fieldOptions,
   style,
@@ -391,7 +399,12 @@ export function AutoForm<M extends AbstractModel>({
     );
   }
 
-  const visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);
+  let visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);
+
+  // When using `hiddenFields`, remove fields to hide using their `name`
+  if (hiddenFields) {
+    visibleProperties = visibleProperties.filter(({ name }) => !hiddenFields.includes(name));
+  }
 
   const fields = visibleProperties.map(createAutoFormField);
 
diff --git a/packages/ts/react-crud/test/autoform.spec.tsx b/packages/ts/react-crud/test/autoform.spec.tsx
index 1f26ece980..79cb530825 100644
--- a/packages/ts/react-crud/test/autoform.spec.tsx
+++ b/packages/ts/react-crud/test/autoform.spec.tsx
@@ -724,6 +724,32 @@ describe('@vaadin/hilla-react-crud', () => {
       });
     });
 
+    describe('hiddenFields', () => {
+      it('hides fields only for the specified properties', async () => {
+        const form = await populatePersonForm(1, { hiddenFields: ['gender', 'birthDate', 'appointmentTime'] });
+        expect(form.queryField('Gender')).to.be.undefined;
+        expect(form.queryField('Birth date')).to.be.undefined;
+        expect(form.queryField('Appointment time')).to.be.undefined;
+        const visibleFields = LABELS.filter((label) => !['Gender', 'Birth date', 'Appointment time'].includes(label));
+        for (const visibleField of visibleFields) {
+          expect(form.queryField(visibleField)).to.exist;
+        }
+      });
+
+      it('hides fields for nested properties that are not included by default', async () => {
+        const form = await populatePersonForm(1, { hiddenFields: ['address.street'] });
+        expect(form.queryField('Street')).to.be.undefined;
+      });
+
+      it('ignores non-existing properties', async () => {
+        const service = personService();
+        const person = (await getItem(service, 1))!;
+
+        const form = await populatePersonForm(1, { hiddenFields: ['foo'] });
+        await expect(form.getValues(...LABELS)).to.eventually.be.deep.equal(getExpectedValues(person));
+      });
+    });
+
     describe('Delete button', () => {
       let service: CrudService<Person> & HasTestInfo;
       let person: Person;