Ability to delete integrations (#5143)

ethyca · Aug 13, 2024 · 78c1fa8 · 78c1fa8
1 parent 8ba125c
commit 78c1fa8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx
@@ -65,7 +65,7 @@ const ConnectionMenu = ({
           name={name}
           isSwitch={false}
         />
-        <DeleteConnectionModal connection_key={connection_key} />
+        <DeleteConnectionModal showMenu connection_key={connection_key} />
       </MenuList>
     </Portal>
   </Menu>

diff --git a/clients/admin-ui/src/features/datastore-connections/DeleteConnectionModal.tsx b/clients/admin-ui/src/features/datastore-connections/DeleteConnectionModal.tsx
@@ -12,22 +12,33 @@ import {
   Text,
   useDisclosure,
 } from "fidesui";
+import { useRouter } from "next/router";
 import React from "react";
 
+import { INTEGRATION_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes";
+
 import { useDeleteDatastoreConnectionMutation } from "./datastore-connection.slice";
 
 type DataConnectionProps = {
   connection_key: string;
+  showMenu: boolean;
 };
 
-const DeleteConnectionModal = ({ connection_key }: DataConnectionProps) => {
+const DeleteConnectionModal = ({
+  connection_key,
+  showMenu,
+}: DataConnectionProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [deleteConnection, deleteConnectionResult] =
     useDeleteDatastoreConnectionMutation();
+  const router = useRouter();
 
   const handleDeleteConnection = () => {
     if (connection_key) {
       deleteConnection(connection_key);
+      if (!showMenu) {
+        router.push(INTEGRATION_MANAGEMENT_ROUTE);
+      }
     }
   };
 
@@ -39,16 +50,20 @@ const DeleteConnectionModal = ({ connection_key }: DataConnectionProps) => {
 
   return (
     <>
-      <MenuItem
-        _focus={{ color: "complimentary.500", bg: "gray.100" }}
-        onClick={onOpen}
-      >
-        <Text fontSize="sm">Delete</Text>
-      </MenuItem>
+      {showMenu && (
+        <MenuItem
+          _focus={{ color: "complimentary.500", bg: "gray.100" }}
+          onClick={onOpen}
+        >
+          <Text fontSize="sm">Delete</Text>
+        </MenuItem>
+      )}
+      {!showMenu && <Button onClick={onOpen}>Delete integration</Button>}
+
       <Modal isCentered isOpen={isOpen} onClose={closeIfComplete}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Delete Connection</ModalHeader>
+          <ModalHeader>Delete integration</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <Stack direction="column" spacing="15px">
@@ -58,7 +73,7 @@ const DeleteConnectionModal = ({ connection_key }: DataConnectionProps) => {
                 fontWeight="sm"
                 lineHeight="20px"
               >
-                Deleting a connection may impact any privacy request that is
+                Deleting an integration may impact any privacy request that is
                 currently in progress. Do you wish to proceed?
               </Text>
             </Stack>
@@ -93,7 +108,7 @@ const DeleteConnectionModal = ({ connection_key }: DataConnectionProps) => {
                 color: "gray.600",
               }}
             >
-              Delete connection
+              Delete integration
             </Button>
           </ModalFooter>
         </ModalContent>

diff --git a/clients/admin-ui/src/features/integrations/IntegrationBox.tsx b/clients/admin-ui/src/features/integrations/IntegrationBox.tsx
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 
 import Tag from "~/features/common/Tag";
 import ConnectionTypeLogo from "~/features/datastore-connections/ConnectionTypeLogo";
+import DeleteConnectionModal from "~/features/datastore-connections/DeleteConnectionModal";
 import useTestConnection from "~/features/datastore-connections/useTestConnection";
 import getIntegrationTypeInfo from "~/features/integrations/add-integration/allIntegrationTypes";
 import ConnectionStatusNotice from "~/features/integrations/ConnectionStatusNotice";
@@ -12,12 +13,14 @@ const IntegrationBox = ({
   integration,
   showTestNotice,
   otherButtons,
+  showDeleteButton,
   configureButtonLabel = "Configure",
   onConfigureClick,
 }: {
   integration?: ConnectionConfigurationResponse;
   showTestNotice?: boolean;
   otherButtons?: ReactNode;
+  showDeleteButton?: boolean;
   configureButtonLabel?: string;
   onConfigureClick?: () => void;
 }) => {
@@ -53,6 +56,12 @@ const IntegrationBox = ({
           )}
         </Flex>
         <ButtonGroup size="sm" variant="outline">
+          {showDeleteButton && integration && (
+            <DeleteConnectionModal
+              showMenu={false}
+              connection_key={integration.key}
+            />
+          )}
           {showTestNotice && (
             <Button
               onClick={testConnection}

diff --git a/clients/admin-ui/src/pages/integrations/[id].tsx b/clients/admin-ui/src/pages/integrations/[id].tsx
@@ -116,7 +116,7 @@ const IntegrationDetailView: NextPage = () => {
           },
         ]}
       >
-        <IntegrationBox integration={connection} />
+        <IntegrationBox integration={connection} showDeleteButton />
         {integrationIsLoading ? (
           <Spinner />
         ) : (