From e496e99265d6ab3ecdb23196a7108ccff27da40d Mon Sep 17 00:00:00 2001
From: Evgenii Fedoseev <zorox112@yandex-team.ru>
Date: Tue, 20 Feb 2024 00:39:02 +0300
Subject: [PATCH 1/4] feat: add form-data format with string, file and file
 Array

---
 src/includer/traverse/tables.ts               |   2 +
 src/includer/ui/endpoint.ts                   |   4 +-
 src/runtime/components/BodyFormData.tsx       | 129 ++++++++++++++++++
 .../components/{Body.tsx => BodyJson.tsx}     |   5 +-
 src/runtime/components/FileInputArray.tsx     |  45 ++++++
 src/runtime/components/index.ts               |   3 +-
 src/runtime/sandbox.tsx                       |   7 +-
 src/runtime/types.ts                          |   2 +
 src/runtime/utils.ts                          |   7 +-
 9 files changed, 195 insertions(+), 9 deletions(-)
 create mode 100644 src/runtime/components/BodyFormData.tsx
 rename src/runtime/components/{Body.tsx => BodyJson.tsx} (87%)
 create mode 100644 src/runtime/components/FileInputArray.tsx

diff --git a/src/includer/traverse/tables.ts b/src/includer/traverse/tables.ts
index e08aa94..46206b6 100644
--- a/src/includer/traverse/tables.ts
+++ b/src/includer/traverse/tables.ts
@@ -346,6 +346,8 @@ function prepareSampleElement(
                     return 'c3073b9d-edd0-49f2-a28d-b7ded8ff9a8b';
                 case 'date-time':
                     return '2022-12-29T18:02:01Z';
+                case 'binary':
+                    return null;
                 default:
                     return 'string';
             }
