feat(rbac): added glob support in permission and revealed settings

frontend/src/components/permissions/PermissionDeniedBanner.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  containerClassName?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const PermissionDeniedBanner = ({ containerClassName, className, children }: Props) => {
+  return (
+    <div
+      className={twMerge(
+        "container h-full mx-auto flex justify-center items-center",
+        containerClassName
+      )}
+    >
+      <div
+        className={twMerge(
+          "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+          className
+        )}
+      >
+        <div>
+          <FontAwesomeIcon icon={faLock} size="6x" />
+        </div>
+        <div>
+          <div className="text-4xl font-medium mb-2">Permission Denied</div>
+          {children || (
+            <div className="text-sm">
+              You do not have permission. <br /> Kindly contact your organization administrator
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -11,7 +11,11 @@ type Props = {
   // so when permission is allowed same tooltip will be reused  to show helpertext
   renderTooltip?: boolean;
   allowedLabel?: string;
-} & BoundCanProps<TProjectPermission>;
+  // BUG(akhilmhdh): As a workaround for now i put any but this should be TProjectPermission
+  // For some reason when i put TProjectPermission in a wrapper component it just wont work causes a weird  ts error
+  // tried a lot combinations
+  // REF: https://github.com/stalniy/casl/blob/ac081a34f56366a7eaaed05d21689d27041ef005/packages/casl-react/src/factory.ts#L15
+} & BoundCanProps<any>;
 
 export const ProjectPermissionCan: FunctionComponent<Props> = ({
   label = "Permission Denied. Kindly contact your project admin",
@@ -22,7 +26,6 @@ export const ProjectPermissionCan: FunctionComponent<Props> = ({
   ...props
 }) => {
   const permission = useProjectPermission();
-
   return (
     <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
       {(isAllowed, ability) => {

frontend/src/components/permissions/index.tsx

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