Merge pull request #119 from FlowTestAI/windows-compliant

feat: make app platform agnostic to allow windows support

Author: jsajal

.changeset/silent-sheep-shake.md

@@ -0,0 +1,5 @@
+---
+'flowtestai': minor
+---
+
+make app platform agnostic to allow windows platform support

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-import": "^2.29.1",
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
+    "mousetrap": "^1.6.5",
     "notistack": "^3.0.1",
     "postcss": "^8.4.35",
     "react": "^18.2.0",

packages/flowtest-cli/graph/Graph.js

@@ -127,6 +127,7 @@ class Graph {
         this.logger.add(LogLevel.INFO, '', { type: 'delayNode', data: { delay } });
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }
 
@@ -136,6 +137,7 @@ class Graph {
         this.auth = node.data.type ? aNode.evaluate() : undefined;
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }
 
@@ -170,6 +172,7 @@ class Graph {
         } else {
           result = {
             status: 'Success',
+            data: prevNodeOutputData,
           };
         }
       }
@@ -194,6 +197,7 @@ class Graph {
         }
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }
 

packages/flowtest-electron/package.json

@@ -15,7 +15,8 @@
     "start": "electron .",
     "test": "jest",
     "pack": "NODE_ENV=production electron-builder --dir",
-    "dist": "NODE_ENV=production electron-builder"
+    "dist:mac": "NODE_ENV=production electron-builder --mac",
+    "dist:win": "SET NODE_ENV=production & electron-builder --win"
   },
   "author": "Sajal Jain <jsajal1993@gmail.com>",
   "license": "MIT",

packages/flowtest-electron/preload.js

@@ -1,10 +1,12 @@
 const { ipcRenderer, contextBridge } = require('electron');
 const path = require('path');
+const { isMacOS } = require('./src/utils/filemanager/filesystem');
 
 contextBridge.exposeInMainWorld('ipcRenderer', {
   invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
   on: (channel, handler) => ipcRenderer.on(channel, (event, ...args) => handler(...args)),
   join: (...args) => path.join(...args),
   relative: (...args) => path.relative(...args),
   dirname: (...args) => path.dirname(...args),
+  isMacOs: isMacOS,
 });

packages/flowtest-electron/src/utils/filemanager/createdirectory.js

@@ -1,23 +1,24 @@
 const fs = require('fs');
-const { isDirectory, concatRoute, pathExists } = require('./filesystem');
+const { isDirectory, pathExists } = require('./filesystem');
+const path = require('path');
 
