Merge pull request #49 from FlowTestAI/add-obj-types-constants

Add obj types constants and compute variables in graph flow

Author: jsajal

.eslintrc.js

@@ -21,7 +21,10 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['react', 'react-hooks', 'prettier'],
-  rules: {},
+  rules: {
+    'react/prop-types': 'off', // keeping off for first phase
+    'no-unused-vars': 'off', // Getting a lot of Error for: '_' is assigned a value but never used  no-unused-vars. For now disabling this because  need to understand more about the use '_'.
+  },
   settings: {
     'import/resolver': {
       node: {

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

@@ -8,6 +8,14 @@ const computeUrl = (baseUrl, path) => {
   }
 };
 
+const replaceSingleToDoubleCurlyBraces = (str) => {
+  // Replace opening curly braces
+  str = str.replace(/{/g, '{{');
+  // Replace closing curly braces
+  str = str.replace(/}/g, '}}');
+  return str;
+};
+
 const parseOpenAPISpec = (collection) => {
   let parsedNodes = [];
   try {
@@ -17,7 +25,7 @@ const parseOpenAPISpec = (collection) => {
       Object.entries(operation).map(([requestType, request], _) => {
         const summary = request['summary'];
         const operationId = request['operationId'];
-        var url = computeUrl(baseUrl, path);
+        var url = replaceSingleToDoubleCurlyBraces(computeUrl(baseUrl, path));
         var variables = {};
 
         // console.log(operationId)
@@ -30,10 +38,10 @@ const parseOpenAPISpec = (collection) => {
             // allow different type of variables in request node like string, int, array etc...
             if (value['in'] === 'query') {
               if (firstQueryParam) {
-                url = url.concat(`?${value['name']}={${value['name']}}`);
+                url = url.concat(`?${value['name']}={{${value['name']}}}`);
                 firstQueryParam = false;
               } else {
-                url = url.concat(`&${value['name']}={${value['name']}}`);
+                url = url.concat(`&${value['name']}={{${value['name']}}}`);
               }
             }
           });

packages/flowtest-electron/tests/utils/collection-parser.test.js

@@ -26,37 +26,37 @@ const expected = [
     requestType: 'POST',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/findByStatus?status={status}',
+    url: 'https://petstore3.swagger.io/api/v3/pet/findByStatus?status={{status}}',
     description: 'Finds Pets by status',
     operationId: 'findPetsByStatus',
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/findByTags?tags={tags}',
+    url: 'https://petstore3.swagger.io/api/v3/pet/findByTags?tags={{tags}}',
     description: 'Finds Pets by tags',
     operationId: 'findPetsByTags',
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/{petId}',
+    url: 'https://petstore3.swagger.io/api/v3/pet/{{petId}}',
     description: 'Find pet by ID',
     operationId: 'getPetById',
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/{petId}',
+    url: 'https://petstore3.swagger.io/api/v3/pet/{{petId}}',
     description: 'Updates a pet in the store with form data',
     operationId: 'updatePetWithForm',
     requestType: 'POST',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/{petId}',
+    url: 'https://petstore3.swagger.io/api/v3/pet/{{petId}}',
     description: 'Deletes a pet',
     operationId: 'deletePet',
     requestType: 'DELETE',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/pet/{petId}/uploadImage',
+    url: 'https://petstore3.swagger.io/api/v3/pet/{{petId}}/uploadImage',
     description: 'uploads an image',
     operationId: 'uploadFile',
     requestType: 'POST',
@@ -74,13 +74,13 @@ const expected = [
     requestType: 'POST',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/store/order/{orderId}',
+    url: 'https://petstore3.swagger.io/api/v3/store/order/{{orderId}}',
     description: 'Find purchase order by ID',
     operationId: 'getOrderById',
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/store/order/{orderId}',
+    url: 'https://petstore3.swagger.io/api/v3/store/order/{{orderId}}',
     description: 'Delete purchase order by ID',
     operationId: 'deleteOrder',
     requestType: 'DELETE',
@@ -98,7 +98,7 @@ const expected = [
     requestType: 'POST',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/user/login?username={username}?password={password}',
+    url: 'https://petstore3.swagger.io/api/v3/user/login?username={{username}}&password={{password}}',
     description: 'Logs user into the system',
     operationId: 'loginUser',
     requestType: 'GET',
@@ -110,19 +110,19 @@ const expected = [
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/user/{username}',
+    url: 'https://petstore3.swagger.io/api/v3/user/{{username}}',
     description: 'Get user by user name',
     operationId: 'getUserByName',
     requestType: 'GET',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/user/{username}',
+    url: 'https://petstore3.swagger.io/api/v3/user/{{username}}',
     description: 'Update user',
     operationId: 'updateUser',
     requestType: 'PUT',
   },
   {
-    url: 'https://petstore3.swagger.io/api/v3/user/{username}',
+    url: 'https://petstore3.swagger.io/api/v3/user/{{username}}',
     description: 'Delete user',
     operationId: 'deleteUser',
     requestType: 'DELETE',

src/components/atoms/SelectEnvironment.js

@@ -2,30 +2,16 @@ import React, { Fragment, useState } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
-
-// const environments = [
-//   {
-//     id: 'feebd601-63c5-4a4f-8def-1dde4f317567',
-//     createdAt: 1710096201431,
-//     modifiedAt: 1710096201431,
-//     name: 'test.env',
-//     pathname:
-//       '/Users/sirachit/Desktop/Personal Devo/FlowTest/test/folder-test/Simple API overview/environments/test.env',
-//     variables: { k1: 'v1', k2: 'v2', k3: 'v3' },
-//   },
-//   {
-//     id: 'feebd601-63c5-4a4f-8def-1dde4f317567',
-//     createdAt: 1710096202431,
-//     modifiedAt: 1710096202431,
-//     name: 'test2.env',
-//     pathname:
-//       '/Users/sirachit/Desktop/Personal Devo/FlowTest/test/folder-test/Simple API overview/environments/test2.env',
-//     variables: { k1: 'v1', k2: 'v2', k3: 'v3' },
-//   },
-// ];
+import { useTabStore } from 'stores/TabStore';
 
 const SelectEnvironment = ({ environments }) => {
+  const setEnv = useTabStore((state) => state.setSelectedEnv);
+
   const [selected, setSelected] = useState(null);
+  if (selected) {
+    setEnv(selected);
+  }
+
   return (
     <Listbox value={selected} onChange={setSelected}>
       <div className='relative flex h-full pl-4 border-l border-neutral-300'>

src/components/atoms/Tabs.js

@@ -6,41 +6,45 @@ const Tabs = () => {
   const tabs = useTabStore((state) => state.tabs);
   const setFocusTab = useTabStore((state) => state.setFocusTab);
   const focusTabId = useTabStore((state) => state.focusTabId);
+  const focusTab = tabs.find((t) => t.id === focusTabId);
   const closeTab = useTabStore((state) => state.closeTab);
   const activeTabStyles =
     'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
   const tabCommonStyles =
     'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
   return (
     <div role='tablist' className='tabs tabs-lg'>
-      {tabs.map((tab, index) => {
-        return (
-          <>
-            <a
-              role='tab'
-              className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
-              key={index}
-              data-id={tab.id}
-              data-collection-id={tab.collectionId}
-              onClick={() => {
-                setFocusTab(tab.id);
-                console.log(`CLICKED THE ${tab.id}`);
-              }}
-            >
-              {tab.name}
-            </a>
-            {/* close needs to be a separate clickable component other wise it gets confused with above */}
-            <div
-              className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
-              onClick={() => {
-                closeTab(tab.id, tab.collectionId);
-              }}
-            >
-              <XMarkIcon className='h-4 w-4' />
-            </div>
-          </>
-        );
-      })}
+      {tabs
+        // tabs belonging to one collection will be shown at a time
+        .filter((t) => t.collectionId === focusTab.collectionId)
+        .map((tab, index) => {
+          return (
+            <>
+              <a
+                role='tab'
+                className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
+                key={index}
+                data-id={tab.id}
+                data-collection-id={tab.collectionId}
+                onClick={() => {
+                  setFocusTab(tab.id);
+                  console.log(`CLICKED THE ${tab.id}`);
+                }}
+              >
+                {tab.name}
+              </a>
+              {/* close needs to be a separate clickable component other wise it gets confused with above */}
+              <div
+                className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
+                onClick={() => {
+                  closeTab(tab.id, tab.collectionId);
+                }}
+              >
+                <XMarkIcon className='h-4 w-4' />
+              </div>
+            </>
+          );
+        })}
     </div>
   );
 };

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

@@ -1,10 +1,13 @@
 // assumption is that apis are giving json as output
 
+import useCollectionStore from 'stores/CollectionStore';
+import { useTabStore } from 'stores/TabStore';
+import { computeAuthNode } from './compute/authnode';
 import { computeEvaluateNode } from './compute/evaluatenode';
 import { computeRequestNode } from './compute/requestnode';
 
 class Graph {
-  constructor(nodes, edges, onGraphComplete) {
+  constructor(nodes, edges, collectionId, onGraphComplete) {
     this.nodes = nodes;
     this.edges = edges;
     this.onGraphComplete = onGraphComplete;
@@ -13,6 +16,10 @@ class Graph {
     this.startTime = Date.now();
     this.graphRunNodeOutput = {};
     this.auth = undefined;
+    this.env = useCollectionStore
+      .getState()
+      .collections.find((c) => c.id === collectionId)
+      ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
   }
 
   #checkTimeout() {
@@ -87,12 +94,12 @@ class Graph {
       }
 
       if (node.type === 'authNode') {
-        this.auth = node.data.auth;
+        this.auth = computeAuthNode(node.data.auth, this.env);
         result = ['Success', node, prevNodeOutput];
       }
 
       if (node.type === 'requestNode') {
-        result = await computeRequestNode(node, prevNodeOutputData, this.auth, this.logs);
+        result = await computeRequestNode(node, prevNodeOutputData, this.env, this.auth, this.logs);
       }
 
       if (this.#checkTimeout()) {

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

@@ -0,0 +1,14 @@
+import { computeVariables } from './utils';
+
+export const computeAuthNode = (auth, env) => {
+  if (auth.type === 'basic-auth') {
+    auth.username = computeVariables(auth.username, env?.variables);
+    auth.password = computeVariables(auth.password, env?.variables);
+
+    return auth;
+  } else if (auth.type === 'no-auth') {
+    return auth;
+  } else {
+    throw Error(`auth type: ${auth.type} is not valid`);
+  }
+};

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

@@ -1,4 +1,4 @@
-import { computeNodeVariables } from './utils';
+import { computeNodeVariables, computeVariables } from './utils';
 
 const runHttpRequest = (request) => {
   const { ipcRenderer } = window;
@@ -8,31 +8,24 @@ const runHttpRequest = (request) => {
   });
 };
 
-const formulateRequest = (node, finalUrl, auth, logs) => {
+const formulateRequest = (node, finalUrl, variablesDict, auth, logs) => {
   let restMethod = node.data.requestType.toLowerCase();
   let contentType = 'application/json';
   let requestData = undefined;
 
-  if (restMethod === 'get') {
-    if (node.data.requestBody) {
-      if (node.data.requestBody.type === 'raw-json') {
-        contentType = 'application/json';
-        requestData = node.data.requestBody.body ? JSON.parse(node.data.requestBody.body) : JSON.parse('{}');
-      }
-    }
-  } else if (restMethod === 'post' || restMethod === 'put') {
-    if (node.data.requestBody) {
-      if (node.data.requestBody.type === 'form-data') {
-        contentType = 'multipart/form-data';
-        requestData = {
-          key: node.data.requestBody.body.key,
-          value: node.data.requestBody.body.value,
-          name: node.data.requestBody.body.name,
-        };
-      } else if (node.data.requestBody.type === 'raw-json') {
-        contentType = 'application/json';
-        requestData = node.data.requestBody.body ? JSON.parse(node.data.requestBody.body) : JSON.parse('{}');
-      }
+  if (node.data.requestBody) {
+    if (node.data.requestBody.type === 'raw-json') {
+      contentType = 'application/json';
+      requestData = node.data.requestBody.body
+        ? JSON.parse(computeVariables(node.data.requestBody.body, variablesDict))
+        : JSON.parse('{}');
+    } else if (node.data.requestBody.type === 'form-data') {
+      contentType = 'multipart/form-data';
+      requestData = {
+        key: computeVariables(node.data.requestBody.body.key, variablesDict),
+        value: node.data.requestBody.body.value,
+        name: node.data.requestBody.body.name,
+      };
     }
   }
 
@@ -55,20 +48,22 @@ const formulateRequest = (node, finalUrl, auth, logs) => {
   return options;
 };
 
-export const computeRequestNode = async (node, prevNodeOutputData, auth, logs) => {
+export const computeRequestNode = async (node, prevNodeOutputData, env, auth, logs) => {
   // step1 evaluate variables of this node
   const evalVariables = computeNodeVariables(node.data.variables, prevNodeOutputData);
 
+  const variablesDict = {
+    ...env?.variables,
+    ...evalVariables,
+  };
+
   // step2 replace variables in url with value
-  let finalUrl = node.data.url;
-  Object.entries(evalVariables).map(([vname, vvalue], index) => {
-    finalUrl = finalUrl.replace(`{${vname}}`, vvalue);
-  });
+  const finalUrl = computeVariables(node.data.url, variablesDict);
 
   // step 3
-  const options = formulateRequest(node, finalUrl, auth, logs);
+  const options = formulateRequest(node, finalUrl, variablesDict, auth, logs);
 
-  console.debug('Evaluated variables: ', evalVariables);
+  console.debug('Avialable variables: ', variablesDict);
   console.debug('Evaluated Url: ', finalUrl);
 
   const res = await runHttpRequest(options);