Context menu, logs in DevTools, export, tweaks

src-web/hooks/useCreateEnvironment.ts

@@ -20,7 +20,7 @@ export function useCreateEnvironment() {
     mutationFn: async () => {
       const name = await prompt({
         name: 'name',
-        title: 'Create Environment',
+        title: 'New Environment',
         label: 'Name',
         defaultValue: 'My Environment',
       });

src-web/hooks/useExportData.tsx

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { OpenDialogOptions } from '@tauri-apps/api/dialog';
+import { open } from '@tauri-apps/api/dialog';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+
+const openArgs: OpenDialogOptions = {
+  directory: true,
+  multiple: false,
+  title: 'Select Export Folder',
+};
+
+export function useExportData() {
+  const workspaceId = useActiveWorkspaceId();
+
+  return useMutation({
+    mutationFn: async () => {
+      const selected = await open(openArgs);
+      if (selected == null) {
+        return;
+      }
+
+      const rootDir = Array.isArray(selected) ? selected[0] : selected;
+      if (rootDir == null) {
+        return;
+      }
+
+      await invoke('export_data', { workspaceId, rootDir });
+    },
+  });
+}

src-web/hooks/useImportData.tsx

@@ -0,0 +1,70 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { OpenDialogOptions } from '@tauri-apps/api/dialog';
+import { open } from '@tauri-apps/api/dialog';
+import { Button } from '../components/core/Button';
+import { VStack } from '../components/core/Stacks';
+import { useDialog } from '../components/DialogContext';
+import type { Environment, Folder, HttpRequest, Workspace } from '../lib/models';
+import { count } from '../lib/pluralize';
+import { useAppRoutes } from './useAppRoutes';
+
+const openArgs: OpenDialogOptions = {
+  filters: [{ name: 'Export File', extensions: ['json', 'yaml'] }],
+  multiple: false,
+};
+
+export function useImportData() {
+  const routes = useAppRoutes();
+  const dialog = useDialog();
+
+  return useMutation({
+    mutationFn: async () => {
+      const selected = await open(openArgs);
+      if (selected == null || selected.length === 0) {
+        return;
+      }
+
+      const imported: {
+        workspaces: Workspace[];
+        environments: Environment[];
+        folders: Folder[];
+        requests: HttpRequest[];
+      } = await invoke('import_data', {
+        filePaths: Array.isArray(selected) ? selected : [selected],
+      });
+      const importedWorkspace = imported.workspaces[0];
+
+      dialog.show({
+        title: 'Import Complete',
+        size: 'sm',
+        hideX: true,
+        render: ({ hide }) => {
+          const { workspaces, environments, folders, requests } = imported;
+          return (
+            <VStack space={3}>
+              <ul className="list-disc pl-6">
+                <li>{count('Workspace', workspaces.length)}</li>
+                <li>{count('Environment', environments.length)}</li>
+                <li>{count('Folder', folders.length)}</li>
+                <li>{count('Request', requests.length)}</li>
+              </ul>
+              <div>
+                <Button className="ml-auto" onClick={hide} color="primary">
+                  Done
+                </Button>
+              </div>
+            </VStack>
+          );
+        },
+      });
+
+      if (importedWorkspace != null) {
+        routes.navigate('workspace', {
+          workspaceId: importedWorkspace.id,
+          environmentId: imported.environments[0]?.id,
+        });
+      }
+    },
+  });
+}

src-web/hooks/useSendFolder.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { trackEvent } from '../lib/analytics';
+import { useSendAnyRequest } from './useSendAnyRequest';
+
+export function useSendManyRequests() {
+  const sendAnyRequest = useSendAnyRequest();
+  return useMutation<void, string, string[]>({
+    mutationFn: async (requestIds: string[]) => {
+      for (const id of requestIds) {
+        sendAnyRequest.mutate(id);
+      }
+    },
+    onSettled: () => trackEvent('http_request', 'send'),
+  });
+}