integrate end to end the upload scan flow

jsajal · jsajal · commit 894c6c9ae159 · 2024-06-20T15:58:21.000-07:00
diff --git a/packages/flowtest-cli/bin/index.js b/packages/flowtest-cli/bin/index.js
@@ -45,7 +45,7 @@ const argv = yargs(hideBin(process.argv))
         })
         .option('timeout', {
           alias: 't',
-          describe: 'timeout for graph run in ms',
+          describe: 'timeout for flow run in ms',
           demandOption: false,
           type: 'number',
         })
@@ -78,7 +78,7 @@ const argv = yargs(hideBin(process.argv))
             argv.env ? getEnvVariables(argv.env) : {},
             logger,
           );
-          console.log(chalk.yellow('Running Graph \n'));
+          console.log(chalk.yellow('Running Flow \n'));
           if (flowData.nodes.find((n) => n.type === 'complexNode')) {
             console.log(
               chalk.blue(
@@ -89,9 +89,9 @@ const argv = yargs(hideBin(process.argv))
           const result = await g.run();
           console.log('\n');
           if (result.status === 'Success') {
-            console.log(chalk.bold('Graph Run: ') + chalk.green(`   ✓ `) + chalk.dim(result.status));
+            console.log(chalk.bold('Flow Run: ') + chalk.green(`   ✓ `) + chalk.dim(result.status));
           } else {
-            console.log(chalk.bold('Graph Run: ') + chalk.red(`   ✕ `) + chalk.dim(result.status));
+            console.log(chalk.bold('Flow Run: ') + chalk.red(`   ✕ `) + chalk.dim(result.status));
           }
           logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
           console.log(chalk.bold('Total Time: ') + chalk.dim(`${Date.now() - startTime} ms`));
@@ -108,18 +108,18 @@ const argv = yargs(hideBin(process.argv))
                 '/upload',
                 bytesToBase64(new TextEncoder().encode(JSON.stringify(data))),
               );
-              console.log(chalk.bold('Build Scan: ') + chalk.dim(`${baseUrl}/scan/${response.data.data[0].id}`));
+              console.log(chalk.bold('Flow Scan: ') + chalk.dim(`${baseUrl}/scan/${response.data.data[0].id}`));
             } catch (error) {
               if (error?.response) {
-                if (error.response?.status === 403 || error.response?.status === 429) {
+                if (error.response?.status >= 400 && error.response?.status < 500) {
                   console.log(chalk.red(`   ${JSON.stringify(error.response?.data)}`));
                 }
 
                 if (error.response?.status === 500) {
                   console.log(chalk.red('   Internal Server Error'));
                 }
               }
-              console.log(chalk.red(`   ✕ `) + chalk.dim('Unable to upload build scan'));
+              console.log(chalk.red(`   ✕ `) + chalk.dim('Unable to upload flow scan'));
             }
           }
 
diff --git a/packages/flowtest-electron/electron-main.js b/packages/flowtest-electron/electron-main.js
@@ -5,6 +5,7 @@ const url = require('url');
 const template = require('./electron-menu');
 const Watcher = require('./src/app/watcher');
 const registerRendererEventHandlers = require('./src/ipc/collection');
+const registerSettingsEventHandlers = require('./src/ipc/settings');
 
 let mainWindow;
 let watcher;
@@ -59,6 +60,7 @@ app.on('ready', async () => {
   watcher = new Watcher();
 
   registerRendererEventHandlers(mainWindow, watcher);
+  registerSettingsEventHandlers(mainWindow);
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common
diff --git a/packages/flowtest-electron/src/ipc/collection.js b/packages/flowtest-electron/src/ipc/collection.js
@@ -361,25 +361,25 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
         };
       } catch (error) {
         if (error?.response) {
-          if (error.response?.status === 403 || error.response?.status === 429) {
+          if (error.response?.status >= 400 && error.response?.status < 500) {
             return {
               upload: 'fail',
-              message: 'Unable to upload build scan',
+              message: 'Unable to upload flow scan',
               reason: `${JSON.stringify(error.response?.data)}`,
             };
           }
 
           if (error.response?.status === 500) {
             return {
               upload: 'fail',
-              message: 'Unable to upload build scan',
+              message: 'Unable to upload flow scan',
               reason: 'Internal Server Error',
             };
           }
         }
         return {
           upload: 'fail',
-          message: 'Unable to upload build scan',
+          message: 'Unable to upload flow scan',
         };
       }
     } catch (error) {
diff --git a/src/components/molecules/flow/index.js b/src/components/molecules/flow/index.js
@@ -27,7 +27,7 @@ import Button from 'components/atoms/common/Button';
 import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
 import GraphLogger, { LogLevel } from './graph/GraphLogger';
 import Mousetrap from 'mousetrap';
-import useSettingsStore from 'stores/SettingsStore';
+import { uploadGraphRunLogs } from 'service/collection';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
@@ -88,7 +88,6 @@ const Flow = ({ tab, collectionId }) => {
     useCanvasStore(selector);
 
   const setLogs = useTabStore((state) => state.updateFlowTestLogs);
-  const logSyncConfig = useSettingsStore((state) => state.logSyncConfig);
 
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
 
@@ -195,8 +194,10 @@ const Flow = ({ tab, collectionId }) => {
     return true;
   };
 
-  const onGraphComplete = (status, logs) => {
-    setLogs(tab.id, logs);
+  const onGraphComplete = async (status, logs) => {
+    const response = await uploadGraphRunLogs(tab.name, logs);
+    console.log(response);
+    setLogs(tab.id, logs, response);
     if (status == 'Success') {
       toast.success(`FlowTest Run Success!`);
     } else if (status == 'Failed') {
@@ -275,10 +276,10 @@ const Flow = ({ tab, collectionId }) => {
               );
               const result = await g.run();
               logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
-              onGraphComplete(result.status, logger.get());
+              await onGraphComplete(result.status, logger.get());
             } catch (error) {
               logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
-              onGraphComplete('Failed', logger.get());
+              await onGraphComplete('Failed', logger.get());
               toast.error(`Internal error running graph`);
               runnableEdges(false);
             }
diff --git a/src/components/molecules/headers/TabPanelHeader.js b/src/components/molecules/headers/TabPanelHeader.js
@@ -16,6 +16,7 @@ import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
 import { JsonView, allExpanded, collapseAllNested, darkStyles, defaultStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
 import { LogLevel } from '../flow/graph/GraphLogger';
+import { ShieldCheckIcon, BarsArrowUpIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 const TabPanelHeader = () => {
   const focusTabId = useTabStore((state) => state.focusTabId);
@@ -111,6 +112,31 @@ const TabPanelHeader = () => {
     }
   };
 
+  // this gives forced reflow warning?
+  const renderFlowScan = (flowScan) => {
+    if (flowScan.upload === 'disabled') {
+      return (
+        <div className='flex flex-col items-start'>
+          <Tippy content={flowScan.message} placement='top'>
+            <BarsArrowUpIcon className='h-4 w-4' />
+            {'Activate Flow Scan'}
+          </Tippy>
+        </div>
+      );
+    } else if (flowScan.upload === 'success') {
+      <div className='flex flex-col items-start'>
+        <ShieldCheckIcon className='h-4 w-4' />
+        {flowScan.url}
+      </div>;
+    } else if (flowScan.upload === 'fail') {
+      <div className='flex flex-col items-start'>
+        <ExclamationTriangleIcon className='h-4 w-4' />
+        {flowScan.message}
+        {flowScan?.reason}
+      </div>;
+    }
+  };
+
   return (
     <>
       {focusTab ? (
@@ -134,7 +160,7 @@ const TabPanelHeader = () => {
               <div className='flex h-12 items-center justify-center'>
                 <SaveFlowModal tab={focusTab} />
               </div>
-              {focusTab.type === OBJ_TYPES.flowtest && focusTab.logs && focusTab.logs.length != 0 ? (
+              {focusTab.type === OBJ_TYPES.flowtest && focusTab.run.logs && focusTab.run.logs.length != 0 ? (
                 <div>
                   <Button
                     id='graph-logs-side-sheet'
@@ -178,7 +204,8 @@ const TabPanelHeader = () => {
                       className='drawer-overlay'
                     ></label>
                     <ul className='menu min-h-full bg-base-200 p-4 text-base-content'>
-                      {focusTab.logs.map((item, index) => (
+                      <li key='scan'>{renderFlowScan(focusTab.run.scan)}</li>
+                      {focusTab.run.logs.map((item, index) => (
                         <li key={index}>{renderLog(item)}</li>
                       ))}
                     </ul>
diff --git a/src/service/collection.js b/src/service/collection.js
@@ -8,6 +8,7 @@ import { useTabStore } from 'stores/TabStore';
 import useCanvasStore from 'stores/CanvasStore';
 import { initFlowData } from 'components/molecules/flow/utils';
 import { cloneDeep } from 'lodash';
+import useSettingsStore from 'stores/SettingsStore';
 
 export const createCollection = (openAPISpecFilePath, collectionFolderPath) => {
   const { ipcRenderer } = window;
@@ -401,3 +402,23 @@ export const deleteFlowTest = (pathname, collectionId) => {
     return Promise.reject(new Error('Error deleting flowtest'));
   }
 };
+
+export const uploadGraphRunLogs = async (name, logs) => {
+  try {
+    const { ipcRenderer } = window;
+    const logSyncConfig = useSettingsStore.getState().logSyncConfig;
+    if (logSyncConfig.enabled) {
+      return await ipcRenderer.invoke('renderer:upload-logs', name, logSyncConfig, logs);
+    } else {
+      return {
+        upload: 'disabled',
+        message: 'Enable flow scans today to get more value out of your APIs',
+      };
+    }
+  } catch (error) {
+    return {
+      upload: 'fail',
+      message: 'Unable to upload flow scan',
+    };
+  }
+};
diff --git a/src/stores/TabStore.js b/src/stores/TabStore.js
@@ -27,7 +27,7 @@ export const useTabStore = create((set, get) => ({
       name: flowtest.name,
       pathname: flowtest.pathname,
       flowData: flowtest.flowData,
-      logs: [],
+      run: {},
     };
 
     set((state) => ({ tabs: [...state.tabs, newTab] }));
@@ -81,12 +81,15 @@ export const useTabStore = create((set, get) => ({
       }),
     );
   },
-  updateFlowTestLogs: (tabId, logs) => {
+  updateFlowTestLogs: (tabId, logs, flowScan) => {
     set(
       produce((state) => {
         const existingTab = state.tabs.find((t) => t.id === tabId);
         if (existingTab) {
-          existingTab.logs = logs;
+          existingTab.run = {
+            scan: flowScan,
+            logs,
+          };
         }
       }),
     );
