mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-29 00:11:30 +02:00
Refactor environment variable styling and error handling (#3291)
This commit is contained in:
parent
a880e030eb
commit
a2d9249515
@ -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;
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user