Insomnia YAML and loading state on import

plugins/importer-insomnia/package-lock.json

@@ -6,7 +6,21 @@
   "packages": {
     "": {
       "name": "importer-insomnia",
-      "version": "0.0.1"
+      "version": "0.0.1",
+      "dependencies": {
+        "yaml": "^2.4.2"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+      "integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
     }
   }
 }

plugins/importer-insomnia/package.json

@@ -1,4 +1,7 @@
 {
   "name": "importer-insomnia",
-  "version": "0.0.1"
+  "version": "0.0.1",
+  "dependencies": {
+    "yaml": "^2.4.2"
+  }
 }

plugins/importer-insomnia/src/index.ts

@@ -5,6 +5,7 @@ import {
   HttpRequest,
   Workspace,
 } from '../../../src-web/lib/models';
+import { parse as parseYaml } from 'yaml';
 
 type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
 
@@ -17,12 +18,15 @@ export interface ExportResources {
 }
 
 export function pluginHookImport(contents: string) {
-  let parsed;
+  let parsed: any;
+
   try {
     parsed = JSON.parse(contents);
-  } catch (e) {
-    return;
-  }
+  } catch (e) {}
+
+  try {
+    parsed = parseYaml(contents);
+  } catch (e) {}
 
   if (!isJSObject(parsed)) return;
   if (!Array.isArray(parsed.resources)) return;

src-web/components/ImportDataDialog.tsx

@@ -0,0 +1,38 @@
+import { VStack } from './core/Stacks';
+import { Button } from './core/Button';
+import { useState } from 'react';
+
+interface Props {
+  importData: () => Promise<void>;
+}
+
+export function ImportDataDialog({ importData }: Props) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  return (
+    <VStack space={5} className="pb-4">
+      <VStack space={1}>
+        <p>Supported Formats:</p>
+        <ul className="list-disc pl-5">
+          <li>Postman Collection v2/v2.1</li>
+          <li>Insomnia</li>
+          <li>Curl command(s)</li>
+        </ul>
+      </VStack>
+      <Button
+        size="sm"
+        color="primary"
+        isLoading={isLoading}
+        onClick={async () => {
+          setIsLoading(true);
+          try {
+            await importData();
+          } finally {
+            setIsLoading(false);
+          }
+        }}
+      >
+        {isLoading ? 'Importing' : 'Select File'}
+      </Button>
+    </VStack>
+  );
+}

src-web/components/core/Button.tsx

@@ -118,13 +118,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       ref={buttonRef}
       type={type}
       className={classes}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       onClick={onClick}
       title={fullTitle}
       {...props}
     >
       {isLoading ? (
-        <Icon icon="update" size={size} className="animate-spin mr-1" />
+        <Icon icon="refresh" size={size} className="animate-spin mr-1" />
       ) : leftSlot ? (
         <div className="mr-1">{leftSlot}</div>
       ) : null}

src-web/hooks/useImportData.tsx

@@ -9,6 +9,7 @@ import { count } from '../lib/pluralize';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAlert } from './useAlert';
 import { useAppRoutes } from './useAppRoutes';
+import { ImportDataDialog } from '../components/ImportDataDialog';
 
 export function useImportData() {
   const routes = useAppRoutes();
@@ -35,6 +36,7 @@ export function useImportData() {
       filePath: selected.path,
       workspaceId: activeWorkspaceId,
     });
+
     const importedWorkspace = imported.workspaces[0];
 
     dialog.show({
@@ -82,32 +84,16 @@ export function useImportData() {
           title: 'Import Data',
           size: 'sm',
           render: ({ hide }) => {
-            return (
-              <VStack space={5} className="pb-4">
-                <VStack space={1}>
-                  <p>Supported Formats:</p>
-                  <ul className="list-disc pl-5">
-                    <li>Postman Collection v2/v2.1</li>
-                    <li>Insomnia</li>
-                  </ul>
-                </VStack>
-                <Button
-                  size="sm"
-                  color="primary"
-                  onClick={async () => {
-                    try {
-                      await importData();
-                      resolve();
-                    } catch (err) {
-                      reject(err);
-                    }
-                    hide();
-                  }}
-                >
-                  Select File
-                </Button>
-              </VStack>
-            );
+            const importAndHide = async () => {
+              try {
+                await importData();
+                resolve();
+              } catch (err) {
+                reject(err);
+              }
+              hide();
+            };
+            return <ImportDataDialog importData={importAndHide} />;
           },
         });
       });