feat: nudge users to view docs on managing secrets

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

@@ -10,6 +10,7 @@ const StyledWrapper = styled.div`
     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;
   }
@@ -44,10 +45,8 @@ const StyledWrapper = styled.div`
     border-bottom: none;
     color: ${(props) => props.theme.textLink};
 
-    &:hover {
+    span:hover {
-      span {
+      text-decoration: underline;
-        text-decoration: underline;
-      }
     }
   }
 

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

@@ -3,8 +3,9 @@ import { findEnvironmentInCollection } from 'utils/collections';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload } from '@tabler/icons';
+import { IconDownload, IconShieldLock } from '@tabler/icons';
 import ImportEnvironment from '../ImportEnvironment';
+import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentList = ({ collection }) => {
@@ -12,6 +13,7 @@ const EnvironmentList = ({ collection }) => {
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
+  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
 
   const envUids = environments ? environments.map((env) => env.uid) : [];
   const prevEnvUids = usePrevious(envUids);
@@ -52,6 +54,7 @@ const EnvironmentList = ({ collection }) => {
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
       {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
+      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
       <div className="flex">
         <div>
           <div className="environments-sidebar flex flex-col">
@@ -70,9 +73,15 @@ const EnvironmentList = ({ collection }) => {
               + <span>Create</span>
             </div>
 
-            <div className="mt-auto flex items-center btn-import-environment" onClick={() => setOpenImportModal(true)}>
+            <div className="mt-auto btn-import-environment">
-              <IconDownload size={12} strokeWidth={2} />
+              <div className="flex items-center" onClick={() => setOpenImportModal(true)}>
-              <span className="label ml-1 text-xs">Import</span>
+                <IconDownload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Import</span>
+              </div>
+              <div className="flex items-center mt-2" onClick={() => setOpenManageSecretsModal(true)}>
+                <IconShieldLock size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Managing Secrets</span>
+              </div>
             </div>
           </div>
         </div>

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+
+const ManageSecrets = ({ onClose }) => {
+  return (
+    <Portal>
+      <Modal size="sm" title="Manage Secrets" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+        <div>
+          <p>In any collection, there are secrets that need to be managed.</p>
+          <p className="mt-2">These secrets can be anything such as API keys, passwords, or tokens.</p>
+          <p className="mt-4">Bruno offers two approaches to manage secrets in collections.</p>
+          <p className="mt-2">
+            Read more about it in our{' '}
+            <a
+              href="https://docs.usebruno.com/secrets-management/overview.html"
+              target="_blank"
+              rel="noreferrer"
+              className="text-link hover:underline"
+            >
+              docs
+            </a>
+            .
+          </p>
+        </div>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ManageSecrets;