Re-order of pair editor

src-web/components/UrlBar.tsx

@@ -1,4 +1,6 @@
-import { memo, useCallback } from 'react';
+import classnames from 'classnames';
+import type { FormEvent } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -9,30 +11,31 @@ import { RequestMethodDropdown } from './RequestMethodDropdown';
 
 interface Props {
   request: HttpRequest;
+  className?: string;
 }
 
-export const UrlBar = memo(function UrlBar({ request }: Props) {
+export const UrlBar = memo(function UrlBar({ request, className }: Props) {
   const sendRequest = useSendRequest(request.id);
   const updateRequest = useUpdateRequest(request.id);
   const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
   const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
   const loading = useIsResponseLoading(request.id);
+  const useEditor = useMemo(() => ({ useTemplating: true, contentType: 'url' }), []);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      sendRequest();
+    },
+    [sendRequest],
+  );
+
   return (
-    <form
-      onSubmit={async (e) => {
-        e.preventDefault();
-        sendRequest();
-      }}
-      className="w-full flex items-center"
-    >
+    <form onSubmit={handleSubmit} className={classnames(className, 'w-full flex items-center')}>
       <Input
         key={request.id}
         hideLabel
-        useEditor={{
-          useTemplating: true,
-          contentType: 'url',
-          autocompleteOptions: [{ label: 'FOO', type: 'constant' }],
-        }}
+        useEditor={useEditor}
         className="px-0"
         name="url"
         label="Enter URL"