Add confirmation dialog when deleting env, collection, folder and flowtest

Author: jsajal

src/components/atoms/Tabs.js

@@ -16,8 +16,7 @@ const Tabs = () => {
     '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 =
-    'Changes for the flow test are not saved, are you sure that you wants to close it?';
+  const messageForConfirmActionModal = 'You have unsaved changes in the flowtest, are you sure you want to close it?';
   const handleCloseTab = (event) => {
     event.stopPropagation();
     event.preventDefault();
@@ -70,9 +69,6 @@ const Tabs = () => {
         open={confirmActionModalOpen}
         message={messageForConfirmActionModal}
         actionFn={() => {
-          console.log(
-            `I AHVEN BEEN CLICIKED : closingTabId: ${closingTabId} : closingCollectionId: ${closingCollectionId}`,
-          );
           closeTab(closingTabId, closingCollectionId);
           setConfirmActionModalOpen(false);
         }}

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

@@ -5,12 +5,18 @@ import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
 import { deleteCollection, deleteFolder, deleteFlowTest } from 'service/collection';
 import NewLabelModal from 'components/molecules/modals/sidebar/NewLabelModal';
 import Collection from './Collection';
+import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 
 const Collections = ({ collections }) => {
   const [newLabelModalOpen, setNewLabelModal] = useState(false);
+  const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
+
   const [selectedMenuItem, setSelectedMenuItem] = useState('');
   const [selectedPathName, setSelectedPathName] = useState('');
   const [selectedCollectionId, setSelectedCollectionId] = useState('');
+  const [selectedItemType, setSelectedItemType] = useState('');
+
+  const messageForConfirmActionModal = `Do you wish to delete ${selectedItemType}`;
 
   const handleDeleteMenuItem = (menuItemType, path, collectionId) => {
     if (menuItemType === OBJ_TYPES.collection) {
@@ -70,7 +76,8 @@ const Collections = ({ collections }) => {
               setNewLabelModal(true);
               break;
             case DirectoryOptionsActions.delete.value:
-              handleDeleteMenuItem(itemType, pathName, collections[0].id);
+              setSelectedItemType(itemType);
+              setConfirmActionModalOpen(true);
               break;
             default:
               // need to return an error here
@@ -91,6 +98,15 @@ const Collections = ({ collections }) => {
         collectionId={selectedCollectionId}
         menuOption={selectedMenuItem}
       />
+      <ConfirmActionModal
+        closeFn={() => setConfirmActionModalOpen(false)}
+        open={confirmActionModalOpen}
+        message={messageForConfirmActionModal}
+        actionFn={() => {
+          handleDeleteMenuItem(selectedItemType, selectedPathName, selectedCollectionId);
+          setConfirmActionModalOpen(false);
+        }}
+      />
     </div>
   );
 };

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

@@ -4,9 +4,15 @@ import { ArchiveBoxIcon, DocumentIcon, TrashIcon } from '@heroicons/react/24/out
 import { OBJ_TYPES } from 'constants/Common';
 import { deleteEnvironmentFile } from 'service/collection';
 import EnvOptionsMenu from 'components/atoms/sidebar/environments/EnvOptionsMenu';
+import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 
 const Environment = ({ collectionId, collection }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
+  const [envToDelete, setEnvToDelete] = useState('');
+
+  const messageForConfirmActionModal = 'Do you wish to delete this environment';
+
   return (
     <>
       <li>
@@ -46,18 +52,8 @@ const Environment = ({ collectionId, collection }) => {
                     <div
                       className='relative inline-block p-2 text-left transition duration-200 ease-out rounded rounded-l-none hover:bg-slate-200'
                       onClick={() => {
-                        deleteEnvironmentFile(environment.name, collectionId)
-                          .then((result) => {
-                            console.log(
-                              `Deleted environment: name = ${environment.name}, path = ${environment.pathname}, collectionId = ${collectionId}, result: ${result}`,
-                            );
-                          })
-                          .catch((error) => {
-                            // TODO: show error in UI
-                            console.log(
-                              `Error deleting environment:  name = ${environment.name}, path = ${environment.pathname}, collectionId = ${collectionId} and error: ${error}`,
-                            );
-                          });
+                        setEnvToDelete(environment.name);
+                        setConfirmActionModalOpen(true);
                       }}
                     >
                       <TrashIcon className='w-4 h-4' aria-hidden='true' />
@@ -69,6 +65,26 @@ const Environment = ({ collectionId, collection }) => {
           </>
         )}
       </li>
+      <ConfirmActionModal
+        closeFn={() => setConfirmActionModalOpen(false)}
+        open={confirmActionModalOpen}
+        message={messageForConfirmActionModal}
+        actionFn={() => {
+          deleteEnvironmentFile(envToDelete, collectionId)
+            .then((result) => {
+              console.log(
+                `Deleted environment: name = ${envToDelete}, collectionId = ${collectionId}, result: ${result}`,
+              );
+            })
+            .catch((error) => {
+              // TODO: show error in UI
+              console.log(
+                `Error deleting environment:  name = ${envToDelete}, collectionId = ${collectionId} and error: ${error}`,
+              );
+            });
+          setConfirmActionModalOpen(false);
+        }}
+      />
     </>
   );
 };