add additional safeguards

Author: andrewmelchor

packages/web/src/components/request-workspace/index.ts

@@ -15,7 +15,6 @@ export { ParamsPanel } from './panels/params';
 export {
   DraftHeader,
   ErrorBanner,
-  KeyValueRow,
   KeyValueTable
 } from './panels/shared';
 

packages/web/src/components/request-workspace/panels/body/index.tsx

@@ -17,7 +17,13 @@ export function BodyPanel(props: BodyPanelProps) {
         <p>{props.requestBodySummary.description}</p>
       </Show>
 
-      <Switch>
+      <Switch
+        fallback={
+          <p class="font-mono text-xs text-base-content/70">
+            Unsupported body kind: {props.requestBodySummary.kind}
+          </p>
+        }
+      >
         <Match when={props.requestBodySummary.kind === 'inline'}>
           <InlineBodyEditor
             hasRequest={props.hasRequest}

packages/web/src/components/request-workspace/panels/shared/error-banner.tsx

@@ -8,7 +8,10 @@ export function ErrorBanner(props: ErrorBannerProps) {
   return (
     <Show when={props.message}>
       {(message) => (
-        <div class="rounded-box border border-error/35 bg-error/10 px-2 py-1.5 text-xs text-base-content">
+        <div
+          role="alert"
+          class="rounded-box border border-error/35 bg-error/10 px-2 py-1.5 text-xs text-base-content"
+        >
           {message()}
         </div>
       )}

packages/web/src/components/request-workspace/panels/shared/index.ts

@@ -1,3 +1,3 @@
 export { DraftHeader } from './draft-header';
 export { ErrorBanner } from './error-banner';
-export { KeyValueRow, KeyValueTable } from './key-value-table';
+export { KeyValueTable } from './key-value-table';

packages/web/src/components/request-workspace/panels/shared/key-value-table.tsx

@@ -2,22 +2,22 @@ import { Index, Show } from 'solid-js';
 import type { RequestDetailsRow } from '../../../../utils/request-details';
 
 interface KeyValueRowProps {
-  item: () => RequestDetailsRow;
+  item: RequestDetailsRow;
   index: number;
   hasRequest: boolean;
   isSaving: boolean;
   onChange: (index: number, field: 'key' | 'value', value: string) => void;
   onRemove: (index: number) => void;
 }
 
-export function KeyValueRow(props: KeyValueRowProps) {
+function KeyValueRow(props: KeyValueRowProps) {
   return (
     <tr>
       <td>
         <input
           type="text"
           class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-          value={props.item().key}
+          value={props.item.key}
           onInput={(event) => props.onChange(props.index, 'key', event.currentTarget.value)}
           disabled={!props.hasRequest || props.isSaving}
         />
@@ -26,7 +26,7 @@ export function KeyValueRow(props: KeyValueRowProps) {
         <input
           type="text"
           class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-          value={props.item().value}
+          value={props.item.value}
           onInput={(event) => props.onChange(props.index, 'value', event.currentTarget.value)}
           disabled={!props.hasRequest || props.isSaving}
         />
@@ -79,7 +79,7 @@ export function KeyValueTable(props: KeyValueTableProps) {
             <Index each={props.items}>
               {(item, index) => (
                 <KeyValueRow
-                  item={item}
+                  item={item()}
                   index={index}
                   hasRequest={props.hasRequest}
                   isSaving={props.isSaving}