Cookie Support (#19)

2026-03-17 23:14:03 +01:00 · 2024-01-28 14:39:51 -08:00
parent 0555420ad9
commit 7d183c6580
45 changed files with 1152 additions and 145 deletions
--- a/src-web/components/CookieDialog.tsx
+++ b/src-web/components/CookieDialog.tsx
@@ -0,0 +1,74 @@
+import { useCookieJars } from '../hooks/useCookieJars';
+import { useUpdateCookieJar } from '../hooks/useUpdateCookieJar';
+import { cookieDomain } from '../lib/models';
+import { Banner } from './core/Banner';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
+
+interface Props {
+  cookieJarId: string | null;
+}
+
+export const CookieDialog = function ({ cookieJarId }: Props) {
+  const updateCookieJar = useUpdateCookieJar(cookieJarId ?? null);
+  const cookieJars = useCookieJars();
+  const cookieJar = cookieJars.find((c) => c.id === cookieJarId);
+
+  if (cookieJar == null) {
+    return <div>No cookie jar selected</div>;
+  }
+
+  if (cookieJar.cookies.length === 0) {
+    return (
+      <Banner>
+        Cookies will appear when a response contains the <InlineCode>Set-Cookie</InlineCode> header
+      </Banner>
+    );
+  }
+
+  return (
+    <div className="pb-2">
+      <table className="w-full text-xs mb-auto min-w-full max-w-full divide-y">
+        <thead>
+          <tr>
+            <th className="py-2 text-left">Domain</th>
+            <th className="py-2 text-left pl-4">Cookie</th>
+            <th className="py-2 pl-4"></th>
+          </tr>
+        </thead>
+        <tbody className="divide-y">
+          {cookieJar?.cookies.map((c) => (
+            <tr key={c.domain + c.raw_cookie}>
+              <td className="py-2 select-text cursor-text font-mono font-semibold max-w-0">
+                {cookieDomain(c)}
+              </td>
+              <td className="py-2 pl-4 select-text cursor-text font-mono text-gray-700 whitespace-nowrap overflow-x-auto max-w-[200px] hide-scrollbars">
+                {c.raw_cookie}
+              </td>
+              <td className="max-w-0 w-10">
+                <IconButton
+                  icon="trash"
+                  size="xs"
+                  iconSize="sm"
+                  title="Delete"
+                  className="ml-auto"
+                  onClick={async () => {
+                    console.log(
+                      'DELETE COOKIE',
+                      c,
+                      cookieJar.cookies.filter((c2) => c2 !== c).length,
+                    );
+                    await updateCookieJar.mutateAsync({
+                      ...cookieJar,
+                      cookies: cookieJar.cookies.filter((c2) => c2 !== c),
+                    });
+                  }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
--- a/src-web/components/CookieDropdown.tsx
+++ b/src-web/components/CookieDropdown.tsx
@@ -0,0 +1,93 @@
+import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
+import { useCookieJars } from '../hooks/useCookieJars';
+import { useCreateCookieJar } from '../hooks/useCreateCookieJar';
+import { useDeleteCookieJar } from '../hooks/useDeleteCookieJar';
+import { usePrompt } from '../hooks/usePrompt';
+import { useUpdateCookieJar } from '../hooks/useUpdateCookieJar';
+import { CookieDialog } from './CookieDialog';
+import { Dropdown, type DropdownItem } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
+import { useDialog } from './DialogContext';
+
+export function CookieDropdown() {
+  const cookieJars = useCookieJars();
+  const { activeCookieJar, setActiveCookieJarId } = useActiveCookieJar();
+  const updateCookieJar = useUpdateCookieJar(activeCookieJar?.id ?? null);
+  const deleteCookieJar = useDeleteCookieJar(activeCookieJar ?? null);
+  const createCookieJar = useCreateCookieJar();
+  const dialog = useDialog();
+  const prompt = usePrompt();
+
+  return (
+    <Dropdown
+      items={[
+        ...cookieJars.map((j) => ({
+          key: j.id,
+          label: j.name,
+          leftSlot: <Icon icon={j.id === activeCookieJar?.id ? 'check' : 'empty'} />,
+          onSelect: () => setActiveCookieJarId(j.id),
+        })),
+        ...((cookieJars.length > 0 && activeCookieJar != null
+          ? [
+              { type: 'separator', label: activeCookieJar.name },
+              {
+                key: 'manage',
+                label: 'Manage Cookies',
+                leftSlot: <Icon icon="cookie" />,
+                onSelect: () => {
+                  if (activeCookieJar == null) return;
+                  dialog.show({
+                    id: 'cookies',
+                    title: 'Manage Cookies',
+                    size: 'full',
+                    render: () => <CookieDialog cookieJarId={activeCookieJar.id} />,
+                  });
+                },
+              },
+              {
+                key: 'rename',
+                label: 'Rename',
+                leftSlot: <Icon icon="pencil" />,
+                onSelect: async () => {
+                  const name = await prompt({
+                    title: 'Rename Cookie Jar',
+                    description: (
+                      <>
+                        Enter a new name for <InlineCode>{activeCookieJar?.name}</InlineCode>
+                      </>
+                    ),
+                    name: 'name',
+                    label: 'Name',
+                    defaultValue: activeCookieJar?.name,
+                  });
+                  updateCookieJar.mutate({ name });
+                },
+              },
+              ...((cookieJars.length > 1 // Never delete the last one
+                ? [
+                    {
+                      key: 'delete',
+                      label: 'Delete',
+                      leftSlot: <Icon icon="trash" />,
+                      variant: 'danger',
+                      onSelect: () => deleteCookieJar.mutateAsync(),
+                    },
+                  ]
+                : []) as DropdownItem[]),
+            ]
+          : []) as DropdownItem[]),
+        { type: 'separator' },
+        {
+          key: 'create-cookie-jar',
+          label: 'New Cookie Jar',
+          leftSlot: <Icon icon="plus" />,
+          onSelect: () => createCookieJar.mutate(),
+        },
+      ]}
+    >
+      <IconButton size="sm" icon="cookie" title="Cookie Jar" />
+    </Dropdown>
+  );
+}
--- a/src-web/components/EnvironmentActionsDropdown.tsx
+++ b/src-web/components/EnvironmentActionsDropdown.tsx
@@ -54,23 +54,26 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
      ...((environments.length > 0
        ? [{ type: 'separator', label: 'Environments' }]
        : []) as DropdownItem[]),
-      environments.length
-        ? {
-            key: 'edit',
-            label: 'Manage Environments',
-            hotKeyAction: 'environmentEditor.toggle',
-            leftSlot: <Icon icon="box" />,
-            onSelect: showEnvironmentDialog,
-          }
-        : {
-            key: 'new',
-            label: 'New Environment',
-            leftSlot: <Icon icon="plus" />,
-            onSelect: async () => {
-              await createEnvironment.mutateAsync();
-              showEnvironmentDialog();
+      ...((environments.length > 0
+        ? [
+            {
+              key: 'edit',
+              label: 'Manage Environments',
+              hotKeyAction: 'environmentEditor.toggle',
+              leftSlot: <Icon icon="box" />,
+              onSelect: showEnvironmentDialog,
            },
-          },
+          ]
+        : []) as DropdownItem[]),
+      {
+        key: 'new',
+        label: 'New Environment',
+        leftSlot: <Icon icon="plus" />,
+        onSelect: async () => {
+          await createEnvironment.mutateAsync();
+          showEnvironmentDialog();
+        },
+      },
    ],
    [activeEnvironment?.id, createEnvironment, environments, routes, showEnvironmentDialog],
  );
--- a/src-web/components/EnvironmentEditDialog.tsx
+++ b/src-web/components/EnvironmentEditDialog.tsx
@@ -51,12 +51,12 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
  return (
    <div
      className={classNames(
-        'h-full grid gap-x-8 grid-rows-[minmax(0,1fr)]',
+        'h-full pt-1 grid gap-x-8 grid-rows-[minmax(0,1fr)]',
        showSidebar ? 'grid-cols-[auto_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)]',
      )}
    >
      {showSidebar && (
-        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-3 border-r border-gray-100 -ml-2">
+        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-3 border-r border-gray-100 -ml-2 pb-4">
          <div className="min-w-0 h-full w-full overflow-y-scroll">
            {environments.map((e) => (
              <SidebarButton
--- a/src-web/components/GlobalHooks.tsx
+++ b/src-web/components/GlobalHooks.tsx
@@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { appWindow } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { cookieJarsQueryKey } from '../hooks/useCookieJars';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
@@ -55,6 +56,8 @@ export function GlobalHooks() {
        ? keyValueQueryKey(payload)
        : payload.model === 'settings'
        ? settingsQueryKey()
+        : payload.model === 'cookie_jar'
+        ? cookieJarsQueryKey(payload)
        : null;

    if (queryKey === null) {
@@ -80,6 +83,8 @@ export function GlobalHooks() {
        ? workspacesQueryKey(payload)
        : payload.model === 'key_value'
        ? keyValueQueryKey(payload)
+        : payload.model === 'cookie_jar'
+        ? cookieJarsQueryKey(payload)
        : payload.model === 'settings'
        ? settingsQueryKey()
        : null;
@@ -115,6 +120,8 @@ export function GlobalHooks() {
      queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(payload), removeById(payload));
    } else if (payload.model === 'key_value') {
      queryClient.setQueryData(keyValueQueryKey(payload), undefined);
+    } else if (payload.model === 'cookie_jar') {
+      queryClient.setQueryData(cookieJarsQueryKey(payload), undefined);
    } else if (payload.model === 'settings') {
      queryClient.setQueryData(settingsQueryKey(), undefined);
    }
--- a/src-web/components/GraphQLEditor.tsx
+++ b/src-web/components/GraphQLEditor.tsx
@@ -84,39 +84,41 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
        actions={
          error || isLoading
            ? [
-                <Button
-                  key="introspection"
-                  size="xs"
-                  color={error ? 'danger' : 'gray'}
-                  isLoading={isLoading}
-                  onClick={() => {
-                    dialog.show({
-                      title: 'Introspection Failed',
-                      size: 'dynamic',
-                      id: 'introspection-failed',
-                      render: () => (
-                        <>
-                          <FormattedError>{error ?? 'unknown'}</FormattedError>
-                          <div className="w-full mt-3">
-                            <Button
-                              onClick={() => {
-                                dialog.hide('introspection-failed');
-                                refetch();
-                              }}
-                              className="ml-auto"
-                              color="secondary"
-                              size="sm"
-                            >
-                              Try Again
-                            </Button>
-                          </div>
-                        </>
-                      ),
-                    });
-                  }}
-                >
-                  {error ? 'Introspection Failed' : 'Introspecting'}
-                </Button>,
+                <div key="introspection" className="!opacity-100">
+                  <Button
+                    key="introspection"
+                    size="xs"
+                    color={error ? 'danger' : 'gray'}
+                    isLoading={isLoading}
+                    onClick={() => {
+                      dialog.show({
+                        title: 'Introspection Failed',
+                        size: 'dynamic',
+                        id: 'introspection-failed',
+                        render: () => (
+                          <>
+                            <FormattedError>{error ?? 'unknown'}</FormattedError>
+                            <div className="w-full my-4">
+                              <Button
+                                onClick={() => {
+                                  dialog.hide('introspection-failed');
+                                  refetch();
+                                }}
+                                className="ml-auto"
+                                color="secondary"
+                                size="sm"
+                              >
+                                Try Again
+                              </Button>
+                            </div>
+                          </>
+                        ),
+                      });
+                    }}
+                  >
+                    {error ? 'Introspection Failed' : 'Introspecting'}
+                  </Button>
+                </div>,
              ]
            : []
        }
--- a/src-web/components/KeyboardShortcutsDialog.tsx
+++ b/src-web/components/KeyboardShortcutsDialog.tsx
@@ -3,7 +3,7 @@ import { HotKeyList } from './core/HotKeyList';

 export const KeyboardShortcutsDialog = () => {
  return (
-    <div className="h-full w-full">
+    <div className="h-full w-full pb-2">
      <HotKeyList hotkeys={hotkeyActions} />
    </div>
  );
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -99,7 +99,11 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
        'shadow shadow-gray-100 dark:shadow-gray-0 relative',
      )}
    >
-      {activeResponse?.error && <Banner className="m-2">{activeResponse.error}</Banner>}
+      {activeResponse?.error && (
+        <Banner color="danger" className="m-2">
+          {activeResponse.error}
+        </Banner>
+      )}
      {!activeResponse && (
        <>
          <span />
--- a/src-web/components/SettingsDialog.tsx
+++ b/src-web/components/SettingsDialog.tsx
@@ -20,7 +20,7 @@ export const SettingsDialog = () => {
  }

  return (
-    <VStack space={2} className="mb-2">
+    <VStack space={2} className="mb-4">
      <Select
        name="appearance"
        label="Appearance"
--- a/src-web/components/SettingsDropdown.tsx
+++ b/src-web/components/SettingsDropdown.tsx
@@ -71,7 +71,7 @@ export function SettingsDropdown() {
              size: 'sm',
              render: ({ hide }) => {
                return (
-                  <VStack space={3}>
+                  <VStack space={3} className="pb-4">
                    <p>Insomnia or Postman Collection v2/v2.1 formats are supported</p>
                    <Button
                      size="sm"
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -51,7 +51,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
          ),
          render: ({ hide }) => {
            return (
-              <HStack space={2} justifyContent="end" alignItems="center" className="mt-6">
+              <HStack space={2} justifyContent="end" alignItems="center" className="mt-4 mb-6">
                <Button
                  className="focus"
                  color="gray"
@@ -135,6 +135,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
            label: 'Name',
            defaultValue: 'My Workspace',
            title: 'New Workspace',
+            confirmLabel: 'Create',
          });
          createWorkspace.mutate({ name });
        },
@@ -143,6 +144,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
  }, [
    activeWorkspace?.name,
    activeWorkspaceId,
+    createWorkspace,
    deleteWorkspace.mutate,
    dialog,
    prompt,
--- a/src-web/components/WorkspaceHeader.tsx
+++ b/src-web/components/WorkspaceHeader.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { memo, useState } from 'react';
+import { CookieDropdown } from './CookieDropdown';
 import { Icon } from './core/Icon';
 import { HStack } from './core/Stacks';
 import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
@@ -27,6 +28,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
    >
      <HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center">
        <SidebarActions />
+        <CookieDropdown />
        <HStack alignItems="center">
          <WorkspaceActionsDropdown />
          <Icon icon="chevronRight" className="text-gray-900 text-opacity-disabled" />
--- a/src-web/components/core/Banner.tsx
+++ b/src-web/components/core/Banner.tsx
@@ -4,14 +4,18 @@ import type { ReactNode } from 'react';
 interface Props {
  children: ReactNode;
  className?: string;
+  color?: 'danger' | 'success' | 'gray';
 }
-export function Banner({ children, className }: Props) {
+export function Banner({ children, className, color = 'gray' }: Props) {
  return (
    <div>
      <div
        className={classNames(
          className,
-          'border border-red-500 bg-red-300/10 text-red-800 px-3 py-2 rounded select-auto cursor-text',
+          'border border-dashed italic px-3 py-2 rounded select-auto cursor-text',
+          color === 'gray' && 'border-gray-500/60 bg-gray-300/10 text-gray-800',
+          color === 'danger' && 'border-red-500/60 bg-red-300/10 text-red-800',
+          color === 'success' && 'border-green-500/60 bg-green-300/10 text-green-800',
        )}
      >
        {children}
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -5,20 +5,9 @@ import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useFormattedHotkey, useHotKey } from '../../hooks/useHotKey';
 import { Icon } from './Icon';

-const colorStyles = {
-  custom: 'ring-blue-500/50',
-  default:
-    'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
-  gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
-  primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
-  secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
-  warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
-  danger: 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
-};
-
-export type ButtonProps = HTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color'> & {
  innerClassName?: string;
-  color?: keyof typeof colorStyles;
+  color?: 'custom' | 'default' | 'gray' | 'primary' | 'secondary' | 'warning' | 'danger';
  isLoading?: boolean;
  size?: 'sm' | 'md' | 'xs';
  justify?: 'start' | 'center';
@@ -64,7 +53,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
        'flex-shrink-0 flex items-center',
        'focus-visible-or-class:ring rounded-md',
        disabled ? 'pointer-events-none opacity-disabled' : 'pointer-events-auto',
-        colorStyles[color || 'default'],
+        color === 'custom' && 'ring-blue-500/50',
+        color === 'default' &&
+          'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
+        color === 'gray' &&
+          'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
+        color === 'primary' && 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
+        color === 'secondary' &&
+          'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
+        color === 'warning' &&
+          'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
+        color === 'danger' && 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
        justify === 'start' && 'justify-start',
        justify === 'center' && 'justify-center',
        size === 'md' && 'h-md px-3',
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -54,10 +54,10 @@ export function Dialog({
            className={classNames(
              className,
              'gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
-              'relative bg-gray-50 pointer-events-auto',
-              'px-6 py-4 rounded-lg overflow-auto',
+              'pt-4 relative bg-gray-50 pointer-events-auto',
+              'rounded-lg',
              'dark:border border-highlight shadow shadow-black/10',
-              'max-w-[90vw] max-h-[calc(100vh-8em)]',
+              'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
              size === 'sm' && 'w-[25rem] max-h-[80vh]',
              size === 'md' && 'w-[45rem] max-h-[80vh]',
              size === 'full' && 'w-[100vw] h-[100vh]',
@@ -65,19 +65,26 @@ export function Dialog({
            )}
          >
            {title ? (
-              <Heading size={1} id={titleId}>
+              <Heading className="px-6 pt-4" size={1} id={titleId}>
                {title}
              </Heading>
            ) : (
              <span />
            )}
-            {description && <p id={descriptionId}>{description}</p>}
-            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)]">{children}</div>
+            {description && (
+              <p className="px-6" id={descriptionId}>
+                {description}
+              </p>
+            )}
+            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)] overflow-y-auto px-6 py-2">
+              {children}
+            </div>

            {/*Put close at the end so that it's the last thing to be tabbed to*/}
            {!hideX && (
              <div className="ml-auto absolute right-1 top-1">
                <IconButton
+                  className="opacity-70 hover:opacity-100"
                  onClick={onClose}
                  title="Close dialog (Esc)"
                  aria-label="Close"
--- a/src-web/components/core/FormattedError.tsx
+++ b/src-web/components/core/FormattedError.tsx
@@ -10,7 +10,7 @@ export function FormattedError({ children }: Props) {
    <pre
      className={classNames(
        'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
-        'whitespace-pre border border-red-500 border-dashed overflow-x-auto',
+        'whitespace-pre-wrap border border-red-500 border-dashed overflow-x-auto',
      )}
    >
      {children}
--- a/src-web/components/core/Icon.tsx
+++ b/src-web/components/core/Icon.tsx
@@ -11,6 +11,7 @@ const icons = {
  check: lucide.CheckIcon,
  chevronDown: lucide.ChevronDownIcon,
  chevronRight: lucide.ChevronRightIcon,
+  cookie: lucide.CookieIcon,
  code: lucide.CodeIcon,
  copy: lucide.CopyIcon,
  download: lucide.DownloadIcon,