diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx index bcff63da93..b9ad29089e 100644 --- a/frontend/src/component/context/ContextForm/ContextForm.tsx +++ b/frontend/src/component/context/ContextForm/ContextForm.tsx @@ -1,9 +1,9 @@ -import Input from '../../common/Input/Input'; +import Input from 'component/common/Input/Input'; import { TextField, Button, Switch, Chip, Typography } from '@material-ui/core'; import { useStyles } from './ContextForm.styles'; import React, { useState } from 'react'; import { Add } from '@material-ui/icons'; -import { trim } from '../../common/util'; +import { trim } from 'component/common/util'; interface IContextForm { contextName: string; @@ -15,20 +15,20 @@ interface IContextForm { setStickiness: React.Dispatch>; setLegalValues: React.Dispatch>; handleSubmit: (e: any) => void; - handleCancel: () => void; + onCancel: () => void; errors: { [key: string]: string }; mode: string; clearErrors: () => void; - validateNameUniqueness: () => void; + validateContext?: () => void; setErrors: React.Dispatch>; } const ENTER = 'Enter'; -const ContextForm: React.FC = ({ +export const ContextForm: React.FC = ({ children, handleSubmit, - handleCancel, + onCancel, contextName, contextDesc, legalValues, @@ -39,7 +39,7 @@ const ContextForm: React.FC = ({ setStickiness, errors, mode, - validateNameUniqueness, + validateContext, setErrors, clearErrors, }) => { @@ -108,7 +108,7 @@ const ContextForm: React.FC = ({ error={Boolean(errors.name)} errorText={errors.name} onFocus={() => clearErrors()} - onBlur={validateNameUniqueness} + onBlur={validateContext} autoFocus />

@@ -187,12 +187,10 @@ const ContextForm: React.FC = ({

{children} -
); }; - -export default ContextForm; diff --git a/frontend/src/component/context/CreateContext/CreateContext.tsx b/frontend/src/component/context/CreateContext/CreateContext.tsx index 14c69815f7..bba6d66b96 100644 --- a/frontend/src/component/context/CreateContext/CreateContext.tsx +++ b/frontend/src/component/context/CreateContext/CreateContext.tsx @@ -1,16 +1,16 @@ import { useHistory } from 'react-router-dom'; -import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; -import useToast from '../../../hooks/useToast'; -import FormTemplate from '../../common/FormTemplate/FormTemplate'; -import useContextForm from '../hooks/useContextForm'; -import ContextForm from '../ContextForm/ContextForm'; -import PermissionButton from '../../common/PermissionButton/PermissionButton'; -import { CREATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions'; -import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; -import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext'; -import { formatUnknownError } from '../../../utils/format-unknown-error'; +import { useContextForm } from '../hooks/useContextForm'; +import { ContextForm } from '../ContextForm/ContextForm'; +import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions'; +import FormTemplate from 'component/common/FormTemplate/FormTemplate'; +import PermissionButton from 'component/common/PermissionButton/PermissionButton'; +import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; +import useToast from 'hooks/useToast'; +import { formatUnknownError } from 'utils/format-unknown-error'; -const CreateContext = () => { +export const CreateContext = () => { const { setToastData, setToastApiError } = useToast(); const { uiConfig } = useUiConfig(); const history = useHistory(); @@ -24,8 +24,7 @@ const CreateContext = () => { setLegalValues, setStickiness, getContextPayload, - validateNameUniqueness, - validateName, + validateContext, clearErrors, setErrors, errors, @@ -35,7 +34,8 @@ const CreateContext = () => { const handleSubmit = async (e: Event) => { e.preventDefault(); - const validName = validateName(); + const validName = await validateContext(); + if (validName) { const payload = getContextPayload(); try { @@ -62,7 +62,7 @@ const CreateContext = () => { --data-raw '${JSON.stringify(getContextPayload(), undefined, 2)}'`; }; - const handleCancel = () => { + const onCancel = () => { history.goBack(); }; @@ -78,7 +78,7 @@ const CreateContext = () => { { stickiness={stickiness} setStickiness={setStickiness} mode="Create" - validateNameUniqueness={validateNameUniqueness} + validateContext={validateContext} setErrors={setErrors} clearErrors={clearErrors} > @@ -102,5 +102,3 @@ const CreateContext = () => { ); }; - -export default CreateContext; diff --git a/frontend/src/component/context/EditContext/EditContext.tsx b/frontend/src/component/context/EditContext/EditContext.tsx index 95778ad5fb..7f5568c3f8 100644 --- a/frontend/src/component/context/EditContext/EditContext.tsx +++ b/frontend/src/component/context/EditContext/EditContext.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react'; import { useHistory, useParams } from 'react-router-dom'; +import { formatUnknownError } from 'utils/format-unknown-error'; import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; import useContext from '../../../hooks/api/getters/useContext/useContext'; import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; @@ -8,11 +9,10 @@ import FormTemplate from '../../common/FormTemplate/FormTemplate'; import PermissionButton from '../../common/PermissionButton/PermissionButton'; import { scrollToTop } from '../../common/util'; import { UPDATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions'; -import ContextForm from '../ContextForm/ContextForm'; -import useContextForm from '../hooks/useContextForm'; -import { formatUnknownError } from '../../../utils/format-unknown-error'; +import { ContextForm } from '../ContextForm/ContextForm'; +import { useContextForm } from '../hooks/useContextForm'; -const EditContext = () => { +export const EditContext = () => { useEffect(() => { scrollToTop(); }, []); @@ -33,8 +33,6 @@ const EditContext = () => { setLegalValues, setStickiness, getContextPayload, - validateNameUniqueness, - validateName, clearErrors, setErrors, errors, @@ -57,24 +55,21 @@ const EditContext = () => { const handleSubmit = async (e: Event) => { e.preventDefault(); const payload = getContextPayload(); - const validName = validateName(); - if (validName) { - try { - await updateContext(payload); - refetch(); - history.push('/context'); - setToastData({ - title: 'Context information updated', - type: 'success', - }); - } catch (error: unknown) { - setToastApiError(formatUnknownError(error)); - } + try { + await updateContext(payload); + refetch(); + history.push('/context'); + setToastData({ + title: 'Context information updated', + type: 'success', + }); + } catch (e: unknown) { + setToastApiError(formatUnknownError(e)); } }; - const handleCancel = () => { + const onCancel = () => { history.goBack(); }; @@ -90,7 +85,7 @@ const EditContext = () => { { stickiness={stickiness} setStickiness={setStickiness} mode="Edit" - validateNameUniqueness={validateNameUniqueness} setErrors={setErrors} clearErrors={clearErrors} > @@ -114,5 +108,3 @@ const EditContext = () => { ); }; - -export default EditContext; diff --git a/frontend/src/component/context/hooks/useContextForm.ts b/frontend/src/component/context/hooks/useContextForm.ts index 502e2fcc76..cd9e31eb3b 100644 --- a/frontend/src/component/context/hooks/useContextForm.ts +++ b/frontend/src/component/context/hooks/useContextForm.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; -const useContextForm = ( +export const useContextForm = ( initialcontextName = '', initialcontextDesc = '', initialLegalValues = [] as string[], @@ -42,25 +42,28 @@ const useContextForm = ( const NAME_EXISTS_ERROR = 'A context field with that name already exist'; - const validateNameUniqueness = async () => { + const validateContext = async () => { + if (contextName.length === 0) { + setErrors(prev => ({ ...prev, name: 'Name can not be empty.' })); + return false; + } 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(), + })); } - } - }; - - const validateName = () => { - if (contextName.length === 0) { - setErrors(prev => ({ ...prev, name: 'Name can not be empty.' })); return false; } - return true; }; const clearErrors = () => { @@ -77,12 +80,9 @@ const useContextForm = ( setLegalValues, setStickiness, getContextPayload, - validateNameUniqueness, - validateName, + validateContext, setErrors, clearErrors, errors, }; }; - -export default useContextForm; diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js index 91554f5520..7f87060541 100644 --- a/frontend/src/component/menu/routes.js +++ b/frontend/src/component/menu/routes.js @@ -28,8 +28,8 @@ import EditUser from '../admin/users/EditUser/EditUser'; import { CreateApiToken } from '../admin/api-token/CreateApiToken/CreateApiToken'; import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironment'; import EditEnvironment from '../environments/EditEnvironment/EditEnvironment'; -import CreateContext from '../context/CreateContext/CreateContext'; -import EditContext from '../context/EditContext/EditContext'; +import { CreateContext } from '../context/CreateContext/CreateContext'; +import { EditContext } from '../context/EditContext/EditContext'; import EditTagType from '../tags/EditTagType/EditTagType'; import CreateTagType from '../tags/CreateTagType/CreateTagType'; import EditProject from '../project/Project/EditProject/EditProject';