diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js index 52ecad6c4..869978572 100644 --- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js +++ b/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 ( -
- - { - activeEnvironment ?
{activeEnvironment?.name}
: null - } -
+
+ + + { + activeEnvironment ?
{activeEnvironment?.name}
: null + } +
+
); }); diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js index 7eec1394c..5f4e34d8f 100644 --- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js +++ b/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; diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js index c33233bc8..10ab9fba3 100644 --- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js +++ b/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 ( - + + + + ); }; @@ -127,19 +129,21 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV /> - - +
+ + +
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js index 6516ba833..444b72f2d 100644 --- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js +++ b/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) { diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js index c93285f56..551a4ec58 100644 --- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js +++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js @@ -62,7 +62,7 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o } return ( - + { - - - + -
diff --git a/packages/bruno-app/src/components/ToolHint/index.js b/packages/bruno-app/src/components/ToolHint/index.js index ffd68df8d..b8799dd69 100644 --- a/packages/bruno-app/src/components/ToolHint/index.js +++ b/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 ( <> - {children} + {children}