correct placement of loader and add env file to appropriate collection

Author: jsajal

src/components/atoms/sidebar/environments/EnvOptionsMenu.js

@@ -6,7 +6,7 @@ import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
 import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
 
 // ToDo: Combine this component with OptionsMenu in sidebar atoms to make it generic
-const EnvOptionsMenu = ({ pathName, itemType }) => {
+const EnvOptionsMenu = ({ pathName, itemType, collectionId }) => {
   const menuItemsStyles =
     'group flex w-full items-center rounded px-2 py-2 text-sm text-gray-900 transition duration-200 ease-out hover:bg-slate-100';
   return (
@@ -43,6 +43,7 @@ const EnvOptionsMenu = ({ pathName, itemType }) => {
                 data-click-from='env-options-menu'
                 data-options-menu-item={DirectoryOptionsActions.addNewEnvironment.value}
                 data-path-name={pathName}
+                data-collection-id={collectionId}
               >
                 <PencilSquareIcon
                   className='w-4 h-4 mr-2'

src/components/molecules/flow/index.js

@@ -20,7 +20,6 @@ import DelayNode from './nodes/DelayNode';
 import AuthNode from './nodes/AuthNode';
 import FlowNode from 'components/atoms/flow/FlowNode';
 import useCanvasStore from 'stores/CanvasStore';
-import useCommonStore from 'stores/CommonStore';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
@@ -101,7 +100,6 @@ const selector = (state) => ({
 });
 
 const Flow = ({ collectionId }) => {
-  const setShowLoader = useCommonStore((state) => state.setShowLoader);
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges, setLogs } =
     useCanvasStore(selector);
   //console.log(nodes);
@@ -240,8 +238,6 @@ const Flow = ({ collectionId }) => {
         <Controls>
           <ControlButton
             onClick={() => {
-              console.log(`\n \n \n ControlButton has been clicked \n \n \n`);
-              setShowLoader(true);
               runnableEdges(true);
               const g = new Graph(
                 cloneDeep(reactFlowInstance.getNodes()),
@@ -250,8 +246,6 @@ const Flow = ({ collectionId }) => {
                 onGraphComplete,
               );
               g.run();
-              console.log(`\n \n \n ControlButton has been clicked END \n \n \n`);
-              setShowLoader(false);
             }}
             title='run'
           >

src/components/molecules/footers/MainFooter.js

@@ -20,33 +20,38 @@ const MainFooter = () => {
         <ArrowLeftEndOnRectangleIcon className='w-6 h-6 swap-off' />
       </label>
       <div className='flex items-center justify-between gap-4'>
-        <Tippy content='External link: github.com' placement='top'>
-          <a href='#' target='_blank' className='link' rel='noreferrer'>
-            Github
+        <Tippy content='Github' placement='top'>
+          <a href='https://github.com/FlowTestAI/FlowTest' target='_blank' rel='noreferrer' className='link'>
+            <b>Github</b>
           </a>
         </Tippy>
 
-        <Tippy content='External link: github discussions' placement='top'>
-          <a href='#' className='link'>
-            Contact us
+        <Tippy content='Contact Us' placement='top'>
+          <a
+            href='https://github.com/FlowTestAI/FlowTest/discussions'
+            target='_blank'
+            rel='noreferrer'
+            className='link'
+          >
+            <b>Contact us</b>
           </a>
         </Tippy>
 
-        <Tippy content='External link' placement='top'>
-          <a href='#' className='link'>
-            Discord
+        <Tippy content='Discord' placement='top'>
+          <a href='https://discord.gg/Pf9tdSjPeF' target='_blank' rel='noreferrer' className='link'>
+            <b>Discord</b>
           </a>
         </Tippy>
 
         <Tippy content='Coming Soon' placement='top'>
           <a href='#' className='link'>
-            Docs
+            <b>Docs</b>
           </a>
         </Tippy>
 
-        <Tippy content='External link: github repo' placement='top'>
-          <a href='https://github.com/FlowTestAI/FlowTest' className='link'>
-            About
+        <Tippy content='About' placement='top'>
+          <a href='https://github.com/FlowTestAI/FlowTest' target='_blank' rel='noreferrer' className='link'>
+            <b>About</b>
           </a>
         </Tippy>
       </div>

src/components/molecules/headers/TabPanelHeader.js

@@ -78,9 +78,6 @@ const TabPanelHeader = () => {
                       className='drawer-overlay'
                     ></label>
                     <ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
-                      {console.log(`\n \n \n ======================>`)}
-                      {console.log(graphRunLogs)}
-                      {console.log(`\n \n \n ======================>`)}
                       {graphRunLogs.map((item, index) => (
                         <li key={index}>
                           <a>{item}</a>
@@ -92,16 +89,6 @@ const TabPanelHeader = () => {
               ) : (
                 <></>
               )}
-              <button>
-                <Tippy content='Import - Coming Soon!' placement='top'>
-                  <DocumentArrowDownIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
-                </Tippy>
-              </button>
-              <button>
-                <Tippy content='Export - Coming Soon!' placement='top'>
-                  <DocumentArrowUpIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
-                </Tippy>
-              </button>
             </div>
             {focusTab.type === OBJ_TYPES.flowtest && (
               <div className='pl-4 border-l gen_ai_button border-neutral-300'>

src/components/molecules/modals/GenerateFlowTestModal.js

@@ -10,8 +10,10 @@ import { init } from '../flow';
 import useCanvasStore from 'stores/CanvasStore';
 import { toast } from 'react-toastify';
 import { isEqual } from 'lodash';
+import useCommonStore from 'stores/CommonStore';
 
 const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionId }) => {
+  const setShowLoader = useCommonStore((state) => state.setShowLoader);
   const setNodes = useCanvasStore((state) => state.setNodes);
   const setEdges = useCanvasStore((state) => state.setEdges);
 
@@ -116,8 +118,10 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                       } else if (selectedModel === null) {
                         toast.info('Please select a model');
                       } else {
+                        setShowLoader(true);
                         generateFlowData(textareaValue, selectedModel, collectionId)
                           .then((flowData) => {
+                            setShowLoader(false);
                             if (isEqual(flowData.nodes, [])) {
                               toast.info(`${selectedModel} was not able to evaluate the instructions properly`);
                             } else {
@@ -128,6 +132,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                             closeFn();
                           })
                           .catch((error) => {
+                            setShowLoader(false);
                             console.log(error);
                             toast.error(`Error while generating flow data`);
                             closeFn();

src/components/molecules/sidebar/content/Environment.js

@@ -43,6 +43,7 @@ const Environment = ({ collectionId, collection }) => {
             data-click-from='env-options-menu'
             itemType={OBJ_TYPES.environment}
             pathName={collection.pathname}
+            collectionId={collectionId}
           />
         </div>
         {collection.envCollapsed === false && (

src/components/molecules/sidebar/content/Environments.js

@@ -21,9 +21,10 @@ const Environments = ({ collections }) => {
           // const itemType = clickFromElementDataSet?.itemType;
           const optionsMenuItem = clickFromElementDataSet?.optionsMenuItem;
           const pathName = clickFromElementDataSet?.pathName;
+          const collectionId = clickFromElementDataSet?.collectionId;
 
           setSelectedPathName(pathName);
-          setSelectedCollectionId(collections[0].id);
+          setSelectedCollectionId(collectionId);
           setSelectedMenuItem(optionsMenuItem);
 
           switch (optionsMenuItem) {