mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-21 13:47:39 +02:00
refactor: remove error class names from input error messages (#1071)
* refactor: remove error class names from input error messages * refactor: update error message test * refactor: show constraint value length error earlier
This commit is contained in:
parent
2f604440b4
commit
42d30e2d79
@ -74,7 +74,7 @@ describe('feature', () => {
|
|||||||
cy.get("[data-testid='CF_DESC_ID'").type('hello-world');
|
cy.get("[data-testid='CF_DESC_ID'").type('hello-world');
|
||||||
cy.get("[data-testid='CF_CREATE_BTN_ID']").click();
|
cy.get("[data-testid='CF_CREATE_BTN_ID']").click();
|
||||||
cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
|
cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
|
||||||
'A feature with this name already exists'
|
'A toggle with that name already exists'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@ import { IPermission } from 'interfaces/project';
|
|||||||
import cloneDeep from 'lodash.clonedeep';
|
import cloneDeep from 'lodash.clonedeep';
|
||||||
import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
|
import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
|
||||||
import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
|
import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
|
||||||
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
|
|
||||||
export interface ICheckedPermission {
|
export interface ICheckedPermission {
|
||||||
[key: string]: IPermission;
|
[key: string]: IPermission;
|
||||||
@ -203,21 +204,14 @@ const useProjectRoleForm = (
|
|||||||
permissions,
|
permissions,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
const NAME_EXISTS_ERROR =
|
|
||||||
'BadRequestError: There already exists a role with the name';
|
|
||||||
const validateNameUniqueness = async () => {
|
const validateNameUniqueness = async () => {
|
||||||
const payload = getProjectRolePayload();
|
const payload = getProjectRolePayload();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await validateRole(payload);
|
await validateRole(payload);
|
||||||
} catch (e) {
|
} catch (error: unknown) {
|
||||||
// @ts-expect-error
|
setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
|
||||||
if (e.toString().includes(NAME_EXISTS_ERROR)) {
|
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
name: 'There already exists a role with this role name',
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -70,15 +70,20 @@ export const FreeTextInput = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const addValues = () => {
|
const addValues = () => {
|
||||||
if (inputValues.length === 0) {
|
const newValues = uniqueValues([
|
||||||
setError('values can not be empty');
|
...values,
|
||||||
return;
|
...parseParameterStrings(inputValues),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (newValues.length === 0) {
|
||||||
|
setError('values cannot be empty');
|
||||||
|
} else if (newValues.some(v => v.length > 100)) {
|
||||||
|
setError('values cannot be longer than 100 characters');
|
||||||
|
} else {
|
||||||
|
setError('');
|
||||||
|
setInputValues('');
|
||||||
|
setValues(newValues);
|
||||||
}
|
}
|
||||||
setError('');
|
|
||||||
setValues(
|
|
||||||
uniqueValues([...values, ...parseParameterStrings(inputValues)])
|
|
||||||
);
|
|
||||||
setInputValues('');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
|
import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
|
||||||
import { ILegalValue } from 'interfaces/context';
|
import { ILegalValue } from 'interfaces/context';
|
||||||
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
|
|
||||||
export const useContextForm = (
|
export const useContextForm = (
|
||||||
initialContextName = '',
|
initialContextName = '',
|
||||||
@ -41,8 +42,6 @@ export const useContextForm = (
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const NAME_EXISTS_ERROR = 'A context field with that name already exist';
|
|
||||||
|
|
||||||
const validateContext = async () => {
|
const validateContext = async () => {
|
||||||
if (contextName.length === 0) {
|
if (contextName.length === 0) {
|
||||||
setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
|
setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
|
||||||
@ -51,18 +50,8 @@ export const useContextForm = (
|
|||||||
try {
|
try {
|
||||||
await validateContextName(contextName);
|
await validateContextName(contextName);
|
||||||
return true;
|
return true;
|
||||||
} catch (e: any) {
|
} catch (error: unknown) {
|
||||||
if (e.toString().includes(NAME_EXISTS_ERROR)) {
|
setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
name: 'A context field with that name already exist',
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
name: e.toString(),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
|
import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
|
||||||
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
|
|
||||||
const useEnvironmentForm = (initialName = '', initialType = 'development') => {
|
const useEnvironmentForm = (initialName = '', initialType = 'development') => {
|
||||||
const NAME_EXISTS_ERROR = 'Error: Environment';
|
|
||||||
const [name, setName] = useState(initialName);
|
const [name, setName] = useState(initialName);
|
||||||
const [type, setType] = useState(initialType);
|
const [type, setType] = useState(initialType);
|
||||||
const [errors, setErrors] = useState({});
|
const [errors, setErrors] = useState({});
|
||||||
@ -35,16 +35,11 @@ const useEnvironmentForm = (initialName = '', initialType = 'development') => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
await validateEnvName(name);
|
await validateEnvName(name);
|
||||||
} catch (e: any) {
|
return true;
|
||||||
if (e.toString().includes(NAME_EXISTS_ERROR)) {
|
} catch (error: unknown) {
|
||||||
setErrors(prev => ({
|
setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
|
||||||
...prev,
|
|
||||||
name: 'Name already exists',
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearErrors = () => {
|
const clearErrors = () => {
|
||||||
|
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
|
|||||||
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
|
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
|
||||||
import useQueryParams from 'hooks/useQueryParams';
|
import useQueryParams from 'hooks/useQueryParams';
|
||||||
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||||||
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
|
|
||||||
const useFeatureForm = (
|
const useFeatureForm = (
|
||||||
initialName = '',
|
initialName = '',
|
||||||
@ -55,8 +56,6 @@ const useFeatureForm = (
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const NAME_EXISTS_ERROR = 'Error: A toggle with that name already exists';
|
|
||||||
|
|
||||||
const validateToggleName = async () => {
|
const validateToggleName = async () => {
|
||||||
if (name.length === 0) {
|
if (name.length === 0) {
|
||||||
setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
|
setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
|
||||||
@ -65,18 +64,8 @@ const useFeatureForm = (
|
|||||||
try {
|
try {
|
||||||
await validateFeatureToggleName(name);
|
await validateFeatureToggleName(name);
|
||||||
return true;
|
return true;
|
||||||
} catch (e: any) {
|
} catch (error: unknown) {
|
||||||
if (e.toString().includes(NAME_EXISTS_ERROR)) {
|
setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
name: 'A feature with this name already exists',
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
name: e.toString(),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
|
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
|
||||||
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||||
|
|
||||||
const useProjectForm = (
|
const useProjectForm = (
|
||||||
initialProjectId = '',
|
initialProjectId = '',
|
||||||
@ -31,7 +32,6 @@ const useProjectForm = (
|
|||||||
description: projectDesc,
|
description: projectDesc,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
const NAME_EXISTS_ERROR = 'Error: A project with this id already exists.';
|
|
||||||
|
|
||||||
const validateProjectId = async () => {
|
const validateProjectId = async () => {
|
||||||
if (projectId.length === 0) {
|
if (projectId.length === 0) {
|
||||||
@ -41,18 +41,8 @@ const useProjectForm = (
|
|||||||
try {
|
try {
|
||||||
await validateId(getProjectPayload());
|
await validateId(getProjectPayload());
|
||||||
return true;
|
return true;
|
||||||
} catch (e: any) {
|
} catch (error: unknown) {
|
||||||
if (e.toString().includes(NAME_EXISTS_ERROR)) {
|
setErrors(prev => ({ ...prev, id: formatUnknownError(error) }));
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
id: 'A project with this id already exists',
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
id: e.toString(),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user