extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 15:33:11 +01: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;
}
.tooltip-mod {
font-size: 11px !important;
width: 150px !important;
}
input[type='text'] {
width: 100%;
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 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 { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import toast from 'react-hot-toast';
import { Tooltip } from 'react-tooltip';
const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => {
const dispatch = useDispatch();
@ -59,14 +60,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
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>
);
};
@ -124,19 +126,21 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
/>
</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">