Merge pull request #51 from FlowTestAI/ui-environments

Adding functionality for environments directory rendering

Author: jsajal

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

@@ -104,10 +104,44 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
     }
   });
 
+  ipcMain.handle('renderer:open-collection', async (event, openAPISpecFilePath, collectionFolderPath) => {
+    try {
+      if (isDirectory(collectionFolderPath)) {
+        // async/await syntax
+        const api = await SwaggerParser.validate(openAPISpecFilePath);
+        // console.log("API name: %s, Version: %s", api.info.title, api.info.version);
+
+        // resolve references in openapi spec
+        const resolvedSpec = await JsonRefs.resolveRefs(api);
+        const parsedNodes = parseOpenAPISpec(resolvedSpec.resolved);
+
+        const id = uuidv4();
+        const collectionName = api.info.title;
+
+        const newCollection = {
+          id: id,
+          name: collectionName,
+          pathname: collectionFolderPath,
+          openapi_spec: resolvedSpec.resolved,
+          nodes: parsedNodes,
+        };
+
+        mainWindow.webContents.send('main:collection-created', id, collectionName, collectionFolderPath, parsedNodes);
+
+        watcher.addWatcher(mainWindow, collectionFolderPath, id);
+        collectionStore.add(newCollection);
+      } else {
+        return Promise.reject(new Error(`Directory: ${collectionFolderPath} does not exist`));
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  });
+
   ipcMain.handle('renderer:delete-collection', async (event, collection) => {
     try {
-      deleteDirectory(collection.pathname);
-      console.log(`Deleted directory: ${collection.pathname}`);
+      // deleteDirectory(collection.pathname);
+      // console.log(`Deleted directory: ${collection.pathname}`);
 
       mainWindow.webContents.send('main:collection-deleted', collection.id);
 
@@ -161,8 +195,8 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
   ipcMain.handle('renderer:delete-environment', async (event, collectionPath, name) => {
     try {
       const envDir = path.join(collectionPath, 'environments');
-      deleteFile(path.join(envDir, `${name}.env`));
-      console.log(`Delete file: ${name}.env`);
+      deleteFile(path.join(envDir, name));
+      console.log(`Delete file: ${name}`);
     } catch (error) {
       return Promise.reject(error);
     }

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

@@ -20,7 +20,7 @@ class Collections {
   remove(collection) {
     const collections = this.store.get('collections') || [];
 
-    if (!isDirectory(collection.pathname)) {
+    if (collections.find((c) => c.id === collection.id)) {
       this.store.set(
         'collections',
         collections.filter((c) => c.pathname !== collection.pathname),

packages/flowtest-electron/tests/store/collection-store.test.js

@@ -11,15 +11,15 @@ describe('collection-store', () => {
       id: '1234',
       name: 'test',
       pathname: `${__dirname}/test`,
-      collection: '',
+      openapi_spec: '',
       nodes: '{}',
     };
 
     const newestCollection = {
       id: '12345',
       name: 'test1',
       pathname: `${__dirname}/test1`,
-      collection: '',
+      openapi_spec: '',
       nodes: '{}',
     };
 
@@ -38,17 +38,14 @@ describe('collection-store', () => {
     store.add(newestCollection);
     expect(store.getAll()).toEqual([newCollection, newestCollection]);
 
-    // removing a collection whose directory still exist
-    store.remove(newCollection);
-    expect(store.getAll()).toEqual([newCollection, newestCollection]);
-
-    deleteDirectory(`${__dirname}/test`);
     store.remove(newCollection);
     expect(store.getAll()).toEqual([newestCollection]);
 
-    deleteDirectory(`${__dirname}/test1`);
     store.remove(newestCollection);
     expect(store.getAll()).toEqual([]);
+
+    deleteDirectory(`${__dirname}/test`);
+    deleteDirectory(`${__dirname}/test1`);
   });
 
   it('collection set should be unique by pathname', async () => {
@@ -57,15 +54,15 @@ describe('collection-store', () => {
       id: '1234',
       name: 'test',
       pathname: `${__dirname}/test`,
-      collection: '',
+      openapi_spec: '',
       nodes: '{}',
     };
 
     const newestCollection = {
       id: '12345',
       name: 'test',
       pathname: `${__dirname}/test`,
-      collection: '',
+      openapi_spec: '',
       nodes: '{}',
     };
 
@@ -80,8 +77,9 @@ describe('collection-store', () => {
     store.add(newestCollection);
     expect(store.getAll()).toEqual([newCollection]);
 
-    deleteDirectory(`${__dirname}/test`);
     store.remove(newCollection);
     expect(store.getAll()).toEqual([]);
+
+    deleteDirectory(`${__dirname}/test`);
   });
 });

src/App.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import './App.css';
-import FlowRoutes from './routes';
+import Routes from './routes';
 import { HashRouter } from 'react-router-dom';
 
 function App() {
   return (
     <HashRouter>
-      <FlowRoutes />
+      <Routes />
     </HashRouter>
   );
 }

src/components/atoms/SelectEnvironment.js

@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import { PropTypes } from 'prop-types';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
@@ -53,4 +54,8 @@ const SelectEnvironment = ({ environments }) => {
   );
 };
 
+SelectEnvironment.propTypes = {
+  environments: PropTypes.Array.isRequired,
+};
+
 export default SelectEnvironment;

src/components/atoms/Tabs.js

@@ -1,50 +1,78 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { useTabStore } from 'stores/TabStore';
+import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 
 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 [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const closeTab = useTabStore((state) => state.closeTab);
+  const [closingTabId, setClosingTabId] = useState('');
+  const [closingCollectionId, setClosingCollectionId] = useState('');
   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';
+  const messageForConfirmActionModal = 'You have unsaved changes in the flowtest, are you sure you want to close it?';
+  const handleCloseTab = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const tabId = event.currentTarget.dataset.tabId;
+    const { isDirty, collectionId } = tabs.find((tab) => {
+      if (tab.id === tabId) return tab;
+    });
+    setClosingTabId(tabId);
+    setClosingCollectionId(collectionId);
+
+    if (isDirty) {
+      console.log(`\n \n BHUT HI SAHIIII tabId: ${tabId} : collectionId: ${collectionId}\n \n`);
+      setConfirmActionModalOpen(true);
+      return;
+    }
+    closeTab(tabId, collectionId);
+  };
   return (
     <div role='tablist' className='tabs tabs-lg'>
       {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>
+            <div
+              key={index}
+              className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
+              role='tab'
+              onClick={() => {
+                setFocusTab(tab.id);
+                console.log(`CLICKED THE ${tab.id}`);
+              }}
+              data-id={tab.id}
+              data-collection-id={tab.collectionId}
+            >
+              <a>{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);
-                }}
+                className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
+                data-tab-id={tab.id}
+                onClick={handleCloseTab}
               >
-                <XMarkIcon className='h-4 w-4' />
+                <XMarkIcon className='w-4 h-4' />
               </div>
-            </>
+            </div>
           );
         })}
+      <ConfirmActionModal
+        closeFn={() => setConfirmActionModalOpen(false)}
+        open={confirmActionModalOpen}
+        message={messageForConfirmActionModal}
+        actionFn={() => {
+          closeTab(closingTabId, closingCollectionId);
+          setConfirmActionModalOpen(false);
+        }}
+      />
     </div>
   );
 };

src/components/atoms/ThemeController.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
+
+const ThemeController = () => {
+  return (
+    <Tippy content='Coming Soon!' placement='bottom'>
+      <label className='flex items-center gap-2 cursor-pointer'>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='16'
+          height='16'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        >
+          <circle cx='12' cy='12' r='5' />
+          <path d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4' />
+        </svg>
+        <input type='checkbox' value='synthwave' className='theme-controller toggle toggle-xs' disabled />
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='16'
+          height='16'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        >
+          <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
+        </svg>
+      </label>
+    </Tippy>
+  );
+};
+
+export default ThemeController;

src/components/atoms/flow/FlowNode.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
 import { Handle, Position } from 'reactflow';
 
 const FlowNode = ({ children, title, handleLeft, handleLeftData, handleRight, handleRightData }) => {
@@ -27,4 +28,13 @@ const FlowNode = ({ children, title, handleLeft, handleLeftData, handleRight, ha
   );
 };
 
+FlowNode.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  handleLeft: PropTypes.node.isRequired,
+  handleLeftData: PropTypes.object.isRequired,
+  handleRight: PropTypes.node.isRequired,
+  handleRightData: PropTypes.object.isRequired,
+};
+
 export default FlowNode;