Merge pull request #61 from FlowTestAI/group-nodes-bytag

jsajal · web-flow · commit 44bb080631d4 · 2024-03-29T17:21:56.000-07:00
Group nodes by tag in AddNodes for better discoverability
diff --git a/packages/flowtest-electron/package.json b/packages/flowtest-electron/package.json
@@ -28,6 +28,7 @@
     "chokidar": "^3.6.0",
     "dotenv": "^16.4.5",
     "electron-store": "^8.1.0",
+    "flatted": "^3.3.1",
     "fs": "^0.0.1-security",
     "json-refs": "^3.0.15",
     "langchain": "^0.1.28",
diff --git a/packages/flowtest-electron/src/ipc/collection.js b/packages/flowtest-electron/src/ipc/collection.js
@@ -16,6 +16,7 @@ const deleteFile = require('../utils/filemanager/deletefile');
 const { flowDataToReadableData, readableDataToFlowData } = require('../utils/parser');
 const readFile = require('../utils/filemanager/readfile');
 const FlowtestAI = require('../utils/flowtestai');
+const { stringify, parse } = require('flatted');
 
 const collectionStore = new Collections();
 const flowTestAI = new FlowtestAI();
@@ -87,7 +88,7 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
         id: id,
         name: collectionName,
         pathname: pathname,
-        openapi_spec: resolvedSpec.resolved,
+        openapi_spec: stringify(resolvedSpec.resolved),
         nodes: parsedNodes,
       };
 
@@ -122,7 +123,7 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
           id: id,
           name: collectionName,
           pathname: collectionFolderPath,
-          openapi_spec: resolvedSpec.resolved,
+          openapi_spec: stringify(resolvedSpec.resolved),
           nodes: parsedNodes,
         };
 
