Bug 1833146: Hide Project Access Tab when the user have no access to role bindings

frontend/packages/dev-console/src/components/project-access/ProjectAccess.tsx

@@ -104,7 +104,6 @@ const ProjectAccess: React.FC<ProjectAccessProps> = ({ formName, namespace, role
         />{' '}
         .
       </PageHeading>
-      <hr />
       <div className="co-m-pane__body">
         {roleBindings.loadError ? (
           <StatusBox loaded={roleBindings.loaded} loadError={roleBindings.loadError} />

frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { match as RMatch } from 'react-router';
-import { history } from '@console/internal/components/utils';
+import { history, useAccessReview } from '@console/internal/components/utils';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
 import { NamespaceDetails, projectMenuActions } from '@console/internal/components/namespace';
-import { ProjectModel } from '@console/internal/models';
+import { ProjectModel, RoleBindingModel } from '@console/internal/models';
 import { DetailsPage } from '@console/internal/components/factory';
 import { ProjectDashboard } from '@console/internal/components/dashboard/project-dashboard/project-dashboard';
 import { withStartGuide } from '@console/internal/components/start-guide';
@@ -29,6 +29,20 @@ const handleNamespaceChange = (newNamespace: string): void => {
 export const ProjectDetailsPage: React.FC<MonitoringPageProps> = ({ match, ...props }) => {
   const activeNamespace = match.params.ns;
 
+  const canListRoleBindings = useAccessReview({
+    group: RoleBindingModel.apiGroup,
+    resource: RoleBindingModel.plural,
+    verb: 'list',
+    namespace: activeNamespace,
+  });
+
+  const canCreateRoleBindings = useAccessReview({
+    group: RoleBindingModel.apiGroup,
+    resource: RoleBindingModel.plural,
+    verb: 'create',
+    namespace: activeNamespace,
+  });
+
   return (
     <>
       <Helmet>
@@ -60,11 +74,12 @@ export const ProjectDetailsPage: React.FC<MonitoringPageProps> = ({ match, ...pr
                 name: 'Details',
                 component: NamespaceDetails,
               },
-              {
-                href: 'access',
-                name: 'Project Access',
-                component: ProjectAccessPage,
-              },
+              canListRoleBindings &&
+                canCreateRoleBindings && {
+                  href: 'access',
+                  name: 'Project Access',
+                  component: ProjectAccessPage,
+                },
             ]}
           />
         ) : (

frontend/packages/dev-console/src/components/projects/details/__tests__/ProjectDetailsPage.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { BreadCrumbs } from '@console/internal/components/utils';
+import * as _ from 'lodash';
+import * as utils from '@console/internal/components/utils';
 import { ProjectDetailsPage } from '../ProjectDetailsPage';
 import ProjectListPage from '../../ProjectListPage';
 import NamespacedPage from '../../../NamespacedPage';
@@ -27,6 +28,14 @@ describe('ProjectDetailsPage', () => {
     // Currently rendering the breadcrumbs will buck-up against the redirects and not work as expected
     const component = shallow(<ProjectDetailsPage match={testProjectMatch} />);
 
-    expect(component.find(BreadCrumbs).exists()).not.toBe(true);
+    expect(component.find(utils.BreadCrumbs).exists()).not.toBe(true);
+  });
+
+  it('should not render the Project Access tab if user has no access to role bindings', () => {
+    const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview');
+    spyUseAccessReview.mockReturnValue(false);
+    const component = shallow(<ProjectDetailsPage match={testProjectMatch} />);
+    const pages = component.find(DetailsPage).prop('pages');
+    expect(_.find(pages, { name: 'Project Access' })).toBe(undefined);
   });
 });