Enable multiselect in form-urlencoded body (#220)

Author: danieleds

demo/examples/openapi-issue-220.yaml

@@ -0,0 +1,43 @@
+openapi: 3.0.3
+info:
+  version: 1.0.0
+  title: ""
+servers:
+  - url: https://example.com
+security:
+  - basic_auth: []
+paths:
+  /Calls:
+    post:
+      tags:
+        - Calls
+      operationId: create_a_call
+      summary: Create a Call
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              type: object
+              properties:
+                StatusCallback:
+                  type: string
+                  example: https://your-api-endpoint.com/path
+                StatusCallbackEvent:
+                  type: array
+                  items:
+                    type: string
+                    enum:
+                      - initiated
+                      - ringing
+                      - answered
+                      - completed
+                  example:
+                    - completed
+            encoding:
+              StatusCallbackEvent:
+                style: form
+                explode: true
+      responses:
+        "200":
+          description: OK

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Body/index.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import { RequestBodyObject } from "docusaurus-plugin-openapi/src/openapi/types";
 
 import ContentType from "../ContentType";
+import FormMultiSelect from "../FormMultiSelect";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
 import FormFileUpload from "./../FormFileUpload";
@@ -22,6 +23,7 @@ import {
   setFileFormBody,
   setFileRawBody,
   setStringFormBody,
+  setArrayFormBody,
   setStringRawBody,
 } from "./slice";
 
@@ -165,6 +167,37 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
                 </FormItem>
               );
             }
+
+            if (
+              val.type === "array" &&
+              val.items.enum &&
+              val.items.type === "string"
+            ) {
+              return (
+                <FormItem key={key} label={key}>
+                  <FormMultiSelect
+                    options={val.items.enum}
+                    onChange={(e) => {
+                      const values = Array.prototype.filter
+                        .call(e.target.options, (o) => o.selected)
+                        .map((o) => o.value);
+
+                      if (values.length === 0) {
+                        dispatch(clearFormBodyKey(key));
+                      } else {
+                        dispatch(
+                          setArrayFormBody({
+                            key: key,
+                            value: values,
+                          })
+                        );
+                      }
+                    }}
+                  />
+                </FormItem>
+              );
+            }
+
             // TODO: support all the other types.
             return (
               <FormItem key={key} label={key}>

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Body/slice.ts

@@ -20,7 +20,15 @@ export interface StringContent {
   value?: string;
 }
 
-export type Content = FileContent | StringContent | undefined;
+export type ArrayContent = {
+  type: "array";
+  value?: {
+    type: "string";
+    value?: string[];
+  };
+};
+
+export type Content = FileContent | StringContent | ArrayContent | undefined;
 
 export interface FormBody {
   type: "form";
@@ -31,7 +39,7 @@ export interface FormBody {
 
 export interface RawBody {
   type: "raw";
-  content: Content;
+  content: Exclude<Content, ArrayContent>;
 }
 
 export interface EmptyBody {
@@ -97,6 +105,33 @@ export const slice = createSlice({
       };
       return state;
     },
+    setArrayFormBody: (
+      state,
+      action: PayloadAction<{ key: string; value: string[] }>
+    ) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "array",
+              value: {
+                type: "string",
+                value: action.payload.value,
+              },
+            },
+          },
+        };
+      }
+      state.content[action.payload.key] = {
+        type: "array",
+        value: {
+          type: "string",
+          value: action.payload.value,
+        },
+      };
+      return state;
+    },
     setFileFormBody: (
       state,
       action: PayloadAction<{ key: string; value: FileContent["value"] }>
@@ -127,6 +162,7 @@ export const {
   setFileRawBody,
   clearFormBodyKey,
   setStringFormBody,
+  setArrayFormBody,
   setFileFormBody,
 } = slice.actions;
 

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/buildPostmanRequest.ts

@@ -172,14 +172,51 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
       }
       const params = Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
+        .filter(([_key, content]) => content.type !== "array")
         .map(([key, content]) => {
-          if (content.type !== "file" && content.value) {
+          if (
+            content.type !== "file" &&
+            content.type !== "array" &&
+            content.value
+          ) {
             return new sdk.QueryParam({ key: key, value: content.value });
           }
           return undefined;
         })
         .filter((item): item is sdk.QueryParam => item !== undefined);
+
+      const arrayParams = Object.entries(body.content)
+        .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
+        .filter(([_key, content]) => content.type === "array")
+        .map(([key, content]) => {
+          if (content.type === "array" && content.value) {
+            return {
+              key: key,
+              values: content.value?.value?.map(
+                (e) => new sdk.QueryParam({ key: key, value: e })
+              ),
+            };
+          }
+          return undefined;
+        })
+        .filter((item) => item !== undefined && item?.values !== undefined);
+
       clonedPostman.body.urlencoded?.assimilate(params, false);
+
+      // Now let's append the array keys
+      for (const arrayParam of arrayParams) {
+        clonedPostman.body.urlencoded?.remove(
+          (e) => e.key === arrayParam?.key,
+          undefined
+        );
+
+        arrayParam?.values?.forEach((queryParam) =>
+          clonedPostman.body?.urlencoded?.append(queryParam)
+        );
+      }
+
+      console.log(clonedPostman.body.urlencoded);
+
       return;
     }
     default: