feat(#1447): wip on hotkey for save environment

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

@@ -2,6 +2,7 @@ import React, { useRef, forwardRef, useState } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
 import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
 import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
@@ -24,6 +25,16 @@ const EnvironmentSelector = ({ collection }) => {
     );
   });
 
+  const handleSettingsIconClick = () => {
+    setOpenSettingsModal(true);
+    dispatch(updateEnvironmentSettingsModalVisibility(true));
+  };
+
+  const handleModalClose = () => {
+    setOpenSettingsModal(false);
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+  };
+
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
   const onSelect = (environment) => {
@@ -66,7 +77,7 @@ const EnvironmentSelector = ({ collection }) => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
+          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
@@ -74,7 +85,7 @@ const EnvironmentSelector = ({ collection }) => {
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={() => setOpenSettingsModal(false)} />}
+      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
     </StyledWrapper>
   );
 };

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

@@ -18,6 +18,7 @@ export const HotkeysProvider = (props) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const collections = useSelector((state) => state.collections.collections);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const isEnvironmentSettingsModalOpen = useSelector((state) => state.app.isEnvironmentSettingsModalOpen);
   const [showSaveRequestModal, setShowSaveRequestModal] = useState(false);
   const [showEnvSettingsModal, setShowEnvSettingsModal] = useState(false);
   const [showNewRequestModal, setShowNewRequestModal] = useState(false);
@@ -43,16 +44,20 @@ export const HotkeysProvider = (props) => {
   // save hotkey
   useEffect(() => {
     Mousetrap.bind(['command+s', 'ctrl+s'], (e) => {
-      const activeTab = find(tabs, (t) => t.uid === activeTabUid);
-      if (activeTab) {
-        const collection = findCollectionByUid(collections, activeTab.collectionUid);
-        if (collection) {
-          const item = findItemInCollection(collection, activeTab.uid);
-          if (item && item.uid) {
-            dispatch(saveRequest(activeTab.uid, activeTab.collectionUid));
-          } else {
-            // todo: when ephermal requests go live
-            // setShowSaveRequestModal(true);
+      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 item = findItemInCollection(collection, activeTab.uid);
+            if (item && item.uid) {
+              dispatch(saveRequest(activeTab.uid, activeTab.collectionUid));
+            } else {
+              // todo: when ephermal requests go live
+              // setShowSaveRequestModal(true);
+            }
           }
         }
       }
@@ -63,7 +68,7 @@ export const HotkeysProvider = (props) => {
     return () => {
       Mousetrap.unbind(['command+s', 'ctrl+s']);
     };
-  }, [activeTabUid, tabs, saveRequest, collections]);
+  }, [activeTabUid, tabs, saveRequest, collections, isEnvironmentSettingsModalOpen]);
 
   // send request (ctrl/cmd + enter)
   useEffect(() => {

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

@@ -9,6 +9,7 @@ const initialState = {
   screenWidth: 500,
   showHomePage: false,
   showPreferences: false,
+  isEnvironmentSettingsModalOpen: false,
   preferences: {
     request: {
       sslVerification: true,
@@ -42,6 +43,9 @@ export const appSlice = createSlice({
     updateIsDragging: (state, action) => {
       state.isDragging = action.payload.isDragging;
     },
+    updateEnvironmentSettingsModalVisibility: (state, action) => {
+      state.isEnvironmentSettingsModalOpen = action.payload;
+    },
     showHomePage: (state) => {
       state.showHomePage = true;
     },
@@ -74,6 +78,7 @@ export const {
   refreshScreenWidth,
   updateLeftSidebarWidth,
   updateIsDragging,
+  updateEnvironmentSettingsModalVisibility,
   showHomePage,
   hideHomePage,
   showPreferences,