extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-06-28 16:01:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor environment variable styling and error handling (#3291)

Browse Source
This commit is contained in:
Sanjai Kumar 2024-10-14 18:23:32 +05:30 committed by GitHub
parent a880e030eb
commit a2d9249515
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
View File

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

40
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
View File

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