fix: project permissions (#3317)

This PR fixes an issue where permissions would not allow you to create
an API token in the new project API management view. In addition, it
fixes an issue where if you missed the permission to read API tokens,
you would be blocked from creating one as well.

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

@@ -3,10 +3,6 @@ import { PageContent } from 'component/common/PageContent/PageContent';
 import { Alert } from '@mui/material';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
-import {
-    CREATE_API_TOKEN,
-    READ_PROJECT_API_TOKEN,
-} from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useProjectNameOrId } from 'hooks/api/getters/useProject/useProject';
@@ -20,12 +16,14 @@ import { Search } from 'component/common/Search/Search';
 import {
     CREATE_PROJECT_API_TOKEN,
     DELETE_PROJECT_API_TOKEN,
+    READ_PROJECT_API_TOKEN,
 } from '@server/types/permissions';
 import { CopyApiTokenButton } from 'component/common/ApiTokenTable/CopyApiTokenButton/CopyApiTokenButton';
 import { RemoveApiTokenButton } from 'component/common/ApiTokenTable/RemoveApiTokenButton/RemoveApiTokenButton';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useProjectApiTokensApi from 'hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 export const ProjectApiAccess = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -81,17 +79,6 @@ export const ProjectApiAccess = () => {
         </ActionCell>
     ));
 
-    if (!hasAccess(READ_PROJECT_API_TOKEN, projectId)) {
-        return (
-            <PageContent header={<PageHeader title="Api access" />}>
-                <Alert severity="error">
-                    You need to be a member of the project or admin to access
-                    this section.
-                </Alert>
-            </PageContent>
-        );
-    }
-
     return (
         <div style={{ width: '100%', overflow: 'hidden' }}>
             <PageContent
@@ -108,23 +95,35 @@ export const ProjectApiAccess = () => {
                                 <CreateApiTokenButton
                                     permission={CREATE_PROJECT_API_TOKEN}
                                     path="create"
+                                    project={projectId}
                                 />
                             </>
                         }
                     />
                 }
             >
-                <ApiTokenTable
-                    compact
-                    loading={loading}
-                    headerGroups={headerGroups}
-                    setHiddenColumns={setHiddenColumns}
-                    prepareRow={prepareRow}
-                    getTableBodyProps={getTableBodyProps}
-                    getTableProps={getTableProps}
-                    rows={rows}
-                    columns={columns}
-                    globalFilter={globalFilter}
+                <ConditionallyRender
+                    condition={!hasAccess(READ_PROJECT_API_TOKEN, projectId)}
+                    show={
+                        <Alert severity="warning">
+                            You need to have the correct permissions to read API
+                            tokens
+                        </Alert>
+                    }
+                    elseShow={
+                        <ApiTokenTable
+                            compact
+                            loading={loading}
+                            headerGroups={headerGroups}
+                            setHiddenColumns={setHiddenColumns}
+                            prepareRow={prepareRow}
+                            getTableBodyProps={getTableBodyProps}
+                            getTableProps={getTableProps}
+                            rows={rows}
+                            columns={columns}
+                            globalFilter={globalFilter}
+                        />
+                    }
                 />
             </PageContent>