feat: enhance SaveRequestsModal to handle environment drafts (#6857)

packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js

@@ -4,10 +4,11 @@ import filter from 'lodash/filter';
 import groupBy from 'lodash/groupBy';
 import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
-import { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges } from 'utils/collections';
+import { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges, findEnvironmentInCollection } from 'utils/collections';
 import { pluralizeWord } from 'utils/common';
 import { completeQuitFlow } from 'providers/ReduxStore/slices/app';
-import { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders } from 'providers/ReduxStore/slices/collections/actions';
+import { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders, saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
 import Button from 'ui/Button';
@@ -16,12 +17,15 @@ const SaveRequestsModal = ({ onClose }) => {
   const MAX_UNSAVED_ITEMS_TO_SHOW = 5;
   const collections = useSelector((state) => state.collections.collections);
   const tabs = useSelector((state) => state.tabs.tabs);
+  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+  const globalEnvironmentDraft = useSelector((state) => state.globalEnvironments.globalEnvironmentDraft);
   const dispatch = useDispatch();
 
   const allDrafts = useMemo(() => {
     const requestDrafts = [];
     const collectionDrafts = [];
     const folderDrafts = [];
+    const environmentDrafts = [];
     const tabsByCollection = groupBy(tabs, (t) => t.collectionUid);
 
     Object.keys(tabsByCollection).forEach((collectionUid) => {
@@ -36,6 +40,21 @@ const SaveRequestsModal = ({ onClose }) => {
           });
         }
 
+        // Check for collection environment draft
+        if (collection.environmentsDraft) {
+          const { environmentUid, variables } = collection.environmentsDraft;
+          const environment = findEnvironmentInCollection(collection, environmentUid);
+          if (environment && variables) {
+            environmentDrafts.push({
+              type: 'collection-environment',
+              name: environment.name,
+              environmentUid,
+              variables,
+              collectionUid: collectionUid
+            });
+          }
+        }
+
         // Check for request and folder drafts
         const items = flattenItems(collection.items);
 
@@ -62,8 +81,22 @@ const SaveRequestsModal = ({ onClose }) => {
       }
     });
 
-    return [...collectionDrafts, ...folderDrafts, ...requestDrafts];
-  }, [collections, tabs]);
+    // Check for global environment draft
+    if (globalEnvironmentDraft) {
+      const { environmentUid, variables } = globalEnvironmentDraft;
+      const environment = globalEnvironments?.find((env) => env.uid === environmentUid);
+      if (environment && variables) {
+        environmentDrafts.push({
+          type: 'global-environment',
+          name: environment.name,
+          environmentUid,
+          variables
+        });
+      }
+    }
+
+    return [...collectionDrafts, ...folderDrafts, ...environmentDrafts, ...requestDrafts];
+  }, [collections, tabs, globalEnvironments, globalEnvironmentDraft]);
 
   const totalDraftsCount = allDrafts.length;
 
@@ -84,6 +117,8 @@ const SaveRequestsModal = ({ onClose }) => {
       const collectionDrafts = allDrafts.filter((d) => d.type === 'collection');
       const folderDrafts = allDrafts.filter((d) => d.type === 'folder');
       const requestDrafts = allDrafts.filter((d) => d.type === 'request');
+      const collectionEnvironmentDrafts = allDrafts.filter((d) => d.type === 'collection-environment');
+      const globalEnvironmentDrafts = allDrafts.filter((d) => d.type === 'global-environment');
 
       // Save all collection drafts
       if (collectionDrafts.length > 0) {
@@ -100,6 +135,16 @@ const SaveRequestsModal = ({ onClose }) => {
         await dispatch(saveMultipleRequests(requestDrafts));
       }
 
+      // Save all collection environment drafts
+      for (const draft of collectionEnvironmentDrafts) {
+        await dispatch(saveEnvironment(draft.variables, draft.environmentUid, draft.collectionUid));
+      }
+
+      // Save all global environment drafts
+      for (const draft of globalEnvironmentDrafts) {
+        await dispatch(saveGlobalEnvironment({ variables: draft.variables, environmentUid: draft.environmentUid }));
+      }
+
       dispatch(completeQuitFlow());
       onClose();
     } catch (error) {
@@ -134,12 +179,23 @@ const SaveRequestsModal = ({ onClose }) => {
 
       <ul className="mt-4">
         {allDrafts.slice(0, MAX_UNSAVED_ITEMS_TO_SHOW).map((item, index) => {
-          const prefix
-            = item.type === 'collection'
-              ? 'Collection: '
-              : item.type === 'folder'
-                ? 'Folder: '
-                : 'Request: ';
+          let prefix;
+          switch (item.type) {
+            case 'collection':
+              prefix = 'Collection: ';
+              break;
+            case 'folder':
+              prefix = 'Folder: ';
+              break;
+            case 'collection-environment':
+              prefix = 'Collection Environment: ';
+              break;
+            case 'global-environment':
+              prefix = 'Global Environment: ';
+              break;
+            default:
+              prefix = 'Request: ';
+          }
           return (
             <li key={`${item.type}-${item.collectionUid || item.uid}-${index}`} className="mt-1 text-xs">
               {prefix}