use a single select when using related models in AutoForm

Author: infiton

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,
   };

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

@@ -0,0 +1,95 @@
+import { useCallback, useMemo } from "react";
+import type { GadgetHasManyConfig } from "../../internal/gql/graphql.js";
+import { useFieldArray, useWatch } from "../../useActionForm.js";
+import type { AutoRelationshipInputProps } from "../interfaces/AutoRelationshipInputProps.js";
+import { useFieldMetadata } from "./useFieldMetadata.js";
+import { useRelatedModelOptions } from "./useRelatedModel.js";
+
+export const useHasManyController = (props: AutoRelationshipInputProps) => {
+  const { field } = props;
+  const fieldMetadata = useFieldMetadata(field);
+  const { path } = fieldMetadata;
+
+  const fieldArray = useFieldArray({ name: path, keyName: "_fieldArrayKey" });
+
+  const records: Record<string, any>[] = useWatch({ name: path, defaultValue: [] });
+
+  return {
+    fieldMetadata,
+    fieldArray,
+    records,
+  };
+};
+
+export const useHasManyInputController = (props: AutoRelationshipInputProps) => {
+  const { fieldMetadata, fieldArray, records } = useHasManyController(props);
+
+  const { metadata } = fieldMetadata;
+  const inverseFieldApiIdentifier = useMemo(() => {
+    return (metadata.configuration as GadgetHasManyConfig).inverseField?.apiIdentifier;
+  }, [metadata.configuration]);
+
+  const { remove, append, update } = fieldArray;
+  const relatedModelOptions = useRelatedModelOptions(props);
+
+  const { relatedModel } = relatedModelOptions;
+
+  const errorMessage = relatedModel.error?.message;
+  const isLoading = relatedModel.fetching;
+
+  const selectedRecords = useMemo(() => {
+    return (records ?? []).filter((value: { _unlink?: string }) => !("_unlink" in value && value._unlink));
+  }, [records]);
+
+  const onRemoveRecord = useCallback(
+    (record: Record<string, any>) => {
+      const index = records.findIndex((value) => value.id === record.id);
+
+      if (index < 0) {
+        return;
+      }
+
+      if ("_link" in record) {
+        remove(index);
+      } else {
+        update(index, {
+          ...record,
+          _unlink: { id: record.id, inverseFieldApiIdentifier },
+        });
+      }
+    },
+    [inverseFieldApiIdentifier, records, remove, update]
+  );
+
+  const onSelectRecord = useCallback(
+    (record: Record<string, any>) => {
+      const index = (records ?? []).findIndex((value) => value.id === record.id);
+
+      if (index >= 0) {
+        const value = records[index];
+        if ("_unlink" in value && value._unlink) {
+          const { _unlink, ...rest } = value;
+          update(index, rest);
+        } else {
+          onRemoveRecord(record);
+        }
+      } else {
+        append({
+          ...record,
+          _link: record.id,
+        });
+      }
+    },
+    [records, onRemoveRecord, update, append]
+  );
+
+  return {
+    fieldMetadata,
+    relatedModelOptions,
+    selectedRecords,
+    errorMessage,
+    isLoading,
+    onSelectRecord,
+    onRemoveRecord,
+  };
+};