feat(RBACHook): Extend RBAC hook with context

packages/utils/src/RBACHook/RBACHook.ts

@@ -1,10 +1,6 @@
-import { useEffect, useState } from 'react';
-import { RBAC, doesHavePermissions, getRBAC, hasAllPermissions } from '../RBAC';
-
-export interface UsePermissionsState extends RBAC {
-  hasAccess: boolean;
-  isLoading: boolean;
-}
+import { useContext, useEffect, useState } from 'react';
+import { RBACContext, UsePermissionsState } from './constants';
+import { doesHavePermissions, getRBAC, hasAllPermissions } from '../RBAC';
 
 export function usePermissions(appName: string, permissionsList: string[], disableCache?: boolean, checkAll?: boolean): UsePermissionsState {
   const [permissions, setPermissions] = useState<UsePermissionsState>({
@@ -35,4 +31,13 @@ export function usePermissions(appName: string, permissionsList: string[], disab
   return permissions;
 }
 
+export const usePermissionsWithContext = (requiredPermissions: string[]) => {
+  const { hasAccess, ...permissionState } = useContext(RBACContext);
+
+  return {
+    ...permissionState,
+    hasAccess: hasAccess(requiredPermissions),
+  };
+};
+
 export default usePermissions;

packages/utils/src/RBACHook/RBACProvider.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import { Access } from '@redhat-cloud-services/rbac-client';
+import { doesHavePermissions, getRBAC, hasAllPermissions } from '../RBAC';
+import { RBACContext, initialPermissions } from './constants';
+
+const hasAccessWithUserPermissions = (userPermissions: Access[]) => {
+  return (requiredPermissions: any, checkAll = true) => {
+    return checkAll ? hasAllPermissions(userPermissions, requiredPermissions) : doesHavePermissions(userPermissions, requiredPermissions);
+  };
+};
+
+export interface RBACProviderProps {
+  appName: string;
+}
+
+const RBACProvider: React.FunctionComponent<RBACProviderProps> = ({ appName, children }) => {
+  const [permissionState, setPermissionState] = useState(initialPermissions);
+  let loading = false;
+
+  const fetchPermissions = async () => {
+    loading = true;
+    const { isOrgAdmin, permissions: userPermissions } = await getRBAC(appName, true);
+
+    setPermissionState((currentPerms: any) => ({
+      ...currentPerms,
+      isLoading: false,
+      isOrgAdmin,
+      permissions: userPermissions,
+    }));
+    loading = false;
+  };
+
+  useEffect(() => {
+    console.log('SADASD', appName, permissionState, loading);
+    if (!loading && permissionState.permissions.length == 0) {
+      fetchPermissions();
+    }
+  }, [appName]);
+
+  return (
+    <RBACContext.Provider
+      value={{
+        ...permissionState,
+        hasAccess: hasAccessWithUserPermissions(permissionState?.permissions),
+      }}
+    >
+      {!permissionState.isLoading && children}
+    </RBACContext.Provider>
+  );
+};
+
+export default RBACProvider;

packages/utils/src/RBACHook/constants.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+import { RBAC } from '../RBAC';
+
+export const initialPermissions = {
+  isLoading: true,
+  loaded: false,
+  isOrgAdmin: false,
+  permissions: [],
+  hasAccess: (_?: any) => {
+    return;
+  },
+};
+
+export const RBACContext = createContext(initialPermissions);
+
+export interface UsePermissionsState extends RBAC {
+  isLoading: boolean;
+  hasAccess?: boolean;
+}

packages/utils/src/RBACHook/index.ts

@@ -1,2 +1,3 @@
+export { default as RBACProvider } from './RBACProvider';
 export { default } from './RBACHook';
 export * from './RBACHook';