From b59c68c59b9943f334258e9f43a8478a3bd4c584 Mon Sep 17 00:00:00 2001 From: Youssef Date: Tue, 25 Jan 2022 00:47:49 +0100 Subject: [PATCH] fix: update buttons order in new screens --- .../ApiTokenForm/ApiTokenForm.styles.ts | 2 +- .../api-token/ApiTokenForm/ApiTokenForm.tsx | 2 +- .../CreateApiToken/CreateApiToken.tsx | 1 - .../CreateProjectRole/CreateProjectRole.tsx | 10 +++++++-- .../EditProjectRole/EditProjectRole.tsx | 10 +++++++-- .../ProjectRoleForm/ProjectRoleForm.styles.ts | 2 +- .../ProjectRoleForm/ProjectRoleForm.tsx | 17 +++++---------- .../admin/users/CreateUser/CreateUser.tsx | 1 - .../admin/users/EditUser/EditUser.tsx | 1 - .../admin/users/UserForm/UserForm.styles.ts | 2 +- .../admin/users/UserForm/UserForm.tsx | 2 +- .../context/ContextForm/ContextForm.styles.ts | 2 +- .../context/ContextForm/ContextForm.tsx | 2 +- .../CreateEnvironment/CreateEnvironment.tsx | 1 - .../EditEnvironment/EditEnvironment.tsx | 1 - .../EnvironmentForm/EnvironmentForm.styles.ts | 2 +- .../EnvironmentForm/EnvironmentForm.tsx | 2 +- .../Project/CreateProject/CreateProject.tsx | 18 +++++++++++++--- .../Project/EditProject/EditProject.tsx | 17 ++++++++++++--- .../Project/ProjectForm/ProjectForm.style.ts | 2 +- .../Project/ProjectForm/ProjectForm.tsx | 21 +++++++------------ .../project/Project/hooks/useProjectForm.ts | 9 ++++++++ .../tagTypes/CreateTagType/CreateTagType.tsx | 1 - .../tagTypes/EditTagType/EditTagType.tsx | 1 - .../TagTypeForm/TagTypeForm.styles.ts | 2 +- .../tagTypes/TagTypeForm/TagTypeForm.tsx | 2 +- 26 files changed, 78 insertions(+), 55 deletions(-) diff --git a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts index 72bb60a9aa..969ece267d 100644 --- a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts +++ b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts @@ -29,7 +29,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx index 9485642c0d..ed6f854690 100644 --- a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx +++ b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx @@ -122,10 +122,10 @@ const ApiTokenForm: React.FC = ({ />
+ {children} - {children}
); diff --git a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx index 5373e4b8b1..48dbea2295 100644 --- a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx +++ b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx @@ -97,7 +97,6 @@ const CreateApiToken = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx b/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx index b9a5fb4aed..aaab8c7344 100644 --- a/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx +++ b/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx @@ -5,6 +5,8 @@ import ProjectRoleForm from '../ProjectRoleForm/ProjectRoleForm'; import useProjectRoleForm from '../hooks/useProjectRoleForm'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; +import PermissionButton from '../../../common/PermissionButton/PermissionButton'; +import { ADMIN } from '../../../providers/AccessProvider/permissions'; const CreateProjectRole = () => { /* @ts-ignore */ @@ -89,11 +91,15 @@ const CreateProjectRole = () => { handlePermissionChange={handlePermissionChange} checkAllProjectPermissions={checkAllProjectPermissions} checkAllEnvironmentPermissions={checkAllEnvironmentPermissions} - submitButtonText="Create" + mode="Create" clearErrors={clearErrors} validateNameUniqueness={validateNameUniqueness} getRoleKey={getRoleKey} - /> + > + + Create role + + ); }; diff --git a/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx b/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx index 443c9467f7..eb79af949c 100644 --- a/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx +++ b/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx @@ -11,6 +11,8 @@ import useProjectRole from '../../../../hooks/api/getters/useProjectRole/useProj import { IPermission } from '../../../../interfaces/project'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; +import PermissionButton from '../../../common/PermissionButton/PermissionButton'; +import { ADMIN } from '../../../providers/AccessProvider/permissions'; const EditProjectRole = () => { const { uiConfig } = useUiConfig(); @@ -117,11 +119,15 @@ to resources within a project" handlePermissionChange={handlePermissionChange} checkAllProjectPermissions={checkAllProjectPermissions} checkAllEnvironmentPermissions={checkAllEnvironmentPermissions} - submitButtonText="Edit" + mode="Edit" errors={errors} clearErrors={clearErrors} getRoleKey={getRoleKey} - /> + > + + Edit role + + ); }; diff --git a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.styles.ts b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.styles.ts index f2085185d2..e6420e5a47 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.styles.ts +++ b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.styles.ts @@ -17,7 +17,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx index 55348f904a..4ee230774b 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx @@ -1,5 +1,3 @@ -import PermissionButton from '../../../common/PermissionButton/PermissionButton'; -import { ADMIN } from '../../../providers/AccessProvider/permissions'; import Input from '../../../common/Input/Input'; import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion'; import { @@ -31,13 +29,14 @@ interface IProjectRoleForm { handleSubmit: (e: any) => void; handleCancel: () => void; errors: { [key: string]: string }; - submitButtonText: string; + mode?: string; clearErrors: () => void; validateNameUniqueness?: () => void; getRoleKey: (permission: { id: number; environment?: string }) => string; } -const ProjectRoleForm = ({ +const ProjectRoleForm: React.FC = ({ + children, handleSubmit, handleCancel, roleName, @@ -49,7 +48,7 @@ const ProjectRoleForm = ({ checkAllProjectPermissions, checkAllEnvironmentPermissions, errors, - submitButtonText, + mode, validateNameUniqueness, clearErrors, getRoleKey, @@ -173,16 +172,10 @@ const ProjectRoleForm = ({

Environment permissions

{renderEnvironmentPermissions()}
+ {children} - - {submitButtonText} role -
); diff --git a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx index 586427f1fb..b49fc833b9 100644 --- a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx +++ b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx @@ -99,7 +99,6 @@ const CreateUser = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/admin/users/EditUser/EditUser.tsx b/frontend/src/component/admin/users/EditUser/EditUser.tsx index b836602e9f..a42e4e6de0 100644 --- a/frontend/src/component/admin/users/EditUser/EditUser.tsx +++ b/frontend/src/component/admin/users/EditUser/EditUser.tsx @@ -100,7 +100,6 @@ const EditUser = () => { mode={EDIT} > diff --git a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts index 93a28c55fe..b36d6d2706 100644 --- a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts +++ b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts @@ -22,7 +22,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx index d9926b7344..5fab83a038 100644 --- a/frontend/src/component/admin/users/UserForm/UserForm.tsx +++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx @@ -149,10 +149,10 @@ const UserForm: React.FC = ({ />
+ {children} - {children}
); diff --git a/frontend/src/component/context/ContextForm/ContextForm.styles.ts b/frontend/src/component/context/ContextForm/ContextForm.styles.ts index dbd0103b9f..36fdaf4039 100644 --- a/frontend/src/component/context/ContextForm/ContextForm.styles.ts +++ b/frontend/src/component/context/ContextForm/ContextForm.styles.ts @@ -38,7 +38,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx index 806017eb24..52f16b8163 100644 --- a/frontend/src/component/context/ContextForm/ContextForm.tsx +++ b/frontend/src/component/context/ContextForm/ContextForm.tsx @@ -185,10 +185,10 @@ const ContextForm: React.FC = ({
+ {children} - {children}
); diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx index 4e9992b041..8cafcb6d68 100644 --- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx +++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx @@ -102,7 +102,6 @@ const CreateEnvironment = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx index e443922515..1cd73af025 100644 --- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx +++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx @@ -86,7 +86,6 @@ const EditEnvironment = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts index 1345735a57..476737fb6c 100644 --- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts +++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts @@ -22,7 +22,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx index acbec5c027..cba4af6c11 100644 --- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx +++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx @@ -62,10 +62,10 @@ const EnvironmentForm: React.FC = ({ />
+ {children} - {children}
); diff --git a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx index f6873ba3c7..fea67f914c 100644 --- a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx +++ b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx @@ -6,6 +6,8 @@ import useProjectForm from '../hooks/useProjectForm'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; import useUser from '../../../../hooks/api/getters/useUser/useUser'; +import PermissionButton from '../../../common/PermissionButton/PermissionButton'; +import { CREATE_PROJECT } from '../../../providers/AccessProvider/permissions'; const CreateProject = () => { /* @ts-ignore */ @@ -24,6 +26,7 @@ const CreateProject = () => { clearErrors, validateIdUniqueness, validateName, + validateProjectId, errors, } = useProjectForm(); @@ -33,8 +36,10 @@ const CreateProject = () => { e.preventDefault(); clearErrors(); const validName = validateName(); + const validProjectId = validateProjectId(); const validId = await validateIdUniqueness(); - if (validName && validId) { + + if (validName && validId && validProjectId) { const payload = getProjectPayload(); try { await createProject(payload); @@ -83,10 +88,17 @@ const CreateProject = () => { setProjectName={setProjectName} projectDesc={projectDesc} setProjectDesc={setProjectDesc} - submitButtonText="Create" + mode="Create" clearErrors={clearErrors} validateIdUniqueness={validateIdUniqueness} - /> + > + + Create project + + ); }; diff --git a/frontend/src/component/project/Project/EditProject/EditProject.tsx b/frontend/src/component/project/Project/EditProject/EditProject.tsx index 7fd439760c..4cf4f27277 100644 --- a/frontend/src/component/project/Project/EditProject/EditProject.tsx +++ b/frontend/src/component/project/Project/EditProject/EditProject.tsx @@ -6,6 +6,8 @@ import useProjectForm from '../hooks/useProjectForm'; import useProject from '../../../../hooks/api/getters/useProject/useProject'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; +import PermissionButton from '../../../common/PermissionButton/PermissionButton'; +import { UPDATE_PROJECT } from '../../../../store/project/actions'; const EditProject = () => { const { uiConfig } = useUiConfig(); @@ -24,6 +26,7 @@ const EditProject = () => { clearErrors, validateIdUniqueness, validateName, + validateProjectId, errors, } = useProjectForm(id, project.name, project.description); @@ -44,8 +47,9 @@ const EditProject = () => { const payload = getProjectPayload(); const validName = validateName(); + const validId = validateProjectId(); - if (validName) { + if (validName && validId) { try { await editProject(id, payload); refetch(); @@ -82,10 +86,17 @@ const EditProject = () => { setProjectName={setProjectName} projectDesc={projectDesc} setProjectDesc={setProjectDesc} - submitButtonText="Edit" + mode="Edit" clearErrors={clearErrors} validateIdUniqueness={validateIdUniqueness} - /> + > + + Edit project + + ); }; diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts b/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts index 945d8d8b92..e5e5e19a86 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts @@ -22,7 +22,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index 1d220f6464..521ae2563c 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -1,5 +1,3 @@ -import PermissionButton from '../../../common/PermissionButton/PermissionButton'; -import { CREATE_PROJECT } from '../../../providers/AccessProvider/permissions'; import Input from '../../../common/Input/Input'; import { TextField, Button } from '@material-ui/core'; import { useStyles } from './ProjectForm.style'; @@ -16,12 +14,13 @@ interface IProjectForm { handleSubmit: (e: any) => void; handleCancel: () => void; errors: { [key: string]: string }; - submitButtonText: string; + mode: string; clearErrors: () => void; validateIdUniqueness: () => void; } -const ProjectForm = ({ +const ProjectForm: React.FC = ({ + children, handleSubmit, handleCancel, projectId, @@ -31,10 +30,10 @@ const ProjectForm = ({ setProjectName, setProjectDesc, errors, - submitButtonText, + mode, validateIdUniqueness, clearErrors, -}: IProjectForm) => { +}) => { const styles = useStyles(); return ( @@ -54,7 +53,7 @@ const ProjectForm = ({ errorText={errors.id} onFocus={() => clearErrors()} onBlur={validateIdUniqueness} - disabled={submitButtonText === 'Edit'} + disabled={mode === 'Edit'} />

@@ -85,16 +84,10 @@ const ProjectForm = ({

+ {children} - - {submitButtonText} project -
); diff --git a/frontend/src/component/project/Project/hooks/useProjectForm.ts b/frontend/src/component/project/Project/hooks/useProjectForm.ts index 22b4e7da4e..4ea6dc89a7 100644 --- a/frontend/src/component/project/Project/hooks/useProjectForm.ts +++ b/frontend/src/component/project/Project/hooks/useProjectForm.ts @@ -52,12 +52,20 @@ const useProjectForm = ( return false; } }; + const validateProjectId = () => { + if (projectId.length === 0) { + setErrors(prev => ({ ...prev, id: 'id can not be empty.' })); + return false; + } + return true; + }; const validateName = () => { if (projectName.length === 0) { setErrors(prev => ({ ...prev, name: 'Name can not be empty.' })); return false; } + return true; }; @@ -74,6 +82,7 @@ const useProjectForm = ( setProjectDesc, getProjectPayload, validateName, + validateProjectId, validateIdUniqueness, clearErrors, errors, diff --git a/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx b/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx index 09ce86260e..0b466729d9 100644 --- a/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx +++ b/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx @@ -77,7 +77,6 @@ const CreateTagType = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx b/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx index a5f093c279..e1bba0ff8d 100644 --- a/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx +++ b/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx @@ -75,7 +75,6 @@ const EditTagType = () => { clearErrors={clearErrors} > diff --git a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts index 53004761ca..f56f4b180b 100644 --- a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts +++ b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts @@ -22,7 +22,7 @@ export const useStyles = makeStyles(theme => ({ justifyContent: 'flex-end', }, cancelButton: { - marginRight: '1.5rem', + marginLeft: '1.5rem', }, inputDescription: { marginBottom: '0.5rem', diff --git a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx index 9207d483ba..5eb02796bd 100644 --- a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx +++ b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx @@ -65,10 +65,10 @@ const TagTypeForm: React.FC = ({ />
+ {children} - {children}
);