Got multipart working (text-only)

src-web/components/FormMultipartEditor.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useMemo } from 'react';
+import type { HttpRequest } from '../lib/models';
+import type { PairEditorProps } from './core/PairEditor';
+import { PairEditor } from './core/PairEditor';
+
+type Props = {
+  forceUpdateKey: string;
+  body: HttpRequest['body'];
+  onChange: (headers: HttpRequest['body']) => void;
+};
+
+export function FormMultipartEditor({ body, forceUpdateKey, onChange }: Props) {
+  const pairs = useMemo(
+    () =>
+      (Array.isArray(body.form) ? body.form : []).map((p) => ({
+        enabled: p.enabled,
+        name: p.name,
+        value: p.value,
+      })),
+    [body.form],
+  );
+
+  const handleChange = useCallback<PairEditorProps['onChange']>(
+    (pairs) => onChange({ form: pairs }),
+    [onChange],
+  );
+
+  return (
+    <PairEditor
+      valueAutocompleteVariables
+      nameAutocompleteVariables
+      pairs={pairs}
+      onChange={handleChange}
+      forceUpdateKey={forceUpdateKey}
+    />
+  );
+}

src-web/components/RequestPane.tsx

@@ -29,6 +29,7 @@ import { Editor } from './core/Editor';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
+import { FormMultipartEditor } from './FormMultipartEditor';
 import { FormUrlencodedEditor } from './FormUrlencodedEditor';
 import { GraphQLEditor } from './GraphQLEditor';
 import { HeadersEditor } from './HeadersEditor';
@@ -64,7 +65,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 items: [
                   { type: 'separator', label: 'Form Data' },
                   { label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
-                  // { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
+                  { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
                   { type: 'separator', label: 'Text Content' },
                   { label: 'JSON', value: BODY_TYPE_JSON },
                   { label: 'XML', value: BODY_TYPE_XML },
@@ -282,6 +283,12 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   body={activeRequest.body}
                   onChange={handleBodyChange}
                 />
+              ) : activeRequest.bodyType === BODY_TYPE_FORM_MULTIPART ? (
+                <FormMultipartEditor
+                  forceUpdateKey={forceUpdateKey}
+                  body={activeRequest.body}
+                  onChange={handleBodyChange}
+                />
               ) : (
                 <EmptyStateText>No Body</EmptyStateText>
               )}