fix: update buttons order in new screens

2025-10-27 11:02:16 +01:00 · 2022-01-25 00:47:49 +01:00 · 2022-01-25 00:47:49 +01:00 · b59c68c59b
commit b59c68c59b
parent 9bb63d47ef
26 changed files with 78 additions and 55 deletions
--- 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',
--- 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<IApiTokenFormProps> = ({
                />
            </div>
            <div className={styles.buttonContainer}>
+                {children}
                <Button onClick={handleCancel} className={styles.cancelButton}>
                    Cancel
                </Button>
-                {children}
            </div>
        </form>
    );
--- 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}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={ADMIN}
                    type="submit"
                >
--- 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}
-            />
+            >
+                <PermissionButton permission={ADMIN} type="submit">
+                    Create role
+                </PermissionButton>
+            </ProjectRoleForm>
        </FormTemplate>
    );
 };
--- 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}
-            />
+            >
+                <PermissionButton permission={ADMIN} type="submit">
+                    Edit role
+                </PermissionButton>
+            </ProjectRoleForm>
        </FormTemplate>
    );
 };
--- 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',
--- 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<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>
    );
--- 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}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={ADMIN}
                    type="submit"
                >
--- 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}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={ADMIN}
                    type="submit"
                >
--- 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',
--- 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<IUserForm> = ({
                />
            </div>
            <div className={styles.buttonContainer}>
+                {children}
                <Button onClick={handleCancel} className={styles.cancelButton}>
                    Cancel
                </Button>
-                {children}
            </div>
        </form>
    );
--- 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',
--- a/frontend/src/component/context/ContextForm/ContextForm.tsx
+++ b/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>
    );
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@ -102,7 +102,6 @@ const CreateEnvironment = () => {
                        clearErrors={clearErrors}
                    >
                        <PermissionButton
-                            onClick={handleSubmit}
                            permission={ADMIN}
                            type="submit"
                        >
--- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
+++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
@ -86,7 +86,6 @@ const EditEnvironment = () => {
                clearErrors={clearErrors}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={ADMIN}
                    type="submit"
                >
--- 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',
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
+++ b/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>
    );
--- 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}
-            />
+            >
+                <PermissionButton
+                    permission={CREATE_PROJECT}
+                    type="submit"
+                >
+                    Create project
+                </PermissionButton>
+            </ProjectForm>
        </FormTemplate>
    );
 };
--- 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}
-            />
+            >
+                <PermissionButton
+                    permission={UPDATE_PROJECT}
+                    type="submit"
+                >
+                    Edit project
+                </PermissionButton>
+            </ProjectForm>
        </FormTemplate>
    );
 };
--- 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',
--- 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<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>
    );
--- 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,
--- a/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx
+++ b/frontend/src/component/tagTypes/CreateTagType/CreateTagType.tsx
@ -77,7 +77,6 @@ const CreateTagType = () => {
                clearErrors={clearErrors}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={UPDATE_TAG_TYPE}
                    type="submit"
                >
--- a/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx
+++ b/frontend/src/component/tagTypes/EditTagType/EditTagType.tsx
@ -75,7 +75,6 @@ const EditTagType = () => {
                clearErrors={clearErrors}
            >
                <PermissionButton
-                    onClick={handleSubmit}
                    permission={UPDATE_TAG_TYPE}
                    type="submit"
                >
--- 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',
--- a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx
+++ b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.tsx
@ -65,10 +65,10 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
                />
            </div>
            <div className={styles.buttonContainer}>
+                {children}
                <Button onClick={handleCancel} className={styles.cancelButton}>
                    Cancel
                </Button>
-                {children}
            </div>
        </form>
    );