feat: environment config changed to tab

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

@@ -1,18 +1,17 @@
-import React, { useRef, forwardRef, useState } from 'react';
+import React, { useRef, forwardRef } 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';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { uuid } from 'utils/common';
 
 const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const { environments, activeEnvironmentUid } = collection;
   const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
 
@@ -25,15 +24,15 @@ const EnvironmentSelector = ({ collection }) => {
     );
   });
 
-  const handleSettingsIconClick = () => {
-    setOpenSettingsModal(true);
-    dispatch(updateEnvironmentSettingsModalVisibility(true));
-  };
-
-  const handleModalClose = () => {
-    setOpenSettingsModal(false);
-    dispatch(updateEnvironmentSettingsModalVisibility(false));
-  };
+  const viewEnvironmentSettings = () => {
+    dispatch(
+      addTab({
+        uid: uuid(),
+        collectionUid: collection.uid,
+        type: 'environment-settings'
+      })
+    )
+  }
 
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
@@ -78,15 +77,14 @@ const EnvironmentSelector = ({ collection }) => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
+          <div className="dropdown-item border-top" onClick={viewEnvironmentSettings}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
             <span>Configure</span>
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
     </StyledWrapper>
   );
 };

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

@@ -1,18 +1,13 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  margin-inline: -1rem;
-  margin-block: -1.5rem;
-
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
-
-  .environments-sidebar {
-    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
-    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
-    min-height: 400px;
-    height: 100%;
-    max-height: 85vh;
-    overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 0.25rem;
+
+  .environment-list-divider {
+      border-right: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
   }
 
   .environment-item {
@@ -21,7 +16,7 @@ const StyledWrapper = styled.div`
     position: relative;
     cursor: pointer;
     padding: 8px 10px;
-    border-left: solid 2px transparent;
+    border-bottom: solid 2px transparent;
     text-decoration: none;
 
     &:hover {
@@ -32,7 +27,7 @@ const StyledWrapper = styled.div`
 
   .active {
     background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
-    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
+    border-bottom: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
     &:hover {
       background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
     }

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

@@ -93,13 +93,13 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
       {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
 
       <div className="flex">
-        <div>
+        <div className="environment-list-divider">
           {switchEnvConfirmClose && (
             <div className="flex items-center justify-between tab-container px-1">
               <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
             </div>
           )}
-          <div className="environments-sidebar flex flex-col">
+          <div className="flex flex-col justify-around h-full">
             {environments &&
               environments.length &&
               environments.map((env) => (

packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js

@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+
   button.btn-create-environment {
     &:hover {
       span {

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

@@ -1,4 +1,3 @@
-import Modal from 'components/Modal/index';
 import React, { useState } from 'react';
 import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
@@ -42,15 +41,14 @@ const DefaultTab = ({ setTab }) => {
   );
 };
 
-const EnvironmentSettings = ({ collection, onClose }) => {
+const EnvironmentSettings = ({ collection }) => {
   const [isModified, setIsModified] = useState(false);
   const { environments } = collection;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [tab, setTab] = useState('default');
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
-        <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
           {tab === 'create' ? (
             <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : tab === 'import' ? (
@@ -59,21 +57,20 @@ const EnvironmentSettings = ({ collection, onClose }) => {
             <></>
           )}
           <DefaultTab setTab={setTab} />
-        </Modal>
       </StyledWrapper>
     );
   }
 
   return (
-    <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
+    <StyledWrapper>
       <EnvironmentList
         selectedEnvironment={selectedEnvironment}
         setSelectedEnvironment={setSelectedEnvironment}
         collection={collection}
         isModified={isModified}
         setIsModified={setIsModified}
       />
-    </Modal>
+    </StyledWrapper>
   );
 };
 

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -22,6 +22,7 @@ import SecuritySettings from 'components/SecuritySettings';
 import FolderSettings from 'components/FolderSettings';
 import { getGlobalEnvironmentVariables } from 'utils/collections/index';
 import { produce } from 'immer';
+import EnvironmentSettings from 'components/Environments/EnvironmentSettings';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -157,6 +158,10 @@ const RequestTabPanel = () => {
     return <SecuritySettings collection={collection} />;
   }
 
+  if (focusedTab.type === 'environment-settings') {
+    return <EnvironmentSettings collection={collection} />;
+  }
+
   const item = findItemInCollection(collection, activeTabUid);
   if (!item || !item.uid) {
     return <RequestNotFound itemUid={activeTabUid} />;

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -45,6 +45,14 @@ const SpecialTab = ({ handleCloseClick, type, tabName }) => {
           </>
         );
       }
+      case 'environment-settings': {
+        return (
+          <>
+            <IconSettings size={18} strokeWidth={1.5} aria-hidden="true" />
+            <span className="ml-1 leading-6">Environments</span>
+          </>
+        );
+      }
     }
   };
 

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -70,7 +70,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   };
 
   const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
-  if (['collection-settings', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
+  if (['collection-settings', 'folder-settings', 'variables', 'collection-runner', 'security-settings', 'environment-settings'].includes(tab.type)) {
     return (
       <StyledWrapper
         className="flex items-center justify-between tab-container px-1"

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

@@ -25,7 +25,7 @@ export const tabsSlice = createSlice({
       }
 
       if (
-        ['variables', 'collection-settings', 'collection-runner', 'security-settings'].includes(action.payload.type)
+        ['variables', 'collection-settings', 'collection-runner', 'security-settings', 'environment-settings'].includes(action.payload.type)
       ) {
         const tab = tabTypeAlreadyExists(state.tabs, action.payload.collectionUid, action.payload.type);
         if (tab) {