Merge pull request #3810 from Infisical/daniel/secret-syncs-permissions

feat(secret-syncs): better permissioning

frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx

@@ -1,17 +1,45 @@
+import { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
+import { subject } from "@casl/ability";
 
 import { FilterableSelect, FormControl } from "@app/components/v2";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
-import { useWorkspace } from "@app/context";
+import { useProjectPermission, useWorkspace } from "@app/context";
+import {
+  ProjectPermissionSecretSyncActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 
 import { TSecretSyncForm } from "./schemas";
 
 export const SecretSyncSourceFields = () => {
-  const { control, watch } = useFormContext<TSecretSyncForm>();
+  const { control, watch, setError, clearErrors } = useFormContext<TSecretSyncForm>();
 
+  const { permission } = useProjectPermission();
   const { currentWorkspace } = useWorkspace();
 
   const selectedEnvironment = watch("environment");
+  const selectedSecretPath = watch("secretPath");
+
+  useEffect(() => {
+    const hasAccessToSource =
+      selectedEnvironment &&
+      permission.can(
+        ProjectPermissionSecretSyncActions.Create,
+        subject(ProjectPermissionSub.SecretSyncs, {
+          environment: selectedEnvironment.slug,
+          secretPath: selectedSecretPath
+        })
+      );
+
+    if (!hasAccessToSource) {
+      setError("secretPath", {
+        message: "You do not have permission to create secret syncs in this environment or path."
+      });
+    } else {
+      clearErrors("secretPath");
+    }
+  }, [selectedEnvironment, selectedSecretPath]);
 
   return (
     <>

frontend/src/context/ProjectPermissionContext/types.ts

@@ -263,6 +263,11 @@ export type SecretImportSubjectFields = {
   secretPath: string;
 };
 
+export type SecretSyncSubjectFields = {
+  environment: string;
+  secretPath: string;
+};
+
 export type SecretRotationSubjectFields = {
   environment: string;
   secretPath: string;
@@ -303,6 +308,13 @@ export type ProjectPermissionSet =
         | (ForcedSubject<ProjectPermissionSub.DynamicSecrets> & DynamicSecretSubjectFields)
       )
     ]
+  | [
+      ProjectPermissionSecretSyncActions,
+      (
+        | ProjectPermissionSub.SecretSyncs
+        | (ForcedSubject<ProjectPermissionSub.SecretSyncs> & SecretSyncSubjectFields)
+      )
+    ]
   | [
       ProjectPermissionActions,
       (
@@ -365,7 +377,6 @@ export type ProjectPermissionSet =
     ]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiAlerts]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiCollections]
-  | [ProjectPermissionSecretSyncActions, ProjectPermissionSub.SecretSyncs]
   | [ProjectPermissionActions.Delete, ProjectPermissionSub.Project]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Project]
   | [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -291,6 +291,13 @@ export const projectRoleFormSchema = z.object({
       })
         .array()
         .default([]),
+      [ProjectPermissionSub.SecretSyncs]: SecretSyncPolicyActionSchema.extend({
+        inverted: z.boolean().optional(),
+        conditions: ConditionSchema
+      })
+        .array()
+        .default([]),
+
       [ProjectPermissionSub.Commits]: CommitPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Member]: MemberPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Groups]: GroupPolicyActionSchema.array().default([]),
@@ -342,7 +349,6 @@ export const projectRoleFormSchema = z.object({
         .default([]),
       [ProjectPermissionSub.Kms]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Cmek]: CmekPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.SecretSyncs]: SecretSyncPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Kmip]: KmipPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.SecretScanningDataSources]:
         SecretScanningDataSourcePolicyActionSchema.array().default([]),
@@ -366,7 +372,8 @@ type TConditionalFields =
   | ProjectPermissionSub.CertificateTemplates
   | ProjectPermissionSub.SshHosts
   | ProjectPermissionSub.SecretRotation
