feat: added helper text for operators and improved rendering of selective operators

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 file names 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 value to test"
+          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/index.tsx

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