Merge pull request #71 from FlowTestAI/use-relative-paths

use relative path in complex node

Author: jsajal

packages/flowtest-electron/preload.js

@@ -1,6 +1,9 @@
 const { ipcRenderer, contextBridge } = require('electron');
+const path = require('path');
 
 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),
 });

src/components/molecules/flow/graph/Graph.js

@@ -123,7 +123,7 @@ class Graph {
       }
 
       if (node.type === 'complexNode') {
-        const flowData = await readFlowTestSync(node.data.pathname);
+        const flowData = await readFlowTestSync(node.data.relativePath);
         if (flowData) {
           const cNode = new complexNode(
             cloneDeep(flowData.nodes),

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

@@ -6,16 +6,21 @@ import { getAllFlowTests } from 'stores/utils';
 import useCollectionStore from 'stores/CollectionStore';
 
 const ComplexNode = ({ id, data }) => {
+  const { ipcRenderer } = window;
+
   const setFlowForComplexNode = useCanvasStore((state) => state.setFlowForComplexNode);
-  const collectionId = useCanvasStore((state) => state.collectionId);
-  const flowTests = getAllFlowTests(useCollectionStore.getState().collections.find((c) => c.id === collectionId));
+  const collectionId = useCanvasStore.getState().collectionId;
+  const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+  const flowTests = getAllFlowTests(collection).map((fullPath) => {
+    return ipcRenderer.relative(collection.pathname, fullPath);
+  });
 
-  const setFlow = (pathname) => {
-    setFlowForComplexNode(id, pathname);
+  const setFlow = (relativePath) => {
+    setFlowForComplexNode(id, relativePath);
   };
 
-  if (data.pathname) {
-    if (!flowTests.find((f) => f === data.pathname)) {
+  if (data.relativePath) {
+    if (!flowTests.find((f) => f === data.relativePath)) {
       setFlow('');
     }
   }
@@ -32,7 +37,7 @@ const ComplexNode = ({ id, data }) => {
         <select
           onChange={(e) => setFlow(e.target.value)}
           name='flow'
-          value={data.pathname ? data.pathname : ''}
+          value={data.relativePath ? data.relativePath : ''}
           className='h-12 outline-none max-w-32'
         >
           <option key='None' value=''>

src/service/collection.js

@@ -5,6 +5,7 @@ import { useEventStore } from 'stores/EventListenerStore';
 import { OBJ_TYPES } from 'constants/Common';
 import { toast } from 'react-toastify';
 import { useTabStore } from 'stores/TabStore';
+import useCanvasStore from 'stores/CanvasStore';
 
 export const createCollection = (openAPISpecFilePath, collectionFolderPath) => {
   const { ipcRenderer } = window;
@@ -293,14 +294,22 @@ export const readFlowTest = (pathname, collectionId) => {
   }
 };
 
-export const readFlowTestSync = (pathname) => {
+export const readFlowTestSync = (relativePath) => {
   try {
-    if (pathname.trim() != '') {
+    if (relativePath.trim() != '') {
       const { ipcRenderer } = window;
 
-      return new Promise((resolve, reject) => {
-        return ipcRenderer.invoke('renderer:read-flowtest-sync', pathname).then(resolve).catch(reject);
-      });
+      // assumes that this function is triggered from graph run
+      const collectionId = useCanvasStore.getState().collectionId;
+      const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+      if (collection) {
+        return new Promise((resolve, reject) => {
+          return ipcRenderer
+            .invoke('renderer:read-flowtest-sync', ipcRenderer.join(collection.pathname, relativePath))
+            .then(resolve)
+            .catch(reject);
+        });
+      }
     }
   } catch (error) {
     console.log(`Error reading flowtest: ${error}`);

src/stores/CanvasStore.js

@@ -327,13 +327,13 @@ const useCanvasStore = create((set, get) => ({
       }),
     });
   },
-  setFlowForComplexNode: (nodeId, pathname) => {
+  setFlowForComplexNode: (nodeId, relativePath) => {
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
           // it's important to create a new object here, to inform React Flow about the cahnges
           node.data = {
-            pathname,
+            relativePath,
           };
         }
 

src/stores/utils.js

@@ -30,11 +30,7 @@ export const getAllFlowTests = (collection) => {
   if (collection) {
     let flattenedItems = flattenItems(collection.items);
 
-    return flattenedItems.map((i) => {
-      if (i.type === OBJ_TYPES.flowtest) {
-        return i.pathname;
-      }
-    });
+    return flattenedItems.filter((i) => i.type === OBJ_TYPES.flowtest).map((i) => i.pathname);
   }
 };