feat: add new attribute 'hiddenFields' to configure which fields shou… (

#2294)

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

@@ -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);
 

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;