-  | ProjectPermissionSub.Identity;
+  | ProjectPermissionSub.Identity
+  | ProjectPermissionSub.SecretSyncs;
 
 export const isConditionalSubjects = (
   subject: ProjectPermissionSub
@@ -379,7 +386,8 @@ export const isConditionalSubjects = (
   subject === ProjectPermissionSub.SshHosts ||
   subject === ProjectPermissionSub.SecretRotation ||
   subject === ProjectPermissionSub.PkiSubscribers ||
-  subject === ProjectPermissionSub.CertificateTemplates;
+  subject === ProjectPermissionSub.CertificateTemplates ||
+  subject === ProjectPermissionSub.SecretSyncs;
 
 const convertCaslConditionToFormOperator = (caslConditions: TPermissionCondition) => {
   const formConditions: z.infer<typeof ConditionSchema> = [];
@@ -484,7 +492,8 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         ProjectPermissionSub.SshCertificateTemplates,
         ProjectPermissionSub.SshCertificateAuthorities,
         ProjectPermissionSub.SshCertificates,
-        ProjectPermissionSub.SshHostGroups
+        ProjectPermissionSub.SshHostGroups,
+        ProjectPermissionSub.SecretSyncs
       ].includes(subject)
     ) {
       // from above statement we are sure it won't be undefined
@@ -515,6 +524,36 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
           return;
         }
 
+        if (subject === ProjectPermissionSub.SecretSyncs) {
+          const canRead = action.includes(ProjectPermissionSecretSyncActions.Read);
+          const canEdit = action.includes(ProjectPermissionSecretSyncActions.Edit);
+          const canDelete = action.includes(ProjectPermissionSecretSyncActions.Delete);
+          const canCreate = action.includes(ProjectPermissionSecretSyncActions.Create);
+          const canSyncSecrets = action.includes(ProjectPermissionSecretSyncActions.SyncSecrets);
+          const canImportSecrets = action.includes(
+            ProjectPermissionSecretSyncActions.ImportSecrets
+          );
+          const canRemoveSecrets = action.includes(
+            ProjectPermissionSecretSyncActions.RemoveSecrets
+          );
+
+          if (!formVal[subject]) formVal[subject] = [{ conditions: [], inverted: false }];
+
+          // from above statement we are sure it won't be undefined
+          formVal[subject]!.push({
+            [ProjectPermissionSecretSyncActions.Read]: canRead,
+            [ProjectPermissionSecretSyncActions.Create]: canCreate,
+            [ProjectPermissionSecretSyncActions.Edit]: canEdit,
+            [ProjectPermissionSecretSyncActions.Delete]: canDelete,
+            [ProjectPermissionSecretSyncActions.SyncSecrets]: canSyncSecrets,
+            [ProjectPermissionSecretSyncActions.ImportSecrets]: canImportSecrets,
+            [ProjectPermissionSecretSyncActions.RemoveSecrets]: canRemoveSecrets,
+            conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
+            inverted
+          });
+          return;
+        }
+
         if (subject === ProjectPermissionSub.DynamicSecrets) {
           const canRead = action.includes(ProjectPermissionDynamicSecretActions.ReadRootCredential);
           const canEdit = action.includes(ProjectPermissionDynamicSecretActions.EditRootCredential);
@@ -777,31 +816,6 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
       return;
     }
 
-    if (subject === ProjectPermissionSub.SecretSyncs) {
-      const canRead = action.includes(ProjectPermissionSecretSyncActions.Read);
-      const canEdit = action.includes(ProjectPermissionSecretSyncActions.Edit);
-      const canDelete = action.includes(ProjectPermissionSecretSyncActions.Delete);
-      const canCreate = action.includes(ProjectPermissionSecretSyncActions.Create);
-      const canSyncSecrets = action.includes(ProjectPermissionSecretSyncActions.SyncSecrets);
-      const canImportSecrets = action.includes(ProjectPermissionSecretSyncActions.ImportSecrets);
-      const canRemoveSecrets = action.includes(ProjectPermissionSecretSyncActions.RemoveSecrets);
-
-      if (!formVal[subject]) formVal[subject] = [{}];
-
-      // from above statement we are sure it won't be undefined
-      if (canRead) formVal[subject]![0][ProjectPermissionSecretSyncActions.Read] = true;
-      if (canEdit) formVal[subject]![0][ProjectPermissionSecretSyncActions.Edit] = true;
-      if (canCreate) formVal[subject]![0][ProjectPermissionSecretSyncActions.Create] = true;
-      if (canDelete) formVal[subject]![0][ProjectPermissionSecretSyncActions.Delete] = true;
-      if (canSyncSecrets)
-        formVal[subject]![0][ProjectPermissionSecretSyncActions.SyncSecrets] = true;
-      if (canImportSecrets)
-        formVal[subject]![0][ProjectPermissionSecretSyncActions.ImportSecrets] = true;
-      if (canRemoveSecrets)
-        formVal[subject]![0][ProjectPermissionSecretSyncActions.RemoveSecrets] = true;
-      return;
-    }
-
     if (subject === ProjectPermissionSub.SecretScanningDataSources) {
       const canRead = action.includes(ProjectPermissionSecretScanningDataSourceActions.Read);
       const canEdit = action.includes(ProjectPermissionSecretScanningDataSourceActions.Edit);

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -35,6 +35,7 @@ import {
   TFormSchema
 } from "./ProjectRoleModifySection.utils";
 import { SecretPermissionConditions } from "./SecretPermissionConditions";
+import { SecretSyncPermissionConditions } from "./SecretSyncPermissionConditions";
 import { SshHostPermissionConditions } from "./SshHostPermissionConditions";
 
 type Props = {
@@ -69,6 +70,10 @@ export const renderConditionalComponents = (
       return <PkiTemplatePermissionConditions isDisabled={isDisabled} />;
     }
 
+    if (subject === ProjectPermissionSub.SecretSyncs) {
+      return <SecretSyncPermissionConditions isDisabled={isDisabled} />;
+    }
+
     return <GeneralPermissionConditions isDisabled={isDisabled} type={subject} />;
   }
 

frontend/src/pages/project/RoleDetailsBySlugPage/components/SecretSyncPermissionConditions.tsx

@@ -0,0 +1,186 @@
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import {
+  PermissionConditionOperators,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
+
+import {
+  getConditionOperatorHelperInfo,
+  renderOperatorSelectItems
+} from "./PermissionConditionHelpers";
+import { TFormSchema } from "./ProjectRoleModifySection.utils";
+
+type Props = {
+  position?: number;
+  isDisabled?: boolean;
+};
+
+export const SecretSyncPermissionConditions = ({ position = 0, isDisabled }: Props) => {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useFormContext<TFormSchema>();
+  const items = useFieldArray({
+    control,
+    name: `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions`
+  });
+
+  const conditionErrorMessage =
+    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.message ||
+    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.root?.message;
+
+  return (
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+      <p className="mt-2 text-gray-300">Conditions</p>
+      <p className="text-sm text-mineshaft-400">
+        Conditions determine when a policy will be applied (always if no conditions are present).
+      </p>
+      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
+        All conditions must evaluate to true for the policy to take effect.
+      </p>
+      <div className="mt-2 flex flex-col space-y-2">
+        {items.fields.map((el, index) => {
+          const condition = watch(
+            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}`
+          ) as {
+            lhs: string;
+            rhs: string;
+            operator: string;
+          };
+          return (
+            <div
+              key={el.id}
+              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+            >
+              <div className="w-1/4">
+                <Controller
+                  control={control}
+                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.lhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => {
+                          setValue(
+                            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`,
+                            PermissionConditionOperators.$IN as never
+                          );
+                          field.onChange(e);
+                        }}
+                        className="w-full"
+                      >
+                        <SelectItem value="environment">Environment Slug</SelectItem>
+                        <SelectItem value="secretPath">Secret Path</SelectItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-36 items-center space-x-2">
+                <Controller
+                  control={control}
+                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => field.onChange(e)}
+                        className="w-full"
+                      >
+                        {renderOperatorSelectItems(condition.lhs)}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <div>
+                  <Tooltip
+                    asChild
+                    content={getConditionOperatorHelperInfo(
+                      condition?.operator as PermissionConditionOperators
+                    )}
+                    className="max-w-xs"
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
+                  </Tooltip>
+                </div>
+              </div>
+              <div className="flex-grow">
+                <Controller
+                  control={control}
+                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.rhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <IconButton
+                  ariaLabel="remove"
+                  variant="outline_bg"
+                  className="p-2.5"
+                  onClick={() => items.remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {conditionErrorMessage && (
+        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
+          <FontAwesomeIcon icon={faWarning} className="text-red" />
+          <span>{conditionErrorMessage}</span>
+        </div>
+      )}
+      <div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="star"
+          size="xs"
+          className="mt-3"
+          isDisabled={isDisabled}
+          onClick={() =>
+            items.append({
+              lhs: "environment",
+              operator: PermissionConditionOperators.$EQ,
+              rhs: ""
+            })
+          }
+        >
+          Add Condition
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import { subject } from "@casl/ability";
 import {
   faBan,
   faCalendarCheck,
@@ -117,6 +118,14 @@ export const SecretSyncRow = ({
 
   const destinationDetails = SECRET_SYNC_MAP[destination];
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <Tr
       onClick={() =>
@@ -264,7 +273,7 @@ export const SecretSyncRow = ({
               </DropdownMenuItem>
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.SyncSecrets}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem
@@ -295,7 +304,7 @@ export const SecretSyncRow = ({
               {syncOption?.canImportSecrets && (
                 <ProjectPermissionCan
                   I={ProjectPermissionSecretSyncActions.ImportSecrets}
-                  a={ProjectPermissionSub.SecretSyncs}
+                  a={permissionSubject}
                 >
                   {(isAllowed: boolean) => (
                     <DropdownMenuItem
@@ -326,7 +335,7 @@ export const SecretSyncRow = ({
               )}
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.RemoveSecrets}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem
@@ -356,7 +365,7 @@ export const SecretSyncRow = ({
               </ProjectPermissionCan>
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.Edit}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem
@@ -373,7 +382,7 @@ export const SecretSyncRow = ({
               </ProjectPermissionCan>
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.Delete}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { subject } from "@casl/ability";
 import {
   faBan,
   faCheck,
@@ -63,7 +64,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
   const triggerSyncSecrets = useTriggerSecretSyncSyncSecrets();
   const updateSync = useUpdateSecretSync();
 
-  const { destination } = secretSync;
+  const { destination, environment, folder } = secretSync;
 
   const destinationName = SECRET_SYNC_MAP[destination].name;
   const { syncOption } = useSecretSyncOption(destination);
@@ -128,6 +129,14 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
     }
   };
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <>
       <div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
@@ -157,7 +166,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
         <div>
           <ProjectPermissionCan
             I={ProjectPermissionSecretSyncActions.SyncSecrets}
-            a={ProjectPermissionSub.SecretSyncs}
+            a={permissionSubject}
           >
             {(isAllowed: boolean) => (
               <Button
@@ -194,7 +203,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               {syncOption?.canImportSecrets && (
                 <ProjectPermissionCan
                   I={ProjectPermissionSecretSyncActions.ImportSecrets}
-                  a={ProjectPermissionSub.SecretSyncs}
+                  a={permissionSubject}
                 >
                   {(isAllowed: boolean) => (
                     <DropdownMenuItem
@@ -222,7 +231,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               )}
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.RemoveSecrets}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem
@@ -249,7 +258,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               </ProjectPermissionCan>
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.Edit}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem
@@ -267,7 +276,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
               </ProjectPermissionCan>
               <ProjectPermissionCan
                 I={ProjectPermissionSecretSyncActions.Delete}
-                a={ProjectPermissionSub.SecretSyncs}
+                a={permissionSubject}
               >
                 {(isAllowed: boolean) => (
                   <DropdownMenuItem

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { subject } from "@casl/ability";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -35,7 +36,7 @@ type Props = {
 };
 
 export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }: Props) => {
-  const { destination, connection } = secretSync;
+  const { destination, connection, folder, environment } = secretSync;
 
   const app = APP_CONNECTION_MAP[connection.app].name;
 
@@ -101,14 +102,19 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
       throw new Error(`Unhandled Destination Section components: ${destination}`);
   }
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
         <h3 className="font-semibold text-mineshaft-100">Destination Configuration</h3>
-        <ProjectPermissionCan
-          I={ProjectPermissionSecretSyncActions.Edit}
-          a={ProjectPermissionSub.SecretSyncs}
-        >
+        <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
               variant="plain"

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { subject } from "@casl/ability";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -16,7 +17,8 @@ type Props = {
 };
 
 export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) => {
-  const { syncStatus, lastSyncMessage, lastSyncedAt, name, description } = secretSync;
+  const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, environment, folder } =
+    secretSync;
 
   const failureMessage = useMemo(() => {
     if (syncStatus === SecretSyncStatus.Failed) {
@@ -32,14 +34,19 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
     return null;
   }, [syncStatus, lastSyncMessage]);
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
         <h3 className="font-semibold text-mineshaft-100">Details</h3>
-        <ProjectPermissionCan
-          I={ProjectPermissionSecretSyncActions.Edit}
-          a={ProjectPermissionSub.SecretSyncs}
-        >
+        <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
           {(isAllowed) => (
             <IconButton
               variant="plain"

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { subject } from "@casl/ability";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -21,7 +22,9 @@ type Props = {
 export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) => {
   const {
     destination,
-    syncOptions: { initialSyncBehavior, disableSecretDeletion, keySchema }
+    syncOptions: { initialSyncBehavior, disableSecretDeletion, keySchema },
+    environment,
+    folder
   } = secretSync;
 
   let AdditionalSyncOptionsComponent: ReactNode;
@@ -59,15 +62,20 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <div>
       <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
         <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
-          <ProjectPermissionCan
-            I={ProjectPermissionSecretSyncActions.Edit}
-            a={ProjectPermissionSub.SecretSyncs}
-          >
+          <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
             {(isAllowed) => (
               <IconButton
                 variant="plain"

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx

@@ -1,3 +1,4 @@
+import { subject } from "@casl/ability";
 import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -16,6 +17,14 @@ type Props = {
 export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) => {
   const { folder, environment } = secretSync;
 
+  const permissionSubject =
+    environment && folder
+      ? subject(ProjectPermissionSub.SecretSyncs, {
+          environment: environment.slug,
+          secretPath: folder.path
+        })
+      : ProjectPermissionSub.SecretSyncs;
+
   return (
     <div>
       <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
@@ -35,10 +44,7 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
                 </div>
               </Tooltip>
             )}
-            <ProjectPermissionCan
-              I={ProjectPermissionSecretSyncActions.Edit}
-              a={ProjectPermissionSub.SecretSyncs}
-            >
+            <ProjectPermissionCan I={ProjectPermissionSecretSyncActions.Edit} a={permissionSubject}>
               {(isAllowed) => (
                 <IconButton
                   variant="plain"