Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-18 01:18:23 +02:00
Code Issues Projects Releases Wiki Activity

fix: handle context name error without making an api call

Browse Source
This commit is contained in:
Youssef 2022-02-24 19:54:10 +01:00
parent 512b3d1e12
commit c141f91abd
5 changed files with 58 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/component/context/ContextForm/ContextForm.tsx
View File

@ -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 { TextField, Button, Switch, Chip, Typography } from '@material-ui/core';
import { useStyles } from './ContextForm.styles'; import { useStyles } from './ContextForm.styles';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Add } from '@material-ui/icons'; import { Add } from '@material-ui/icons';
import { trim } from '../../common/util'; import { trim } from 'component/common/util';
interface IContextForm { interface IContextForm {
contextName: string; contextName: string;
@ -15,20 +15,20 @@ interface IContextForm {
setStickiness: React.Dispatch<React.SetStateAction<boolean>>; setStickiness: React.Dispatch<React.SetStateAction<boolean>>;
setLegalValues: React.Dispatch<React.SetStateAction<string[]>>; setLegalValues: React.Dispatch<React.SetStateAction<string[]>>;
handleSubmit: (e: any) => void; handleSubmit: (e: any) => void;
handleCancel: () => void; onCancel: () => void;
errors: { [key: string]: string }; errors: { [key: string]: string };
mode: string; mode: string;
clearErrors: () => void; clearErrors: () => void;
validateNameUniqueness: () => void; validateContext?: () => void;
setErrors: React.Dispatch<React.SetStateAction<Object>>; setErrors: React.Dispatch<React.SetStateAction<Object>>;
} }
const ENTER = 'Enter'; const ENTER = 'Enter';
const ContextForm: React.FC<IContextForm> = ({ export const ContextForm: React.FC<IContextForm> = ({
children, children,
handleSubmit, handleSubmit,
handleCancel, onCancel,
contextName, contextName,
contextDesc, contextDesc,
legalValues, legalValues,
@ -39,7 +39,7 @@ const ContextForm: React.FC<IContextForm> = ({
setStickiness, setStickiness,
errors, errors,
mode, mode,
validateNameUniqueness, validateContext,
setErrors, setErrors,
clearErrors, clearErrors,
}) => { }) => {
@ -108,7 +108,7 @@ const ContextForm: React.FC<IContextForm> = ({
error={Boolean(errors.name)} error={Boolean(errors.name)}
errorText={errors.name} errorText={errors.name}
onFocus={() => clearErrors()} onFocus={() => clearErrors()}
onBlur={validateNameUniqueness} onBlur={validateContext}
autoFocus autoFocus
/> />
<p className={styles.inputDescription}> <p className={styles.inputDescription}>
@ -187,12 +187,10 @@ const ContextForm: React.FC<IContextForm> = ({
</div> </div>
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
{children} {children}
<Button onClick={handleCancel} className={styles.cancelButton}> <Button onClick={onCancel} className={styles.cancelButton}>
Cancel Cancel
</Button> </Button>
</div> </div>
</form> </form>
); );
}; };
export default ContextForm;

39
frontend/src/component/context/CreateContext/CreateContext.tsx
View File

@ -1,15 +1,16 @@
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; import { useContextForm } from '../hooks/useContextForm';
import useToast from '../../../hooks/useToast'; import { ContextForm } from '../ContextForm/ContextForm';
import FormTemplate from '../../common/FormTemplate/FormTemplate'; import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions';
import useContextForm from '../hooks/useContextForm'; import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import ContextForm from '../ContextForm/ContextForm'; import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import PermissionButton from '../../common/PermissionButton/PermissionButton'; import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
import { CREATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
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 { setToastData, setToastApiError } = useToast();
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const history = useHistory(); const history = useHistory();
@ -23,8 +24,7 @@ const CreateContext = () => {
setLegalValues, setLegalValues,
setStickiness, setStickiness,
getContextPayload, getContextPayload,
validateNameUniqueness, validateContext,
validateName,
clearErrors, clearErrors,
setErrors, setErrors,
errors, errors,
@ -34,7 +34,8 @@ const CreateContext = () => {
const handleSubmit = async (e: Event) => { const handleSubmit = async (e: Event) => {
e.preventDefault(); e.preventDefault();
const validName = validateName(); const validName = await validateContext();
if (validName) { if (validName) {
const payload = getContextPayload(); const payload = getContextPayload();
try { try {
@ -46,8 +47,8 @@ const CreateContext = () => {
confetti: true, confetti: true,
type: 'success', type: 'success',
}); });
} catch (e: any) { } catch (err: unknown) {
setToastApiError(e.toString()); setToastApiError(formatUnknownError(err));
} }
} }
}; };
@ -61,7 +62,7 @@ const CreateContext = () => {
--data-raw '${JSON.stringify(getContextPayload(), undefined, 2)}'`; --data-raw '${JSON.stringify(getContextPayload(), undefined, 2)}'`;
}; };
const handleCancel = () => { const onCancel = () => {
history.goBack(); history.goBack();
}; };
@ -77,7 +78,7 @@ const CreateContext = () => {
<ContextForm <ContextForm
errors={errors} errors={errors}
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
handleCancel={handleCancel} onCancel={onCancel}
contextName={contextName} contextName={contextName}
setContextName={setContextName} setContextName={setContextName}
contextDesc={contextDesc} contextDesc={contextDesc}
@ -87,7 +88,7 @@ const CreateContext = () => {
stickiness={stickiness} stickiness={stickiness}
setStickiness={setStickiness} setStickiness={setStickiness}
mode="Create" mode="Create"
validateNameUniqueness={validateNameUniqueness} validateContext={validateContext}
setErrors={setErrors} setErrors={setErrors}
clearErrors={clearErrors} clearErrors={clearErrors}
> >
@ -101,5 +102,3 @@ const CreateContext = () => {
</FormTemplate> </FormTemplate>
); );
}; };
export default CreateContext;

38
frontend/src/component/context/EditContext/EditContext.tsx
View File

@ -8,10 +8,10 @@ import FormTemplate from '../../common/FormTemplate/FormTemplate';
import PermissionButton from '../../common/PermissionButton/PermissionButton'; import PermissionButton from '../../common/PermissionButton/PermissionButton';
import { scrollToTop } from '../../common/util'; import { scrollToTop } from '../../common/util';
import { UPDATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions'; import { UPDATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions';
import ContextForm from '../ContextForm/ContextForm'; import { ContextForm } from '../ContextForm/ContextForm';
import useContextForm from '../hooks/useContextForm'; import { useContextForm } from '../hooks/useContextForm';
const EditContext = () => { export const EditContext = () => {
useEffect(() => { useEffect(() => {
scrollToTop(); scrollToTop();
}, []); }, []);
@ -32,8 +32,6 @@ const EditContext = () => {
setLegalValues, setLegalValues,
setStickiness, setStickiness,
getContextPayload, getContextPayload,
validateNameUniqueness,
validateName,
clearErrors, clearErrors,
setErrors, setErrors,
errors, errors,
@ -56,24 +54,21 @@ const EditContext = () => {
const handleSubmit = async (e: Event) => { const handleSubmit = async (e: Event) => {
e.preventDefault(); e.preventDefault();
const payload = getContextPayload(); const payload = getContextPayload();
const validName = validateName();
if (validName) { try {
try { await updateContext(payload);
await updateContext(payload); refetch();
refetch(); history.push('/context');
history.push('/context'); setToastData({
setToastData({ title: 'Context information updated',
title: 'Context information updated', type: 'success',
type: 'success', });
}); } catch (e: any) {
} catch (e: any) { setToastApiError(e.toString());
setToastApiError(e.toString());
}
} }
}; };
const handleCancel = () => { const onCancel = () => {
history.goBack(); history.goBack();
}; };
@ -89,7 +84,7 @@ const EditContext = () => {
<ContextForm <ContextForm
errors={errors} errors={errors}
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
handleCancel={handleCancel} onCancel={onCancel}
contextName={contextName} contextName={contextName}
setContextName={setContextName} setContextName={setContextName}
contextDesc={contextDesc} contextDesc={contextDesc}
@ -99,7 +94,6 @@ const EditContext = () => {
stickiness={stickiness} stickiness={stickiness}
setStickiness={setStickiness} setStickiness={setStickiness}
mode="Edit" mode="Edit"
validateNameUniqueness={validateNameUniqueness}
setErrors={setErrors} setErrors={setErrors}
clearErrors={clearErrors} clearErrors={clearErrors}
> >
@ -113,5 +107,3 @@ const EditContext = () => {
</FormTemplate> </FormTemplate>
); );
}; };
export default EditContext;

26
frontend/src/component/context/hooks/useContextForm.ts
View File

@ -1,7 +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';
const useContextForm = ( export const useContextForm = (
initialcontextName = '', initialcontextName = '',
initialcontextDesc = '', initialcontextDesc = '',
initialLegalValues = [] as string[], initialLegalValues = [] as string[],
@ -42,25 +42,28 @@ const useContextForm = (
const NAME_EXISTS_ERROR = 'A context field with that name already exist'; 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 { try {
await validateContextName(contextName); await validateContextName(contextName);
return true;
} catch (e: any) { } catch (e: any) {
if (e.toString().includes(NAME_EXISTS_ERROR)) { if (e.toString().includes(NAME_EXISTS_ERROR)) {
setErrors(prev => ({ setErrors(prev => ({
...prev, ...prev,
name: 'A context field with that name already exist', 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 false;
} }
return true;
}; };
const clearErrors = () => { const clearErrors = () => {
@ -77,12 +80,9 @@ const useContextForm = (
setLegalValues, setLegalValues,
setStickiness, setStickiness,
getContextPayload, getContextPayload,
validateNameUniqueness, validateContext,
validateName,
setErrors, setErrors,
clearErrors, clearErrors,
errors, errors,
}; };
}; };
export default useContextForm;

4
frontend/src/component/menu/routes.js
View File

@ -28,8 +28,8 @@ import EditUser from '../admin/users/EditUser/EditUser';
import { CreateApiToken } from '../admin/api-token/CreateApiToken/CreateApiToken'; import { CreateApiToken } from '../admin/api-token/CreateApiToken/CreateApiToken';
import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironment'; import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironment';
import EditEnvironment from '../environments/EditEnvironment/EditEnvironment'; import EditEnvironment from '../environments/EditEnvironment/EditEnvironment';
import CreateContext from '../context/CreateContext/CreateContext'; import { CreateContext } from '../context/CreateContext/CreateContext';
import EditContext from '../context/EditContext/EditContext'; import { EditContext } from '../context/EditContext/EditContext';
import EditTagType from '../tags/EditTagType/EditTagType'; import EditTagType from '../tags/EditTagType/EditTagType';
import CreateTagType from '../tags/CreateTagType/CreateTagType'; import CreateTagType from '../tags/CreateTagType/CreateTagType';
import EditProject from '../project/Project/EditProject/EditProject'; import EditProject from '../project/Project/EditProject/EditProject';