Show response headers

src-web/components/ResponsePane.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useEffect, useMemo, useState } from 'react';
+import { createGlobalState } from 'react-use';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useDeleteResponse } from '../hooks/useDeleteResponse';
 import { useDeleteResponses } from '../hooks/useDeleteResponses';
@@ -9,12 +10,15 @@ import { useResponseViewMode } from '../hooks/useResponseViewMode';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpResponse } from '../lib/models';
 import { pluralize } from '../lib/pluralize';
+import { Banner } from './core/Banner';
+import { CountBadge } from './core/CountBadge';
 import { Dropdown } from './core/Dropdown';
 import { Editor } from './core/Editor';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 import { StatusColor } from './core/StatusColor';
+import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { Webview } from './core/Webview';
 import { EmptyStateText } from './EmptyStateText';
 
@@ -23,6 +27,8 @@ interface Props {
   className?: string;
 }
 
+const useActiveTab = createGlobalState<string>('body');
+
 export const ResponsePane = memo(function ResponsePane({ style, className }: Props) {
   const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null);
   const activeRequestId = useActiveRequestId();
@@ -33,10 +39,10 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
   const [viewMode, toggleViewMode] = useResponseViewMode(activeResponse?.requestId);
   const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
   const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
+  const [activeTab, setActiveTab] = useActiveTab();
 
-  useEffect(() => {
-    setPinnedResponseId(null);
-  }, [responses.length]);
+  // Unset pinned response when a new one comes in
+  useEffect(() => setPinnedResponseId(null), [responses.length]);
 
   const contentType = useMemo(
     () =>
@@ -45,23 +51,41 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
     [activeResponse],
   );
 
+  const tabs = useMemo(
+    () => [
+      { label: 'Body', value: 'body' },
+      {
+        label: (
+          <div className="flex items-center">
+            Headers
+            <CountBadge
+              count={activeResponse?.headers.filter((h) => h.name && h.value).length ?? 0}
+            />
+          </div>
+        ),
+        value: 'headers',
+      },
+    ],
+    [activeResponse?.headers],
+  );
+
   return (
     <div
       style={style}
       className={classnames(
         className,
-        'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
+        'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
         'dark:bg-gray-100 rounded-md border border-highlight',
         'shadow shadow-gray-100 dark:shadow-gray-0 relative',
       )}
     >
       <HStack
         alignItems="center"
-        className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
+        className="italic text-gray-700 text-sm w-full flex-shrink-0 -mb-1"
       >
         {activeResponse && (
           <>
-            <div className="whitespace-nowrap">
+            <div className="whitespace-nowrap p-3 py-2">
               <StatusColor statusCode={activeResponse.status}>
                 {activeResponse.status}
                 {activeResponse.statusReason && ` ${activeResponse.statusReason}`}
@@ -71,71 +95,93 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
               {Math.round(activeResponse.body.length / 1000)} KB
             </div>
 
-            <HStack alignItems="center" className="ml-auto h-8">
-              <Dropdown
-                items={[
-                  {
-                    label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
-                    onSelect: toggleViewMode,
-                  },
-                  { type: 'separator', label: 'Actions' },
-                  {
-                    label: 'Clear Response',
-                    onSelect: deleteResponse.mutate,
-                    disabled: responses.length === 0,
-                  },
-                  {
-                    label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
-                    onSelect: deleteAllResponses.mutate,
-                    hidden: responses.length <= 1,
-                    disabled: responses.length === 0,
-                  },
-                  { type: 'separator', label: 'History' },
-                  ...responses.slice(0, 10).map((r) => ({
-                    label: r.status + ' - ' + r.elapsed + ' ms',
-                    leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
-                    onSelect: () => setPinnedResponseId(r.id),
-                  })),
-                ]}
-              >
-                <IconButton
-                  title="Show response history"
-                  icon="triangleDown"
-                  className="ml-auto"
-                  size="sm"
-                  iconSize="md"
-                />
-              </Dropdown>
-            </HStack>
+            <Dropdown
+              items={[
+                {
+                  label: viewMode === 'pretty' ? 'View Raw' : 'View Prettified',
+                  onSelect: toggleViewMode,
+                },
+                { type: 'separator', label: 'Actions' },
+                {
+                  label: 'Clear Response',
+                  onSelect: deleteResponse.mutate,
+                  disabled: responses.length === 0,
+                },
+                {
+                  label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
+                  onSelect: deleteAllResponses.mutate,
+                  hidden: responses.length <= 1,
+                  disabled: responses.length === 0,
+                },
+                { type: 'separator', label: 'History' },
+                ...responses.slice(0, 10).map((r) => ({
+                  label: r.status + ' - ' + r.elapsed + ' ms',
+                  leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
+                  onSelect: () => setPinnedResponseId(r.id),
+                })),
+              ]}
+            >
+              <IconButton
+                title="Show response history"
+                icon="triangleDown"
+                className="ml-auto"
+                size="sm"
+                iconSize="md"
+              />
+            </Dropdown>
           </>
         )}
       </HStack>
 
-      {activeResponse === null ? (
-        <EmptyStateText>No Response</EmptyStateText>
-      ) : activeResponse?.error ? (
-        <div className="p-1">
-          <div className="text-white bg-red-500 px-3 py-3 rounded">{activeResponse.error}</div>
-        </div>
-      ) : viewMode === 'pretty' && contentType.includes('html') ? (
-        <Webview body={activeResponse.body} contentType={contentType} url={activeResponse.url} />
-      ) : viewMode === 'pretty' && contentType.includes('json') ? (
-        <Editor
-          readOnly
-          forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
-          className="bg-gray-50 dark:!bg-gray-100"
-          defaultValue={tryFormatJson(activeResponse?.body)}
-          contentType={contentType}
-        />
-      ) : activeResponse?.body ? (
-        <Editor
-          readOnly
-          forceUpdateKey={activeResponse.updatedAt}
-          className="bg-gray-50 dark:!bg-gray-100"
-          defaultValue={activeResponse?.body}
-          contentType={contentType}
-        />
-      ) : null}
+      {activeResponse?.error ? (
+        <Banner className="m-2">{activeResponse.error}</Banner>
+      ) : (
+        <Tabs
+          value={activeTab}
+          onChangeValue={setActiveTab}
+          label="Response"
+          className="px-3"
+          tabs={tabs}
+        >
+          <TabContent value="body">
+            {activeResponse === null ? (
+              <EmptyStateText>No Response</EmptyStateText>
+            ) : viewMode === 'pretty' && contentType.includes('html') ? (
+              <Webview
+                body={activeResponse.body}
+                contentType={contentType}
+                url={activeResponse.url}
+              />
+            ) : viewMode === 'pretty' && contentType.includes('json') ? (
+              <Editor
+                readOnly
+                forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
+                className="bg-gray-50 dark:!bg-gray-100"
+                defaultValue={tryFormatJson(activeResponse?.body)}
+                contentType={contentType}
+              />
+            ) : activeResponse?.body ? (
+              <Editor
+                readOnly
+                forceUpdateKey={activeResponse.updatedAt}
+                className="bg-gray-50 dark:!bg-gray-100"
+                defaultValue={activeResponse?.body}
+                contentType={contentType}
+              />
+            ) : null}
+          </TabContent>
+          <TabContent value="headers">
+            <ul>
+              {activeResponse?.headers.map((h) => (
+                <li key={h.name} className="font-mono text-xs">
+                  <span className="text-violet-600 select-text cursor-text">{h.name}</span>:{' '}
+                  <span className="text-blue-600 select-text cursor-text">{h.value}</span>
+                </li>
+              ))}
+            </ul>
+          </TabContent>
+        </Tabs>
+      )}
     </div>
   );
 });