From 40f8ed771d577f7777354ad34fbf99e42ecec60b Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Wed, 15 Mar 2023 15:24:35 +0100
Subject: [PATCH] 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.
---
 .../ProjectApiAccess/ProjectApiAccess.tsx     | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx
index 810b8aad9ac..75303dcc542 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/ProjectApiAccess.tsx
+++ b/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>