-const createDirectory = (name, path) => {
+const createDirectory = (name, basePath) => {
   // now validate the name and path
   if (!name) {
     throw new Error('Directory name is required');
   }
 
-  if (!path) {
+  if (!basePath) {
     throw new Error('Directory path is required');
   }
 
   // check if the directory exists
-  if (!isDirectory(path)) {
+  if (!isDirectory(basePath)) {
     throw new Error('Path is not a directory');
   }
 
   // check if the directory already exists
-  const directoryPath = concatRoute(path, name);
+  const directoryPath = path.join(basePath, name);
 
   if (isDirectory(directoryPath)) {
     throw new Error('The directory already exists');

packages/flowtest-electron/src/utils/filemanager/filesystem.js

@@ -25,25 +25,6 @@ const pathExists = (path) => {
   }
 };
 
-function trim(text) {
-  return String(text).replace(/^\/|\/$/g, '');
-}
-
-/**
- * Concatenate the given paths to one single path
- *
- * @param   {...string} segments
- * @returns {string}
- */
-const concatRoute = (...segments) => {
-  let path = segments
-    .filter((value) => value && String(value).length > 0)
-    .map((segment) => '/' + trim(segment))
-    .join('');
-
-  return '/' + trim(path.replace(/(\/)+/g, '/'));
-};
-
 const getSubdirectoriesFromRoot = (rootPath, pathname) => {
   // convert to unix style path
   pathname = slash(pathname);
@@ -68,6 +49,8 @@ const isMacOS = () => {
   return process.platform === 'darwin';
 };
 
+const PATH_SEPARATOR = isWindowsOS() ? '\\' : '/';
+
 const slash = (path) => {
   const isExtendedLengthPath = /^\\\\\?\\/.test(path);
 
@@ -78,13 +61,11 @@ const slash = (path) => {
   return path.replace(/\\/g, '/');
 };
 
-const PATH_SEPARATOR = isWindowsOS() ? '\\' : '/';
-
 module.exports = {
   isDirectory,
   pathExists,
-  concatRoute,
   getSubdirectoriesFromRoot,
   getDirectoryName,
+  isMacOS,
   PATH_SEPARATOR,
 };

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { BUTTON_TYPES, OBJ_TYPES } from 'constants/Common';
 import EditEnvVariableModal from '../modals/EditEnvVariableModal';
 import { useKeyPress } from 'reactflow';
 import { saveHandle } from '../modals/SaveFlowModal';
+import Mousetrap from 'mousetrap';
 
 const Env = ({ tab }) => {
   const variables = useEnvStore((state) => state.variables);
@@ -23,45 +24,50 @@ const Env = ({ tab }) => {
   const [editKey, setEditKey] = useState('');
   const [editValue, setEditValue] = useState('');
 
-  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+  //const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+  // Bind Ctrl+S and Cmd+S
+  Mousetrap.bind(['ctrl+s', 'command+s'], function (e) {
+    e.preventDefault();
+    saveHandle(tab);
+    return false;
+  });
 
   return (
     <div className='p-4'>
-      {cmdAndSPressed && saveHandle(tab)}
       <table className='w-full leading-normal'>
         <thead>
-          <tr className='text-xs font-bold tracking-wider text-left uppercase bg-ghost-50 text-ghost-600'>
-            <th className='p-5 border border-ghost-200 max-w-4'>S. No.</th>
-            <th className='p-5 border border-ghost-200 '>Key</th>
-            <th className='p-5 border border-ghost-200'>Value</th>
-            <th className='p-5 border border-ghost-200 max-w-4'>Action</th>
+          <tr className='bg-ghost-50 text-ghost-600 text-left text-xs font-bold uppercase tracking-wider'>
+            <th className='border-ghost-200 max-w-4 border p-5'>S. No.</th>
+            <th className='border-ghost-200 border p-5 '>Key</th>
+            <th className='border-ghost-200 border p-5'>Value</th>
+            <th className='border-ghost-200 max-w-4 border p-5'>Action</th>
           </tr>
         </thead>
         <tbody>
           {Object.entries(variables).map(([key, value], index) => (
-            <tr key={index} className='text-sm border-b border-gray-200 text-ghost-700 hover:bg-ghost-50'>
-              <td className='p-5 whitespace-no-wrap max-w-4'>{index + 1}</td>
-              <td className='p-5 whitespace-no-wrap'>{key}</td>
-              <td className='p-5 whitespace-no-wrap'>{value}</td>
-              <td className='p-5 whitespace-no-wrap max-w-4'>
+            <tr key={index} className='text-ghost-700 hover:bg-ghost-50 border-b border-gray-200 text-sm'>
+              <td className='whitespace-no-wrap max-w-4 p-5'>{index + 1}</td>
+              <td className='whitespace-no-wrap p-5'>{key}</td>
+              <td className='whitespace-no-wrap p-5'>{value}</td>
+              <td className='whitespace-no-wrap max-w-4 p-5'>
                 <div
-                  className='relative inline-block p-2 text-left transition duration-200 ease-out rounded-md cursor-pointer hover:bg-ghost-200'
+                  className='hover:bg-ghost-200 relative inline-block cursor-pointer rounded-md p-2 text-left transition duration-200 ease-out'
                   onClick={() => {
                     setDeleteKey(key);
                     setConfirmActionModalOpen(true);
                   }}
                 >
-                  <TrashIcon className='w-4 h-4' aria-hidden='true' />
+                  <TrashIcon className='h-4 w-4' aria-hidden='true' />
                 </div>
                 <div
-                  className='relative inline-block p-2 text-left transition duration-200 ease-out rounded-md cursor-pointer hover:bg-ghost-200'
+                  className='hover:bg-ghost-200 relative inline-block cursor-pointer rounded-md p-2 text-left transition duration-200 ease-out'
                   onClick={() => {
                     setEditKey(key);
                     setEditValue(value);
                     setEditVariableModalOpen(true);
                   }}
                 >
-                  <PencilSquareIcon className='w-4 h-4' aria-hidden='true' />
+                  <PencilSquareIcon className='h-4 w-4' aria-hidden='true' />
                 </div>
               </td>
             </tr>
@@ -75,7 +81,7 @@ const Env = ({ tab }) => {
           onClickHandle={() => setAddVariableModalOpen(true)}
           fullWidth={true}
         >
-          <PlusIcon className='w-5 h-5' />
+          <PlusIcon className='h-5 w-5' />
           <span>Add Variable</span>
         </Button>
       </div>

src/components/molecules/environment/index.js

@@ -112,6 +112,7 @@ class Graph {
         this.logger.add(LogLevel.INFO, '', { type: 'delayNode', data: delay });
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }
 
@@ -120,6 +121,7 @@ class Graph {
         this.auth = node.data.type ? aNode.evaluate() : undefined;
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }
 
@@ -151,6 +153,7 @@ class Graph {
         } else {
           result = {
             status: 'Success',
+            data: prevNodeOutputData,
           };
         }
       }
@@ -173,6 +176,7 @@ class Graph {
         }
         result = {
           status: 'Success',
+          data: prevNodeOutputData,
         };
       }