Merge pull request #2238 from Infisical/feat/enabled-secrets-deletion-on-integ-removal

feat: added secrets deletion feature on integration removal

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 
 import { useToggle } from "@app/hooks";
 
@@ -16,6 +16,7 @@ type Props = {
   subTitle?: string;
   onDeleteApproved: () => Promise<void>;
   buttonText?: string;
+  children?: ReactNode;
 };
 
 export const DeleteActionModal = ({
@@ -26,7 +27,8 @@ export const DeleteActionModal = ({
   onDeleteApproved,
   title,
   subTitle = "This action is irreversible.",
-  buttonText = "Delete"
+  buttonText = "Delete",
+  children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
@@ -97,6 +99,7 @@ export const DeleteActionModal = ({
               placeholder={`Type ${deleteKey} here`}
             />
           </FormControl>
+          {children}
         </form>
       </ModalContent>
     </Modal>

frontend/src/hooks/api/integrations/queries.tsx

@@ -110,8 +110,15 @@ export const useCreateIntegration = () => {
 export const useDeleteIntegration = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<{}, {}, { id: string; workspaceId: string }>({
-    mutationFn: ({ id }) => apiRequest.delete(`/api/v1/integration/${id}`),
+  return useMutation<
+    {},
+    {},
+    { id: string; workspaceId: string; shouldDeleteIntegrationSecrets: boolean }
+  >({
+    mutationFn: ({ id, shouldDeleteIntegrationSecrets }) =>
+      apiRequest.delete(
+        `/api/v1/integration/${id}?shouldDeleteIntegrationSecrets=${shouldDeleteIntegrationSecrets}`
+      ),
     onSuccess: (_, { workspaceId }) => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(workspaceId));

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -106,9 +106,13 @@ export const IntegrationsPage = withProjectPermission(
       handleProviderIntegration(provider);
     };
 
-    const handleIntegrationDelete = async (integrationId: string, cb: () => void) => {
+    const handleIntegrationDelete = async (
+      integrationId: string,
+      shouldDeleteIntegrationSecrets: boolean,
+      cb: () => void
+    ) => {
       try {
-        await deleteIntegration({ id: integrationId, workspaceId });
+        await deleteIntegration({ id: integrationId, workspaceId, shouldDeleteIntegrationSecrets });
         if (cb) cb();
         createNotification({
           type: "success",
@@ -152,7 +156,7 @@ export const IntegrationsPage = withProjectPermission(
           isLoading={isIntegrationLoading}
           integrations={integrations}
           environments={environments}
-          onIntegrationDelete={({ id }, cb) => handleIntegrationDelete(id, cb)}
+          onIntegrationDelete={handleIntegrationDelete}
           workspaceId={workspaceId}
         />
         <CloudIntegrationSection

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -7,6 +7,7 @@ import { integrationSlugNameMapping } from "public/data/frequentConstants";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
+  Checkbox,
   DeleteActionModal,
   EmptyState,
   FormLabel,
@@ -16,7 +17,7 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { usePopUp, useToggle } from "@app/hooks";
 import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
 import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
@@ -25,7 +26,11 @@ type Props = {
   environments: Array<{ name: string; slug: string; id: string }>;
   integrations?: TIntegration[];
   isLoading?: boolean;
-  onIntegrationDelete: (integration: TIntegration, cb: () => void) => void;
+  onIntegrationDelete: (
+    integrationId: string,
+    shouldDeleteIntegrationSecrets: boolean,
+    cb: () => void
+  ) => Promise<void>;
   workspaceId: string;
 };
 
@@ -37,10 +42,12 @@ export const IntegrationsSection = ({
   workspaceId
 }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "deleteConfirmation"
+    "deleteConfirmation",
+    "deleteSecretsConfirmation"
   ] as const);
 
   const { mutate: syncIntegration } = useSyncIntegration();
+  const [shouldDeleteSecrets, setShouldDeleteSecrets] = useToggle(false);
 
   return (
     <div className="mb-8">
@@ -249,7 +256,10 @@ export const IntegrationsSection = ({
                     <div className="flex items-end opacity-80 duration-200 hover:opacity-100">
                       <Tooltip content="Remove Integration">
                         <IconButton
-                          onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
+                          onClick={() => {
+                            setShouldDeleteSecrets.off();
+                            handlePopUpOpen("deleteConfirmation", integration);
+                          }}
                           ariaLabel="delete"
                           isDisabled={!isAllowed}
                           colorSchema="danger"
@@ -281,11 +291,49 @@ export const IntegrationsSection = ({
           (popUp?.deleteConfirmation?.data as TIntegration)?.integration ||
           ""
         }
-        onDeleteApproved={async () =>
-          onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
-            handlePopUpClose("deleteConfirmation")
-          )
-        }
+        onDeleteApproved={async () => {
+          if (shouldDeleteSecrets) {
+            handlePopUpOpen("deleteSecretsConfirmation");
+            return;
+          }
+
+          await onIntegrationDelete(
+            (popUp?.deleteConfirmation.data as TIntegration).id,
+            false,
+            () => handlePopUpClose("deleteConfirmation")
+          );
+        }}
+      >
+        {(popUp?.deleteConfirmation?.data as TIntegration)?.integration === "github" && (
+          <div className="mt-4">
+            <Checkbox
+              id="delete-integration-secrets"
+              checkIndicatorBg="text-white"
+              onCheckedChange={() => setShouldDeleteSecrets.toggle()}
+            >
+              Delete secrets in destination
+            </Checkbox>
+          </div>
+        )}
+      </DeleteActionModal>
+      <DeleteActionModal
+        isOpen={popUp.deleteSecretsConfirmation.isOpen}
+        title={`Are you sure you also want to delete secrets on ${
+          (popUp?.deleteConfirmation.data as TIntegration)?.integration
+        }?`}
+        subTitle="By confirming, all secrets managed by this integration will be deleted in the destination. This action is irreversible."
+        onChange={(isOpen) => handlePopUpToggle("deleteSecretsConfirmation", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={async () => {
+          await onIntegrationDelete(
+            (popUp?.deleteConfirmation.data as TIntegration).id,
+            true,
+            () => {
+              handlePopUpClose("deleteSecretsConfirmation");
+              handlePopUpClose("deleteConfirmation");
+            }
+          );
+        }}
       />
     </div>
   );