feat: ux improvements in environment settings

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, forwardRef, useRef } from 'react';
 import { findEnvironmentInCollection } from 'utils/collections';
+import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment/index';
 import StyledWrapper from './StyledWrapper';
@@ -9,14 +10,36 @@ const EnvironmentList = ({ collection }) => {
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
 
+  const envUids = environments ? environments.map((env) => env.uid) : [];
+  const prevEnvUids = usePrevious(envUids);
+
   useEffect(() => {
+    if(selectedEnvironment) {
+      return;
+    }
+      
     const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
     if(environment) {
       setSelectedEnvironment(environment);
     } else {
       setSelectedEnvironment(environments && environments.length ? environments[0] : null);
     }
-  }, [collection, environments]);
+  }, [collection, environments, selectedEnvironment]);
+
+  useEffect(() => {
+    // check env add
+    if (prevEnvUids && prevEnvUids.length &&  envUids.length > prevEnvUids.length) {
+      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
+      if(newEnv){
+        setSelectedEnvironment(newEnv);
+      }
+    }
+
+    // check env delete
+    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
+      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+    }     
+  }, [envUids, environments, prevEnvUids]);
 
   if (!selectedEnvironment) {
     return null;
@@ -31,7 +54,11 @@ const EnvironmentList = ({ collection }) => {
             {environments &&
               environments.length &&
               environments.map((env) => (
-                <div key={env.uid} className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'} onClick={() => setSelectedEnvironment(env)}>
+                <div
+                  key={env.uid}
+                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                  onClick={() => setSelectedEnvironment(env)}
+                >
                   <span>{env.name}</span>
                 </div>
               ))}

packages/bruno-app/src/hooks/usePrevious/index.js

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from 'react';
+
+function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value; //assign the value of ref to the argument
+  },[value]); //this code will run when the value of 'value' changes
+
+  return ref.current; //in the end, return the current ref value.
+}
+
+export default usePrevious;