diff --git a/src/includer/ui/endpoint.ts b/src/includer/ui/endpoint.ts
index a81eb78..db1bf75 100644
--- a/src/includer/ui/endpoint.ts
+++ b/src/includer/ui/endpoint.ts
@@ -110,7 +110,7 @@ function sandbox({
     const searchParams = params?.filter((param: Parameter) => param.in === 'query');
     const headers = params?.filter((param: Parameter) => param.in === 'header');
     let bodyStr: null | string = null;
-    if (requestBody?.type === 'application/json') {
+    if (requestBody?.type === 'application/json' || requestBody?.type === 'multipart/form-data') {
         bodyStr = JSON.stringify(prepareSampleObject(requestBody?.schema ?? {}), null, 2);
     }
 
@@ -119,6 +119,8 @@ function sandbox({
         searchParams,
         headers,
         body: bodyStr,
+        schema: requestBody?.schema ?? {},
+        bodyType: requestBody?.type,
         method,
         security,
         path: path,
diff --git a/src/runtime/components/BodyFormData.tsx b/src/runtime/components/BodyFormData.tsx
new file mode 100644
index 0000000..8723bc1
--- /dev/null
+++ b/src/runtime/components/BodyFormData.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import {Text, TextArea} from '@gravity-ui/uikit';
+
+import {Text as TextEnum} from '../../plugin/constants';
+import {OpenJSONSchema} from '../../includer/models';
+
+import type {Field, Nullable} from '../types';
+import {Column} from './Column';
+import {FileInputArray} from './FileInputArray';
+
+type Props = {
+    example: Nullable<string>;
+    schema: OpenJSONSchema | undefined;
+    bodyType?: string;
+};
+
+type State = {
+    error: Nullable<string>;
+};
+
+export class BodyFormData extends React.Component<Props, State> implements Field<FormData, string> {
+    private formValue: FormData;
+    constructor(props: Props) {
+        super(props);
+        this.formValue = new FormData();
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    render() {
+        const {properties, type} = this.props.schema ?? {};
+        const example = JSON.parse(this.props.example ?? '{}');
+        if (type !== 'object' || !properties || this.props.bodyType !== 'multipart/form-data') {
+            return null;
+        }
+
+        return <Column gap={10}>
+            <Text variant="header-1">{TextEnum.BODY_INPUT_LABEL}</Text>
+            {
+                Object.keys(properties).map(key => {
+                    const property = properties[key];
+                    if (typeof property === 'object') {
+                        if (
+                            property.type === 'string'
+                            && property.format === 'binary'
+                        ) {
+                            return <Column gap={2}>
+                                <Text variant="body-2">{key}:</Text>
+                                <input type="file" onChange={event => this.createOnChange(key)(event.target.files?.[0])} />
+                            </Column>
+                        }
+                        const {items} = property || {};
+
+                        if (property.type === 'array' && typeof items === 'object' && !Array.isArray(items)) {
+                            const {format, type} = items;
+                            if (type === 'string' && format === 'binary') {
+                                return <Column gap={2}>
+                                    <Text variant="body-2">{key}:</Text>
+                                    <FileInputArray onChange={this.createOnChange(key)} />
+                                </Column>
+                            }
+                            // TODO: string array
+                        }
+
+                        const exampleValue = property.type === 'string'
+                            ? example[key]
+                            : JSON.stringify(example[key], null, 2);
+
+                        const rows = property.type === 'string'
+                            ? 1
+                            : 3;
+
+                        return <Column gap={2}>
+                            <Text variant="body-2">{key}:</Text>
+                            <TextArea
+                                onUpdate={this.createOnChange(key)}
+                                defaultValue={exampleValue}
+                                rows={rows}
+                            />
+                        </Column>;
+                    }
+                    return null;
+                })
+            }
+        </Column>
+    }
+
+    createOnChange(fieldName: string) {
+        return (newValue: string | undefined | File | File[]) => {
+            if (!newValue) {
+                this.formValue.delete(fieldName);
+                return;
+            }
+
+            if (typeof newValue === 'string') {
+                this.formValue.set(fieldName, newValue);
+                return;
+            }
+
+            if (Array.isArray(newValue)) {
+                this.formValue.delete(fieldName);
+                for (const item of newValue) {
+                    this.formValue.append(fieldName, item);
+                }
+                return;
+            }
+
+            this.formValue.set(fieldName, newValue);
+        }
+    }
+
+    validate() {
+        const error = this.isRequired && !this.value ? 'Required' : undefined;
+
+        this.setState({error});
+
+        return error;
+    }
+
+    value() {
+        return this.formValue;
+    }
+
+    private get isRequired() {
+        return this.props.example !== undefined && this.props.example !== null;
+    }
+}
diff --git a/src/runtime/components/Body.tsx b/src/runtime/components/BodyJson.tsx
similarity index 87%
rename from src/runtime/components/Body.tsx
rename to src/runtime/components/BodyJson.tsx
index 3b0b152..b87b757 100644
--- a/src/runtime/components/Body.tsx
+++ b/src/runtime/components/BodyJson.tsx
@@ -8,6 +8,7 @@ import {Column} from './Column';
 
 type Props = {
     value: Nullable<string>;
+    bodyType?: string;
 };
 
 type State = {
@@ -15,7 +16,7 @@ type State = {
     value: Nullable<string>;
 };
 
-export class Body extends React.Component<Props, State> implements Field<string, string> {
+export class BodyJson extends React.Component<Props, State> implements Field<string, string> {
     constructor(props: Props) {
         super(props);
 
@@ -28,7 +29,7 @@ export class Body extends React.Component<Props, State> implements Field<string,
     render() {
         const {error, value} = this.state;
 
-        if (value === undefined || value === null) {
+        if (value === undefined || value === null || this.props.bodyType !== 'application/json') {
             return null;
         }
 
diff --git a/src/runtime/components/FileInputArray.tsx b/src/runtime/components/FileInputArray.tsx
new file mode 100644
index 0000000..d7ed6dc
--- /dev/null
+++ b/src/runtime/components/FileInputArray.tsx
@@ -0,0 +1,45 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {Button} from '@gravity-ui/uikit';
+import {Column} from './Column';
+
+export const FileInputArray = ({onChange}: {onChange: (value: File[]) => void}) => {
+    const ref = useRef(1);
+    const [array, setArray] = useState<Array< {id: number; value: undefined | File}>>([{id: 0, value: undefined}]);
+
+    const createOnChange = useCallback((idWithChange: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+        setArray(prevArray => {
+            const newArray = prevArray
+                .map(({id, value}) =>
+                    id === idWithChange
+                        ? {id, value: event.target.files?.[0]}
+                        : {id, value}
+                );
+            onChange(newArray.map(({value}) => value).filter(isFile));
+            return newArray;
+        });
+    }, [setArray]);
+
+    const onAdd = useCallback(() => {
+        setArray(prevState => [...prevState, {id: ref.current++, value: undefined}]);
+    }, [setArray, ref]);
+
+    const createOnRemove = useCallback((idForRemove: number) => () => {
+        setArray(prevArray => {
+            return prevArray.filter(({id}) => id !== idForRemove);
+        });
+    }, [setArray]);
+
+    return <Column gap={3}>
+        {array.map(({id}, index) => {
+            return <div key={id}>
+                <input type="file" onChange={createOnChange(index)} />
+                {Boolean(index) && <Button view="normal" size="s" type="button" onClick={createOnRemove(id)}>-</Button>}
+            </div>
+        })}
+        <div>
+            <Button view="normal" size="s" type="button" onClick={onAdd}>Add file</Button>
+        </div>
+    </Column>
+};
+
+const isFile = (item: undefined | File): item is File => item !== undefined;
diff --git a/src/runtime/components/index.ts b/src/runtime/components/index.ts
index 15bca0b..d3b8ae9 100644
--- a/src/runtime/components/index.ts
+++ b/src/runtime/components/index.ts
@@ -1,6 +1,7 @@
 export {Column} from './Column';
 export {Params} from './Params';
-export {Body} from './Body';
+export {BodyJson} from './BodyJson';
+export {BodyFormData} from './BodyFormData';
 export {Response} from './Response';
 export {Error} from './Error';
 export {Loader} from './Loader';
diff --git a/src/runtime/sandbox.tsx b/src/runtime/sandbox.tsx
index 40f8a3a..a3104bf 100644
--- a/src/runtime/sandbox.tsx
+++ b/src/runtime/sandbox.tsx
@@ -1,7 +1,7 @@
 import type {FormState, SandboxProps} from './types';
 import React, {useRef, useState} from 'react';
 import {Button} from '@gravity-ui/uikit';
-import {Body, Column, Params, Result} from './components';
+import {BodyJson, BodyFormData, Column, Params, Result} from './components';
 
 import {Text, yfmSandbox} from '../plugin/constants';
 import {collectErrors, collectValues, prepareHeaders, prepareRequest} from './utils';
@@ -26,7 +26,7 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
         }
 
         const values = collectValues(refs) as FormState;
-        const {url, headers, body} = prepareRequest((props.host ?? '') + '/' + props.path, values);
+        const {url, headers, body} = prepareRequest((props.host ?? '') + '/' + props.path, values, props.bodyType);
 
         setRequest(
             fetch(url, {
@@ -55,7 +55,8 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
                     title={Text.HEADER_PARAMS_SECTION_TITLE}
                     params={preparedHeaders}
                 />
-                <Body ref={refs.body} value={props.body} />
+                <BodyJson ref={refs.body} value={props.body} bodyType={props.bodyType} />
+                <BodyFormData ref={refs.body} schema={props.schema} example={props.body} bodyType={props.bodyType} />
                 {request && <Result request={request} />}
                 <div>
                     <Button size="l" view="action" type="submit">
diff --git a/src/runtime/types.ts b/src/runtime/types.ts
index a43283d..276016d 100644
--- a/src/runtime/types.ts
+++ b/src/runtime/types.ts
@@ -40,6 +40,8 @@ export type SandboxProps = {
     searchParams?: Parameters;
     headers?: Parameters;
     body?: string;
+    bodyType?: string;
+    schema?: OpenJSONSchema;
     security?: Security[];
 };
 
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index 1bec65a..e412ba0 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -5,7 +5,7 @@ export const merge = <T, R>(items: T[], iterator: (item: T) => Record<string, R>
     return items.reduce((acc, item) => Object.assign(acc, iterator(item)), {} as Record<string, R>);
 };
 
-export const prepareRequest = (urlTemplate: string, {search, headers, path, body}: FormState) => {
+export const prepareRequest = (urlTemplate: string, {search, headers, path, body}: FormState, bodyType?: string) => {
     const requestUrl = Object.entries(path).reduce((acc, [key, value]) => {
         return acc.replace(`{${key}}`, encodeURIComponent(value));
     }, urlTemplate);
@@ -20,7 +20,10 @@ export const prepareRequest = (urlTemplate: string, {search, headers, path, body
 
     return {
         url,
-        headers: body ? {...headers, 'Content-Type': 'application/json'} : headers,
+        headers: bodyType === 'application/json' ? {
+            ...headers,
+            'Content-Type': 'application/json',
+        } : headers,
         // TODO: match request types (www-form-url-encoded should be handled too)
         body: body ? {body} : {},
     };

From 752b4a75435bc172a81bce1a75f679195229ee2d Mon Sep 17 00:00:00 2001
From: Evgenii Fedoseev <zorox112@yandex-team.ru>
Date: Tue, 20 Feb 2024 02:55:51 +0300
Subject: [PATCH 2/4] fix: add refs

---
 src/runtime/sandbox.tsx |  7 ++++---
 src/runtime/types.ts    |  3 ++-
 src/runtime/utils.ts    | 24 ++++++++++++++++++++++--
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/runtime/sandbox.tsx b/src/runtime/sandbox.tsx
index a3104bf..63d0722 100644
--- a/src/runtime/sandbox.tsx
+++ b/src/runtime/sandbox.tsx
@@ -14,7 +14,8 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
         path: useRef(null),
         search: useRef(null),
         headers: useRef(null),
-        body: useRef(null),
+        bodyJson: useRef(null),
+        bodyFormData: useRef(null),
     };
     const [request, setRequest] = useState<Promise<Response> | null>(null);
 
@@ -55,8 +56,8 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
                     title={Text.HEADER_PARAMS_SECTION_TITLE}
                     params={preparedHeaders}
                 />
-                <BodyJson ref={refs.body} value={props.body} bodyType={props.bodyType} />
-                <BodyFormData ref={refs.body} schema={props.schema} example={props.body} bodyType={props.bodyType} />
+                <BodyJson ref={refs.bodyJson} value={props.body} bodyType={props.bodyType} />
+                <BodyFormData ref={refs.bodyFormData} schema={props.schema} example={props.body} bodyType={props.bodyType} />
                 {request && <Result request={request} />}
                 <div>
                     <Button size="l" view="action" type="submit">
diff --git a/src/runtime/types.ts b/src/runtime/types.ts
index 276016d..63aa017 100644
--- a/src/runtime/types.ts
+++ b/src/runtime/types.ts
@@ -9,7 +9,8 @@ export type FormState = {
     path: Record<string, string>;
     search: Record<string, string>;
     headers: Record<string, string>;
-    body: string | undefined;
+    bodyJson: string | undefined;
+    bodyFormData: FormData | undefined;
 };
 
 export type ResponseState = {
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index e412ba0..bc705e6 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -5,7 +5,7 @@ export const merge = <T, R>(items: T[], iterator: (item: T) => Record<string, R>
     return items.reduce((acc, item) => Object.assign(acc, iterator(item)), {} as Record<string, R>);
 };
 
-export const prepareRequest = (urlTemplate: string, {search, headers, path, body}: FormState, bodyType?: string) => {
+export const prepareRequest = (urlTemplate: string, {search, headers, path, bodyJson, bodyFormData}: FormState, bodyType?: string) => {
     const requestUrl = Object.entries(path).reduce((acc, [key, value]) => {
         return acc.replace(`{${key}}`, encodeURIComponent(value));
     }, urlTemplate);
@@ -25,10 +25,30 @@ export const prepareRequest = (urlTemplate: string, {search, headers, path, body
             'Content-Type': 'application/json',
         } : headers,
         // TODO: match request types (www-form-url-encoded should be handled too)
-        body: body ? {body} : {},
+        body: prepareBody({bodyFormData, bodyJson, bodyType}),
     };
 };
 
+export const prepareBody = ({
+    bodyType,
+    bodyJson,
+    bodyFormData,
+}: {
+    bodyType?: string;
+    bodyJson: string | undefined;
+    bodyFormData: FormData | undefined;
+}) => {
+    switch (bodyType) {
+        case 'application/json':
+            return {body: bodyJson};
+        case 'multipart/form-data':
+            return {body: bodyFormData};
+
+        default:
+            return {};
+    }
+};
+
 export const prepareHeaders = ({
     headers,
     security,

From 9d270e031974358f238617111df9e0ce6ed0ec9b Mon Sep 17 00:00:00 2001
From: v8tenko <v8tenko@gmail.com>
Date: Wed, 28 Feb 2024 18:09:40 +0300
Subject: [PATCH 3/4] fix: refactor

---
 src/includer/ui/endpoint.ts               |   1 +
 src/runtime/components/BodyFormData.tsx   | 131 +++++++++++++---------
 src/runtime/components/FileInputArray.tsx |  99 ++++++++++------
 src/runtime/sandbox.tsx                   |  15 ++-
 src/runtime/types.ts                      |   4 +-
 src/runtime/utils.ts                      |  17 ++-
 6 files changed, 171 insertions(+), 96 deletions(-)

diff --git a/src/includer/ui/endpoint.ts b/src/includer/ui/endpoint.ts
index db1bf75..25409d5 100644
--- a/src/includer/ui/endpoint.ts
+++ b/src/includer/ui/endpoint.ts
@@ -110,6 +110,7 @@ function sandbox({
     const searchParams = params?.filter((param: Parameter) => param.in === 'query');
     const headers = params?.filter((param: Parameter) => param.in === 'header');
     let bodyStr: null | string = null;
+
     if (requestBody?.type === 'application/json' || requestBody?.type === 'multipart/form-data') {
         bodyStr = JSON.stringify(prepareSampleObject(requestBody?.schema ?? {}), null, 2);
     }
diff --git a/src/runtime/components/BodyFormData.tsx b/src/runtime/components/BodyFormData.tsx
index 8723bc1..a4ecd04 100644
--- a/src/runtime/components/BodyFormData.tsx
+++ b/src/runtime/components/BodyFormData.tsx
@@ -3,6 +3,7 @@ import {Text, TextArea} from '@gravity-ui/uikit';
 
 import {Text as TextEnum} from '../../plugin/constants';
 import {OpenJSONSchema} from '../../includer/models';
+import { JSONSchema6Definition } from 'json-schema';
 
 import type {Field, Nullable} from '../types';
 import {Column} from './Column';
@@ -29,73 +30,100 @@ export class BodyFormData extends React.Component<Props, State> implements Field
         };
     }
 
+    renderInput(key: string) {
+        return (
+            <Column gap={2}>
+                <Text variant="body-2">{key}:</Text>
+                <input
+                    type="file"
+                    onChange={(event) => {
+                        this.createOnChange(key)(event.target.files?.[0]);
+                    }}
+                />
+            </Column>
+        );
+    }
+
+    renderFileInput(key: string) {
+        return (
+            <Column gap={2}>
+                <Text variant="body-2">{key}:</Text>
+                <FileInputArray onChange={this.createOnChange(key)} />
+            </Column>
+        );
+    }
+
+    renderTextArea(key: string, property: OpenJSONSchema) {
+        const example = JSON.parse(this.props.example ?? '{}');
+
+        const exampleValue =
+            property.type === 'string' ? example[key] : JSON.stringify(example[key], null, 2);
+
+        const rows = property.type === 'string' ? 1 : 3;
+
+        return (
+            <Column gap={2}>
+                <Text variant="body-2">{key}:</Text>
+                <TextArea
+                    onUpdate={this.createOnChange(key)}
+                    defaultValue={exampleValue}
+                    rows={rows}
+                />
+            </Column>
+        );
+    }
+
+    renderProperty(key: string, property: JSONSchema6Definition) {
+        if (typeof property !== 'object') {
+            return null;
+        }
+
+        if (property.type === 'string' && property.format === 'binary') {
+            return this.renderInput(key);
+        }
+
+        const {items} = property;
+
+        if (property.type === 'array' && typeof items === 'object' && !Array.isArray(items)) {
+            const {format, type} = items;
+
+            if (type === 'string' && format === 'binary') {
+                return this.renderFileInput(key);
+            }
+            // TODO: string array
+        }
+
+        return this.renderTextArea(key, property);
+    }
+
     render() {
         const {properties, type} = this.props.schema ?? {};
-        const example = JSON.parse(this.props.example ?? '{}');
+
         if (type !== 'object' || !properties || this.props.bodyType !== 'multipart/form-data') {
             return null;
         }
 
-        return <Column gap={10}>
-            <Text variant="header-1">{TextEnum.BODY_INPUT_LABEL}</Text>
-            {
-                Object.keys(properties).map(key => {
-                    const property = properties[key];
-                    if (typeof property === 'object') {
-                        if (
-                            property.type === 'string'
-                            && property.format === 'binary'
-                        ) {
-                            return <Column gap={2}>
-                                <Text variant="body-2">{key}:</Text>
-                                <input type="file" onChange={event => this.createOnChange(key)(event.target.files?.[0])} />
-                            </Column>
-                        }
-                        const {items} = property || {};
-
-                        if (property.type === 'array' && typeof items === 'object' && !Array.isArray(items)) {
-                            const {format, type} = items;
-                            if (type === 'string' && format === 'binary') {
-                                return <Column gap={2}>
-                                    <Text variant="body-2">{key}:</Text>
-                                    <FileInputArray onChange={this.createOnChange(key)} />
-                                </Column>
-                            }
-                            // TODO: string array
-                        }
-
-                        const exampleValue = property.type === 'string'
-                            ? example[key]
-                            : JSON.stringify(example[key], null, 2);
-
-                        const rows = property.type === 'string'
-                            ? 1
-                            : 3;
-
-                        return <Column gap={2}>
-                            <Text variant="body-2">{key}:</Text>
-                            <TextArea
-                                onUpdate={this.createOnChange(key)}
-                                defaultValue={exampleValue}
-                                rows={rows}
-                            />
-                        </Column>;
-                    }
-                    return null;
-                })
-            }
-        </Column>
+        const entries = Object.entries(properties);
+
+        return (
+            <Column gap={10}>
+                <Text variant="header-1">{TextEnum.BODY_INPUT_LABEL}</Text>
+                {entries.map(([key, property]) => this.renderProperty(key, property))}
+            </Column>
+        );
     }
 
     createOnChange(fieldName: string) {
         return (newValue: string | undefined | File | File[]) => {
             if (!newValue) {
                 this.formValue.delete(fieldName);
+
                 return;
             }
 
             if (typeof newValue === 'string') {
                 this.formValue.set(fieldName, newValue);
+
                 return;
             }
 
@@ -104,11 +132,12 @@ export class BodyFormData extends React.Component<Props, State> implements Field
                 for (const item of newValue) {
                     this.formValue.append(fieldName, item);
                 }
+
                 return;
             }
 
             this.formValue.set(fieldName, newValue);
-        }
+        };
     }
 
     validate() {
diff --git a/src/runtime/components/FileInputArray.tsx b/src/runtime/components/FileInputArray.tsx
index d7ed6dc..bd27c18 100644
--- a/src/runtime/components/FileInputArray.tsx
+++ b/src/runtime/components/FileInputArray.tsx
@@ -2,44 +2,73 @@ import React, {useCallback, useRef, useState} from 'react';
 import {Button} from '@gravity-ui/uikit';
 import {Column} from './Column';
 
-export const FileInputArray = ({onChange}: {onChange: (value: File[]) => void}) => {
+const isFile = (item: undefined | File): item is File => item !== undefined;
+
+type Props = {
+    onChange(value: File[]): void;
+}
+
+type IndexedFiles = Record<number, File | undefined>;
+
+export const FileInputArray: React.FC<Props> = ({onChange}) => {
     const ref = useRef(1);
-    const [array, setArray] = useState<Array< {id: number; value: undefined | File}>>([{id: 0, value: undefined}]);
-
-    const createOnChange = useCallback((idWithChange: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
-        setArray(prevArray => {
-            const newArray = prevArray
-                .map(({id, value}) =>
-                    id === idWithChange
-                        ? {id, value: event.target.files?.[0]}
-                        : {id, value}
-                );
-            onChange(newArray.map(({value}) => value).filter(isFile));
-            return newArray;
-        });
-    }, [setArray]);
+    const [inputs, setInputs] = useState<IndexedFiles>({});
+
+    const createOnChange = useCallback(
+        (idWithChange: number): React.ChangeEventHandler<HTMLInputElement> =>
+            (event) => {
+                setInputs((oldState) => {
+                    const file = event.target.files?.[0];
+                    const nextState = {...oldState, [idWithChange]: file }
+                    
+                    onChange(Object.values(nextState).filter(isFile));
+
+                    return nextState;
+                });
+            },
+        [setInputs],
+    );
 
     const onAdd = useCallback(() => {
-        setArray(prevState => [...prevState, {id: ref.current++, value: undefined}]);
-    }, [setArray, ref]);
-
-    const createOnRemove = useCallback((idForRemove: number) => () => {
-        setArray(prevArray => {
-            return prevArray.filter(({id}) => id !== idForRemove);
-        });
-    }, [setArray]);
-
-    return <Column gap={3}>
-        {array.map(({id}, index) => {
-            return <div key={id}>
-                <input type="file" onChange={createOnChange(index)} />
-                {Boolean(index) && <Button view="normal" size="s" type="button" onClick={createOnRemove(id)}>-</Button>}
+        setInputs((prevState) => ({...prevState, [ref.current++]: undefined }));
+    }, [setInputs, ref]);
+
+    const createOnRemove = useCallback(
+        (idForRemove: number) => () => {
+            setInputs((OldState) => {
+                delete OldState[idForRemove];
+
+                return OldState;
+            });
+        },
+        [setInputs],
+    );
+
+    return (
+        <Column gap={3}>
+            {Object.keys(inputs).map((id, index) => {
+                return (
+                    <div key={id}>
+                        <input type="file" onChange={createOnChange(index)} />
+                        {Boolean(index) && (
+                            <Button
+                                view="normal"
+                                size="s"
+                                type="button"
+                                onClick={createOnRemove(Number(id))}
+                            >
+                                -
+                            </Button>
+                        )}
+                    </div>
+                );
+            })}
+            <div>
+                <Button view="normal" size="s" type="button" onClick={onAdd}>
+                    Add file
+                </Button>
             </div>
-        })}
-        <div>
-            <Button view="normal" size="s" type="button" onClick={onAdd}>Add file</Button>
-        </div>
-    </Column>
+        </Column>
+    );
 };
 
-const isFile = (item: undefined | File): item is File => item !== undefined;
diff --git a/src/runtime/sandbox.tsx b/src/runtime/sandbox.tsx
index 63d0722..62f77f7 100644
--- a/src/runtime/sandbox.tsx
+++ b/src/runtime/sandbox.tsx
@@ -1,7 +1,7 @@
 import type {FormState, SandboxProps} from './types';
 import React, {useRef, useState} from 'react';
 import {Button} from '@gravity-ui/uikit';
-import {BodyJson, BodyFormData, Column, Params, Result} from './components';
+import {BodyFormData, BodyJson, Column, Params, Result} from './components';
 
 import {Text, yfmSandbox} from '../plugin/constants';
 import {collectErrors, collectValues, prepareHeaders, prepareRequest} from './utils';
@@ -27,7 +27,11 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
         }
 
         const values = collectValues(refs) as FormState;
-        const {url, headers, body} = prepareRequest((props.host ?? '') + '/' + props.path, values, props.bodyType);
+        const {url, headers, body} = prepareRequest(
+            (props.host ?? '') + '/' + props.path,
+            values,
+            props.bodyType,
+        );
 
         setRequest(
             fetch(url, {
@@ -57,7 +61,12 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
                     params={preparedHeaders}
                 />
                 <BodyJson ref={refs.bodyJson} value={props.body} bodyType={props.bodyType} />
-                <BodyFormData ref={refs.bodyFormData} schema={props.schema} example={props.body} bodyType={props.bodyType} />
+                <BodyFormData
+                    ref={refs.bodyFormData}
+                    schema={props.schema}
+                    example={props.body}
+                    bodyType={props.bodyType}
+                />
                 {request && <Result request={request} />}
                 <div>
                     <Button size="l" view="action" type="submit">
diff --git a/src/runtime/types.ts b/src/runtime/types.ts
index 63aa017..b7c63ea 100644
--- a/src/runtime/types.ts
+++ b/src/runtime/types.ts
@@ -9,8 +9,8 @@ export type FormState = {
     path: Record<string, string>;
     search: Record<string, string>;
     headers: Record<string, string>;
-    bodyJson: string | undefined;
-    bodyFormData: FormData | undefined;
+    bodyJson?: string;
+    bodyFormData?: FormData;
 };
 
 export type ResponseState = {
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index bc705e6..79eeee1 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -5,7 +5,11 @@ export const merge = <T, R>(items: T[], iterator: (item: T) => Record<string, R>
     return items.reduce((acc, item) => Object.assign(acc, iterator(item)), {} as Record<string, R>);
 };
 
-export const prepareRequest = (urlTemplate: string, {search, headers, path, bodyJson, bodyFormData}: FormState, bodyType?: string) => {
+export const prepareRequest = (
+    urlTemplate: string,
+    {search, headers, path, bodyJson, bodyFormData}: FormState,
+    bodyType?: string,
+) => {
     const requestUrl = Object.entries(path).reduce((acc, [key, value]) => {
         return acc.replace(`{${key}}`, encodeURIComponent(value));
     }, urlTemplate);
@@ -20,10 +24,13 @@ export const prepareRequest = (urlTemplate: string, {search, headers, path, body
 
     return {
         url,
-        headers: bodyType === 'application/json' ? {
-            ...headers,
-            'Content-Type': 'application/json',
-        } : headers,
+        headers:
+            bodyType === 'application/json'
+                ? {
+                      ...headers,
+                      'Content-Type': 'application/json',
+                  }
+                : headers,
         // TODO: match request types (www-form-url-encoded should be handled too)
         body: prepareBody({bodyFormData, bodyJson, bodyType}),
     };

From 6404f315c199a4958e499100099e9f13ebf811ba Mon Sep 17 00:00:00 2001
From: Evgenii Fedoseev <zorox112@yandex-team.ru>
Date: Wed, 28 Feb 2024 20:18:12 +0300
Subject: [PATCH 4/4] fix: swap send button with response section and refactor

---
 src/runtime/components/BodyFormData.tsx   | 2 +-
 src/runtime/components/FileInputArray.tsx | 8 ++++----
 src/runtime/sandbox.tsx                   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/BodyFormData.tsx b/src/runtime/components/BodyFormData.tsx
index a4ecd04..505f386 100644
--- a/src/runtime/components/BodyFormData.tsx
+++ b/src/runtime/components/BodyFormData.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {Text, TextArea} from '@gravity-ui/uikit';
+import {JSONSchema6Definition} from 'json-schema';
 
 import {Text as TextEnum} from '../../plugin/constants';
 import {OpenJSONSchema} from '../../includer/models';
-import { JSONSchema6Definition } from 'json-schema';
 
 import type {Field, Nullable} from '../types';
 import {Column} from './Column';
diff --git a/src/runtime/components/FileInputArray.tsx b/src/runtime/components/FileInputArray.tsx
index bd27c18..9dfd027 100644
--- a/src/runtime/components/FileInputArray.tsx
+++ b/src/runtime/components/FileInputArray.tsx
@@ -20,7 +20,7 @@ export const FileInputArray: React.FC<Props> = ({onChange}) => {
                 setInputs((oldState) => {
                     const file = event.target.files?.[0];
                     const nextState = {...oldState, [idWithChange]: file }
-                    
+
                     onChange(Object.values(nextState).filter(isFile));
 
                     return nextState;
@@ -35,10 +35,10 @@ export const FileInputArray: React.FC<Props> = ({onChange}) => {
 
     const createOnRemove = useCallback(
         (idForRemove: number) => () => {
-            setInputs((OldState) => {
-                delete OldState[idForRemove];
+            setInputs((oldState) => {
+                delete oldState[idForRemove];
 
-                return OldState;
+                return oldState;
             });
         },
         [setInputs],
diff --git a/src/runtime/sandbox.tsx b/src/runtime/sandbox.tsx
index 62f77f7..677bfae 100644
--- a/src/runtime/sandbox.tsx
+++ b/src/runtime/sandbox.tsx
@@ -67,12 +67,12 @@ export const Sandbox: React.FC<SandboxProps> = (props) => {
                     example={props.body}
                     bodyType={props.bodyType}
                 />
-                {request && <Result request={request} />}
                 <div>
                     <Button size="l" view="action" type="submit">
                         {Text.BUTTON_SUBMIT}
                     </Button>
                 </div>
+                {request && <Result request={request} />}
             </Column>
         </form>
     );