Add curl banner to import dialog

src-web/components/ImportDataDialog.tsx

@@ -1,6 +1,8 @@
 import { VStack } from './core/Stacks';
 import { Button } from './core/Button';
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { Banner } from './core/Banner';
+import { Icon } from './core/Icon';
 
 interface Props {
   importData: () => Promise<void>;
@@ -11,15 +13,17 @@ export function ImportDataDialog({ importData }: Props) {
   return (
     <VStack space={5} className="pb-4">
       <VStack space={1}>
-        <p>Supported Formats:</p>
         <ul className="list-disc pl-5">
           <li>Postman Collection v2+</li>
           <li>Insomnia v4+</li>
-          <li>Curl command(s)</li>
+          <li>Curl commands</li>
         </ul>
+        <Banner className="mt-3 flex items-center gap-2">
+          <Icon icon="magicWand" />
+          Paste any Curl command into URL bar
+        </Banner>
       </VStack>
       <Button
-        size="sm"
         color="primary"
         isLoading={isLoading}
         onClick={async () => {

src-web/hooks/useImportData.tsx

@@ -17,13 +17,13 @@ export function useImportData() {
   const alert = useAlert();
   const activeWorkspaceId = useActiveWorkspaceId();
 
-  const importData = async () => {
+  const importData = async (): Promise<boolean> => {
     const selected = await open({
       filters: [{ name: 'Export File', extensions: ['json', 'yaml', 'sh', 'txt'] }],
       multiple: false,
     });
     if (selected == null) {
-      return;
+      return false;
     }
 
     const imported: {
@@ -71,6 +71,8 @@ export function useImportData() {
         environmentId: imported.environments[0]?.id,
       });
     }
+
+    return true;
   };
 
   return useMutation({
@@ -86,12 +88,16 @@ export function useImportData() {
           render: ({ hide }) => {
             const importAndHide = async () => {
               try {
-                await importData();
+                const didImport = await importData();
+                if (!didImport) {
+                  return;
+                }
                 resolve();
               } catch (err) {
                 reject(err);
+              } finally {
+                hide();
               }
-              hide();
             };
             return <ImportDataDialog importData={importAndHide} />;
           },