Form urlencoded bodies!

src-web/components/FormUrlencodedEditor.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 FormUrlencodedEditor({ 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}
+    />
+  );
+}