Merge pull request #848 from gadget-inc/mill/addControlToHasManyThroughFormForDupeSelect

Added `allowMultipleSelections` prop to `AutoHasManyThroughForm`

Author: MillanWangGadget

package.json

@@ -27,7 +27,7 @@
     "@gadget-client/app-with-no-user-model": "^1.10.0",
     "@gadget-client/bulk-actions-test": "^1.113.0",
     "@gadget-client/full-auth": "^1.9.0",
-    "@gadget-client/js-clients-test": "1.512.0-development.2586",
+    "@gadget-client/js-clients-test": "1.512.0-development.2591",
     "@gadget-client/kitchen-sink": "1.9.0-development.206",
     "@gadget-client/related-products-example": "^1.865.0",
     "@gadget-client/zxcv-deeply-nested": "^1.212.0",

packages/react/.changeset/violet-mirrors-confess.md

@@ -0,0 +1,5 @@
+---
+"@gadgetinc/react": patch
+---
+
+- Added `allowMultipleSelections` prop to `AutoHasManyThroughForm` to control if sibling records can be linked multiple times through different join model records

packages/react/spec/auto/storybook/form/AutoRelationshipForm.stories.tsx

@@ -234,9 +234,7 @@ const ExampleCourseCreateRelatedForm = (props: any) => {
               primary: ["title", "firstName", "lastName"],
               secondary: "weight",
             }}
-          >
-            <></>
-          </AutoHasManyThroughForm>
+          />
         </Card>
         <AutoSubmit />
       </SelectableDesignSystemAutoFormStory>

packages/react/spec/auto/storybook/form/SelectableDesignSystemAutoFormStory.tsx

@@ -3,7 +3,11 @@ import { BlockStack, Box, Button as PolarisButton, Card as PolarisCard, Label as
 import React from "react";
 import { SUITE_NAMES } from "../../../../cypress/support/constants.js";
 import { type AutoFormProps } from "../../../../src/auto/AutoForm.js";
-import type { AutoRelationshipFormProps, AutoRelationshipInputProps } from "../../../../src/auto/interfaces/AutoRelationshipInputProps.js";
+import type {
+  AutoHasManyThroughFormProps,
+  AutoRelationshipFormProps,
+  AutoRelationshipInputProps,
+} from "../../../../src/auto/interfaces/AutoRelationshipInputProps.js";
 import { PolarisAutoForm } from "../../../../src/auto/polaris/PolarisAutoForm.js";
 import { PolarisAutoInput } from "../../../../src/auto/polaris/inputs/PolarisAutoInput.js";
 import { PolarisAutoBelongsToForm } from "../../../../src/auto/polaris/inputs/relationships/PolarisAutoBelongsToForm.js";
@@ -107,7 +111,7 @@ export const AutoHasManyForm = (props: AutoRelationshipFormProps) => {
   return null;
 };
 
-export const AutoHasManyThroughForm = (props: AutoRelationshipFormProps) => {
+export const AutoHasManyThroughForm = (props: AutoHasManyThroughFormProps) => {
   const { designSystem } = useDesignSystem();
   if (designSystem === SUITE_NAMES.POLARIS) {
     return <PolarisAutoHasManyThroughForm {...props} />;

packages/react/src/auto/interfaces/AutoRelationshipInputProps.tsx

@@ -91,7 +91,14 @@ export type AutoRelationshipFormProps = {
   recordFilter?: RecordFilter;
 };
 
-export type AutoHasManyThroughFormProps = Omit<AutoRelationshipFormProps, "children"> & { children?: ReactNode };
+export type AutoHasManyThroughFormProps = Omit<AutoRelationshipFormProps, "children"> & {
+  children?: ReactNode;
+
+  /**
+   * Allows sibling records to be selected multiple times.
+   */
+  allowMultipleSelections?: boolean;
+};
 
 export const getRecordLabelObject = (recordLabel?: OptionLabel | RecordLabel): RecordLabel | undefined => {
   if (!recordLabel) {

packages/react/src/useHasManyThroughForm.ts

@@ -7,7 +7,7 @@ import type { AutoHasManyThroughFormProps } from "./auto/interfaces/AutoRelation
 import { useFormContext } from "./useActionForm.js";
 
 export const useHasManyThroughForm = (props: AutoHasManyThroughFormProps) => {
-  const { field, children } = props;
+  const { field, children, allowMultipleSelections } = props;
   const { metadata } = useAutoRelationship({ field });
   const { setValue } = useFormContext();
 
@@ -43,7 +43,7 @@ export const useHasManyThroughForm = (props: AutoHasManyThroughFormProps) => {
 
   const {
     search,
-    searchFilterOptions: siblingModelOptions,
+    searchFilterOptions: rawSiblingModelOptions,
     relatedModel: { fetching: siblingRecordsLoading, records: siblingRecords },
     pagination: siblingPagination,
   } = relatedModelOptions;
@@ -67,6 +67,20 @@ export const useHasManyThroughForm = (props: AutoHasManyThroughFormProps) => {
 
   const recordLabel = useRecordLabelObjectFromProps(props);
 
+  const siblingModelOptions = useMemo(() => {
+    if (!allowMultipleSelections && inverseRelatedModelField) {
+      return rawSiblingModelOptions.filter(
+        (option) =>
+          !joinRecords.some((joinRecord) => {
+            const rawJoinRecord = joinRecord[2];
+            const siblingFromJoinRecord = rawJoinRecord[inverseRelatedModelField];
+            return siblingFromJoinRecord && "id" in siblingFromJoinRecord && siblingFromJoinRecord.id === option.id;
+          })
+      );
+    }
+    return rawSiblingModelOptions;
+  }, [rawSiblingModelOptions, allowMultipleSelections, inverseRelatedModelField, joinRecords]);
+
   return {
     fields,
     append,