Initial "plugin" system with importer (#7)

2026-03-17 23:13:51 +01:00 · 2023-11-02 18:08:43 -07:00
parent 749025640f
commit 1cd6e0af06
26 changed files with 972 additions and 452 deletions
--- a/src-web/components/EnvironmentActionsDropdown.tsx
+++ b/src-web/components/EnvironmentActionsDropdown.tsx
@@ -10,7 +10,6 @@ import { useDialog } from './DialogContext';
 import { EnvironmentEditDialog } from './EnvironmentEditDialog';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
-import { usePrompt } from '../hooks/usePrompt';

 type Props = {
  className?: string;
@@ -23,15 +22,14 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
  const activeEnvironment = useActiveEnvironment();
  const createEnvironment = useCreateEnvironment();
  const dialog = useDialog();
-  const prompt = usePrompt();
  const routes = useAppRoutes();

  const showEnvironmentDialog = useCallback(() => {
    dialog.show({
      title: 'Manage Environments',
-      render: () => <EnvironmentEditDialog />,
+      render: () => <EnvironmentEditDialog initialEnvironment={activeEnvironment} />,
    });
-  }, [dialog]);
+  }, [dialog, activeEnvironment]);

  const items: DropdownItem[] = useMemo(
    () =>
--- a/src-web/components/EnvironmentEditDialog.tsx
+++ b/src-web/components/EnvironmentEditDialog.tsx
@@ -1,13 +1,11 @@
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
-import type { Environment } from '../lib/models';
+import type { Environment, Workspace } from '../lib/models';
 import { Button } from './core/Button';
 import classNames from 'classnames';
-import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
-import { useAppRoutes } from '../hooks/useAppRoutes';
 import { PairEditor } from './core/PairEditor';
 import type { PairEditorProps } from './core/PairEditor';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
 import { HStack, VStack } from './core/Stacks';
 import { IconButton } from './core/IconButton';
@@ -19,12 +17,20 @@ import { usePrompt } from '../hooks/usePrompt';
 import { InlineCode } from './core/InlineCode';
 import { useWindowSize } from 'react-use';
 import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';

-export const EnvironmentEditDialog = function () {
-  const routes = useAppRoutes();
+interface Props {
+  initialEnvironment: Environment | null;
+}
+
+export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
+  const [selectedEnvironment, setSelectedEnvironment] = useState<Environment | null>(
+    initialEnvironment,
+  );
  const environments = useEnvironments();
  const createEnvironment = useCreateEnvironment();
-  const activeEnvironment = useActiveEnvironment();
+  const activeWorkspace = useActiveWorkspace();

  const windowSize = useWindowSize();
  const showSidebar = windowSize.width > 500;
@@ -39,19 +45,34 @@ export const EnvironmentEditDialog = function () {
      {showSidebar && (
        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-4 border-r border-gray-100">
          <div className="min-w-0 h-full w-full overflow-y-scroll">
+            <Button
+              size="xs"
+              color="custom"
+              justify="start"
+              className={classNames(
+                'w-full',
+                'text-gray-600 hocus:text-gray-800',
+                selectedEnvironment == null && 'bg-highlightSecondary !text-gray-900',
+              )}
+              onClick={() => {
+                setSelectedEnvironment(null);
+              }}
+            >
+              Base Environment
+            </Button>
            {environments.map((e) => (
              <Button
+                key={e.id}
+                justify="start"
                size="xs"
                color="custom"
                className={classNames(
                  'w-full',
                  'text-gray-600 hocus:text-gray-800',
-                  activeEnvironment?.id === e.id && 'bg-highlightSecondary !text-gray-900',
+                  selectedEnvironment?.id === e.id && 'bg-highlightSecondary !text-gray-900',
                )}
-                justify="start"
-                key={e.id}
                onClick={() => {
-                  routes.setEnvironment(e);
+                  setSelectedEnvironment(e);
                }}
              >
                {e.name}
@@ -68,8 +89,8 @@ export const EnvironmentEditDialog = function () {
          </Button>
        </aside>
      )}
-      {activeEnvironment != null ? (
-        <EnvironmentEditor environment={activeEnvironment} />
+      {activeWorkspace != null ? (
+        <EnvironmentEditor environment={selectedEnvironment} workspace={activeWorkspace} />
      ) : (
        <div className="flex w-full h-full items-center justify-center text-gray-400 italic">
          select an environment
@@ -79,57 +100,72 @@ export const EnvironmentEditDialog = function () {
  );
 };

-const EnvironmentEditor = function ({ environment }: { environment: Environment }) {
+const EnvironmentEditor = function ({
+  environment,
+  workspace,
+}: {
+  environment: Environment | null;
+  workspace: Workspace;
+}) {
  const environments = useEnvironments();
-  const updateEnvironment = useUpdateEnvironment(environment.id);
+  const updateEnvironment = useUpdateEnvironment(environment?.id ?? 'n/a');
+  const updateWorkspace = useUpdateWorkspace(workspace.id);
  const deleteEnvironment = useDeleteEnvironment(environment);
+  const variables = environment == null ? workspace.variables : environment.variables;
  const handleChange = useCallback<PairEditorProps['onChange']>(
    (variables) => {
-      updateEnvironment.mutate({ variables });
+      if (environment != null) {
+        updateEnvironment.mutate({ variables });
+      } else {
+        updateWorkspace.mutate({ variables });
+      }
    },
-    [updateEnvironment],
+    [updateWorkspace, updateEnvironment, environment],
  );

  const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
    const allVariableNames = environments.flatMap((e) => e.variables.map((v) => v.name));
    // Filter out empty strings and variables that already exist in the active environment
    const variableNames = allVariableNames.filter(
-      (name) => name != '' && !environment.variables.find((v) => v.name === name),
+      (name) => name != '' && !variables.find((v) => v.name === name),
    );
    return { options: variableNames.map((name) => ({ label: name, type: 'constant' })) };
-  }, [environments, environment.variables]);
+  }, [environments, variables]);

  const prompt = usePrompt();
-  const items = useMemo<DropdownItem[]>(
-    () => [
-      {
-        key: 'rename',
-        label: 'Rename',
-        leftSlot: <Icon icon="pencil" size="sm" />,
-        onSelect: async () => {
-          const name = await prompt({
-            title: 'Rename Environment',
-            description: (
-              <>
-                Enter a new name for <InlineCode>{environment.name}</InlineCode>
-              </>
-            ),
-            name: 'name',
-            label: 'Name',
-            defaultValue: environment.name,
-          });
-          updateEnvironment.mutate({ name });
-        },
-      },
-      {
-        key: 'delete',
-        variant: 'danger',
-        label: 'Delete',
-        leftSlot: <Icon icon="trash" size="sm" />,
-        onSelect: () => deleteEnvironment.mutate(),
-      },
-    ],
-    [deleteEnvironment, updateEnvironment, environment.name, prompt],
+  const items = useMemo<DropdownItem[] | null>(
+    () =>
+      environment == null
+        ? null
+        : [
+            {
+              key: 'rename',
+              label: 'Rename',
+              leftSlot: <Icon icon="pencil" size="sm" />,
+              onSelect: async () => {
+                const name = await prompt({
+                  title: 'Rename Environment',
+                  description: (
+                    <>
+                      Enter a new name for <InlineCode>{environment.name}</InlineCode>
+                    </>
+                  ),
+                  name: 'name',
+                  label: 'Name',
+                  defaultValue: environment.name,
+                });
+                updateEnvironment.mutate({ name });
+              },
+            },
+            {
+              key: 'delete',
+              variant: 'danger',
+              label: 'Delete',
+              leftSlot: <Icon icon="trash" size="sm" />,
+              onSelect: () => deleteEnvironment.mutate(),
+            },
+          ],
+    [deleteEnvironment, updateEnvironment, prompt, environment],
  );

  const validateName = useCallback((name: string) => {
@@ -141,10 +177,12 @@ const EnvironmentEditor = function ({ environment }: { environment: Environment
  return (
    <VStack space={2}>
      <HStack space={2} className="justify-between">
-        <h1 className="text-xl">{environment.name}</h1>
-        <Dropdown items={items}>
-          <IconButton icon="gear" title="Environment Actions" size="sm" className="!h-auto w-8" />
-        </Dropdown>
+        <h1 className="text-xl">{environment?.name ?? 'Base Environment'}</h1>
+        {items != null && (
+          <Dropdown items={items}>
+            <IconButton icon="gear" title="Environment Actions" size="sm" className="!h-auto w-8" />
+          </Dropdown>
+        )}
      </HStack>
      <PairEditor
        nameAutocomplete={nameAutocomplete}
@@ -153,8 +191,8 @@ const EnvironmentEditor = function ({ environment }: { environment: Environment
        valuePlaceholder="variable value"
        nameValidate={validateName}
        valueAutocompleteVariables={false}
-        forceUpdateKey={environment.id}
-        pairs={environment.variables}
+        forceUpdateKey={environment?.id ?? workspace?.id ?? 'n/a'}
+        pairs={variables}
        onChange={handleChange}
      />
    </VStack>
--- a/src-web/components/RecentRequestsDropdown.tsx
+++ b/src-web/components/RecentRequestsDropdown.tsx
@@ -85,9 +85,10 @@ export function RecentRequestsDropdown() {
  return (
    <Dropdown ref={dropdownRef} items={items}>
      <Button
+        data-tauri-drag-region
        size="sm"
        className={classNames(
-          'flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none',
+          'flex-[2] text-center text-gray-800 text-sm truncate pointer-events-auto',
          activeRequest === null && 'text-opacity-disabled italic',
        )}
      >
--- a/src-web/components/RequestActionsDropdown.tsx
+++ b/src-web/components/RequestActionsDropdown.tsx
@@ -1,23 +1,30 @@
-import type { HTMLAttributes, ReactElement } from 'react';
-import React, { useRef } from 'react';
+import { invoke } from '@tauri-apps/api';
+import { useCallback, useRef } from 'react';
+import { open } from '@tauri-apps/api/dialog';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
 import { useTheme } from '../hooks/useTheme';
-import type { DropdownRef } from './core/Dropdown';
+import type { DropdownItem, DropdownProps, DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { HotKey } from './core/HotKey';
 import { Icon } from './core/Icon';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import type { Environment, HttpRequest, Workspace } from '../lib/models';
+import { useDialog } from './DialogContext';
+import { pluralize } from '../lib/pluralize';

 interface Props {
-  requestId: string;
-  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
+  requestId: string | null;
+  children: DropdownProps['children'];
 }

 export function RequestActionsDropdown({ requestId, children }: Props) {
  const deleteRequest = useDeleteRequest(requestId);
  const duplicateRequest = useDuplicateRequest({ id: requestId, navigateAfter: true });
  const dropdownRef = useRef<DropdownRef>(null);
+  const routes = useAppRoutes();
+  const dialog = useDialog();
  const { appearance, toggleAppearance } = useTheme();

  useListenToTauriEvent('toggle_settings', () => {
@@ -29,25 +36,88 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
    duplicateRequest.mutate();
  });

+  const importData = useCallback(async () => {
+    const selected = await open({
+      multiple: true,
+      filters: [
+        {
+          name: 'Export File',
+          extensions: ['json'],
+        },
+      ],
+    });
+    if (selected == null || selected.length === 0) return;
+    const imported: {
+      workspaces: Workspace[];
+      environments: Environment[];
+      requests: HttpRequest[];
+    } = await invoke('import_data', {
+      filePaths: selected,
+      workspaceId: null,
+    });
+    const importedWorkspace = imported.workspaces[0];
+
+    dialog.show({
+      title: 'Import Complete',
+      description: 'Imported the following:',
+      size: 'dynamic',
+      render: () => {
+        const { workspaces, environments, requests } = imported;
+        return (
+          <div>
+            <ul className="list-disc pl-6">
+              <li>
+                {workspaces.length} {pluralize('Workspace', workspaces.length)}
+              </li>
+              <li>
+                {environments.length} {pluralize('Environment', environments.length)}
+              </li>
+              <li>
+                {requests.length} {pluralize('Request', requests.length)}
+              </li>
+            </ul>
+          </div>
+        );
+      },
+    });
+
+    if (importedWorkspace != null) {
+      routes.navigate('workspace', {
+        workspaceId: importedWorkspace.id,
+        environmentId: imported.environments[0]?.id,
+      });
+    }
+  }, [routes, dialog]);
+
  return (
    <Dropdown
      ref={dropdownRef}
      items={[
+        ...(requestId != null
+          ? ([
+              {
+                key: 'duplicate',
+                label: 'Duplicate',
+                onSelect: duplicateRequest.mutate,
+                leftSlot: <Icon icon="copy" />,
+                rightSlot: <HotKey modifier="Meta" keyName="D" />,
+              },
+              {
+                key: 'delete',
+                label: 'Delete',
+                onSelect: deleteRequest.mutate,
+                variant: 'danger',
+                leftSlot: <Icon icon="trash" />,
+              },
+              { type: 'separator', label: 'Yaak Settings' },
+            ] as DropdownItem[])
+          : []),
        {
-          key: 'duplicate',
-          label: 'Duplicate',
-          onSelect: duplicateRequest.mutate,
-          leftSlot: <Icon icon="copy" />,
-          rightSlot: <HotKey modifier="Meta" keyName="D" />,
+          key: 'import',
+          label: 'Import',
+          onSelect: importData,
+          leftSlot: <Icon icon="download" />,
        },
-        {
-          key: 'delete',
-          label: 'Delete',
-          onSelect: deleteRequest.mutate,
-          variant: 'danger',
-          leftSlot: <Icon icon="trash" />,
-        },
-        { type: 'separator', label: 'Yaak Settings' },
        {
          key: 'appearance',
          label: appearance === 'dark' ? 'Light Theme' : 'Dark Theme',
--- a/src-web/components/WorkspaceHeader.tsx
+++ b/src-web/components/WorkspaceHeader.tsx
@@ -31,16 +31,14 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
        <RecentRequestsDropdown />
      </div>
      <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
-        {activeRequest && (
-          <RequestActionsDropdown requestId={activeRequest?.id}>
-            <IconButton
-              size="sm"
-              title="Request Options"
-              icon="gear"
-              className="pointer-events-auto"
-            />
-          </RequestActionsDropdown>
-        )}
+        <RequestActionsDropdown requestId={activeRequest?.id ?? null}>
+          <IconButton
+            size="sm"
+            title="Request Options"
+            icon="gear"
+            className="pointer-events-auto"
+          />
+        </RequestActionsDropdown>
      </div>
    </HStack>
  );
--- a/src-web/components/core/Icon.tsx
+++ b/src-web/components/core/Icon.tsx
@@ -34,6 +34,7 @@ import {
  TriangleDownIcon,
  TriangleLeftIcon,
  TriangleRightIcon,
+  DownloadIcon,
  UpdateIcon,
 } from '@radix-ui/react-icons';
 import classNames from 'classnames';
@@ -55,6 +56,7 @@ const icons = {
  dividerH: DividerHorizontalIcon,
  dotsH: DotsHorizontalIcon,
  dotsV: DotsVerticalIcon,
+  download: DownloadIcon,
  drag: DragHandleDots2Icon,
  eye: EyeOpenIcon,
  eyeClosed: EyeClosedIcon,
--- a/src-web/lib/models.ts
+++ b/src-web/lib/models.ts
@@ -20,6 +20,7 @@ export interface Workspace extends BaseModel {
  readonly model: 'workspace';
  name: string;
  description: string;
+  variables: EnvironmentVariable[];
 }

 export interface EnvironmentVariable {
--- a/src-web/lib/theme/theme.ts
+++ b/src-web/lib/theme/theme.ts
@@ -40,9 +40,10 @@ export const appThemeVariants: AppThemeColorVariant[] = [
 ];

 export type AppThemeLayer = 'root' | 'sidebar' | 'titlebar' | 'content' | 'above';
+export type AppThemeColors = Record<AppThemeColor, string>;

 export interface AppThemeLayerStyle {
-  colors: Record<AppThemeColor, string>;
+  colors: AppThemeColors;
  blackPoint?: number;
  whitePoint?: number;
 }
--- a/src-web/lib/theme/window.ts
+++ b/src-web/lib/theme/window.ts
@@ -1,24 +1,43 @@
-import type { AppTheme } from './theme';
+import type { AppTheme, AppThemeColors } from './theme';
 import { generateCSS, toTailwindVariable } from './theme';

 export type Appearance = 'dark' | 'light';

+enum Theme {
+  yaak = 'yaak',
+  catppuccin = 'catppuccin',
+}
+
+const themes: Record<Theme, AppThemeColors> = {
+  yaak: {
+    gray: '#6b5b98',
+    red: '#ff417b',
+    orange: '#fd9014',
+    yellow: '#e8d13f',
+    green: '#3fd265',
+    blue: '#219dff',
+    pink: '#ff6dff',
+    violet: '#b176ff',
+  },
+  catppuccin: {
+    gray: 'hsl(240, 23%, 47%)',
+    red: 'hsl(343, 91%, 74%)',
+    orange: 'hsl(23, 92%, 74%)',
+    yellow: 'hsl(41, 86%, 72%)',
+    green: 'hsl(115, 54%, 65%)',
+    blue: 'hsl(217, 92%, 65%)',
+    pink: 'hsl(316, 72%, 75%)',
+    violet: 'hsl(267, 84%, 70%)',
+  },
+};
+
 const darkTheme: AppTheme = {
  name: 'Default Dark',
  appearance: 'dark',
  layers: {
    root: {
      blackPoint: 0.2,
-      colors: {
-        gray: '#6b5b98',
-        red: '#ff417b',
-        orange: '#fd9014',
-        yellow: '#e8d13f',
-        green: '#3fd265',
-        blue: '#219dff',
-        pink: '#ff6dff',
-        violet: '#b176ff',
-      },
+      colors: themes.catppuccin,
    },
  },
 };