Merge pull request #123 from FlowTestAI/ui-improvements

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

Author: jsajal

.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);

pnpm-lock.yaml

@@ -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/graph/compute/requestnode.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') {
@@ -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/index.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/AuthNode.js

@@ -1,31 +1,45 @@
-import React from 'react';
-import { ArrowLeftEndOnRectangleIcon, ArrowRightStartOnRectangleIcon } from '@heroicons/react/24/outline';
+import React, { useState } from 'react';
+import {
+  ArrowLeftEndOnRectangleIcon,
+  ArrowRightStartOnRectangleIcon,
+  Cog8ToothIcon,
+} from '@heroicons/react/24/outline';
+
 import Tippy from '@tippyjs/react';
 import useNavigationStore from 'stores/AppNavBarStore';
 import useCollectionStore from 'stores/CollectionStore';
+import SettingsModal from '../modals/SettingsModal';
 
 const MainFooter = () => {
   const collections = useCollectionStore((state) => state.collections);
   const isNavBarCollapsed = useNavigationStore((state) => state.collapseNavBar);
   const updateNavCollapseState = useNavigationStore((state) => state.setNavCollapseState);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
   return (
     <footer className='flex items-center justify-between px-4 py-3 text-xs'>
-      <label className='swap swap-rotate cursor-pointer py-1'>
-        <input
-          type='checkbox'
-          onClick={(event) => {
-            if (collections.length) {
-              // since default is false for isNavBarCollapsed
-              updateNavCollapseState(!isNavBarCollapsed);
-            } else {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          }}
-        />
-        <ArrowRightStartOnRectangleIcon className='swap-on h-6 w-6' />
-        <ArrowLeftEndOnRectangleIcon className='swap-off h-6 w-6' />
-      </label>
+      <div className='flex items-center justify-between gap-2'>
+        <button onClick={() => setOpenSettingsModal(true)}>
+          <Cog8ToothIcon className='w-6 h-6' />
+        </button>
+        <label className='py-1 cursor-pointer swap swap-rotate'>
+          <input
+            // Overriding styles as Daisy UI input and React Hook form's input were conflicting
+            className='!focus:outline-none !focus:ring-0 !appearance-none !border-0 !bg-transparent !bg-none !outline-none'
+            type='checkbox'
+            onClick={(event) => {
+              if (collections.length) {
+                // since default is false for isNavBarCollapsed
+                updateNavCollapseState(!isNavBarCollapsed);
+              } else {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            }}
+          />
+          <ArrowRightStartOnRectangleIcon className='w-6 h-6 swap-on' />
+          <ArrowLeftEndOnRectangleIcon className='w-6 h-6 swap-off' />
+        </label>
+      </div>
       <div className='flex items-center justify-between gap-4 font-semibold'>
         <Tippy content='External Link' placement='top'>
           <a href='https://github.com/FlowTestAI/FlowTest' target='_blank' rel='noreferrer' className='link'>
@@ -62,6 +76,7 @@ const MainFooter = () => {
           </a>
         </Tippy>
       </div>
+      <SettingsModal closeFn={() => setOpenSettingsModal(false)} open={openSettingsModal} />
     </footer>
   );
 };