feat(rbac): implemented project based permission loading and role management

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -1,12 +1,7 @@
 import { FunctionComponent, ReactNode } from "react";
 import { BoundCanProps, Can } from "@casl/react";
 
-import {
-  OrgPermissionSubjects,
-  OrgWorkspacePermissionActions,
-  TOrgPermission,
-  useOrgPermission
-} from "@app/context/OrgPermissionContext";
+import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
 
 import { Tooltip } from "../v2";
 
@@ -23,13 +18,7 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
   const permission = useOrgPermission();
 
   return (
-    <Can
-      {...props}
-      passThrough={passThrough}
-      ability={props?.ability || permission}
-      I={OrgWorkspacePermissionActions.Read}
-      a={OrgPermissionSubjects.Sso}
-    >
+    <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
       {(isAllowed, ability) => {
         // akhilmhdh: This is set as type due to error in casl react type.
         const finalChild =

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -0,0 +1,39 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BoundCanProps, Can } from "@casl/react";
+
+import { TProjectPermission, useProjectPermission } from "@app/context/ProjectPermissionContext";
+
+import { Tooltip } from "../v2";
+
+type Props = {
+  label?: ReactNode;
+} & BoundCanProps<TProjectPermission>;
+
+export const ProjectPermissionCan: FunctionComponent<Props> = ({
+  label = "Permission Denied. Kindly contact your org admin",
+  children,
+  passThrough = true,
+  ...props
+}) => {
+  const permission = useProjectPermission();
+
+  return (
+    <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
+      {(isAllowed, ability) => {
+        // akhilmhdh: This is set as type due to error in casl react type.
+        const finalChild =
+          typeof children === "function"
+            ? children(isAllowed, ability as TProjectPermission)
+            : children;
+
+        if (!isAllowed && passThrough) {
+          return <Tooltip content={label}>{finalChild}</Tooltip>;
+        }
+
+        if (!isAllowed) return null;
+
+        return finalChild;
+      }}
+    </Can>
+  );
+};

frontend/src/components/permissions/index.tsx

@@ -1 +1,2 @@
 export { OrgPermissionCan } from "./OrgPermissionCan";
+export { ProjectPermissionCan } from "./ProjectPermissionCan";