feat(usebruno#303): Default Environment

Add environment to the presets tab which will set the default environment on opening a collection. Show default environment inside of environment selector. Also add cli support for default environments.
n00o · Nov 23, 2023 · 50b5640 · 50b5640
1 parent 3f80a4d
commit 50b5640
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 5 deletions.
diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -22,6 +22,16 @@ const StyledWrapper = styled.div`
       outline: none !important;
     }
   }
+  .default-environment {
+    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    border-radius: 15px;
+
+    .caret {
+      margin-left: 0.25rem;
+      color: rgb(140, 140, 140);
+      fill: rgb(140, 140, 140);
+    }
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
@@ -1,4 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useRef, forwardRef } from 'react';
+import find from 'lodash/find';
+import Dropdown from 'components/Dropdown';
+import { IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
@@ -8,6 +11,8 @@ import cloneDeep from 'lodash/cloneDeep';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const { environments } = collection;
   const {
     brunoConfig: { presets: presets = {} }
   } = collection;
@@ -16,7 +21,8 @@ const PresetsSettings = ({ collection }) => {
     enableReinitialize: true,
     initialValues: {
       requestType: presets.requestType || 'http',
-      requestUrl: presets.requestUrl || ''
+      requestUrl: presets.requestUrl || '',
+      environment: find(environments, (e) => e.name === presets.environment) ? presets.environment : null
     },
     onSubmit: (newPresets) => {
       const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -26,6 +32,15 @@ const PresetsSettings = ({ collection }) => {
     }
   });
 
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="default-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
+        {formik.values.environment || 'No Environment'}
+        <IconCaretDown className="caret" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
   return (
     <StyledWrapper>
       <h1 className="font-medium mb-3">Collection Presets</h1>
@@ -83,6 +98,44 @@ const PresetsSettings = ({ collection }) => {
             </div>
           </div>
         </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="defaultEnv">
+            Environment
+          </label>
+          <div className="flex items-center cursor-pointer default-environment">
+            <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+              {environments && environments.length
+                ? environments.map((e) => (
+                    <div
+                      className="dropdown-item"
+                      name="environment"
+                      key={e.uid}
+                      value={formik.values.environment || 'No Environment'}
+                      onChange={formik.handleChange}
+                      onClick={() => {
+                        formik.setFieldValue('environment', e.name);
+                        dropdownTippyRef.current.hide();
+                      }}
+                    >
+                      <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2">{e.name}</span>
+                    </div>
+                  ))
+                : null}
+              <div
+                className="dropdown-item"
+                name="environment"
+                onChange={formik.handleChange}
+                onClick={() => {
+                  dropdownTippyRef.current.hide();
+                  formik.setFieldValue('environment', null);
+                }}
+              >
+                <IconDatabaseOff size={18} strokeWidth={1.5} />
+                <span className="ml-2">No Environment</span>
+              </div>
+            </Dropdown>
+          </div>
+        </div>
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .current-enviroment {
+  .ml-3 {
+    color: rgb(255, 255, 70);
+    font-weight: bold;
+  }
+  .current-environment {
     background-color: ${(props) => props.theme.sidebar.badge.bg};
     border-radius: 15px;
 

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useState } from 'react';
+import React, { useRef, forwardRef, useState, useEffect } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
@@ -17,7 +17,7 @@ const EnvironmentSelector = ({ collection }) => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="current-enviroment flex items-center justify-center pl-3 pr-2 py-1 select-none">
+      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
         {activeEnvironment ? activeEnvironment.name : 'No Environment'}
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
@@ -38,6 +38,16 @@ const EnvironmentSelector = ({ collection }) => {
       .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
   };
 
+  useEffect(() => {
+    let presetEnv = collection.brunoConfig?.presets?.environment;
+    if (presetEnv && !activeEnvironment) {
+      if (find(environments, (e) => e.name === presetEnv)) {
+        onSelect(find(environments, (e) => e.name === presetEnv));
+      } else {
+        toast.error(`Preset Environment ${presetEnv} not found`);
+      }
+    }
+  }, [collection.uid]);
   return (
     <StyledWrapper>
       <div className="flex items-center cursor-pointer environment-selector">
@@ -53,6 +63,9 @@ const EnvironmentSelector = ({ collection }) => {
                   }}
                 >
                   <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2">{e.name}</span>
+                  <span className="ml-3">
+                    {collection.brunoConfig?.presets?.environment == e.name ? '(Default)' : ''}
+                  </span>
                 </div>
               ))
             : null}
@@ -65,6 +78,12 @@ const EnvironmentSelector = ({ collection }) => {
           >
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
+            <span className="ml-3">
+              {collection.brunoConfig?.presets?.environment &&
+              find(environments, (e) => e.name === collection.brunoConfig.presets.environment)
+                ? ''
+                : '(Default)'}
+            </span>
           </div>
           <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
             <div className="pr-2 text-gray-600">

diff --git a/packages/bruno-cli/src/commands/run.js b/packages/bruno-cli/src/commands/run.js
@@ -240,6 +240,7 @@ const handler = async function (argv) {
     const collectionVariables = {};
     let envVars = {};
 
+    env = !env && brunoConfig?.presets?.environment ? brunoConfig.presets.environment : env;
     if (env) {
       const envFile = path.join(collectionPath, 'environments', `${env}.bru`);
       const envPathExists = await exists(envFile);