Merge pull request #661 from gadget-inc/mill/preventAutoFormValidationsWithCustomChildren

Prevent AutoForm validation with custom children to prevent being blocked unshown required fields

Author: MillanWangGadget

packages/react/.changeset/strong-turkeys-worry.md

@@ -0,0 +1,6 @@
+---
+"@gadgetinc/react": patch
+---
+
+- Added a new error thrown in AutoForm when passing in `include/exclude` options alongside child components
+- Fixed a bug where AutoForm components with custom children were blocked from sending requests when omitting required fields on from the Gadget model action

packages/react/cypress/component/auto/form/AutoForm.cy.tsx

@@ -258,4 +258,52 @@ describeForEachAutoAdapter("AutoForm", ({ name, adapter: { AutoForm }, wrapper }
       expect(variables.widget.description).to.deep.equal({ markdown: "# foobar\n\n## foobaz" });
     });
   });
+
+  it("can submit a form with custom children even if the action has required fields", async () => {
+    cy.mountWithWrapper(
+      <AutoForm action={api.widget.create}>
+        {/* Note that widget has name and inventoryCount as required fields that are not included here */}
+        <button type="submit">Submit</button>
+      </AutoForm>,
+      wrapper
+    );
+
+    cy.intercept("POST", `${api.connection.options.endpoint}?operation=createWidget`, {
+      body: {
+        data: {
+          createWidget: {
+            success: false,
+            errors: [
+              {
+                message: "GGT_INVALID_RECORD: widget is invalid and can't be saved. inventoryCount is required.",
+                code: "GGT_INVALID_RECORD",
+                model: {
+                  apiIdentifier: "widget",
+                  __typename: "GadgetModel",
+                },
+                validationErrors: [
+                  {
+                    message: "is required",
+                    apiIdentifier: "inventoryCount",
+                    __typename: "InvalidFieldError",
+                  },
+                ],
+                __typename: "InvalidRecordError",
+              },
+            ],
+            widget: null,
+            __typename: "CreateWidgetResult",
+          },
+        },
+      },
+    }).as("createWidget");
+
+    cy.contains("Submit").click({ force: true });
+
+    cy.wait("@createWidget").then((interception) => {
+      const { variables } = interception.request.body;
+
+      expect(variables).to.deep.equal({ widget: {} });
+    });
+  });
 });

packages/react/spec/auto/PolarisAutoForm.stories.jsx

@@ -108,7 +108,6 @@ export const Expanded = {
     children: (
       <>
         <PolarisAutoInput field="name" />
-        <PolarisAutoInput field="inventoryCount" />
         <PolarisAutoInput field="isChecked" />
         <PolarisAutoSubmit />
       </>

packages/react/src/auto/AutoForm.ts

@@ -40,6 +40,8 @@ export type AutoFormProps<
   onSuccess?: (record: UseActionFormHookStateData<ActionFunc>) => void;
   /** Called when the form submission errors before sending, during the API call, or if the API call returns an error. */
   onFailure?: (error: Error | FieldErrors<ActionFunc["variablesType"]>) => void;
+  /** Custom components to render within the form. Using this will override all default field rendering.   */
+  children?: ReactNode;
 } & (ActionFunc extends AnyActionWithId<GivenOptions>
   ? {
       /**
@@ -152,6 +154,14 @@ export const useAutoForm = <
   const modelApiIdentifier = action.type == "action" ? action.modelApiIdentifier : undefined;
   const isUpsertMetaAction = metadata && isActionMetadata(metadata) && fields.some((field) => field.metadata.fieldType === FieldType.Id);
   const isUpsertWithFindBy = isUpsertMetaAction && !!findBy;
+  const hasCustomChildren = !!props.children;
+  const fieldPathsToValidate = useMemo(
+    () =>
+      hasCustomChildren
+        ? [] // With custom children, do not validate fields before sending them to avoid blocking submissions due to missing required fields
+        : fields.map(({ path }) => path),
+    [hasCustomChildren, fields]
+  );
 
   const defaultValues: Record<string, unknown> = useMemo(
     () =>
@@ -180,10 +190,7 @@ export const useAutoForm = <
   } = useActionForm(action, {
     defaultValues: defaultValues as any,
     findBy: "findBy" in props ? props.findBy : undefined,
-    resolver: useValidationResolver(
-      metadata,
-      fields.map(({ path }) => path)
-    ),
+    resolver: useValidationResolver(metadata, fieldPathsToValidate),
     send: () => {
       const fieldsToSend = fields
         .filter(({ path, metadata }) => {

packages/react/src/auto/AutoFormActionValidators.ts

@@ -32,6 +32,15 @@ export const validateAutoFormProps = (props: Parameters<typeof useAutoForm>[0])
   if (!props.action) {
     throw new Error(InvalidActionErrorMessage);
   }
+
+  if (props.children) {
+    if (props.include) {
+      throw new Error(`AutoForm components with children cannot use the include option`);
+    }
+    if (props.exclude) {
+      throw new Error(`AutoForm components with children cannot use the exclude option`);
+    }
+  }
 };
 
 export const validateTriggersFromMetadata = (metadata?: ActionMetadata | GlobalActionMetadata) => {