Header editor to pair editor

src-web/components/RequestPane.tsx

@@ -5,7 +5,7 @@ import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { Editor } from './core/Editor';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { GraphQLEditor } from './editors/GraphQLEditor';
-import { HeaderEditor } from './HeaderEditor';
+import { PairEditor } from './core/PairEditor';
 import { UrlBar } from './UrlBar';
 
 interface Props {
@@ -55,7 +55,11 @@ export function RequestPane({ fullHeight, className }: Props) {
         label="Request body"
       >
         <TabContent value="headers" className="pl-2">
-          <HeaderEditor key={activeRequest.id} request={activeRequest} />
+          <PairEditor
+            key={activeRequest.id}
+            pairs={activeRequest.headers}
+            onChange={(headers) => updateRequest.mutate({ headers })}
+          />
         </TabContent>
         <TabContent value="body">
           {activeRequest.bodyType === 'json' ? (

src-web/components/ResponsePane.tsx

@@ -71,6 +71,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
 
           <HStack alignItems="center" className="ml-auto h-8">
             <IconButton
+              title={viewMode === 'pretty' ? 'View Raw' : 'View Prettified'}
               icon={viewMode === 'pretty' ? 'eye' : 'code'}
               size="sm"
               className="ml-1"
@@ -97,7 +98,12 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
               ]}
             >
               <DropdownMenuTrigger>
-                <IconButton icon="clock" className="ml-auto" size="sm" />
+                <IconButton
+                  title="Show response history"
+                  icon="clock"
+                  className="ml-auto"
+                  size="sm"
+                />
               </DropdownMenuTrigger>
             </Dropdown>
           </HStack>

src-web/components/Sidebar.tsx

@@ -31,6 +31,7 @@ export function Sidebar({ className }: Props) {
     >
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
         <IconButton
+          title="Add Request"
           className="mx-1"
           icon="plusCircle"
           onClick={async () => {
@@ -49,8 +50,12 @@ export function Sidebar({ className }: Props) {
           alignItems="center"
           justifyContent="end"
         >
-          <IconButton icon="trash" onClick={() => deleteRequest.mutate()} />
+          <IconButton title="Delete request" icon="trash" onClick={() => deleteRequest.mutate()} />
-          <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
+          <IconButton
+            title={appearance === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
+            icon={appearance === 'dark' ? 'moon' : 'sun'}
+            onClick={toggleAppearance}
+          />
         </HStack>
       </VStack>
     </div>

src-web/components/UrlBar.tsx

@@ -54,13 +54,13 @@ export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChan
         }
         rightSlot={
           <IconButton
+            title="Send Request"
             type="submit"
             className="mr-0.5"
             size="sm"
             icon={loading ? 'update' : 'paperPlane'}
             spin={loading}
             disabled={loading}
-            title="Send Request"
           />
         }
       />

src-web/components/core/Button.tsx

@@ -22,6 +22,7 @@ export type ButtonProps = HTMLAttributes<HTMLElement> & {
   type?: 'button' | 'submit';
   forDropdown?: boolean;
   disabled?: boolean;
+  title?: string;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

src-web/components/core/Dialog.tsx

@@ -40,7 +40,7 @@ export function Dialog({
               )}
             >
               <D.Close asChild className="ml-auto absolute right-1 top-1">
-                <IconButton aria-label="Close" icon="x" size="sm" />
+                <IconButton title="Close dialog" aria-label="Close" icon="x" size="sm" />
               </D.Close>
               <VStack space={3}>
                 <HStack alignItems="center" className="pb-3">

src-web/components/core/IconButton.tsx

@@ -5,7 +5,8 @@ import { Button } from './Button';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
 
-type Props = IconProps & ButtonProps & { iconClassName?: string; iconSize?: IconProps['size'] };
+type Props = IconProps &
+  ButtonProps & { iconClassName?: string; iconSize?: IconProps['size']; title: string };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
   { icon, spin, className, iconClassName, size = 'md', iconSize, ...props }: Props,

src-web/components/core/PairEditor.tsx

@@ -1,57 +1,57 @@
 import classnames from 'classnames';
 import { useEffect, useState } from 'react';
-import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { IconButton } from './IconButton';
-import type { HttpHeader, HttpRequest } from '../lib/models';
+import { Input } from './Input';
-import { IconButton } from './core/IconButton';
+import { VStack } from './Stacks';
-import { Input } from './core/Input';
-import { VStack } from './core/Stacks';
 
 interface Props {
-  request: HttpRequest;
+  pairs: Pair[];
+  onChange: (pairs: Pair[]) => void;
   className?: string;
 }
 
-type PairWithId = { header: Partial<HttpHeader>; id: string };
+interface Pair {
+  name: string;
+  value: string;
+}
 
-export function HeaderEditor({ request, className }: Props) {
+interface PairContainer {
-  const updateRequest = useUpdateRequest(request);
+  pair: Pair;
+  id: string;
+}
 
-  const newPair = () => {
+export function PairEditor({ pairs: originalPairs, className, onChange }: Props) {
-    return { header: { name: '', value: '' }, id: Math.random().toString() };
+  const newPairContainer = (): PairContainer => {
+    return { pair: { name: '', value: '' }, id: Math.random().toString() };
   };
 
-  const [pairs, setPairs] = useState<PairWithId[]>(() => {
+  const [pairs, setPairs] = useState<PairContainer[]>(() => {
     // Remove empty headers on initial render
-    const nonEmpty = request.headers.filter((h) => !(h.name === '' && h.value === ''));
+    const nonEmpty = originalPairs.filter((h) => !(h.name === '' && h.value === ''));
-    const pairs = nonEmpty.map((h) => ({ header: h, id: Math.random().toString() }));
+    const pairs = nonEmpty.map((h) => ({ pair: h, id: Math.random().toString() }));
-    return [...pairs, newPair()];
+    return [...pairs, newPairContainer()];
   });
 
-  const setPairsAndSave = (fn: (pairs: PairWithId[]) => PairWithId[]) => {
+  const setPairsAndSave = (fn: (pairs: PairContainer[]) => PairContainer[]) => {
     setPairs((oldPairs) => {
-      const newPairs = fn(oldPairs);
+      const pairs = fn(oldPairs).map((p) => p.pair);
-      const headers = newPairs.map((p) => ({ name: '', value: '', ...p.header }));
+      onChange(pairs);
-      updateRequest.mutate({ headers });
+      return fn(oldPairs);
-      return newPairs;
     });
   };
 
-  const handleChangeHeader = (pair: PairWithId) => {
+  const handleChangeHeader = (pair: PairContainer) => {
-    setPairsAndSave((pairs) =>
+    setPairsAndSave((pairs) => pairs.map((p) => (pair.id !== p.id ? p : pair)));
-      pairs.map((p) =>
-        pair.id !== p.id ? p : { id: p.id, header: { ...p.header, ...pair.header } },
-      ),
-    );
   };
 
   // Ensure there's always at least one pair
   useEffect(() => {
     if (pairs.length === 0) {
-      setPairs((pairs) => [...pairs, newPair()]);
+      setPairs((pairs) => [...pairs, newPairContainer()]);
     }
   }, [pairs]);
 
-  const handleDelete = (pair: PairWithId) => {
+  const handleDelete = (pair: PairContainer) => {
     setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));
   };
 
@@ -63,12 +63,12 @@ export function HeaderEditor({ request, className }: Props) {
           return (
             <FormRow
               key={p.id}
-              pair={p}
+              pairContainer={p}
               isLast={isLast}
               onChange={handleChangeHeader}
               onFocus={() => {
                 if (isLast) {
-                  setPairs((pairs) => [...pairs, newPair()]);
+                  setPairs((pairs) => [...pairs, newPairContainer()]);
                 }
               }}
               onDelete={isLast ? undefined : handleDelete}
@@ -81,27 +81,28 @@ export function HeaderEditor({ request, className }: Props) {
 }
 
 function FormRow({
-  pair,
+  pairContainer,
   onChange,
   onDelete,
   onFocus,
   isLast,
 }: {
-  pair: PairWithId;
+  pairContainer: PairContainer;
-  onChange: (pair: PairWithId) => void;
+  onChange: (pair: PairContainer) => void;
-  onDelete?: (pair: PairWithId) => void;
+  onDelete?: (pair: PairContainer) => void;
   onFocus?: () => void;
   isLast?: boolean;
 }) {
+  const { id } = pairContainer;
   return (
     <div className="group grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
       <Input
         hideLabel
         containerClassName={classnames(isLast && 'border-dashed')}
-        defaultValue={pair.header.name}
+        defaultValue={pairContainer.pair.name}
         label="Name"
         name="name"
-        onChange={(name) => onChange({ id: pair.id, header: { name } })}
+        onChange={(name) => onChange({ id, pair: { name, value: pairContainer.pair.value } })}
         onFocus={onFocus}
         placeholder={isLast ? 'new name' : 'name'}
         useEditor={{ useTemplating: true }}
@@ -109,10 +110,10 @@ function FormRow({
       <Input
         hideLabel
         containerClassName={classnames(isLast && 'border-dashed')}
-        defaultValue={pair.header.value}
+        defaultValue={pairContainer.pair.value}
         label="Value"
         name="value"
-        onChange={(value) => onChange({ id: pair.id, header: { value } })}
+        onChange={(value) => onChange({ id, pair: { name: pairContainer.pair.name, value } })}
         onFocus={onFocus}
         placeholder={isLast ? 'new value' : 'value'}
         useEditor={{ useTemplating: true }}
@@ -120,7 +121,8 @@ function FormRow({
       {onDelete && (
         <IconButton
           icon="trash"
-          onClick={() => onDelete(pair)}
+          title="Delete header"
+          onClick={() => onDelete(pairContainer)}
           tabIndex={-1}
           className={classnames('opacity-0 group-hover:opacity-100')}
         />