changes to the get it working

Author: infiton

packages/react/spec/auto/form/PolarisAutoRelationshipForm.stories.jsx

@@ -20,6 +20,7 @@ const ExampleAutoRelatedForm = (props) => {
           </Text>
           <PolarisAutoInput field="name" />
           <PolarisAutoInput field="description" />
+          <PolarisAutoInput field="inventoryCount" />
         </Card>
 
         <Card>
@@ -43,6 +44,7 @@ const ExampleAutoRelatedForm = (props) => {
             secondaryLabel="orientation"
           >
             <PolarisAutoInput field="name" />
+            <PolarisAutoInput field="orientation" />
             <PolarisAutoInput field="attachment" />
           </PolarisAutoRelationshipForm>
         </Card>
@@ -70,7 +72,13 @@ export default {
   ],
 };
 
-export const Primary = {
+export const Create = {
+  args: {
+    action: api.widget.create,
+  },
+};
+
+export const Update = {
   args: {
     action: api.widget.update,
     findBy: "1",

packages/react/src/auto/AutoForm.ts

@@ -179,8 +179,6 @@ export const useAutoForm = <
 
   const { metadata, fetching: fetchingMetadata, error: metadataError } = useActionMetadata(props.action);
 
-  console.log("metadata", metadata);
-
   validateTriggersFromMetadata(metadata);
 
   // filter down the fields to render only what we want to render for this form

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoRelationshipForm.tsx

@@ -37,7 +37,12 @@ export const PolarisAutoRelationshipForm = autoInput(
       return <PolarisAutoBelongsToRelationshipForm pathPrefix={pathPrefix}>{props.children}</PolarisAutoBelongsToRelationshipForm>;
     } else if (metadata.configuration.__typename === "GadgetHasManyConfig") {
       return (
-        <PolarisAutoHasManyRelationshipForm field={field} pathPrefix={pathPrefix} primaryLabel={props.primaryLabel}>
+        <PolarisAutoHasManyRelationshipForm
+          field={field}
+          pathPrefix={pathPrefix}
+          primaryLabel={props.primaryLabel}
+          secondaryLabel={props.secondaryLabel}
+        >
           {props.children}
         </PolarisAutoHasManyRelationshipForm>
       );
@@ -79,9 +84,13 @@ const PolarisAutoHasManyRelationshipForm = (props: {
   return (
     <Box borderColor="border" borderWidth="025" borderRadius="200">
       <BlockStack as="ul">
-        {fields.map((field, idx) => {
+        {fields.flatMap((field, idx) => {
           const record = records[idx];
 
+          if (!record) {
+            return [];
+          }
+
           const primary = getRecordAsOption(record, primaryLabel);
           const secondary = props.secondaryLabel && getRecordLabel(record, props.secondaryLabel);
 
@@ -110,11 +119,9 @@ const PolarisAutoHasManyRelationshipForm = (props: {
                       <Text variant="bodyMd" fontWeight="semibold" as="h3">
                         {primary.label}
                       </Text>
-                      {secondary && (
-                        <Text variant="bodyMd" as="p" tone="subdued">
-                          {secondary}
-                        </Text>
-                      )}
+                      <Text variant="bodyMd" as="p" tone="subdued">
+                        {secondary ?? <span style={{ visibility: "hidden" }}>&nbsp;</span>}
+                      </Text>
                     </BlockStack>
                   ) : (
                     <Text variant="bodyMd" as="h3" tone="subdued">

packages/react/tsconfig.base.json

@@ -6,6 +6,7 @@
     "baseUrl": "./",
     "target": "es2020",
     "types": ["jest", "node"],
-    "importHelpers": true
+    "importHelpers": true,
+    "declaration": false
   }
 }