feat(RHINENG-23947): Add Kessel perms

config/setupTests.js

@@ -57,4 +57,24 @@ jest.mock('../src/Utilities/hooks/useRemediationDataProvider', () => ({
 
 jest.mock('../src/Utilities/hooks/useFeatureFlag', () => jest.fn());
 
+jest.mock('../src/Utilities/hooks/usePermissionCheck', () => ({
+    __esModule: true,
+    default: () => ({ hasAccess: true, isLoading: false }),
+    useRbacV1Permissions: () => ({ hasAccess: true, isLoading: false }),
+    useKesselPermissions: () => ({ hasAccess: true, isLoading: false }),
+    PERMISSION_MAP: {
+        'patch:*:read': 'patch_system_view',
+        'patch:*:*': 'patch_system_edit',
+        'patch:template:write': 'patch_template_edit',
+    },
+}));
+
+jest.mock('@project-kessel/react-kessel-access-check', () => ({
+    AccessCheck: {
+        Provider: ({ children }) => <>{children}</>,
+    },
+    useSelfAccessCheck: () => ({ data: null, loading: false, error: null }),
+    fetchDefaultWorkspace: jest.fn(() => Promise.resolve({ id: 'mock-workspace-id' })),
+}));
+
 global.React = React;

src/App.js

@@ -4,8 +4,10 @@ import { NotificationsProvider } from '@redhat-cloud-services/frontend-component
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import '@redhat-cloud-services/frontend-components-notifications/index.css';
 import { RBACProvider } from '@redhat-cloud-services/frontend-components/RBACProvider';
+import { AccessCheck } from '@project-kessel/react-kessel-access-check';
 import { changeGlobalTags, changeProfile, globalFilter } from './store/Actions/Actions';
 import { mapGlobalFilters } from './Utilities/Helpers';
+import { KESSEL_API_BASE_URL } from './Utilities/constants';
 import './App.scss';
 import Routes from './Routes';
 
@@ -40,13 +42,13 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
-      <RBACProvider appName='patch'>
+    <RBACProvider appName='patch'>
+      <AccessCheck.Provider baseUrl={window.location.origin} apiPath={KESSEL_API_BASE_URL}>
         <NotificationsProvider>
           <Routes />
         </NotificationsProvider>
-      </RBACProvider>
-    </React.Fragment>
+      </AccessCheck.Provider>
+    </RBACProvider>
   );
 };
 

src/PresentationalComponents/WithPermission/WithPermission.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import { NotAuthorized } from '@redhat-cloud-services/frontend-components/NotAuthorized';
-import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
+import usePermissionCheck from '../../Utilities/hooks/usePermissionCheck';
 
-const WithPermission = ({ children, requiredPermissions = [] }) => {
-  const { hasAccess, isLoading } = usePermissionsWithContext(requiredPermissions);
-  if (!isLoading) {
-    return hasAccess ? children : <NotAuthorized serviceName='patch' />;
-  } else {
-    return '';
+const WithPermission = ({ children, requiredPermissions = [], hide = false }) => {
+  const { hasAccess, isLoading } = usePermissionCheck(requiredPermissions);
+
+  if (isLoading) {
+    return null;
   }
+  return hasAccess ? children : !hide && <NotAuthorized serviceName='patch' />;
 };
 
 WithPermission.propTypes = {
   children: propTypes.node,
   requiredPermissions: propTypes.array,
+  hide: propTypes.bool,
 };
 
 export default WithPermission;

src/Routes.js

@@ -1,15 +1,15 @@
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { NotAuthorized } from '@redhat-cloud-services/frontend-components/NotAuthorized';
-import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 import { NavigateToSystem } from './Utilities/NavigateToSystem';
+import usePermissionCheck from './Utilities/hooks/usePermissionCheck';
 
 const PermissionRoute = ({ requiredPermissions = [] }) => {
-  const { hasAccess, isLoading } = usePermissionsWithContext(requiredPermissions);
+  const { hasAccess, isLoading } = usePermissionCheck(requiredPermissions);
   if (!isLoading) {
     return hasAccess ? <Outlet /> : <NotAuthorized serviceName='patch' />;
   } else {

src/Utilities/constants.js

@@ -296,8 +296,11 @@ export const exportNotifications = (format) => ({
 
 export const multiValueFilters = ['installed_evra', 'os', 'creator', 'status', 'group_name'];
 
+export const KESSEL_API_BASE_URL = '/api/kessel/v1beta2';
+
 export const featureFlags = {
   patch_set: 'patch.patch_set',
+  kessel_enabled: 'patch-frontend.kessel-enabled',
 };
 
 export const NO_ADVISORIES_TEXT =

src/Utilities/hooks/useKesselWorkspaces.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { fetchDefaultWorkspace } from '@project-kessel/react-kessel-access-check';
+
+let defaultWorkspacePromise = null;
+
+export const useFetchDefaultWorkspaceId = (enabled = true) => {
+  const [defaultWorkspace, setDefaultWorkspace] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const baseUrl = window.location.origin;
+
+  useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+
+    if (!defaultWorkspacePromise) {
+      defaultWorkspacePromise = fetchDefaultWorkspace(baseUrl);
+    }
+
+    defaultWorkspacePromise
+      .then(setDefaultWorkspace)
+      .catch((err) => {
+        defaultWorkspacePromise = null;
+        setError(err);
+      })
+      .finally(() => setIsLoading(false));
+  }, [baseUrl, enabled]);
+
+  return {
+    workspaceId: defaultWorkspace?.id,
+    isLoading,
+    error,
+  };
+};

src/Utilities/hooks/usePermissionCheck.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
+import { getKesselAccessCheckParams } from '@redhat-cloud-services/frontend-components-utilities/kesselPermissions';
+import { useSelfAccessCheck } from '@project-kessel/react-kessel-access-check';
+import { useFetchDefaultWorkspaceId } from './useKesselWorkspaces';
+import useFeatureFlag from './useFeatureFlag';
+import { featureFlags } from '../constants';
+
+export const PERMISSION_MAP = {
+  'patch:*:read': 'patch_system_view',
+  'patch:*:*': 'patch_system_edit',
+  'patch:template:write': 'patch_template_edit',
+};
+
+export const useRbacV1Permissions = (requiredPermissions) => {
+  const { hasAccess, isLoading } = usePermissionsWithContext(requiredPermissions);
+  return { hasAccess, isLoading };
+};
+
+export const useKesselPermissions = (requiredPermissions, enabled = true) => {
+  const {
+    workspaceId,
+    isLoading: workspaceLoading,
+    error: workspaceError,
+  } = useFetchDefaultWorkspaceId(enabled);
+
+  const checkParams = useMemo(
+    () =>
+      getKesselAccessCheckParams({
+        permissionMap: PERMISSION_MAP,
+        requiredPermissions,
+        resourceIdOrIds: workspaceId,
+      }),
+    [workspaceId, requiredPermissions],
+  );
+
+  const { data, loading, error } = useSelfAccessCheck(checkParams);
+
+  if (workspaceLoading) {
+    return { hasAccess: false, isLoading: true };
+  }
+
+  if (checkParams?.resources?.length === 0) {
+    return { hasAccess: true, isLoading: false };
+  }
+
+  if (!workspaceId || workspaceError || error) {
+    return { hasAccess: false, isLoading: false };
+  }
+
+  const hasAccess = Array.isArray(data)
+    ? data.some((check) => check.allowed)
+    : (data?.allowed ?? false);
+
+  return { hasAccess, isLoading: loading };
+};
+
+const usePermissionCheck = (requiredPermissions) => {
+  const isKesselEnabled = useFeatureFlag(featureFlags.kessel_enabled);
+  const rbac = useRbacV1Permissions(requiredPermissions);
+  const kessel = useKesselPermissions(requiredPermissions, !!isKesselEnabled);
+
+  return isKesselEnabled ? kessel : rbac;
+};
+
+export default usePermissionCheck;

src/index.js

@@ -4,18 +4,24 @@
 import { SystemPackageListStore } from './store/Reducers/SystemPackageListStore';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { Provider } from 'react-redux';
+import { AccessCheck } from '@project-kessel/react-kessel-access-check';
 import PropTypes from 'prop-types';
+import { useKesselFeatureFlag } from './Utilities/hooks/useFeatureFlag';
+import { KESSEL_API_BASE_URL } from './Utilities/constants';
 
 const WrappedSystemDetail = ({ getRegistry, ...props }) => {
   const [Wrapper, setWrapper] = useState();
+  const isKesselEnabled = useKesselFeatureFlag();
+
   useEffect(() => {
     if (getRegistry) {
       getRegistry()?.register?.({ SystemAdvisoryListStore, SystemPackageListStore });
     }
 
     setWrapper(() => (getRegistry ? Provider : Fragment));
   }, []);
-  return Wrapper ? (
+
+  const content = Wrapper ? (
     <Wrapper {...(getRegistry && { store: getRegistry()?.getStore() })}>
       <SystemDetail {...props} isInventoryApp />
     </Wrapper>
@@ -24,6 +30,19 @@
       <Spinner size='xl' />
     </Bullseye>
   );
+
+  if (!isKesselEnabled) {
+    return content;
+  }
+
+  return (
+    <AccessCheck.Provider
+      baseUrl={window.location.origin}
+      apiPath={KESSEL_API_BASE_URL}
+    >
+      {content}
+    </AccessCheck.Provider>
+  );
 };
 
 WrappedSystemDetail.propTypes = {