feat: Adding new settings modal, beautify logs side sheet and ability to upload flow scans

.changeset/honest-pandas-appear.md

@@ -0,0 +1,5 @@
+---
+'flowtestai': minor
+---
+
+beautify logs sidesheet and ability to upload flow scans

package.json

@@ -45,6 +45,7 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.7.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -53,6 +54,7 @@
     "autoprefixer": "^10.4.18",
     "axios": "^1.5.1",
     "codemirror": "^6.0.1",
+    "date-fns": "^3.6.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "immer": "^10.0.4",
@@ -65,6 +67,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",
     "react-edit-text": "^5.1.1",
+    "react-hook-form": "^7.52.0",
     "react-icons": "^5.0.1",
     "react-json-view-lite": "^1.4.0",
     "react-perfect-scrollbar": "^1.5.8",
@@ -79,10 +82,12 @@
     "tailwindcss": "^3.4.1",
     "typescript": "4",
     "web-vitals": "^2.1.4",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "20.11.5",
     "daisyui": "^4.7.2",

packages/flowtest-cli/graph/compute/requestnode.js

@@ -48,6 +48,11 @@ class requestNode extends Node {
 
     const res = await this.runHttpRequest(options);
 
+    if (this.nodeData.requestBody.type === 'form-data') {
+      // we don't want to send full file value
+      options.data.value = '<BASE64_ENCODED_FILE_DATA>';
+    }
+
     if (res.error) {
       console.log(chalk.red(`   ✕ `) + chalk.dim(`Request failed: ${JSON.stringify(res.error)}`));
       this.logger.add(LogLevel.ERROR, 'HTTP request failed', {

packages/flowtest-electron/src/ipc/collection.js

@@ -340,23 +340,24 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
     }
   });
 
-  ipcMain.handle('renderer:upload-logs', async (event, name, config, logs) => {
+  ipcMain.handle('renderer:upload-logs', async (event, name, config, status, time, logs) => {
     function bytesToBase64(bytes) {
       const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join('');
       return btoa(binString);
     }
 
     try {
       const data = {
-        version: 1,
-        name,
-        scan: logs,
+        scan_metadata: {
+          version: 1,
+          name,
+          status,
+          time,
+        },
+        scan: bytesToBase64(new TextEncoder().encode(JSON.stringify(logs))),
       };
       try {
-        const response = await axiosClient(config.hostUrl, config.accessId, config.accessKey).post(
-          '/upload',
-          bytesToBase64(new TextEncoder().encode(JSON.stringify(data))),
-        );
+        const response = await axiosClient(config.hostUrl, config.accessId, config.accessKey).post('/upload', data);
         return {
           upload: 'success',
           url: `${config.hostUrl}/scan/${response.data.data[0].id}`,

packages/flowtest-electron/src/ipc/settings.js

@@ -12,7 +12,7 @@ const registerSettingsEventHandlers = (mainWindow) => {
 
   ipcMain.handle('renderer:add-logsyncconfig', async (event, config) => {
     try {
-      settingsStore.addLogSyncConfig(...config);
+      settingsStore.addLogSyncConfig(config.enabled, config.hostUrl, config.accessId, config.accessKey);
       const savedSettings = settingsStore.getAll();
 
       mainWindow.webContents.send('main:saved-settings', savedSettings);

src/components/molecules/flow/graph/compute/requestnode.js

@@ -32,6 +32,10 @@ class requestNode extends Node {
 
     const res = await this.runHttpRequest(options);
 
+    if (this.nodeData.requestBody.type === 'form-data') {
+      options.data.value = '<BASE64_ENCODED_FILE_DATA>';
+    }
+
     if (res.error) {
       this.logger.add(LogLevel.ERROR, 'HTTP request failed', {
         type: 'requestNode',

src/components/molecules/flow/index.js

@@ -194,8 +194,8 @@ const Flow = ({ tab, collectionId }) => {
     return true;
   };
 
-  const onGraphComplete = async (status, logs) => {
-    const response = await uploadGraphRunLogs(tab.name, logs);
+  const onGraphComplete = async (status, time, logs) => {
+    const response = await uploadGraphRunLogs(tab.name, status, time, logs);
     console.log(response);
     setLogs(tab.id, logs, response);
     if (status == 'Success') {
@@ -243,7 +243,7 @@ const Flow = ({ tab, collectionId }) => {
       >
         <Background variant='dots' gap={12} size={1} />
         <Controls
-          className='flex border-cyan-900 shadow-none'
+          className='flex shadow-none border-cyan-900'
           onFitView={() => setViewport(reactFlowInstance.getViewport())}
         ></Controls>
         <Button
@@ -275,11 +275,13 @@ const Flow = ({ tab, collectionId }) => {
                 'main',
               );
               const result = await g.run();
-              logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
-              await onGraphComplete(result.status, logger.get());
+              const time = Date.now() - startTime;
+              logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+              await onGraphComplete(result.status, time, logger.get());
             } catch (error) {
-              logger.add(LogLevel.INFO, `Total time: ${Date.now() - startTime} ms`);
-              await onGraphComplete('Failed', logger.get());
+              const time = Date.now() - startTime;
+              logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+              await onGraphComplete('Failed', time, logger.get());
               toast.error(`Internal error running graph`);
               runnableEdges(false);
             }

src/components/molecules/flow/nodes/AuthNode.js

@@ -62,7 +62,7 @@ const AuthNode = ({ id, data }) => {
               leaveFrom='opacity-100'
               leaveTo='opacity-0'
             >
-              <Listbox.Options className='absolute w-full py-1 mt-1 overflow-auto text-base bg-white max-h-60 focus:outline-none'>
+              <Listbox.Options className='absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white max-h-60 focus:outline-none'>
                 <Listbox.Option
                   className={({ active }) =>
                     `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${
@@ -118,7 +118,7 @@ const AuthNode = ({ id, data }) => {
             <TextEditor
               placeHolder={`Password`}
               onChangeHandler={(value) => handleChange(value, 'password')}
-              name={'username'}
+              name={'password'}
               value={data.password ? data.password : ''}
               completionOptions={getActiveVariables()}
               styles={'w-full'}

src/components/molecules/flow/nodes/NestedFlowNode.js

@@ -63,7 +63,7 @@ const NestedFlowNode = ({ id, data }) => {
               }}
               name='flow'
               value={data.relativePath ? data.relativePath : ''}
-              className='h-12 max-w-48 cursor-default rounded border border-cyan-950 bg-background-light p-2 outline-none'
+              className='h-12 p-2 border rounded outline-none cursor-default max-w-48 border-cyan-950 bg-background-light'
             >
               <option key='None' value=''>
                 Select a flow