use a single select when using related models in AutoForm

Author: infiton

packages/react/spec/auto/PolarisAutoForm.spec.tsx

@@ -719,12 +719,6 @@ function loadMockGizmoCreateMetadata() {
 }
 
 function loadMockWidgetCreateMetadata(opts?: { inputFields?: any[]; triggers?: any[] }) {
-  expect(mockUrqlClient.executeQuery.mock.calls[0][0].variables).toEqual({
-    modelApiIdentifier: "widget",
-    modelNamespace: null,
-    action: "create",
-  });
-
   mockUrqlClient.executeQuery.pushResponse("ModelActionMetadata", {
     stale: false,
     hasNext: false,
@@ -738,6 +732,12 @@ function loadMockWidgetCreateMetadata(opts?: { inputFields?: any[]; triggers?: a
       opts?.triggers
     ),
   });
+
+  expect(mockUrqlClient.executeQuery.mock.calls[0][0].variables).toEqual({
+    modelApiIdentifier: "widget",
+    modelNamespace: null,
+    action: "create",
+  });
 }
 
 function loadMockWidgetUpdateMetadata() {
@@ -747,8 +747,8 @@ function loadMockWidgetUpdateMetadata() {
 
 function loadMockWidgetUpdateMetadataWithFindBy() {
   mockWidgetUpdateHelperFunctions.expectMetadataRequest();
-  mockWidgetUpdateHelperFunctions.mockFindByResponse();
   mockWidgetUpdateHelperFunctions.mockMetadataResponse();
+  mockWidgetUpdateHelperFunctions.mockFindByResponse();
 }
 
 const mockWidgetUpdateHelperFunctions = {

packages/react/spec/auto/inputs/PolarisAutoTextInput.spec.tsx

@@ -332,6 +332,26 @@ const metadata = {
 };
 
 const mockFindBy = () => {
+  const updateMetadata = { ...metadata, action: { ...metadata.action, apiIdentifier: "update", operatesWithRecordIdentity: true } };
+  mockUrqlClient.executeQuery.pushResponse("ModelActionMetadata", {
+    stale: false,
+    hasNext: false,
+    data: {
+      gadgetMeta: {
+        modelAndRelatedModels: [
+          {
+            name: "Widget",
+            apiIdentifier: "widget",
+            fields: updateMetadata.action.inputFields,
+            __typename: "GadgetModel",
+          },
+        ],
+        model: updateMetadata,
+        __typename: "GadgetApplicationMeta",
+      },
+    },
+  });
+
   mockUrqlClient.executeQuery.pushResponse("widget", {
     stale: false,
     hasNext: false,
@@ -361,24 +381,4 @@ const mockFindBy = () => {
       },
     },
   });
-
-  const updateMetadata = { ...metadata, action: { ...metadata.action, apiIdentifier: "update", operatesWithRecordIdentity: true } };
-  mockUrqlClient.executeQuery.pushResponse("ModelActionMetadata", {
-    stale: false,
-    hasNext: false,
-    data: {
-      gadgetMeta: {
-        modelAndRelatedModels: [
-          {
-            name: "Widget",
-            apiIdentifier: "widget",
-            fields: updateMetadata.action.inputFields,
-            __typename: "GadgetModel",
-          },
-        ],
-        model: updateMetadata,
-        __typename: "GadgetApplicationMeta",
-      },
-    },
-  });
 };

packages/react/spec/auto/support/helper.ts

@@ -30,16 +30,16 @@ export const mockWidgetFindBy = (
   action: Parameters<typeof getWidgetModelMetadata>[0],
   overridesRecord?: Parameters<typeof getWidgetRecord>[0]
 ) => {
-  mockUrqlClient.executeQuery.pushResponse("widget", {
+  mockUrqlClient.executeQuery.pushResponse("ModelActionMetadata", {
     stale: false,
     hasNext: false,
-    data: getWidgetRecord(overridesRecord),
+    data: getWidgetModelMetadata(action),
   });
 
-  mockUrqlClient.executeQuery.pushResponse("ModelActionMetadata", {
+  mockUrqlClient.executeQuery.pushResponse("widget", {
     stale: false,
     hasNext: false,
-    data: getWidgetModelMetadata(action),
+    data: getWidgetRecord(overridesRecord),
   });
 };
 

packages/react/src/auto/AutoForm.ts

@@ -1,11 +1,12 @@
-import type { ActionFunction, GadgetRecord, GlobalActionFunction } from "@gadgetinc/api-client-core";
+import type { ActionFunction, FieldSelection, GadgetRecord, GlobalActionFunction } from "@gadgetinc/api-client-core";
 import { yupResolver } from "@hookform/resolvers/yup";
 import type { ReactNode } from "react";
-import { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import type { AnyActionWithId, RecordIdentifier, UseActionFormHookStateData } from "src/use-action-form/types.js";
 import type { GadgetObjectFieldConfig } from "../internal/gql/graphql.js";
 import type { FieldMetadata, GlobalActionMetadata, ModelWithOneActionMetadata } from "../metadata.js";
-import { FieldType, filterAutoFormFieldList, isModelActionMetadata, useActionMetadata } from "../metadata.js";
+import { FieldType, buildAutoFormFieldList, isModelActionMetadata, useActionMetadata } from "../metadata.js";
+import { pathListToSelection } from "../use-table/helpers.js";
 import type { FieldErrors, FieldValues } from "../useActionForm.js";
 import { useActionForm } from "../useActionForm.js";
 import { get, getFlattenedObjectKeys, type OptionsType } from "../utils.js";
@@ -16,6 +17,7 @@ import {
   validateTriggersFromApiClient,
   validateTriggersFromMetadata,
 } from "./AutoFormActionValidators.js";
+import { isAutoInput } from "./AutoInput.js";
 
 /** The props that any <AutoForm/> component accepts */
 export type AutoFormProps<
@@ -89,22 +91,22 @@ export const useFormFields = (
       : [];
     const nonObjectFields = action.inputFields.filter((field) => field.configuration.__typename !== "GadgetObjectFieldConfig");
 
-    const includedRootLevelFields = filterAutoFormFieldList(nonObjectFields, options as any).map(
-      (field) =>
+    const includedRootLevelFields = buildAutoFormFieldList(nonObjectFields, options as any).map(
+      ([path, field]) =>
         ({
-          path: field.apiIdentifier,
+          path,
           metadata: field,
         } as const)
     );
 
     const includedObjectFields = objectFields.flatMap((objectField) =>
-      filterAutoFormFieldList((objectField.configuration as unknown as GadgetObjectFieldConfig).fields as any, {
+      buildAutoFormFieldList((objectField.configuration as unknown as GadgetObjectFieldConfig).fields as any, {
         ...(options as any),
         isUpsertAction: true, // For upsert meta-actions, we allow IDs, and they are object fields instead of root level
       }).map(
-        (innerField) =>
+        ([innerPath, innerField]) =>
           ({
-            path: `${objectField.apiIdentifier}.${innerField.apiIdentifier}`,
+            path: `${objectField.apiIdentifier}.${innerPath}`,
             metadata: innerField,
           } as const)
       )
@@ -120,6 +122,19 @@ export const useFormFields = (
   }, [metadata, options]);
 };
 
+export const useFormSelection = (
+  modelApiIdentifier: string | undefined,
+  fields: readonly { path: string; metadata: FieldMetadata }[]
+): FieldSelection | undefined => {
+  if (!modelApiIdentifier) return;
+  if (!fields.length) return;
+
+  const paths = fields.map((f) => f.path.replace(new RegExp(`^${modelApiIdentifier}\\.`), ""));
+  const fieldMetaData = fields.map((f) => f.metadata);
+
+  return pathListToSelection(paths, fieldMetaData);
+};
+
 const validateFormFieldApiIdentifierUniqueness = (actionApiIdentifier: string, inputApiIdentifiers: string[]) => {
   const seen = new Set<string>();
 
@@ -142,7 +157,15 @@ export const useAutoForm = <
 >(
   props: AutoFormProps<GivenOptions, SchemaT, ActionFunc, any, any> & { findBy?: any }
 ) => {
-  const { action, record, onSuccess, onFailure, findBy } = props;
+  const { action, record, onSuccess, onFailure, findBy, children } = props;
+
+  let include = props.include;
+  let exclude = props.exclude;
+
+  if (children) {
+    include = extractPathsFromChildren(children);
+    exclude = undefined;
+  }
 
   validateNonBulkAction(action);
   validateTriggersFromApiClient(action);
@@ -152,12 +175,13 @@ export const useAutoForm = <
   validateTriggersFromMetadata(metadata);
 
   // filter down the fields to render only what we want to render for this form
-  const fields = useFormFields(metadata, props);
+  const fields = useFormFields(metadata, { include, exclude });
   validateFindByObjectWithMetadata(fields, findBy);
   const isDeleteAction = metadata && isModelActionMetadata(metadata) && metadata.action.isDeleteAction;
   const isGlobalAction = action.type === "globalAction";
   const operatesWithRecordId = !!(metadata && isModelActionMetadata(metadata) && metadata.action.operatesWithRecordIdentity);
   const modelApiIdentifier = action.type == "action" ? action.modelApiIdentifier : undefined;
+  const selection = useFormSelection(modelApiIdentifier, fields);
   const isUpsertMetaAction =
     metadata && isModelActionMetadata(metadata) && fields.some((field) => field.metadata.fieldType === FieldType.Id);
   const isUpsertWithFindBy = isUpsertMetaAction && !!findBy;
@@ -201,6 +225,8 @@ export const useAutoForm = <
     defaultValues: defaultValues as any,
     findBy: "findBy" in props ? props.findBy : undefined,
     throwOnInvalidFindByObject: false,
+    pause: "findBy" in props ? fetchingMetadata : undefined,
+    select: selection as any,
     resolver: useValidationResolver(metadata, fieldPathsToValidate),
     send: () => {
       const fieldsToSend = fields
@@ -282,6 +308,44 @@ export const useAutoForm = <
   };
 };
 
+const extractPathsFromChildren = (children: React.ReactNode) => {
+  const paths = new Set<string>();
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      const grandChildren = child.props.children as React.ReactNode | undefined;
+      let childPaths: string[] = [];
+
+      if (grandChildren) {
+        childPaths = extractPathsFromChildren(grandChildren);
+      }
+
+      let field: string | undefined = undefined;
+
+      if (isAutoInput(child)) {
+        const props = child.props as { field: string; selectPaths?: string[]; children?: React.ReactNode };
+        field = props.field;
+
+        paths.add(field);
+
+        if (props.selectPaths && Array.isArray(props.selectPaths)) {
+          props.selectPaths.forEach((selectPath) => {
+            paths.add(`${field}.${selectPath}`);
+          });
+        }
+      }
+
+      if (childPaths.length > 0) {
+        for (const childPath of childPaths) {
+          paths.add(field ? `${field}.${childPath}` : childPath);
+        }
+      }
+    }
+  });
+
+  return Array.from(paths);
+};
+
 const removeIdFieldsUnlessUpsertWithoutFindBy = (isUpsertWithFindBy?: boolean) => {
   return (field: { metadata: FieldMetadata }) => {
     return field.metadata.fieldType === FieldType.Id ? !isUpsertWithFindBy : true;

packages/react/src/auto/hooks/useBelongsToInputController.tsx

@@ -1,74 +1,49 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { useController, useFormContext } from "../../useActionForm.js";
-import { useAutoFormMetadata } from "../AutoFormContext.js";
+import { useCallback } from "react";
+import { useFormContext, useWatch } from "../../useActionForm.js";
 import type { AutoRelationshipInputProps } from "../interfaces/AutoRelationshipInputProps.js";
 import { useFieldMetadata } from "./useFieldMetadata.js";
-import { useRelatedModelOptions } from "./useRelatedModelOptions.js";
+import { useRelatedModelOptions } from "./useRelatedModel.js";
 
 export const useBelongsToInputController = (props: AutoRelationshipInputProps) => {
-  const { field, control } = props;
+  const { field } = props;
   const fieldMetadata = useFieldMetadata(field);
   const { path } = fieldMetadata;
-  const { findBy } = useAutoFormMetadata();
+  const { setValue } = useFormContext();
 
   const relatedModelOptions = useRelatedModelOptions(props);
-  const { selected, relatedModel } = relatedModelOptions;
+  const { relatedModel } = relatedModelOptions;
 
-  const {
-    formState: { defaultValues },
-  } = useFormContext();
+  const value = useWatch({ name: path });
 
-  const {
-    field: fieldProps,
-    fieldState: { error: fieldError },
-  } = useController({
-    name: path + ".id",
-    control,
-  });
+  const selectedRecord: Record<string, any> | undefined = value?.id ? value : undefined;
 
-  const isLoading = selected.fetching || relatedModel.fetching;
-  const errorMessage = fieldError?.message || selected.error?.message || relatedModel.error?.message;
+  const isLoading = relatedModel.fetching;
+  const errorMessage = relatedModel.error?.message;
 
-  const retrievedSelectedRecordId = useMemo(() => {
-    return !selected.fetching && selected.records && selected.records.length ? selected.records[0][`${field}Id`] : null;
-  }, [selected.fetching, selected.records]);
+  const onSelectRecord = useCallback(
+    (record: Record<string, any>) => {
+      setValue(path, record);
+    },
+    [path, setValue]
+  );
 
-  const selectedRelatedModelRecordMissing = useMemo(() => {
-    if (!findBy) {
-      // Without a find by, there is no retrieved record ID
-      return false;
-    }
-
-    return !selected.fetching && selected.records && selected.records.length
-      ? !selected.records[0].id && !relatedModel.records.map((r) => r.id).includes(fieldProps.value)
-      : true;
-  }, [findBy, selected.fetching, fieldProps.value, relatedModel.records, retrievedSelectedRecordId]);
-
-  useEffect(() => {
-    // Initializing the controller with the selected record ID from the DB
-    if (!selected.fetching && retrievedSelectedRecordId) {
-      fieldProps.onChange(retrievedSelectedRecordId);
-    }
-  }, [selected.fetching, retrievedSelectedRecordId, defaultValues]);
+  const onRemoveRecord = useCallback(() => {
+    const { __typename, ...rest } = value;
 
-  const onSelectRecord = useCallback((recordId: string) => {
-    fieldProps.onChange(recordId);
-  }, []);
+    const nullifiedRest = Object.keys(rest).reduce((acc, key) => {
+      acc[key] = null;
+      return acc;
+    }, {} as Record<string, null>);
 
-  const onRemoveRecord = useCallback(() => {
-    fieldProps.onChange(null);
-  }, []);
+    setValue(path, { ...nullifiedRest, id: null, __typename });
+  }, [path, setValue, value]);
 
   return {
     fieldMetadata,
     relatedModelOptions,
-
     onSelectRecord,
     onRemoveRecord,
-
-    selectedRecordId: fieldProps.value,
-    selectedRelatedModelRecordMissing,
-
+    selectedRecord,
     isLoading,
     errorMessage,
   };