fix(ESSNTL-5253): Check tab permissions (RedHatInsights#2000)

Fixes https://issues.redhat.com/browse/ESSNTL-5253.

Before rendering the application content in tabs on System details view,
Inventory should check whether the user have enough viewer permissions
for the selected app.

src/ApplicationTab.js

@@ -0,0 +1,49 @@
+import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
+import PropTypes from 'prop-types';
+import React from 'react';
+import AccessDenied from './Utilities/AccessDenied';
+import {
+  AdvisorTab,
+  ComplianceTab,
+  PatchTab,
+  RosTab,
+  VulnerabilityTab,
+} from './components/SystemDetails';
+import { TAB_REQUIRED_PERMISSIONS } from './constants';
+
+const ApplicationTab = ({ appName, title }) => {
+  const { hasAccess } = usePermissionsWithContext(
+    TAB_REQUIRED_PERMISSIONS[appName]
+  );
+
+  const tabs = {
+    advisor: AdvisorTab,
+    vulnerability: VulnerabilityTab,
+    compliance: ComplianceTab,
+    patch: PatchTab,
+    ros: RosTab,
+  };
+
+  const Tab = tabs[appName];
+
+  return hasAccess ? (
+    <Tab />
+  ) : (
+    <AccessDenied
+      requiredPermission={TAB_REQUIRED_PERMISSIONS[appName].join(', ')}
+      description={
+        <div>
+          Contact your organization administrator(s) for more information.
+        </div>
+      }
+      title={`You do not have access to ${title}`}
+    />
+  );
+};
+
+ApplicationTab.propTypes = {
+  title: PropTypes.string.isRequired,
+  appName: PropTypes.string.isRequired,
+};
+
+export default ApplicationTab;

src/constants.js

@@ -242,3 +242,28 @@ export const GROUPS_ADMINISTRATOR_PERMISSIONS = [
 export const GENERAL_HOSTS_READ_PERMISSIONS = 'inventory:hosts:read';
 export const GENERAL_HOSTS_WRITE_PERMISSIONS = 'inventory:hosts:write';
 export const USER_ACCESS_ADMIN_PERMISSIONS = ['rbac:*:*'];
+
+export const TAB_REQUIRED_PERMISSIONS = {
+  /**
+   * Should be up to date with
+   * https://github.com/RedHatInsights/rbac-config/tree/88ab3a3adb9526d3dcdb0e1e26c30cc98f51f76e/configs/prod/roles
+   * viewer roles.
+   */
+  advisor: ['advisor:*:*', 'inventory:*:read'],
+  vulnerability: [
+    'vulnerability:vulnerability_results:read',
+    'vulnerability:system.opt_out:read',
+    'vulnerability:report_and_export:read',
+    'inventory:*:read',
+    'vulnerability:advanced_report:read',
+  ],
+  compliance: [
+    'compliance:policy:read',
+    'compliance:report:read',
+    'compliance:system:read',
+    'inventory:*:read',
+    'remediations:remediation:read',
+  ],
+  patch: ['patch:*:read', 'inventory:*:read'],
+  ros: ['ros:*:read', 'inventory:*:read'],
+};

src/routes/InventoryDetail.js

@@ -11,17 +11,11 @@ import {
   SkeletonSize,
 } from '@redhat-cloud-services/frontend-components/Skeleton';
 import InventoryDetail from '../components/InventoryDetail/InventoryDetail';
-import {
-  AdvisorTab,
-  ComplianceTab,
-  GeneralInformationTab,
-  PatchTab,
-  RosTab,
-  VulnerabilityTab,
-} from '../components/SystemDetails';
+import { GeneralInformationTab } from '../components/SystemDetails';
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import { REQUIRED_PERMISSION_TO_MODIFY_HOST_IN_GROUP } from '../constants';
 import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate/useInsightsNavigate';
+import ApplicationTab from '../ApplicationTab';
 
 const appList = [
   {
@@ -34,30 +28,32 @@ const appList = [
   {
     title: 'Advisor',
     name: 'advisor',
-    component: AdvisorTab,
+    component: () => <ApplicationTab appName="advisor" title="Advisor" />,
   },
   {
     title: 'Vulnerability',
     name: 'vulnerabilities',
-    component: VulnerabilityTab,
+    component: () => (
+      <ApplicationTab appName="vulnerability" title="Vulnerability" />
+    ),
   },
   {
     title: 'Compliance',
     name: 'compliance',
-    component: ComplianceTab,
+    component: () => <ApplicationTab appName="compliance" title="Compliance" />,
     nonEdge: true,
   },
   {
     title: 'Patch',
     name: 'patch',
-    component: PatchTab,
+    component: () => <ApplicationTab appName="patch" title="Patch" />,
     nonEdge: true,
   },
   {
     title: 'Resource Optimization',
     name: 'ros',
     isVisible: false,
-    component: RosTab,
+    component: () => <ApplicationTab appName="ros" />,
     nonEdge: true,
   },
 ];