Better import flow

src-tauri/src/notifications.rs

@@ -1,7 +1,7 @@
 use std::time::SystemTime;
 
 use chrono::{DateTime, Duration, Utc};
-use log::{debug, info};
+use log::debug;
 use reqwest::Method;
 use serde::{Deserialize, Serialize};
 use tauri::{AppHandle, Manager};
@@ -80,9 +80,7 @@ impl YaakNotifier {
             .await
             .map_err(|e| e.to_string())?;
 
-        let age = notification
-            .timestamp
-            .signed_duration_since(Utc::now());
+        let age = notification.timestamp.signed_duration_since(Utc::now());
         let seen = get_kv(app).await?;
         if seen.contains(&notification.id) || (age > Duration::days(2)) {
             debug!("Already seen notification {}", notification.id);

src-web/components/BinaryFileEditor.tsx

@@ -1,4 +1,3 @@
-import { open } from '@tauri-apps/plugin-dialog';
 import mime from 'mime';
 import { useKeyValue } from '../hooks/useKeyValue';
 import type { HttpRequest } from '../lib/models';
@@ -6,6 +5,7 @@ import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { InlineCode } from './core/InlineCode';
 import { HStack, VStack } from './core/Stacks';
+import { SelectFile } from './SelectFile';
 
 type Props = {
   requestId: string;
@@ -28,33 +28,17 @@ export function BinaryFileEditor({
     fallback: false,
   });
 
-  const handleClick = async () => {
+  const handleChange = async (filePath: string | null) => {
     await ignoreContentType.set(false);
-    const selected = await open({
-      title: 'Select File',
-      multiple: false,
-    });
-    if (selected == null) {
-      return;
-    }
-    onChange({ filePath: selected.path });
+    onChange({ filePath: filePath ?? undefined });
   };
 
-  const filePath = typeof body.filePath === 'string' ? body.filePath : undefined;
+  const filePath = typeof body.filePath === 'string' ? body.filePath : null;
   const mimeType = mime.getType(filePath ?? '') ?? 'application/octet-stream';
 
   return (
     <VStack space={2}>
-      <HStack space={2}>
-        <Button variant="border" color="secondary" size="sm" onClick={handleClick}>
-          Choose File
-        </Button>
-        <div className="text-sm font-mono truncate rtl pr-3 text-fg">
-          {/* Special character to insert ltr text in rtl element without making things wonky */}
-          &#x200E;
-          {filePath ?? 'Select File'}
-        </div>
-      </HStack>
+      <SelectFile onChange={handleChange} filePath={filePath} />
       {filePath != null && mimeType !== contentType && !ignoreContentType.value && (
         <Banner className="mt-3 !py-5">
           <div className="mb-4 text-center">

src-web/components/ImportDataDialog.tsx

@@ -1,15 +1,15 @@
-import { VStack } from './core/Stacks';
-import { Button } from './core/Button';
 import React, { useState } from 'react';
-import { Banner } from './core/Banner';
-import { Icon } from './core/Icon';
+import { Button } from './core/Button';
+import { VStack } from './core/Stacks';
+import { SelectFile } from './SelectFile';
 
 interface Props {
-  importData: () => Promise<void>;
+  importData: (filePath: string) => Promise<void>;
 }
 
 export function ImportDataDialog({ importData }: Props) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [filePath, setFilePath] = useState<string | null>(null);
   return (
     <VStack space={5} className="pb-4">
       <VStack space={1}>
@@ -18,27 +18,32 @@ export function ImportDataDialog({ importData }: Props) {
           <li>Postman Collection v2, v2.1</li>
           <li>Insomnia v4+</li>
           <li>Swagger 2.0</li>
-          <li>Curl commands</li>
+          <li>
+            Curl commands <em className="text-fg-subtle">(or paste into URL)</em>
+          </li>
         </ul>
-        <Banner className="mt-3 flex items-center gap-2">
-          <Icon icon="magicWand" />
-          Paste any Curl command into URL bar
-        </Banner>
       </VStack>
-      <Button
-        color="primary"
-        isLoading={isLoading}
-        onClick={async () => {
-          setIsLoading(true);
-          try {
-            await importData();
-          } finally {
-            setIsLoading(false);
-          }
-        }}
-      >
-        {isLoading ? 'Importing' : 'Select File'}
-      </Button>
+      <VStack space={2}>
+        <SelectFile filePath={filePath} onChange={setFilePath} />
+        {filePath && (
+          <Button
+            color="primary"
+            disabled={!filePath || isLoading}
+            isLoading={isLoading}
+            size="sm"
+            onClick={async () => {
+              setIsLoading(true);
+              try {
+                await importData(filePath);
+              } finally {
+                setIsLoading(false);
+              }
+            }}
+          >
+            {isLoading ? 'Importing' : 'Import'}
+          </Button>
+        )}
+      </VStack>
     </VStack>
   );
 }

src-web/components/SelectFile.tsx

@@ -0,0 +1,31 @@
+import { open } from '@tauri-apps/plugin-dialog';
+import { Button } from './core/Button';
+import { HStack } from './core/Stacks';
+
+interface Props {
+  onChange: (filePath: string | null) => void;
+  filePath: string | null;
+}
+
+export function SelectFile({ onChange, filePath }: Props) {
+  const handleClick = async () => {
+    const selected = await open({
+      title: 'Select File',
+      multiple: false,
+    });
+    if (selected == null) onChange(null);
+    else onChange(selected.path);
+  };
+  return (
+    <HStack space={2}>
+      <Button variant="border" color="secondary" size="sm" onClick={handleClick}>
+        Choose File
+      </Button>
+      <div className="text-sm font-mono truncate rtl pr-3 text-fg">
+        {/* Special character to insert ltr text in rtl element without making things wonky */}
+        &#x200E;
+        {filePath ?? 'No file selected'}
+      </div>
+    </HStack>
+  );
+}

src-web/hooks/useImportData.tsx

@@ -1,16 +1,15 @@
 import { useMutation } from '@tanstack/react-query';
-import { open } from '@tauri-apps/plugin-dialog';
 import { Button } from '../components/core/Button';
 import { FormattedError } from '../components/core/FormattedError';
 import { VStack } from '../components/core/Stacks';
 import { useDialog } from '../components/DialogContext';
+import { ImportDataDialog } from '../components/ImportDataDialog';
 import type { Environment, Folder, GrpcRequest, HttpRequest, Workspace } from '../lib/models';
 import { count } from '../lib/pluralize';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAlert } from './useAlert';
 import { useAppRoutes } from './useAppRoutes';
-import { ImportDataDialog } from '../components/ImportDataDialog';
 
 export function useImportData() {
   const routes = useAppRoutes();
@@ -18,15 +17,7 @@ export function useImportData() {
   const alert = useAlert();
   const activeWorkspaceId = useActiveWorkspaceId();
 
-  const importData = async (): Promise<boolean> => {
-    const selected = await open({
-      filters: [{ name: 'Export File', extensions: ['json', 'yaml', 'sh', 'txt'] }],
-      multiple: false,
-    });
-    if (selected == null) {
-      return false;
-    }
-
+  const importData = async (filePath: string): Promise<boolean> => {
     const imported: {
       workspaces: Workspace[];
       environments: Environment[];
@@ -34,7 +25,7 @@ export function useImportData() {
       httpRequests: HttpRequest[];
       grpcRequests: GrpcRequest[];
     } = await invokeCmd('cmd_import_data', {
-      filePath: selected.path,
+      filePath,
       workspaceId: activeWorkspaceId,
     });
 
@@ -93,9 +84,9 @@ export function useImportData() {
           title: 'Import Data',
           size: 'sm',
           render: ({ hide }) => {
-            const importAndHide = async () => {
+            const importAndHide = async (filePath: string) => {
               try {
-                const didImport = await importData();
+                const didImport = await importData(filePath);
                 if (!didImport) {
                   return;
                 }