@@ -309,7 +310,7 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
     try {
       const collection = collectionStore.getAll().find((c) => c.id === collectionId);
       if (collection) {
-        return await flowTestAI.generate(collection.openapi_spec, instruction, model);
+        return await flowTestAI.generate(parse(collection.openapi_spec), instruction, model);
       } else {
         return Promise.reject(new Error('Collection not found'));
       }
diff --git a/packages/flowtest-electron/src/utils/collection.js b/packages/flowtest-electron/src/utils/collection.js
@@ -25,6 +25,7 @@ const parseOpenAPISpec = (collection) => {
       Object.entries(operation).map(([requestType, request], _) => {
         const summary = request['summary'];
         const operationId = request['operationId'];
+        const tags = request['tags'];
         var url = replaceSingleToDoubleCurlyBraces(computeUrl(baseUrl, path));
         var variables = {};
 
@@ -59,6 +60,7 @@ const parseOpenAPISpec = (collection) => {
           description: summary,
           operationId: operationId,
           requestType: requestType.toUpperCase(),
+          tags: tags,
         };
         // console.log(finalNode);
         parsedNodes.push(finalNode);
diff --git a/src/components/molecules/flow/AddNodes.js b/src/components/molecules/flow/AddNodes.js
@@ -6,6 +6,7 @@ import { Fragment } from 'react';
 import { Disclosure } from '@headlessui/react';
 import { ChevronUpIcon } from '@heroicons/react/20/solid';
 import useCollectionStore from 'stores/CollectionStore';
+import { orderNodesByTags } from './utils';
 
 // ToDo: Move these constants to constants file/folder
 const requestNodes = [
@@ -63,6 +64,7 @@ const AddNodes = ({ collectionId }) => {
 
   // Get all requests of this collections
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+  const nodesByTags = orderNodesByTags(collection.nodes);
 
   return (
     <>
@@ -129,23 +131,41 @@ const AddNodes = ({ collectionId }) => {
                               </Disclosure.Button>
                               <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
                                 <div>
-                                  {collection.nodes.map((node) => (
-                                    <div
-                                      key={`${node.requestType} - ${node.operationId}`}
-                                      onDragStart={(event) => {
-                                        const newNode = {
-                                          ...node,
-                                          type: 'requestNode',
-                                        };
-                                        onDragStart(event, newNode);
-                                      }}
-                                      draggable
-                                      cursor='move'
-                                      className='py-2 border-b'
-                                    >
-                                      <div className='text-base font-semibold primary-text'>{`${node.requestType} - ${node.operationId}`}</div>
-                                      <div className='text-xs secondary-text'>{node.description}</div>
-                                    </div>
+                                  {Object.entries(nodesByTags).map(([tag, nodes], index) => (
+                                    <Disclosure as='div' key={index}>
+                                      {({ open }) => (
+                                        <>
+                                          <Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
+                                            <span>{tag}</span>
+                                            <ChevronUpIcon
+                                              className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `}
+                                            />
+                                          </Disclosure.Button>
+                                          <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
+                                            <div>
+                                              {nodes.map((node) => (
+                                                <div
+                                                  key={`${node.requestType} - ${node.operationId}`}
+                                                  onDragStart={(event) => {
+                                                    const newNode = {
+                                                      ...node,
+                                                      type: 'requestNode',
+                                                    };
+                                                    onDragStart(event, newNode);
+                                                  }}
+                                                  draggable
+                                                  cursor='move'
+                                                  className='py-2 border-b'
+                                                >
+                                                  <div className='text-base font-semibold primary-text'>{`${node.requestType} - ${node.operationId}`}</div>
+                                                  <div className='text-xs secondary-text'>{node.description}</div>
+                                                </div>
+                                              ))}
+                                            </div>
+                                          </Disclosure.Panel>
+                                        </>
+                                      )}
+                                    </Disclosure>
                                   ))}
                                 </div>
                               </Disclosure.Panel>
diff --git a/src/components/molecules/flow/flowtestai.js b/src/components/molecules/flow/flowtestai.js
@@ -27,7 +27,7 @@ const translateGeneratedNodesToOpenApiNodes = (generatedNodes, openApiNodes) =>
         type: 'requestNode',
       });
     } else {
-      throw Error(`Cannot find node: ${node.name} in openApi spec`);
+      console.log(`Cannot find node: ${gnode.name} in openApi spec`);
     }
   });
 
diff --git a/src/components/molecules/flow/nodes/RequestBody.js b/src/components/molecules/flow/nodes/RequestBody.js
@@ -48,7 +48,9 @@ const RequestBody = ({ nodeId, nodeData }) => {
   };
 
   const handleClose = (option) => {
-    if (option == 'raw-json') {
+    if (option == 'None') {
+      setRequestNodeBody(nodeId, option, undefined);
+    } else if (option == 'raw-json') {
       setRequestNodeBody(nodeId, option, '');
     } else if (option == 'form-data') {
       setRequestNodeBody(nodeId, option, {
@@ -61,12 +63,12 @@ const RequestBody = ({ nodeId, nodeData }) => {
 
   return (
     <>
-      <div className='border-t border-neutral-300 bg-slate-100 px-2 py-4'>
+      <div className='px-2 py-4 border-t border-neutral-300 bg-slate-100'>
         <div className='flex items-center justify-between font-medium'>
           <h3>Body</h3>
           <Menu as='div' className='relative inline-block text-left'>
             <Menu.Button data-click-from='body-type-menu' className='p-2'>
-              <EllipsisVerticalIcon className='h-4 w-4' aria-hidden='true' data-click-from='body-type-menu' />
+              <EllipsisVerticalIcon className='w-4 h-4' aria-hidden='true' data-click-from='body-type-menu' />
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -78,13 +80,13 @@ const RequestBody = ({ nodeId, nodeData }) => {
               leaveTo='transform opacity-0 scale-95'
             >
               <Menu.Items
-                className='absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black/5 focus:outline-none'
+                className='absolute right-0 z-10 w-56 px-1 py-1 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
                 data-click-from='body-type-menu'
               >
                 {requestBodyTypeOptions.map((bodyTypeOption, index) => (
                   <Menu.Item key={index} data-click-from='body-type-menu' onClick={() => handleClose(bodyTypeOption)}>
                     <button
-                      className='group flex w-full items-center rounded-md px-2 py-2 text-sm text-gray-900 hover:bg-slate-100'
+                      className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md group hover:bg-slate-100'
                       data-click-from='body-type-menu'
                     >
                       {bodyTypeOption}
@@ -97,10 +99,10 @@ const RequestBody = ({ nodeId, nodeData }) => {
         </div>
       </div>
       {nodeData.requestBody && nodeData.requestBody.type === 'raw-json' && (
-        <div className='border border-t border-neutral-300 bg-slate-50 p-2'>
+        <div className='p-2 border border-t border-neutral-300 bg-slate-50'>
           <textarea
             placeholder='Enter json'
-            className='nodrag nowheel w-full p-2'
+            className='w-full p-2 nodrag nowheel'
             name='username'
             onChange={(e) => handleRawJson(e)}
             rows={4}
@@ -109,25 +111,25 @@ const RequestBody = ({ nodeId, nodeData }) => {
         </div>
       )}
       {nodeData.requestBody && nodeData.requestBody.type === 'form-data' && (
-        <div className='border-t border-neutral-300 bg-slate-50 p-2'>
-          <div className='flex items-center justify-between rounded-md border border-neutral-500 text-sm text-neutral-500 outline-0 focus:ring-0'>
+        <div className='p-2 border-t border-neutral-300 bg-slate-50'>
+          <div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
             <input
               placeholder='key'
-              className='nodrag nowheel bg-slate-50 pl-4'
+              className='pl-4 nodrag nowheel bg-slate-50'
               name='variable-value'
               onChange={(e) => handleFormDataKey(e)}
               value={nodeData.requestBody.body.key}
             />
-            <div className='rounded-br-md rounded-tr-md border-l border-l-neutral-500 px-4 py-2'>File</div>
+            <div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>File</div>
           </div>
           <div className='py-2'>
             <button
-              className='flex w-full cursor-pointer items-center justify-center gap-2 rounded-md border border-neutral-500 bg-slate-100 p-2 hover:bg-slate-200'
+              className='flex items-center justify-center w-full gap-2 p-2 border rounded-md cursor-pointer border-neutral-500 bg-slate-100 hover:bg-slate-200'
               onClick={() => {
                 uploadFileForRequestNode.current.click();
               }}
             >
-              <DocumentArrowUpIcon className='h-4 w-4 text-center' />
+              <DocumentArrowUpIcon className='w-4 h-4 text-center' />
               Upload File
               {/* Ref: https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div */}
               <div className='hidden'>
diff --git a/src/components/molecules/flow/utils.js b/src/components/molecules/flow/utils.js
@@ -0,0 +1,14 @@
+export const orderNodesByTags = (nodes) => {
+  const result = {};
+  if (nodes) {
+    nodes.map((node) => {
+      node.tags.map((tag) => {
+        if (!result[tag]) {
+          result[tag] = [];
+        }
+        result[tag].push(node);
+      });
+    });
+  }
+  return result;
+};
diff --git a/src/components/molecules/headers/TabPanelHeader.js b/src/components/molecules/headers/TabPanelHeader.js
@@ -94,7 +94,7 @@ const TabPanelHeader = () => {
           </div>
         </>
       ) : (
-        <div className='text-base tracking-[0.15em]'> Please select a flow test from the sidebar </div>
+        <div className='text-base tracking-[0.15em]'> Please select a flow from the sidebar </div>
       )}
     </div>
   );
diff --git a/src/components/molecules/modals/GenerateFlowTestModal.js b/src/components/molecules/modals/GenerateFlowTestModal.js
@@ -9,6 +9,7 @@ import { generateFlowData } from '../flow/flowtestai';
 import { init } from '../flow';
 import useCanvasStore from 'stores/CanvasStore';
 import { toast } from 'react-toastify';
+import { isEqual } from 'lodash';
 
 const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionId }) => {
   const setNodes = useCanvasStore((state) => state.setNodes);
@@ -110,19 +111,28 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                     isDisabled={false}
                     fullWidth={true}
                     onClickHandle={() => {
-                      generateFlowData(textareaValue, selectedModel, collectionId)
-                        .then((flowData) => {
-                          const result = init(flowData);
-                          console.log(result);
-                          setNodes(result.nodes);
-                          setEdges(result.edges);
-                          closeFn();
-                        })
-                        .catch((error) => {
-                          console.log(error);
-                          toast.error(`Error while generating flow data`);
-                          closeFn();
-                        });
+                      if (textareaValue.trim() === '') {
+                        toast.info('Please describe your flow');
+                      } else if (selectedModel === null) {
+                        toast.info('Please select a model');
+                      } else {
+                        generateFlowData(textareaValue, selectedModel, collectionId)
+                          .then((flowData) => {
+                            if (isEqual(flowData.nodes, [])) {
+                              toast.info(`${selectedModel} was not able to evaluate the instructions properly`);
+                            } else {
+                              const result = init(flowData);
+                              setNodes(result.nodes);
+                              setEdges(result.edges);
+                            }
+                            closeFn();
+                          })
+                          .catch((error) => {
+                            console.log(error);
+                            toast.error(`Error while generating flow data`);
+                            closeFn();
+                          });
+                      }
                     }}
                   >
                     Generate
diff --git a/src/stores/CanvasStore.js b/src/stores/CanvasStore.js
@@ -163,15 +163,22 @@ const useCanvasStore = create((set, get) => ({
       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
-          if (type == 'raw-json') {
+          if (type === 'None') {
+            node.data = {
+              ...node.data,
+              requestBody: {
+                type,
+              },
+            };
+          } else if (type === 'raw-json') {
             node.data = {
               ...node.data,
               requestBody: {
                 type,
                 body: data,
               },
             };
-          } else if (type == 'form-data') {
+          } else if (type === 'form-data') {
             node.data = {
               ...node.data,
               requestBody: {

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ const translateGeneratedNodesToOpenApiNodes = (generatedNodes, openApiNodes) =>`
`27`	`27`	`type: 'requestNode',`
`28`	`28`	`});`
`29`	`29`	`} else {`
`30`		- throw Error(`Cannot find node: ${node.name} in openApi spec`);
	`30`	+ console.log(`Cannot find node: ${gnode.name} in openApi spec`);
`31`	`31`	`}`
`32`	`32`	`});`
`33`	`33`