feat/rbac logic

Adds policy: users, and resources on the frontend:

• creates a redux state to manage policy resources
• creates a redux state to manage policy users
• UI for users policy
• Blocks frontend interactions based on policy resources

Need to add casbin.js

TODO:

• connect services endpoints

apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx

-import React, { useEffect, useState } from 'react';
-import { useAppDispatch, useSchemaGraph, useSessionCache, useAuthorizationCache } from '@graphpolaris/shared/lib/data-access';
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  useAppDispatch,
+  useSchemaGraph,
+  useSessionCache,
+  useAuthorizationCache,
+  useCheckPermissionPolicy,
+} from '@graphpolaris/shared/lib/data-access';
 import { deleteSaveState, selectSaveState } from '@graphpolaris/shared/lib/data-access/store/sessionSlice';
 import { SettingsForm } from './forms/settings';
 import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
@@ -56,6 +62,29 @@ export default function DatabaseSelector({}) {
     };
   }, [connecting]);
 
+  const { canRead, canWrite } = useCheckPermissionPolicy();
+  const [readAllowed, setReadAllowed] = useState(false);
+  const [writeAllowed, setWriteAllowed] = useState(false);
+  const resource = 'database';
+
+  const checkReadPermission = useCallback(async () => {
+    const result = await canRead(resource);
+    setReadAllowed(result);
+  }, [canRead]);
+
+  const checkWritePermission = useCallback(async () => {
+    const result = await canWrite(resource);
+    setWriteAllowed(result);
+  }, [canWrite]);
+
+  useEffect(() => {
+    checkReadPermission();
+  }, [checkReadPermission]);
+
+  useEffect(() => {
+    checkWritePermission();
+  }, [checkWritePermission]);
+
   return (
     <div className="menu-walkthrough">
       <TooltipProvider delayDuration={1000}>
@@ -85,11 +114,14 @@ export default function DatabaseSelector({}) {
         >
           <DropdownTrigger
             onClick={() => {
-              setDbSelectionMenuOpen(!dbSelectionMenuOpen);
+              if (connecting || authCache.authorized === false || !!authCache.roomID || writeAllowed) {
+                console.debug('User blocked from editing query due to being a viewer');
+                setDbSelectionMenuOpen(!dbSelectionMenuOpen);
+              }
             }}
             className="w-[18rem]"
             size="md"
-            disabled={connecting || authCache.authorized === false || !!authCache.roomID}
+            disabled={connecting || authCache.authorized === false || !!authCache.roomID || !writeAllowed}
             title={
               <div className="flex items-center">
                 {connecting && session.currentSaveState && session.currentSaveState in session.saveStates ? (