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,