fix: global env ui fixes (#3305)

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

@@ -7,6 +7,7 @@ import toast from 'react-hot-toast';
 import { useDispatch, useSelector } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import ToolHint from 'components/ToolHint/index';
 
 const EnvironmentSelector = () => {
   const dispatch = useDispatch();
@@ -18,12 +19,14 @@ const EnvironmentSelector = () => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className={`current-environment flex flex-row gap-1 rounded-xl text-xs cursor-pointer items-center justify-center select-none ${activeGlobalEnvironmentUid? 'environment-active': ''}`}>
-        <IconWorld className="globe" size={16} strokeWidth={1.5} />
-        {
-          activeEnvironment ? <div>{activeEnvironment?.name}</div> : null
-        }
-      </div>
+        <div ref={ref} className={`current-environment flex flex-row gap-1 rounded-xl text-xs cursor-pointer items-center justify-center select-none ${activeGlobalEnvironmentUid? 'environment-active': ''}`}>
+          <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId" className='flex flex-row'>
+            <IconWorld className="globe" size={16} strokeWidth={1.5} />
+            {
+              activeEnvironment ? <div>{activeEnvironment?.name}</div> : null
+            }
+          </ToolHint>
+        </div>
     );
   });
 

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -39,6 +39,11 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
 
+  .tooltip-mod {
+    font-size: 11px !important;
+    width: 150px !important;
+  }
+
   input[type='text'] {
     width: 100%;
     border: solid 1px transparent;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
+import { IconTrash, IconAlertCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
@@ -11,6 +11,7 @@ import * as Yup from 'yup';
 import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { Tooltip } from 'react-tooltip';
 
 const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables }) => {
   const dispatch = useDispatch();
@@ -62,14 +63,15 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
 
   const ErrorMessage = ({ name }) => {
     const meta = formik.getFieldMeta(name);
+    const id = uuid();
     if (!meta.error || !meta.touched) {
       return null;
     }
-
     return (
-      <label htmlFor={name} className="text-red-500">
-        {meta.error}
-      </label>
+      <span>
+        <IconAlertCircle id={id} className="text-red-600 cursor-pointer	" size={20} />
+        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
+      </span>
     );
   };
 
@@ -127,19 +129,21 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                   />
                 </td>
                 <td>
-                  <input
-                    type="text"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    className="mousetrap"
-                    id={`${index}.name`}
-                    name={`${index}.name`}
-                    value={variable.name}
-                    onChange={formik.handleChange}
-                  />
-                  <ErrorMessage name={`${index}.name`} />
+                  <div className="flex items-center">
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      className="mousetrap"
+                      id={`${index}.name`}
+                      name={`${index}.name`}
+                      value={variable.name}
+                      onChange={formik.handleChange}
+                    />
+                    <ErrorMessage name={`${index}.name`} />
+                  </div>
                 </td>
                 <td className="flex flex-row flex-nowrap">
                   <div className="overflow-hidden grow w-full relative">

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

@@ -20,18 +20,17 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
   const prevEnvUids = usePrevious(envUids);
 
   useEffect(() => {
-    if (selectedEnvironment) {
-      setOriginalEnvironmentVariables(selectedEnvironment.variables);
+    if (!environments?.length) {
+      setSelectedEnvironment(null);
+      setOriginalEnvironmentVariables([]);
       return;
     }
 
-    const environment = environments?.find(env => env?.uid === activeEnvironmentUid);
-    if (environment) {
-      setSelectedEnvironment(environment);
-    } else {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
-  }, [environments, selectedEnvironment]);
+    const environment = environments?.find(env => env.uid === activeEnvironmentUid) || environments?.[0];
+    setSelectedEnvironment(environment);
+    setOriginalEnvironmentVariables(environment?.variables || []);
+  }, [environments, activeEnvironmentUid]);
+  
 
   useEffect(() => {
     if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {

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

@@ -62,7 +62,7 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
   }
 
   return (
-    <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
+    <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
       <EnvironmentList
         environments={globalEnvironments}
         activeEnvironmentUid={activeGlobalEnvironmentUid}

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

@@ -69,11 +69,8 @@ const CollectionToolBar = ({ collection }) => {
             </ToolHint>
           </span>
           <span>
-            <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId">
-              <GlobalEnvironmentSelector />
-            </ToolHint>
+            <GlobalEnvironmentSelector />
           </span>
-          
           <EnvironmentSelector collection={collection} />
         </div>
       </div>

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

@@ -10,7 +10,8 @@ const ToolHint = ({
   tooltipStyle = {},
   place = 'top',
   offset,
-  theme = null
+  theme = null,
+  className = ''
 }) => {
   const { theme: contextTheme } = useTheme();
   const appliedTheme = theme || contextTheme;
@@ -29,7 +30,7 @@ const ToolHint = ({
 
   return (
     <>
-      <span id={toolhintId}>{children}</span>
+      <span id={toolhintId} className={className}>{children}</span>
       <StyledWrapper theme={appliedTheme}>
         <ReactToolHint
           anchorId={toolhintId}