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

frontend/cypress/integration/feature/feature.spec.ts

@@ -74,7 +74,7 @@ describe('feature', () => {
         cy.get("[data-testid='CF_DESC_ID'").type('hello-world');
         cy.get("[data-testid='CF_CREATE_BTN_ID']").click();
         cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
-            'A feature with this name already exists'
+            'A toggle with that name already exists'
         );
     });
 

frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts

@@ -3,6 +3,7 @@ import { IPermission } from 'interfaces/project';
 import cloneDeep from 'lodash.clonedeep';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 export interface ICheckedPermission {
     [key: string]: IPermission;
@@ -203,21 +204,14 @@ const useProjectRoleForm = (
             permissions,
         };
     };
-    const NAME_EXISTS_ERROR =
-        'BadRequestError: There already exists a role with the name';
+
     const validateNameUniqueness = async () => {
         const payload = getProjectRolePayload();
 
         try {
             await validateRole(payload);
-        } catch (e) {
-            // @ts-expect-error
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
-                setErrors(prev => ({
-                    ...prev,
-                    name: 'There already exists a role with this role name',
-                }));
-            }
+        } catch (error: unknown) {
+            setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
         }
     };
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx

@@ -70,15 +70,20 @@ export const FreeTextInput = ({
     };
 
     const addValues = () => {
-        if (inputValues.length === 0) {
-            setError('values can not be empty');
-            return;
+        const newValues = uniqueValues([
+            ...values,
+            ...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 (

frontend/src/component/context/hooks/useContextForm.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
 import { ILegalValue } from 'interfaces/context';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 export const useContextForm = (
     initialContextName = '',
@@ -41,8 +42,6 @@ export const useContextForm = (
         };
     };
 
-    const NAME_EXISTS_ERROR = 'A context field with that name already exist';
-
     const validateContext = async () => {
         if (contextName.length === 0) {
             setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
@@ -51,18 +50,8 @@ export const useContextForm = (
         try {
             await validateContextName(contextName);
             return true;
-        } catch (e: any) {
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
-                setErrors(prev => ({
-                    ...prev,
-                    name: 'A context field with that name already exist',
-                }));
-            } else {
-                setErrors(prev => ({
-                    ...prev,
-                    name: e.toString(),
-                }));
-            }
+        } catch (error: unknown) {
+            setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
             return false;
         }
     };

frontend/src/component/environments/hooks/useEnvironmentForm.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 const useEnvironmentForm = (initialName = '', initialType = 'development') => {
-    const NAME_EXISTS_ERROR = 'Error: Environment';
     const [name, setName] = useState(initialName);
     const [type, setType] = useState(initialType);
     const [errors, setErrors] = useState({});
@@ -35,16 +35,11 @@ const useEnvironmentForm = (initialName = '', initialType = 'development') => {
 
         try {
             await validateEnvName(name);
-        } catch (e: any) {
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
-                setErrors(prev => ({
-                    ...prev,
-                    name: 'Name already exists',
-                }));
-            }
+            return true;
+        } catch (error: unknown) {
+            setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
             return false;
         }
-        return true;
     };
 
     const clearErrors = () => {

frontend/src/component/feature/hooks/useFeatureForm.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import useQueryParams from 'hooks/useQueryParams';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 const useFeatureForm = (
     initialName = '',
@@ -55,8 +56,6 @@ const useFeatureForm = (
         };
     };
 
-    const NAME_EXISTS_ERROR = 'Error: A toggle with that name already exists';
-
     const validateToggleName = async () => {
         if (name.length === 0) {
             setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
@@ -65,18 +64,8 @@ const useFeatureForm = (
         try {
             await validateFeatureToggleName(name);
             return true;
-        } catch (e: any) {
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
-                setErrors(prev => ({
-                    ...prev,
-                    name: 'A feature with this name already exists',
-                }));
-            } else {
-                setErrors(prev => ({
-                    ...prev,
-                    name: e.toString(),
-                }));
-            }
+        } catch (error: unknown) {
+            setErrors(prev => ({ ...prev, name: formatUnknownError(error) }));
             return false;
         }
     };

frontend/src/component/project/Project/hooks/useProjectForm.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
+import { formatUnknownError } from 'utils/formatUnknownError';
 
 const useProjectForm = (
     initialProjectId = '',
@@ -31,7 +32,6 @@ const useProjectForm = (
             description: projectDesc,
         };
     };
-    const NAME_EXISTS_ERROR = 'Error: A project with this id already exists.';
 
     const validateProjectId = async () => {
         if (projectId.length === 0) {
@@ -41,18 +41,8 @@ const useProjectForm = (
         try {
             await validateId(getProjectPayload());
             return true;
-        } catch (e: any) {
-            if (e.toString().includes(NAME_EXISTS_ERROR)) {
-                setErrors(prev => ({
-                    ...prev,
-                    id: 'A project with this id already exists',
-                }));
-            } else {
-                setErrors(prev => ({
-                    ...prev,
-                    id: e.toString(),
-                }));
-            }
+        } catch (error: unknown) {
+            setErrors(prev => ({ ...prev, id: formatUnknownError(error) }));
             return false;
         }
     };