Merge pull request #3246 from Infisical/disable-delete-sync-option

Feature: Disable Secret Deletion Sync Option

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

@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { FormControl, Select, SelectItem } from "@app/components/v2";
+import { FormControl, Select, SelectItem, Switch, Tooltip } from "@app/components/v2";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync, useSecretSyncOption } from "@app/hooks/api/secretSyncs";
 
@@ -116,6 +116,44 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
         </>
       )}
       {AdditionalSyncOptionsFieldsComponent}
+      <Controller
+        control={control}
+        name="syncOptions.disableSecretDeletion"
+        render={({ field: { value, onChange }, fieldState: { error } }) => {
+          return (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="auto-sync-enabled"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p className="w-[11rem]">
+                  Disable Secret Deletion{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          When enabled, Infisical will <span className="font-semibold">not</span>{" "}
+                          remove secrets from the destination during a sync.
+                        </p>
+                        <p className="mt-4">
+                          Enable this option if you intend to manage some secrets manually outside
+                          of Infisical.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          );
+        }}
+      />
       {/* <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl

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

@@ -36,6 +36,7 @@ export const SecretSyncReviewFields = () => {
     secretPath,
     syncOptions: {
       // appendSuffix, prependPrefix,
+      disableSecretDeletion,
       initialSyncBehavior
     },
     destination,
@@ -111,6 +112,11 @@ export const SecretSyncReviewFields = () => {
           {/* <SecretSyncLabel label="Prepend Prefix">{prependPrefix}</SecretSyncLabel>
           <SecretSyncLabel label="Append Suffix">{appendSuffix}</SecretSyncLabel> */}
           {AdditionalSyncOptionsFieldsComponent}
+          {disableSecretDeletion && (
+            <SecretSyncLabel label="Secret Deletion">
+              <Badge variant="primary">Disabled</Badge>
+            </SecretSyncLabel>
+          )}
         </div>
       </div>
       <div className="flex flex-col gap-3">

frontend/src/components/secret-syncs/forms/schemas/base-secret-sync-schema.ts

@@ -7,7 +7,8 @@ export const BaseSecretSyncSchema = <T extends AnyZodObject | undefined = undefi
   additionalSyncOptions?: T
 ) => {
   const baseSyncOptionsSchema = z.object({
-    initialSyncBehavior: z.nativeEnum(SecretSyncInitialSyncBehavior)
+    initialSyncBehavior: z.nativeEnum(SecretSyncInitialSyncBehavior),
+    disableSecretDeletion: z.boolean().optional().default(false)
     // scott: removed temporarily for evaluation of template formatting
     // prependPrefix: z
     //   .string()

frontend/src/hooks/api/secretSyncs/types/root-sync.ts

@@ -3,6 +3,7 @@ import { SecretSyncInitialSyncBehavior, SecretSyncStatus } from "@app/hooks/api/
 
 export type RootSyncOptions = {
   initialSyncBehavior: SecretSyncInitialSyncBehavior;
+  disableSecretDeletion?: boolean;
   // prependPrefix?: string;
   // appendSuffix?: string;
 };

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

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
-import { IconButton } from "@app/components/v2";
+import { Badge, IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
@@ -24,7 +24,8 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
     syncOptions: {
       // appendSuffix,
       // prependPrefix,
-      initialSyncBehavior
+      initialSyncBehavior,
+      disableSecretDeletion
     }
   } = secretSync;
 
@@ -58,24 +59,22 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
       <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>
-          {AdditionalSyncOptionsComponent && (
-            <ProjectPermissionCan
-              I={ProjectPermissionSecretSyncActions.Edit}
-              a={ProjectPermissionSub.SecretSyncs}
-            >
-              {(isAllowed) => (
-                <IconButton
-                  variant="plain"
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                  ariaLabel="Edit sync options"
-                  onClick={onEditOptions}
-                >
-                  <FontAwesomeIcon icon={faEdit} />
-                </IconButton>
-              )}
-            </ProjectPermissionCan>
-          )}
+          <ProjectPermissionCan
+            I={ProjectPermissionSecretSyncActions.Edit}
+            a={ProjectPermissionSub.SecretSyncs}
+          >
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                ariaLabel="Edit sync options"
+                onClick={onEditOptions}
+              >
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
         </div>
         <div>
           <div className="space-y-3">
@@ -85,6 +84,11 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
             {/* <SecretSyncLabel label="Prefix">{prependPrefix}</SecretSyncLabel>
             <SecretSyncLabel label="Suffix">{appendSuffix}</SecretSyncLabel> */}
             {AdditionalSyncOptionsComponent}
+            {disableSecretDeletion && (
+              <SecretSyncLabel label="Secret Deletion">
+                <Badge variant="primary">Disabled</Badge>
+              </SecretSyncLabel>
+            )}
           </div>
         </div>
       </div>