[ENG-1279] Fix handling of top-level array type schema in request bod…

…y for Groundx API Portal (#284)

* code code-generator-python.test.ts

* save

* support file value in generated snippet for Python

* add filename data.json for browser TS SDK comptability form data

* put type property inside blob constructor

* add konfig-api-portal-tests

* update job

* fix workflow syntax

.github/workflows/konfig-api-portal-tests.yaml

@@ -0,0 +1,35 @@
+name: konfig-api-portaltests
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  unit-tests:
+    strategy:
+      matrix:
+        os: ['ubuntu-latest']
+        node_version: [lts/*]
+      fail-fast: false
+    runs-on: ${{ matrix.os }}
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.SUBMODULES_ACCESS_TOKEN }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: yarn
+          cache-dependency-path: generator/konfig-dash/yarn.lock
+          working-directory: generator/konfig-dash
+      - run: yarn install --network-timeout 600000
+        working-directory: generator/konfig-dash
+      - run: yarn build
+        working-directory: generator/konfig-dash
+      - run: yarn
+        working-directory: generator/konfig-next-app
+      - run: yarn test
+        working-directory: generator/konfig-next-app

generator/konfig-generator-api/src/main/resources/typescript-axios/apiInner.mustache

@@ -93,7 +93,7 @@ export const {{classname}}AxiosParamCreator = function (configuration?: Configur
                         localVarFormParams.append(name, data as any);
                     } else {
                         if (isBrowser()) {
-                            localVarFormParams.append(name, new Blob([JSON.stringify(data)]), { type: "application/json" });
+                            localVarFormParams.append(name, new Blob([JSON.stringify(data)], { type: "application/json" }))
                         } else {
                             localVarFormParams.append(name, JSON.stringify(data), { type: "application/json", filename: "data.json" });
                         }

generator/konfig-next-app/src/components/OperationForm.tsx

@@ -18,9 +18,11 @@ export function OperationForm({
   cookieParameters,
   requestBodyProperties,
   requestBodyRequired,
+  requestBody,
   owner,
   repo,
 }: {
+  requestBody: Parameter | null
   pathParameters: Parameter[]
   queryParameters: Parameter[]
   headerParameters: Parameter[]
@@ -56,6 +58,19 @@ export function OperationForm({
         owner={owner}
         repo={repo}
       />
+
+      {
+        // if request body is an array type then render ParameterGroup with title "Request Body" and parameters as [requestBody]
+        // else do nothing
+        requestBody != null && requestBody.schema.type === 'array' && (
+          <ParameterGroup
+            title="Request Body"
+            parameters={[requestBody]}
+            owner={owner}
+            repo={repo}
+          />
+        )
+      }
       <ParameterGroup
         title="Request Body"
         parameters={generateParametersFromRequestBodyProperties({

generator/konfig-next-app/src/components/OperationParameter.tsx

@@ -26,7 +26,7 @@ const OperationParameterArrayForm = dynamic(
 
 export type Parameter = Omit<ParameterObject, 'schema'> & {
   schema: SchemaObject
-}
+} & { isRequestBody?: boolean }
 
 export function OperationParameter({
   param,
@@ -56,35 +56,39 @@ export function OperationParameter({
         <Flex justify="space-between">
           <Box maw="50%" key={param.name}>
             <Flex align="center" wrap="wrap">
-              <Code
-                mr={rem(5)}
-                style={{
-                  color: theme.colorScheme === 'dark' ? 'white' : 'black',
-                  backgroundColor:
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.gray[9]
-                      : theme.colors.gray[0],
-                  borderRadius: theme.radius.md,
-                  border: `1px solid ${
-                    theme.colorScheme === 'dark'
-                      ? theme.colors.gray[8]
-                      : theme.colors.gray[4]
-                  }`,
-                }}
-              >
-                {param.name}
-              </Code>
+              {param.name !== '' && (
+                <Code
+                  mr={rem(5)}
+                  style={{
+                    color: theme.colorScheme === 'dark' ? 'white' : 'black',
+                    backgroundColor:
+                      theme.colorScheme === 'dark'
+                        ? theme.colors.gray[9]
+                        : theme.colors.gray[0],
+                    borderRadius: theme.radius.md,
+                    border: `1px solid ${
+                      theme.colorScheme === 'dark'
+                        ? theme.colors.gray[8]
+                        : theme.colors.gray[4]
+                    }`,
+                  }}
+                >
+                  {param.name}
+                </Code>
+              )}
               <Code
                 style={{
                   color: theme.colors.gray[6],
                 }}
                 bg="unset"
                 fz={12}
+                ml={param.name === '' ? rem(-5) : undefined}
+                mr={rem(5)}
               >
                 {schemaTypeLabel({ schema: param.schema })}
               </Code>
               {param.required && (
-                <Code style={{ color: 'red' }} bg="unset" ml={rem(5)} fz={12}>
+                <Code style={{ color: 'red' }} bg="unset" fz={12}>
                   {'required'}
                 </Code>
               )}

generator/konfig-next-app/src/components/OperationReferenceMain.tsx

@@ -64,12 +64,14 @@ export function OperationReferenceMain({
   repo,
   servers,
   originalOauthTokenUrl,
+  requestBodyParameter,
 }: Pick<
   ReferencePageProps,
   | 'pathParameters'
   | 'queryParameters'
   | 'headerParameters'
   | 'cookieParameters'
+  | 'requestBodyParameter'
   | 'owner'
   | 'repo'
   | 'requestBodyProperties'
@@ -169,6 +171,8 @@ export function OperationReferenceMain({
 
   const codegenArgs: CodeGeneratorConstructorArgs = {
     parameters: parameters,
+    requestBody: requestBodyParameter,
+    securitySchemes,
     formData: form.values,
     languageConfigurations: {
       typescript: {
@@ -217,6 +221,8 @@ export function OperationReferenceMain({
           setRequestInProgress(true)
           try {
             // IMPORTANT: files is used by the code generator so its fine that this is not used
+            // the IDE will complain that it is not used but it is used by the code generator
+            // see implementation of .setupFiles() and .snippet()
             const files = CodeGeneratorTypeScript.setupFiles(values)
 
             const snippet = await new CodeGeneratorTypeScript({
@@ -306,6 +312,7 @@ export function OperationReferenceMain({
               )}
             </Stack>
             <OperationForm
+              requestBody={requestBodyParameter}
               owner={owner}
               repo={repo}
               pathParameters={pathParameters}

generator/konfig-next-app/src/components/ParameterInput.tsx

@@ -13,6 +13,7 @@ import { IconPlus, IconUpload } from '@tabler/icons-react'
 import { Parameter } from './OperationParameter'
 import {
   PARAMETER_FORM_NAME_PREFIX,
+  REQUEST_BODY_FORM_NAME_PREFIX,
   generateInitialFormValues,
 } from '@/utils/generate-initial-operation-form-values'
 import { useFormContext } from '@/utils/operation-form-context'
@@ -264,6 +265,9 @@ export function generateParameterInputName(
   parameter: Parameter,
   prefix?: string
 ) {
+  if (parameter.isRequestBody) {
+    return REQUEST_BODY_FORM_NAME_PREFIX
+  }
   return `${prefix !== undefined ? prefix : PARAMETER_FORM_NAME_PREFIX}.${
     parameter.name
   }`

generator/konfig-next-app/src/pages/[org]/[portal]/reference/[tag]/[operationId].tsx

@@ -69,6 +69,7 @@ const Operation = ({
   demos,
   requestBodyRequired,
   securityRequirements,
+  requestBodyParameter,
   securitySchemes,
   servers: initialServers,
   operation,
@@ -173,6 +174,7 @@ const Operation = ({
         }
       >
         <OperationReferenceMain
+          requestBodyParameter={requestBodyParameter}
           originalOauthTokenUrl={originalOauthTokenUrl}
           owner={owner}
           servers={servers}

generator/konfig-next-app/src/utils/__snapshots__/code-generator-python.test.ts.snap

@@ -69,6 +69,38 @@ response = snaptrade.options.get_option_strategy()
 pprint(response.body)"
 `;
 
+exports[`request body with blob values 1`] = `
+"from pprint import pprint
+from groundx import Groundx
+
+groundx = Groundx(
+    api_key="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
+)
+
+response = groundx.documents.upload_local([{
+    "blob": open("file_1.txt", "rb"),
+    "metadata": {
+        "bucket_id": 321,
+        "file_name": "321",
+        "file_type": "txt",
+        "metadata": "",
+        "callback_data": "321",
+        "callback_url": "3213"
+    }
+}, {
+    "blob": open("file_2.txt", "rb"),
+    "metadata": {
+        "bucket_id": 321,
+        "file_name": "321",
+        "file_type": "txt",
+        "metadata": "",
+        "callback_data": "",
+        "callback_url": ""
+    }
+}])
+pprint(response.body)"
+`;
+
 exports[`simple example 1`] = `
 "from pprint import pprint
 from snaptrade_client import SnapTrade