Merge pull request #52 from FlowTestAI/delete-flow-improvements

Use proper collectionId when deleting items

Author: jsajal

src/components/atoms/Tabs.js

@@ -28,7 +28,7 @@ const Tabs = () => {
     setClosingCollectionId(collectionId);
 
     if (isDirty) {
-      console.log(`\n \n BHUT HI SAHIIII tabId: ${tabId} : collectionId: ${collectionId}\n \n`);
+      console.debug(`Confirm close for tabId: ${tabId} : collectionId: ${collectionId}`);
       setConfirmActionModalOpen(true);
       return;
     }
@@ -47,7 +47,7 @@ const Tabs = () => {
               role='tab'
               onClick={() => {
                 setFocusTab(tab.id);
-                console.log(`CLICKED THE ${tab.id}`);
+                console.debug(`Selected tab: ${tab.id}`);
               }}
               data-id={tab.id}
               data-collection-id={tab.collectionId}

src/components/atoms/sidebar/collections/OptionsMenu.js

@@ -4,8 +4,9 @@ import { Menu, Transition } from '@headlessui/react';
 import { FolderPlusIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
 import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
+import { OBJ_TYPES } from 'constants/Common';
 
-const OptionsMenu = ({ directory, itemType }) => {
+const OptionsMenu = ({ collectionId, directory, itemType }) => {
   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 +44,7 @@ const OptionsMenu = ({ directory, itemType }) => {
                 data-options-menu-item={DirectoryOptionsActions.addNewFolder.value}
                 data-path-name={directory.pathname}
                 data-item-type={itemType}
+                data-collection-id={collectionId}
               >
                 <FolderPlusIcon
                   className='w-4 h-4 mr-2'
@@ -60,6 +62,7 @@ const OptionsMenu = ({ directory, itemType }) => {
                 data-options-menu-item={DirectoryOptionsActions.addNewFlow.value}
                 data-path-name={directory.pathname}
                 data-item-type={itemType}
+                data-collection-id={collectionId}
               >
                 <PencilSquareIcon
                   className='w-4 h-4 mr-2'
@@ -79,14 +82,17 @@ const OptionsMenu = ({ directory, itemType }) => {
                 data-options-menu-item={DirectoryOptionsActions.delete.value}
                 data-path-name={directory.pathname}
                 data-item-type={itemType}
+                data-collection-id={collectionId}
               >
                 <TrashIcon
                   className='w-4 h-4 mr-2'
                   aria-hidden='true'
                   data-click-from='options-menu'
                   data-item-type={itemType}
                 />
-                {DirectoryOptionsActions.delete.displayValue}
+                {itemType === OBJ_TYPES.collection
+                  ? DirectoryOptionsActions.remove.displayValue
+                  : DirectoryOptionsActions.delete.displayValue}
               </button>
             </Menu.Item>
           </div>

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

@@ -30,6 +30,7 @@ const Collection = ({ collectionId, item, depth }) => {
             directory={item}
             data-item-type={OBJ_TYPES.collection}
             itemType={OBJ_TYPES.collection}
+            collectionId={collectionId}
           />
         </div>
       );
@@ -61,6 +62,7 @@ const Collection = ({ collectionId, item, depth }) => {
             directory={item}
             data-item-type={OBJ_TYPES.flowtest}
             itemType={OBJ_TYPES.flowtest}
+            collectionId={collectionId}
           />
         </div>
       );
@@ -86,6 +88,7 @@ const Collection = ({ collectionId, item, depth }) => {
             directory={item}
             data-item-type={OBJ_TYPES.folder}
             itemType={OBJ_TYPES.folder}
+            collectionId={collectionId}
           />
         </div>
       );

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

@@ -63,9 +63,10 @@ const Collections = ({ 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) {

src/constants/WorkspaceDirectory.js

@@ -9,6 +9,11 @@ export const DirectoryOptionsActions = {
     value: 'delete',
     dataSetValue: 'delete',
   },
+  remove: {
+    displayValue: 'Remove',
+    value: 'remove',
+    dataSetValue: 'remove',
+  },
   addNewFlow: {
     displayValue: 'New Flow',
     value: 'new-flow',

src/stores/CollectionStore.js

@@ -73,7 +73,11 @@ const useCollectionStore = create((set, get) => ({
         if (collection) {
           // if it's the collection itself
           if (collection.pathname === directory.pathname && collection.name === directory.name) {
-            state.deleteCollection(collection.id);
+            state.collections = state.collections.filter((c) => c.id != collectionId);
+            console.log(`Collection removed: ${collectionId}`);
+
+            // check if there any open tabs, if yes close them
+            useTabStore.getState().closeCollectionTabs(collectionId);
           } else {
             const item = findItemInCollectionTree(directory, collection);