feat(playground): playground supports state for exploded form data pa…

…rameters
fern-api · Feb 7, 2025 · 147cd1b · 147cd1b
1 parent 8bf1791
commit 147cd1b
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/packages/fern-docs/ui/src/playground/endpoint/PlaygroundEndpointAliasForm.tsx b/packages/fern-docs/ui/src/playground/endpoint/PlaygroundEndpointAliasForm.tsx
@@ -9,7 +9,7 @@ interface PlaygroundEndpointAliasFormProps {
   alias: ApiDefinition.HttpRequestBodyShape.Alias;
   types: Record<ApiDefinition.TypeId, ApiDefinition.TypeDefinition>;
   ignoreHeaders: boolean;
-  setBodyJson: (value: unknown) => void;
+  setBodyJson: (value: unknown, exploded?: boolean) => void;
   value: unknown;
 }
 

diff --git a/packages/fern-docs/ui/src/playground/endpoint/PlaygroundEndpointMultipartForm.tsx b/packages/fern-docs/ui/src/playground/endpoint/PlaygroundEndpointMultipartForm.tsx
@@ -126,6 +126,21 @@ export function PlaygroundEndpointMultipartForm({
     [setFormDataEntry]
   );
 
+  const handleFormDataExplodedChange = useCallback(
+    (key: string, value: unknown) => {
+      setFormDataEntry(key, (oldValue) => {
+        const newValue =
+          typeof value === "function" ? value(oldValue?.value) : value;
+        if (newValue === undefined) {
+          return undefined;
+        } else {
+          return { type: "exploded", value: newValue };
+        }
+      });
+    },
+    [setFormDataEntry]
+  );
+
   const shownFields = formData.fields.filter((field) => {
     return (
       formDataFieldIsRequired(field, types) || !!formDataFormValue[field.key]
@@ -204,17 +219,32 @@ export function PlaygroundEndpointMultipartForm({
               </li>
             );
           },
-          property: (bodyProperty) => (
-            <li key={field.key}>
-              <PlaygroundObjectPropertyForm
-                id="body"
-                property={bodyProperty}
-                onChange={handleFormDataJsonChange}
-                value={formDataFormValue[field.key]?.value}
-                types={types}
-              />
-            </li>
-          ),
+          property: (bodyProperty) => {
+            if (bodyProperty.exploded) {
+              return (
+                <li key={field.key}>
+                  <PlaygroundObjectPropertyForm
+                    id="body"
+                    property={bodyProperty}
+                    onChange={handleFormDataExplodedChange}
+                    value={formDataFormValue[field.key]?.value}
+                    types={types}
+                  />
+                </li>
+              );
+            }
+            return (
+              <li key={field.key}>
+                <PlaygroundObjectPropertyForm
+                  id="body"
+                  property={bodyProperty}
+                  onChange={handleFormDataJsonChange}
+                  value={formDataFormValue[field.key]?.value}
+                  types={types}
+                />
+              </li>
+            );
+          },
         })
       )}
       {hiddenFields.length > 0 && (

diff --git a/packages/fern-docs/ui/src/playground/types/formDataEntryValue.ts b/packages/fern-docs/ui/src/playground/types/formDataEntryValue.ts
@@ -13,12 +13,18 @@ export declare namespace PlaygroundFormDataEntryValue {
     type: "json";
     value: unknown;
   }
+
+  interface Exploded {
+    type: "exploded";
+    value: unknown[];
+  }
 }
 
 export type PlaygroundFormDataEntryValue =
   | PlaygroundFormDataEntryValue.SingleFile
   | PlaygroundFormDataEntryValue.MultipleFiles
-  | PlaygroundFormDataEntryValue.Json;
+  | PlaygroundFormDataEntryValue.Json
+  | PlaygroundFormDataEntryValue.Exploded;
 
 export const PlaygroundFormDataEntryValue = {
   isSingleFile: (
@@ -31,4 +37,8 @@ export const PlaygroundFormDataEntryValue = {
   isJson: (
     value: PlaygroundFormDataEntryValue
   ): value is PlaygroundFormDataEntryValue.Json => value.type === "json",
+  isExploded: (
+    value: PlaygroundFormDataEntryValue
+  ): value is PlaygroundFormDataEntryValue.Exploded =>
+    value.type === "exploded",
 };
diff --git a/packages/fern-docs/ui/src/playground/types/index.ts b/packages/fern-docs/ui/src/playground/types/index.ts
@@ -47,6 +47,12 @@ export function convertPlaygroundFormDataEntryValueToResolvedExampleEndpointRequ
         value: value.value,
       };
     }
+    case "exploded": {
+      return {
+        type: "exploded",
+        value: value.value,
+      };
+    }
     default:
       assertNever(value);
   }

diff --git a/packages/fern-docs/ui/src/playground/utils/serialize.ts b/packages/fern-docs/ui/src/playground/utils/serialize.ts
@@ -61,6 +61,12 @@ export async function serializeFormStateBody(
 
             if (property?.exploded) {
               // For exploded form fields, convert value to array if not already
+              console.log(
+                "In serialize.ts form-data json case. Key:",
+                key,
+                "Value:",
+                value
+              );
               const arrayValue = Array.isArray(value.value)
                 ? value.value
                 : [value.value];
@@ -85,6 +91,14 @@ export async function serializeFormStateBody(
             };
             break;
           }
+          case "exploded":
+            formDataValue[key] = {
+              ...value,
+              contentType: usesApplicationJsonInFormDataValue
+                ? "application/json"
+                : undefined,
+            };
+            break;
           default:
             assertNever(value);
         }