diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
index be15d598d..4ee77acc5 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
@@ -3,15 +3,23 @@ import { getTotalRequestCountInCollection } from 'utils/collections/';
import { IconBox, IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
import ShareCollection from 'components/ShareCollection/index';
+import { updateEnvironmentSettingsModalVisibility, updateGlobalEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
const Info = ({ collection }) => {
+ const dispatch = useDispatch();
const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
const isCollectionLoading = areItemsLoading(collection);
const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
+ const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+
+ const collectionEnvironmentCount = collection.environments?.length || 0;
+ const globalEnvironmentCount = globalEnvironments?.length || 0;
+
const handleToggleShowShareCollectionModal = (value) => (e) => {
toggleShowShareCollectionModal(value);
};
@@ -39,9 +47,24 @@ const Info = ({ collection }) => {
-
Environments
-
- {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
+
Environments
+
+
+
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index 8b1c4ee83..eb7bbc5e0 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -3,7 +3,7 @@ import find from 'lodash/find';
import Dropdown from 'components/Dropdown';
import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux';
-import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
+import { updateEnvironmentSettingsModalVisibility, updateGlobalEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
import toast from 'react-hot-toast';
@@ -20,8 +20,6 @@ const EnvironmentSelector = ({ collection }) => {
const dispatch = useDispatch();
const dropdownTippyRef = useRef();
const [activeTab, setActiveTab] = useState('collection');
- const [showGlobalSettings, setShowGlobalSettings] = useState(false);
- const [showCollectionSettings, setShowCollectionSettings] = useState(false);
const [showCreateGlobalModal, setShowCreateGlobalModal] = useState(false);
const [showImportGlobalModal, setShowImportGlobalModal] = useState(false);
const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
@@ -29,6 +27,8 @@ const EnvironmentSelector = ({ collection }) => {
const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
+ const isEnvironmentSettingsModalOpen = useSelector((state) => state.app.isEnvironmentSettingsModalOpen);
+ const isGlobalEnvironmentSettingsModalOpen = useSelector((state) => state.app.isGlobalEnvironmentSettingsModalOpen);
const activeGlobalEnvironment = activeGlobalEnvironmentUid
? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid)
: null;
@@ -79,9 +79,8 @@ const EnvironmentSelector = ({ collection }) => {
const handleSettingsClick = () => {
if (activeTab === 'collection') {
dispatch(updateEnvironmentSettingsModalVisibility(true));
- setShowCollectionSettings(true);
} else {
- setShowGlobalSettings(true);
+ dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
}
dropdownTippyRef.current.hide();
};
@@ -108,9 +107,8 @@ const EnvironmentSelector = ({ collection }) => {
// Modal handlers
const handleCloseSettings = () => {
- setShowGlobalSettings(false);
- setShowCollectionSettings(false);
dispatch(updateEnvironmentSettingsModalVisibility(false));
+ dispatch(updateGlobalEnvironmentSettingsModalVisibility(false));
};
// Calculate dropdown width based on the longest environment name.
@@ -220,7 +218,7 @@ const EnvironmentSelector = ({ collection }) => {
{/* Modals - Rendered outside dropdown to avoid conflicts */}
- {showGlobalSettings && (
+ {isGlobalEnvironmentSettingsModalOpen && (
{
/>
)}
- {showCollectionSettings && }
+ {isEnvironmentSettingsModalOpen && (
+
+ )}
{showCreateGlobalModal && (
setShowCreateGlobalModal(false)}
onEnvironmentCreated={() => {
- setShowGlobalSettings(true);
+ dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
}}
/>
)}
@@ -245,7 +245,7 @@ const EnvironmentSelector = ({ collection }) => {
type="global"
onClose={() => setShowImportGlobalModal(false)}
onEnvironmentCreated={() => {
- setShowGlobalSettings(true);
+ dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
}}
/>
)}
@@ -255,7 +255,7 @@ const EnvironmentSelector = ({ collection }) => {
collection={collection}
onClose={() => setShowCreateCollectionModal(false)}
onEnvironmentCreated={() => {
- setShowCollectionSettings(true);
+ dispatch(updateEnvironmentSettingsModalVisibility(true));
}}
/>
)}
@@ -266,7 +266,7 @@ const EnvironmentSelector = ({ collection }) => {
collection={collection}
onClose={() => setShowImportCollectionModal(false)}
onEnvironmentCreated={() => {
- setShowCollectionSettings(true);
+ dispatch(updateEnvironmentSettingsModalVisibility(true));
}}
/>
)}
diff --git a/packages/bruno-app/src/providers/Hotkeys/index.js b/packages/bruno-app/src/providers/Hotkeys/index.js
index 841dc200a..32aa8be21 100644
--- a/packages/bruno-app/src/providers/Hotkeys/index.js
+++ b/packages/bruno-app/src/providers/Hotkeys/index.js
@@ -27,6 +27,7 @@ export const HotkeysProvider = (props) => {
const collections = useSelector((state) => state.collections.collections);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const isEnvironmentSettingsModalOpen = useSelector((state) => state.app.isEnvironmentSettingsModalOpen);
+ const isGlobalEnvironmentSettingsModalOpen = useSelector((state) => state.app.isGlobalEnvironmentSettingsModalOpen);
const [showEnvSettingsModal, setShowEnvSettingsModal] = useState(false);
const [showNewRequestModal, setShowNewRequestModal] = useState(false);
const [showGlobalSearchModal, setShowGlobalSearchModal] = useState(false);
@@ -43,7 +44,7 @@ export const HotkeysProvider = (props) => {
// save hotkey
useEffect(() => {
Mousetrap.bind([...getKeyBindingsForActionAllOS('save')], (e) => {
- if (isEnvironmentSettingsModalOpen) {
+ if (isEnvironmentSettingsModalOpen || isGlobalEnvironmentSettingsModalOpen) {
console.log('todo: save environment settings');
} else {
const activeTab = find(tabs, (t) => t.uid === activeTabUid);
@@ -70,7 +71,7 @@ export const HotkeysProvider = (props) => {
return () => {
Mousetrap.unbind([...getKeyBindingsForActionAllOS('save')]);
};
- }, [activeTabUid, tabs, saveRequest, collections, isEnvironmentSettingsModalOpen]);
+ }, [activeTabUid, tabs, saveRequest, collections, isEnvironmentSettingsModalOpen, isGlobalEnvironmentSettingsModalOpen]);
// send request (ctrl/cmd + enter)
useEffect(() => {
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
index df6ab3587..aeb1692a5 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
@@ -11,6 +11,7 @@ const initialState = {
showHomePage: false,
showPreferences: false,
isEnvironmentSettingsModalOpen: false,
+ isGlobalEnvironmentSettingsModalOpen: false,
preferences: {
request: {
sslVerification: true,
@@ -66,6 +67,9 @@ export const appSlice = createSlice({
updateEnvironmentSettingsModalVisibility: (state, action) => {
state.isEnvironmentSettingsModalOpen = action.payload;
},
+ updateGlobalEnvironmentSettingsModalVisibility: (state, action) => {
+ state.isGlobalEnvironmentSettingsModalOpen = action.payload;
+ },
showHomePage: (state) => {
state.showHomePage = true;
},
@@ -115,6 +119,7 @@ export const {
updateLeftSidebarWidth,
updateIsDragging,
updateEnvironmentSettingsModalVisibility,
+ updateGlobalEnvironmentSettingsModalVisibility,
showHomePage,
hideHomePage,
showPreferences,