Revert "Revert "Permission phase 2""

This reverts commit 8b9244b079.

frontend/src/components/permissions/GlobPermissionInfo.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import picomatch from "picomatch";
+
+import { FormControl } from "../v2/FormControl";
+import { Input } from "../v2/Input";
+
+export const GlobPermissionInfo = () => {
+  const [pattern, setPattern] = useState("");
+  const [text, setText] = useState("");
+
+  return (
+    <div>
+      <div className="mt-2">A glob pattern uses wildcards to match resources or paths.</div>
+      <div>
+        <FormControl label="Glob pattern" helperText="Examples: /{a,b}, DB_**">
+          <Input value={pattern} onChange={(e) => setPattern(e.target.value)} />
+        </FormControl>
+      </div>
+      <div>
+        <FormControl
+          label="Test string"
+          helperText="Type a value to test glob match"
+          isError={
+            pattern && text ? !picomatch.isMatch(text, pattern, { strictSlashes: false }) : false
+          }
+          errorText="Invalid"
+        >
+          <Input value={text} onChange={(e) => setText(e.target.value)} />
+        </FormControl>
+      </div>
+    </div>
+  );
+};

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -1,23 +1,25 @@
 import { FunctionComponent, ReactNode } from "react";
-import { BoundCanProps, Can } from "@casl/react";
+import { AbilityTuple, MongoAbility } from "@casl/ability";
+import { Can } from "@casl/react";
 
-import { TProjectPermission, useProjectPermission } from "@app/context/ProjectPermissionContext";
+import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
 
-import { Tooltip } from "../v2";
+import { Tooltip } from "../v2/Tooltip";
 
-type Props = {
+type Props<T extends AbilityTuple> = {
   label?: ReactNode;
   // this prop is used when there exist already a tooltip as helper text for users
   // so when permission is allowed same tooltip will be reused  to show helpertext
   renderTooltip?: boolean;
   allowedLabel?: string;
-  // 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>;
+  children: ReactNode | ((isAllowed: boolean, ability: T) => ReactNode);
+  passThrough?: boolean;
+  I: T[0];
+  a: T[1];
+  ability?: MongoAbility<T>;
+};
 
-export const ProjectPermissionCan: FunctionComponent<Props> = ({
+export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>> = ({
   label = "Access restricted",
   children,
   passThrough = true,
@@ -31,9 +33,7 @@ export const ProjectPermissionCan: FunctionComponent<Props> = ({
       {(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;
+          typeof children === "function" ? children(isAllowed, ability as any) : children;
 
         if (!isAllowed && passThrough) {
           return <Tooltip content={label}>{finalChild}</Tooltip>;

frontend/src/components/permissions/index.tsx

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

frontend/src/components/v2/Select/Select.tsx

@@ -12,6 +12,7 @@ type Props = {
   placeholder?: string;
   className?: string;
   dropdownContainerClassName?: string;
+  containerClassName?: string;
   isLoading?: boolean;
   position?: "item-aligned" | "popper";
   isDisabled?: boolean;
@@ -31,12 +32,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       isDisabled,
       dropdownContainerClassName,
       position,
+      containerClassName,
       ...props
     },
     ref
   ): JSX.Element => {
     return (
-      <div className="flex items-center space-x-2">
+      <div className={twMerge("flex items-center space-x-2", containerClassName)}>
         <SelectPrimitive.Root
           {...props}
           onValueChange={(value) => {