Improved header editor

src-web/components/HeaderEditor.tsx

@@ -15,10 +15,6 @@ type PairWithId = { header: Partial<HttpHeader>; id: string };
 
 export function HeaderEditor({ request, className }: Props) {
   const updateRequest = useUpdateRequest(request);
-  const saveHeaders = (pairs: PairWithId[]) => {
-    const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
-    updateRequest.mutate({ headers });
-  };
 
   const newPair = () => {
     return { header: { name: '', value: '' }, id: Math.random().toString() };
@@ -31,7 +27,8 @@ export function HeaderEditor({ request, className }: Props) {
   const setPairsAndSave = (fn: (pairs: PairWithId[]) => PairWithId[]) => {
     setPairs((oldPairs) => {
       const newPairs = fn(oldPairs);
-      saveHeaders(newPairs);
+      const headers = newPairs.map((p) => ({ name: '', value: '', ...p.header }));
+      updateRequest.mutate({ headers });
       return newPairs;
     });
   };
@@ -47,7 +44,7 @@ export function HeaderEditor({ request, className }: Props) {
   useEffect(() => {
     const lastPair = pairs[pairs.length - 1];
     if (lastPair === undefined) {
-      setPairs([newPair()]);
+      setPairsAndSave((pairs) => [...pairs, newPair()]);
       return;
     }
 
@@ -63,14 +60,18 @@ export function HeaderEditor({ request, className }: Props) {
   return (
     <div className={classnames(className, 'pb-6 grid')}>
       <VStack space={2}>
-        {pairs.map((p, i) => (
-          <FormRow
-            key={p.id}
-            pair={p}
-            onChange={handleChangeHeader}
-            onDelete={i < pairs.length - 1 ? handleDelete : undefined}
-          />
-        ))}
+        {pairs.map((p, i) => {
+          const isLast = i === pairs.length - 1;
+          return (
+            <FormRow
+              key={p.id}
+              pair={p}
+              isLast={isLast}
+              onChange={handleChangeHeader}
+              onDelete={isLast ? undefined : handleDelete}
+            />
+          );
+        })}
       </VStack>
     </div>
   );
@@ -80,30 +81,38 @@ function FormRow({
   pair,
   onChange,
   onDelete,
+  onFocus,
+  isLast,
 }: {
   pair: PairWithId;
   onChange: (pair: PairWithId) => void;
   onDelete?: (pair: PairWithId) => void;
+  onFocus?: (pair: PairWithId) => void;
+  isLast?: boolean;
 }) {
   return (
     <div className="group grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
       <Input
         hideLabel
-        useEditor={{ useTemplating: true }}
-        name="name"
-        label="Name"
-        placeholder="name"
+        containerClassName={classnames(isLast && 'border-dashed')}
         defaultValue={pair.header.name}
+        label="Name"
+        name="name"
         onChange={(name) => onChange({ id: pair.id, header: { name } })}
+        onFocus={() => onFocus?.(pair)}
+        placeholder="name"
+        useEditor={{ useTemplating: true }}
       />
       <Input
         hideLabel
-        name="value"
-        label="Value"
-        useEditor={{ useTemplating: true }}
-        placeholder="value"
+        containerClassName={classnames(isLast && 'border-dashed')}
         defaultValue={pair.header.value}
+        label="Value"
+        name="value"
         onChange={(value) => onChange({ id: pair.id, header: { value } })}
+        onFocus={() => onFocus?.(pair)}
+        placeholder="value"
+        useEditor={{ useTemplating: true }}
       />
       {onDelete && (
         <IconButton

src-web/components/core/Editor/Editor.tsx

@@ -5,8 +5,7 @@ import classnames from 'classnames';
 import { EditorView } from 'codemirror';
 import { formatSdl } from 'format-graphql';
 import { useEffect, useRef } from 'react';
-import { useDebounce, useUnmount } from 'react-use';
-import { debounce } from '../../../lib/debounce';
+import { useUnmount } from 'react-use';
 import { IconButton } from '../IconButton';
 import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
@@ -24,6 +23,7 @@ export interface _EditorProps {
   tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
+  onFocus?: () => void;
   singleLine?: boolean;
 }
 
@@ -36,6 +36,7 @@ export function _Editor({
   useTemplating,
   defaultValue,
   onChange,
+  onFocus,
   className,
   singleLine,
 }: _EditorProps) {
@@ -72,6 +73,7 @@ export function _Editor({
             placeholder,
             singleLine,
             onChange,
+            onFocus,
             contentType,
             useTemplating,
           }),
@@ -100,7 +102,7 @@ export function _Editor({
       {contentType?.includes('graphql') && (
         <IconButton
           icon="eye"
-          className="absolute right-3 bottom-3 z-10"
+          className="absolute right-0 bottom-0 z-10"
           onClick={() => {
             const doc = cm.current?.view.state.doc ?? '';
             const insert = formatSdl(doc.toString());
@@ -118,11 +120,18 @@ function getExtensions({
   singleLine,
   placeholder,
   onChange,
+  onFocus,
   contentType,
   useTemplating,
 }: Pick<
   _EditorProps,
-  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
+  | 'singleLine'
+  | 'onChange'
+  | 'contentType'
+  | 'useTemplating'
+  | 'placeholder'
+  | 'readOnly'
+  | 'onFocus'
 > & { container: HTMLDivElement | null }) {
   const ext = getLanguageExtension({ contentType, useTemplating });
 
@@ -160,6 +169,13 @@ function getExtensions({
         ]
       : []),
 
+    // Handle onFocus
+    EditorView.domEventHandlers({
+      focus: () => {
+        onFocus?.();
+      },
+    }),
+
     // Handle onChange
     EditorView.updateListener.of((update) => {
       if (typeof onChange === 'function' && update.docChanged) {

src-web/components/core/Input.tsx

@@ -1,16 +1,17 @@
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import type { EditorProps } from './Editor';
 import { Editor } from './Editor';
 import { HStack, VStack } from './Stacks';
 
-interface Props {
+type Props = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> & {
   name: string;
   label: string;
   hideLabel?: boolean;
   labelClassName?: string;
   containerClassName?: string;
   onChange?: (value: string) => void;
+  onFocus?: () => void;
   useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating'>;
   defaultValue?: string;
   leftSlot?: ReactNode;
@@ -19,7 +20,7 @@ interface Props {
   className?: string;
   placeholder?: string;
   autoFocus?: boolean;
-}
+};
 
 export function Input({
   label,