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

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -13,6 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
+import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
   Button,
   EmptyState,
@@ -36,7 +37,6 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
 import {
   useCreateSecretV3,
   useDeleteSecretV3,
@@ -50,7 +50,7 @@ import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 
-const SecretOverview = () => {
+export const SecretOverviewPage = () => {
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
   const router = useRouter();
@@ -91,11 +91,20 @@ const SecretOverview = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs =
-    currentWorkspace?.environments?.filter(({ slug }) =>
-      permission.can(
-        ProjectPermissionActions.Read,
-        subject(ProjectPermissionSub.Secrets, { environment: slug, secretPath: secretPath || "/" })
-      )
+    currentWorkspace?.environments?.filter(
+      ({ slug }) =>
+        permission.can(
+          ProjectPermissionActions.Read,
+          subject(ProjectPermissionSub.Secrets, { environment: slug, secretPath })
+        ) ||
+        permission.can(
+          ProjectPermissionActions.Read,
+          subject(ProjectPermissionSub.Folders, { environment: slug, secretPath })
+        ) ||
+        permission.can(
+          ProjectPermissionActions.Read,
+          subject(ProjectPermissionSub.SecretImports, { environment: slug, secretPath })
+        )
     ) || [];
 
   const {
@@ -371,18 +380,23 @@ const SecretOverview = () => {
                   onClick={handleFolderClick}
                 />
               ))}
-              {filteredSecretNames.map((key, index) => (
-                <SecretOverviewTableRow
-                  onSecretCreate={handleSecretCreate}
-                  onSecretDelete={handleSecretDelete}
-                  onSecretUpdate={handleSecretUpdate}
-                  key={`overview-${key}-${index + 1}`}
-                  environments={userAvailableEnvs}
-                  secretKey={key}
-                  getSecretByKey={getSecretByKey}
-                  expandableColWidth={expandableTableWidth}
-                />
-              ))}
+              {userAvailableEnvs?.length > 0 ? (
+                filteredSecretNames.map((key, index) => (
+                  <SecretOverviewTableRow
+                    secretPath={secretPath}
+                    onSecretCreate={handleSecretCreate}
+                    onSecretDelete={handleSecretDelete}
+                    onSecretUpdate={handleSecretUpdate}
+                    key={`overview-${key}-${index + 1}`}
+                    environments={userAvailableEnvs}
+                    secretKey={key}
+                    getSecretByKey={getSecretByKey}
+                    expandableColWidth={expandableTableWidth}
+                  />
+                ))
+              ) : (
+                <PermissionDeniedBanner />
+              )}
             </TBody>
             <TFoot>
               <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
@@ -414,8 +428,3 @@ const SecretOverview = () => {
     </div>
   );
 };
-
-export const SecretOverviewPage = withProjectPermission(SecretOverview, {
-  action: ProjectPermissionActions.Read,
-  subject: ProjectPermissionSub.Secrets
-});

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -1,4 +1,5 @@
 import { Controller, useForm } from "react-hook-form";
+import { subject } from "@casl/ability";
 import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -14,6 +15,7 @@ type Props = {
   isCreatable?: boolean;
   isVisible?: boolean;
   environment: string;
+  secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string) => Promise<void>;
   onSecretDelete: (env: string, key: string) => Promise<void>;
@@ -27,6 +29,7 @@ export const SecretEditRow = ({
   onSecretCreate,
   onSecretDelete,
   environment,
+  secretPath,
   isVisible
 }: Props) => {
   const {
@@ -95,7 +98,7 @@ export const SecretEditRow = ({
           <>
             <ProjectPermissionCan
               I={ProjectPermissionActions.Create}
-              a={ProjectPermissionSub.Secrets}
+              a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
             >
               {(isAllowed) => (
                 <div>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -18,6 +18,7 @@ import { SecretEditRow } from "./SecretEditRow";
 
 type Props = {
   secretKey: string;
+  secretPath: string;
   environments: { name: string; slug: string }[];
   expandableColWidth: number;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
@@ -29,6 +30,7 @@ type Props = {
 export const SecretOverviewTableRow = ({
   secretKey,
   environments = [],
+  secretPath,
   getSecretByKey,
   onSecretUpdate,
   onSecretCreate,
@@ -73,9 +75,11 @@ export const SecretOverviewTableRow = ({
             >
               <div className="h-full w-full border-r border-mineshaft-600 py-[0.85rem] px-5">
                 <div className="flex justify-center">
-                  {!isSecretEmpty &&  <Tooltip content={isSecretPresent ? "Present secret" : "Missing secret"}>
-                    <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
-                  </Tooltip>}
+                  {!isSecretEmpty && (
+                    <Tooltip content={isSecretPresent ? "Present secret" : "Missing secret"}>
+                      <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
+                    </Tooltip>
+                  )}
                   {isSecretEmpty && (
                     <Tooltip content="Empty value">
                       <FontAwesomeIcon icon={faCircle} />
@@ -141,6 +145,7 @@ export const SecretOverviewTableRow = ({
                           </td>
                           <td className="col-span-2 h-8 w-full">
                             <SecretEditRow
+                              secretPath={secretPath}
                               isVisible={isSecretVisible}
                               secretName={secretKey}
                               defaultValue={secret?.value}