Merge pull request #628 from Unleash/update/create-screens-submit-buttons

fix: update buttons order in new screens

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',

frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx

@@ -122,10 +122,10 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                 />
             </div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                {children}
             </div>
         </form>
     );

frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx

@@ -97,7 +97,6 @@ const CreateApiToken = () => {
                 clearErrors={clearErrors}
             >
                 <PermissionButton
-                    onClick={handleSubmit}
                     permission={ADMIN}
                     type="submit"
                 >

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}
-            />
+            >
+                <PermissionButton permission={ADMIN} type="submit">
+                    Create role
+                </PermissionButton>
+            </ProjectRoleForm>
         </FormTemplate>
     );
 };

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}
-            />
+            >
+                <PermissionButton permission={ADMIN} type="submit">
+                    Edit role
+                </PermissionButton>
+            </ProjectRoleForm>
         </FormTemplate>
     );
 };

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',

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<IProjectRoleForm> = ({
+    children,
     handleSubmit,
     handleCancel,
     roleName,
@@ -49,7 +48,7 @@ const ProjectRoleForm = ({
     checkAllProjectPermissions,
     checkAllEnvironmentPermissions,
     errors,
-    submitButtonText,
+    mode,
     validateNameUniqueness,
     clearErrors,
     getRoleKey,
@@ -173,16 +172,10 @@ const ProjectRoleForm = ({
             <h3 className={styles.header}>Environment permissions</h3>
             <div>{renderEnvironmentPermissions()}</div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                <PermissionButton
-                    onClick={handleSubmit}
-                    permission={ADMIN}
-                    type="submit"
-                >
-                    {submitButtonText} role
-                </PermissionButton>
             </div>
         </form>
     );

frontend/src/component/admin/users/CreateUser/CreateUser.tsx

@@ -99,7 +99,6 @@ const CreateUser = () => {
                 clearErrors={clearErrors}
             >
                 <PermissionButton
-                    onClick={handleSubmit}
                     permission={ADMIN}
                     type="submit"
                 >

frontend/src/component/admin/users/EditUser/EditUser.tsx

@@ -100,7 +100,6 @@ const EditUser = () => {
                 mode={EDIT}
             >
                 <PermissionButton
-                    onClick={handleSubmit}
                     permission={ADMIN}
                     type="submit"
                 >

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',

frontend/src/component/admin/users/UserForm/UserForm.tsx

@@ -149,10 +149,10 @@ const UserForm: React.FC<IUserForm> = ({
                 />
             </div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                {children}
             </div>
         </form>
     );

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',

frontend/src/component/context/ContextForm/ContextForm.tsx

@@ -185,10 +185,10 @@ const ContextForm: React.FC<IContextForm> = ({
                 </div>
             </div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                {children}
             </div>
         </form>
     );

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx

@@ -102,7 +102,6 @@ const CreateEnvironment = () => {
                         clearErrors={clearErrors}
                     >
                         <PermissionButton
-                            onClick={handleSubmit}
                             permission={ADMIN}
                             type="submit"
                         >

frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx

@@ -86,7 +86,6 @@ const EditEnvironment = () => {
                 clearErrors={clearErrors}
             >
                 <PermissionButton
-                    onClick={handleSubmit}
                     permission={ADMIN}
                     type="submit"
                 >

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',

frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx

@@ -62,10 +62,10 @@ const EnvironmentForm: React.FC<IEnvironmentForm> = ({
                 />
             </div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                {children}
             </div>
         </form>
     );

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 */
@@ -34,6 +36,7 @@ const CreateProject = () => {
         clearErrors();
         const validName = validateName();
         const validId = await validateIdUniqueness();
+
         if (validName && validId) {
             const payload = getProjectPayload();
             try {
@@ -62,7 +65,7 @@ const CreateProject = () => {
     };
 
     const handleCancel = () => {
-        history.push('/projects');
+        history.goBack();
     };
 
     return (
@@ -83,10 +86,14 @@ const CreateProject = () => {
                 setProjectName={setProjectName}
                 projectDesc={projectDesc}
                 setProjectDesc={setProjectDesc}
-                submitButtonText="Create"
+                mode="Create"
                 clearErrors={clearErrors}
                 validateIdUniqueness={validateIdUniqueness}
-            />
+            >
+                <PermissionButton permission={CREATE_PROJECT} type="submit">
+                    Create project
+                </PermissionButton>
+            </ProjectForm>
         </FormTemplate>
     );
 };

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}
-            />
+            >
+                <PermissionButton
+                    permission={UPDATE_PROJECT}
+                    type="submit"
+                >
+                    Edit project
+                </PermissionButton>
+            </ProjectForm>
         </FormTemplate>
     );
 };

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',

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<IProjectForm> = ({
+    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'}
                 />
 
                 <p className={styles.inputDescription}>
@@ -85,16 +84,10 @@ const ProjectForm = ({
             </div>
 
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                <PermissionButton
-                    onClick={handleSubmit}
-                    permission={CREATE_PROJECT}
-                    type="submit"
-                >
-                    {submitButtonText} project
-                </PermissionButton>
             </div>
         </form>
     );

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

@@ -39,6 +39,10 @@ const useProjectForm = (
     const NAME_EXISTS_ERROR = 'Error: A project with this id already exists.';
 
     const validateIdUniqueness = async () => {
+        if (projectId.length === 0) {
+            setErrors(prev => ({ ...prev, id: 'Id can not be empty.' }));
+            return false;
+        }
         try {
             await validateId(getProjectPayload());
             return true;
@@ -52,12 +56,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 +86,7 @@ const useProjectForm = (
         setProjectDesc,
         getProjectPayload,
         validateName,
+        validateProjectId,
         validateIdUniqueness,
         clearErrors,
         errors,

frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx

@@ -75,12 +75,9 @@ const CreateTagType = () => {
                 setTagDesc={setTagDesc}
                 mode="Create"
                 clearErrors={clearErrors}
+                validateNameUniqueness={validateNameUniqueness}
             >
-                <PermissionButton
+                <PermissionButton permission={UPDATE_TAG_TYPE} type="submit">
-                    onClick={handleSubmit}
-                    permission={UPDATE_TAG_TYPE}
-                    type="submit"
-                >
                     Create type
                 </PermissionButton>
             </TagTypeForm>

frontend/src/component/tagTypes/EditTagType/EditTagType.tsx

@@ -75,7 +75,6 @@ const EditTagType = () => {
                 clearErrors={clearErrors}
             >
                 <PermissionButton
-                    onClick={handleSubmit}
                     permission={UPDATE_TAG_TYPE}
                     type="submit"
                 >

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',

frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx

@@ -16,6 +16,7 @@ interface ITagTypeForm {
     errors: { [key: string]: string };
     mode: string;
     clearErrors: () => void;
+    validateNameUniqueness?: () => void;
 }
 
 const TagTypeForm: React.FC<ITagTypeForm> = ({
@@ -28,6 +29,7 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
     setTagDesc,
     errors,
     mode,
+    validateNameUniqueness,
     clearErrors,
 }) => {
     const styles = useStyles();
@@ -49,11 +51,10 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                     errorText={errors.name}
                     onFocus={() => clearErrors()}
                     disabled={mode === EDIT}
+                    onBlur={validateNameUniqueness}
                 />
 
-                <p className={styles.inputDescription}>
+                <p className={styles.inputDescription}>What is this tag for?</p>
-                    What is this role for?
-                </p>
                 <TextField
                     className={styles.input}
                     label="Tag description"
@@ -65,10 +66,10 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                 />
             </div>
             <div className={styles.buttonContainer}>
+                {children}
                 <Button onClick={handleCancel} className={styles.cancelButton}>
                     Cancel
                 </Button>
-                {children}
             </div>
         </form>
     );