Make ctrl+s hotkey work for environment modal

Author: bacteriostat

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -8,6 +8,7 @@ import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
+import { updateEnvironmentSettingsSelectedTab } from 'providers/ReduxStore/slices/collections/index';
 
 const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
@@ -28,6 +29,12 @@ const EnvironmentSelector = ({ collection }) => {
   const handleSettingsIconClick = () => {
     setOpenSettingsModal(true);
     dispatch(updateEnvironmentSettingsModalVisibility(true));
+    dispatch(
+      updateEnvironmentSettingsSelectedTab({
+        environmentUid: collection.activeEnvironmentUid,
+        collectionUid: collection.uid
+      })
+    )
   };
 
   const handleModalClose = () => {

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -14,8 +14,9 @@ import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
 import { getGlobalEnvironmentVariables } from 'utils/collections';
+import { updateEnvironment } from 'providers/ReduxStore/slices/collections/index';
 
-const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
+const EnvironmentVariables = ({ environment, collection, isModified, setIsModified, originalEnvironmentVariables, onClose }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
@@ -46,24 +47,24 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
       })
     ),
     onSubmit: (values) => {
-      if (!formik.dirty) {
+      if (!isModified) {
         toast.error('Nothing to save');
         return;
       }
 
-      dispatch(saveEnvironment(cloneDeep(values), environment.uid, collection.uid))
+      dispatch(saveEnvironment(environment.uid, collection.uid))
         .then(() => {
-          toast.success('Changes saved successfully');
-          formik.resetForm({ values });
           setIsModified(false);
         })
-        .catch(() => toast.error('An error occurred while saving the changes'));
+        .catch((err) => console.err(err));
     }
   });
 
   // Effect to track modifications.
   React.useEffect(() => {
-    setIsModified(formik.dirty);
+    if(formik.dirty){
+      setIsModified(formik.dirty);
+    }
   }, [formik.dirty]);
 
   const ErrorMessage = ({ name }) => {
@@ -110,6 +111,13 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   };
 
   useEffect(() => {
+    dispatch(
+      updateEnvironment({
+          variables: formik.values,
+          environmentUid: environment.uid,
+          collectionUid: collection.uid
+      })
+    )
     if (formik.dirty) {
       // Smooth scrolling to the changed parameter is temporarily disabled 
       // due to UX issues when editing the first row in a long list of environment variables.

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js

@@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
 
-const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
+const EnvironmentDetails = ({ environment, collection, isModified, setIsModified, onClose }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -38,7 +38,7 @@ const EnvironmentDetails = ({ environment, collection, setIsModified, onClose })
       </div>
 
       <div>
-        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
+        <EnvironmentVariables environment={environment} collection={collection} isModified={isModified} setIsModified={setIsModified} onClose={onClose} />
       </div>
     </div>
   );

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -10,6 +10,8 @@ import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ToolHint from 'components/ToolHint';
 import { isEqual } from 'lodash';
+import { updateEnvironmentSettingsSelectedTab } from 'providers/ReduxStore/slices/collections/index';
+import { useDispatch } from 'react-redux';
 
 const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose }) => {
   const { environments } = collection;
@@ -22,6 +24,8 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
 
   const envUids = environments ? environments.map((env) => env.uid) : [];
   const prevEnvUids = usePrevious(envUids);
+  
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (selectedEnvironment) {
@@ -57,6 +61,12 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
 
   const handleEnvironmentClick = (env) => {
     if (!isModified) {
+      dispatch(
+        updateEnvironmentSettingsSelectedTab({
+          environmentUid: env.uid,
+          collectionUid: collection.uid
+        })
+      )
       setSelectedEnvironment(env);
     } else {
       setSwitchEnvConfirmClose(true);
@@ -139,6 +149,7 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
         <EnvironmentDetails
           environment={selectedEnvironment}
           collection={collection}
+          isModified={isModified}
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
           onClose={onClose}

packages/bruno-app/src/providers/Hotkeys/index.js

@@ -15,6 +15,8 @@ import {
 import { findCollectionByUid, findItemInCollection } from 'utils/collections';
 import { closeTabs, switchTab } from 'providers/ReduxStore/slices/tabs';
 import { getKeyBindingsForActionAllOS } from './keyMappings';
+import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { updateEnvironmentSettingsSelectedTab } from 'providers/ReduxStore/slices/collections/index';
 
 export const HotkeysContext = React.createContext();
 
@@ -39,13 +41,18 @@ export const HotkeysProvider = (props) => {
   // save hotkey
   useEffect(() => {
     Mousetrap.bind([...getKeyBindingsForActionAllOS('save')], (e) => {
-      if (isEnvironmentSettingsModalOpen) {
-        console.log('todo: save environment settings');
-      } else {
-        const activeTab = find(tabs, (t) => t.uid === activeTabUid);
-        if (activeTab) {
-          const collection = findCollectionByUid(collections, activeTab.collectionUid);
-          if (collection) {
+      const activeTab = find(tabs, (t) => t.uid === activeTabUid);
+      if (activeTab) {
+        const collection = findCollectionByUid(collections, activeTab.collectionUid);
+        if(collection){
+          if (isEnvironmentSettingsModalOpen) {
+            dispatch(
+              saveEnvironment(
+                collection.environmentSettingsSelectedTab,
+                collection.uid
+              )
+            )
+          } else {
             const item = findItemInCollection(collection, activeTab.uid);
             if (item && item.uid) {
               if (activeTab.type === 'folder-settings') {
@@ -103,6 +110,12 @@ export const HotkeysProvider = (props) => {
         const collection = findCollectionByUid(collections, activeTab.collectionUid);
 
         if (collection) {
+          dispatch(
+            updateEnvironmentSettingsSelectedTab({
+              environmentUid: collection.activeEnvironmentUid,
+              collectionUid: collection.uid
+            })
+          )
           setShowEnvSettingsModal(true);
         }
       }

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -992,7 +992,7 @@ export const deleteEnvironment = (environmentUid, collectionUid) => (dispatch, g
   });
 };
 
-export const saveEnvironment = (variables, environmentUid, collectionUid) => (dispatch, getState) => {
+export const saveEnvironment = (environmentUid, collectionUid) => (dispatch, getState) => {
   return new Promise((resolve, reject) => {
     const state = getState();
     const collection = findCollectionByUid(state.collections.collections, collectionUid);
@@ -1006,14 +1006,16 @@ export const saveEnvironment = (variables, environmentUid, collectionUid) => (di
       return reject(new Error('Environment not found'));
     }
 
-    environment.variables = variables;
-
     const { ipcRenderer } = window;
     environmentSchema
       .validate(environment)
       .then(() => ipcRenderer.invoke('renderer:save-environment', collection.pathname, environment))
+      .then(toast.success('Environment saved successfully'))
       .then(resolve)
-      .catch(reject);
+      .catch((err) => {
+        toast.error('Failed to save environment!');
+        reject(err);
+      });
   });
 };
 

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -147,7 +147,7 @@ export const collectionsSlice = createSlice({
         collection.environments = filter(collection.environments, (e) => e.uid !== environment.uid);
       }
     },
-    saveEnvironment: (state, action) => {
+    updateEnvironment: (state, action) => {
       const { variables, environmentUid, collectionUid } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
 
@@ -175,6 +175,15 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    updateEnvironmentSettingsSelectedTab: (state, action) => {
+      const { environmentUid, collectionUid } = action.payload;
+
+      const collection = findCollectionByUid(state.collections, collectionUid);
+
+      if (collection) {
+        collection.environmentSettingsSelectedTab = environmentUid;
+      }
+    },
     newItem: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -2189,8 +2198,9 @@ export const {
   updateSettingsSelectedTab,
   updatedFolderSettingsSelectedTab,
   collectionUnlinkEnvFileEvent,
-  saveEnvironment,
+  updateEnvironment,
   selectEnvironment,
+  updateEnvironmentSettingsSelectedTab,
   newItem,
   deleteItem,
   renameItem,