fix: disable project access tab when no access (#1057)

* refactor: remove unused import

* fix: disable project access tab when no access

* refactor: improve access denied text

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/PayloadOverridesCell/PayloadOverridesCell.tsx

@@ -1,4 +1,3 @@
-import { Chip } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { IOverride, IPayload } from 'interfaces/featureToggle';

frontend/src/component/project/Project/Project.tsx

@@ -80,9 +80,6 @@ const Project = () => {
             });
         }
 
-        // @ts-expect-error
-        tabData.filter(tab => !tab.disabled);
-
         /* eslint-disable-next-line */
     }, []);
 

frontend/src/component/project/ProjectAccess/ProjectAccess.tsx

@@ -1,58 +1,29 @@
-/* eslint-disable react/jsx-no-target-blank */
+import React, { useContext } from 'react';
-import React, { useCallback, useState } from 'react';
+import { ProjectAccessPage } from 'component/project/ProjectAccess/ProjectAccessPage';
-import { Alert, SelectChangeEvent } from '@mui/material';
-import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { useStyles } from './ProjectAccess.styles';
+import { Alert } from '@mui/material';
-import useToast from 'hooks/useToast';
-import { Dialogue as ConfirmDialogue } from 'component/common/Dialogue/Dialogue';
-import useProjectAccess, {
-    IProjectAccessUser,
-} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
-import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import AccessContext from 'contexts/AccessContext';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { ProjectAccessTable } from './ProjectAccessTable/ProjectAccessTable';
 
 export const ProjectAccess = () => {
     const projectId = useRequiredPathParam('projectId');
-    const { classes: styles } = useStyles();
+    const { hasAccess } = useContext(AccessContext);
-    const { access, refetchProjectAccess } = useProjectAccess(projectId);
-    const { setToastData } = useToast();
     const { isOss } = useUiConfig();
-    const { removeUserFromRole, changeUserRole } = useProjectApi();
-    const [showDelDialogue, setShowDelDialogue] = useState(false);
-    const [user, setUser] = useState<IProjectAccessUser | undefined>();
-
-    const handleRoleChange = useCallback(
-        (userId: number) => async (evt: SelectChangeEvent) => {
-            const roleId = Number(evt.target.value);
-            try {
-                await changeUserRole(projectId, roleId, userId);
-                refetchProjectAccess();
-                setToastData({
-                    type: 'success',
-                    title: 'Success',
-                    text: 'User role changed successfully',
-                });
-            } catch (err: any) {
-                setToastData({
-                    type: 'error',
-                    title: err.message || 'Server problems when adding users.',
-                });
-            }
-        },
-        [changeUserRole, projectId, refetchProjectAccess, setToastData]
-    );
 
     if (isOss()) {
         return (
-            <PageContent header={<PageHeader title="Project Access" />}>
+            <PageContent header={<PageHeader title="Project access" />}>
                 <Alert severity="error">
                     Controlling access to projects requires a paid version of
                     Unleash. Check out{' '}
-                    <a href="https://www.getunleash.io" target="_blank">
+                    <a
+                        href="https://www.getunleash.io"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
                         getunleash.io
                     </a>{' '}
                     to find out more.
@@ -61,56 +32,15 @@ export const ProjectAccess = () => {
         );
     }
 
-    const handleRemoveAccess = (user: IProjectAccessUser) => {
+    if (!hasAccess(UPDATE_PROJECT, projectId)) {
-        setUser(user);
+        return (
-        setShowDelDialogue(true);
+            <PageContent header={<PageHeader title="Project access" />}>
-    };
+                <Alert severity="error">
+                    You need project owner permissions to access this section.
+                </Alert>
+            </PageContent>
+        );
+    }
 
-    const removeAccess = (user: IProjectAccessUser | undefined) => async () => {
+    return <ProjectAccessPage />;
-        if (!user) return;
-        const { id, roleId } = user;
-
-        try {
-            await removeUserFromRole(projectId, roleId, id);
-            refetchProjectAccess();
-            setToastData({
-                type: 'success',
-                title: 'The user has been removed from project',
-            });
-        } catch (err: any) {
-            setToastData({
-                type: 'error',
-                title: err.message || 'Server problems when adding users.',
-            });
-        }
-        setShowDelDialogue(false);
-    };
-
-    return (
-        <PageContent
-            header={<PageHeader title="Project Roles"></PageHeader>}
-            className={styles.pageContent}
-        >
-            <ProjectAccessAddUser roles={access?.roles} />
-
-            <div className={styles.divider}></div>
-
-            <ProjectAccessTable
-                access={access}
-                handleRoleChange={handleRoleChange}
-                handleRemoveAccess={handleRemoveAccess}
-                projectId={projectId}
-            />
-
-            <ConfirmDialogue
-                open={showDelDialogue}
-                onClick={removeAccess(user)}
-                onClose={() => {
-                    setUser(undefined);
-                    setShowDelDialogue(false);
-                }}
-                title="Really remove user from this project"
-            />
-        </PageContent>
-    );
 };

frontend/src/component/project/ProjectAccess/ProjectAccessPage.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useState } from 'react';
+import { SelectChangeEvent } from '@mui/material';
+import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { useStyles } from './ProjectAccess.styles';
+import useToast from 'hooks/useToast';
+import { Dialogue as ConfirmDialogue } from 'component/common/Dialogue/Dialogue';
+import useProjectAccess, {
+    IProjectAccessUser,
+} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { ProjectAccessTable } from './ProjectAccessTable/ProjectAccessTable';
+
+export const ProjectAccessPage = () => {
+    const projectId = useRequiredPathParam('projectId');
+    const { classes: styles } = useStyles();
+    const { access, refetchProjectAccess } = useProjectAccess(projectId);
+    const { setToastData } = useToast();
+    const { removeUserFromRole, changeUserRole } = useProjectApi();
+    const [showDelDialogue, setShowDelDialogue] = useState(false);
+    const [user, setUser] = useState<IProjectAccessUser | undefined>();
+
+    const handleRoleChange = useCallback(
+        (userId: number) => async (evt: SelectChangeEvent) => {
+            const roleId = Number(evt.target.value);
+            try {
+                await changeUserRole(projectId, roleId, userId);
+                refetchProjectAccess();
+                setToastData({
+                    type: 'success',
+                    title: 'Success',
+                    text: 'User role changed successfully',
+                });
+            } catch (err: any) {
+                setToastData({
+                    type: 'error',
+                    title: err.message || 'Server problems when adding users.',
+                });
+            }
+        },
+        [changeUserRole, projectId, refetchProjectAccess, setToastData]
+    );
+
+    const handleRemoveAccess = (user: IProjectAccessUser) => {
+        setUser(user);
+        setShowDelDialogue(true);
+    };
+
+    const removeAccess = (user: IProjectAccessUser | undefined) => async () => {
+        if (!user) return;
+        const { id, roleId } = user;
+
+        try {
+            await removeUserFromRole(projectId, roleId, id);
+            refetchProjectAccess();
+            setToastData({
+                type: 'success',
+                title: 'The user has been removed from project',
+            });
+        } catch (err: any) {
+            setToastData({
+                type: 'error',
+                title: err.message || 'Server problems when adding users.',
+            });
+        }
+        setShowDelDialogue(false);
+    };
+
+    return (
+        <PageContent
+            header={<PageHeader title="Project roles" />}
+            className={styles.pageContent}
+        >
+            <ProjectAccessAddUser roles={access?.roles} />
+            <div className={styles.divider} />
+            <ProjectAccessTable
+                access={access}
+                handleRoleChange={handleRoleChange}
+                handleRemoveAccess={handleRemoveAccess}
+                projectId={projectId}
+            />
+            <ConfirmDialogue
+                open={showDelDialogue}
+                onClick={removeAccess(user)}
+                onClose={() => {
+                    setUser(undefined);
+                    setShowDelDialogue(false);
+                }}
+                title="Really remove user from this project"
+            />
+        </PageContent>
+    );
+};