feat: delete flow connections frontend

Author: kevinkim-ogp

packages/frontend/src/components/EditorSettings/FlowConnections/ConnectionsTable.tsx

@@ -1,13 +1,11 @@
 import { IFlow } from '@plumber/types'
 
 import { useContext } from 'react'
-import { BiTrash } from 'react-icons/bi'
 import { useQuery } from '@apollo/client'
 import {
   Box,
   Center,
   Flex,
-  IconButton,
   Table,
   TableContainer,
   Tbody,
@@ -23,7 +21,9 @@ import PrimarySpinner from '@/components/PrimarySpinner'
 import { EditorSettingsContext } from '@/contexts/EditorSettings'
 import { GET_FLOW_CONNECTIONS } from '@/graphql/queries/get-flow-connections'
 
-interface SharedConnection {
+import DeleteFlowConnectionButton from './DeleteFlowConnectionButton'
+
+export interface SharedConnection {
   addedBy: string
   appName: string
   appIconUrl: string
@@ -43,10 +43,19 @@ const COLUMNS = ['App', 'Connection name', 'Created by', 'Status', '']
 
 const StatusTag = ({ inUse }: { inUse: boolean }) => {
   if (inUse) {
-    return <Tag colorScheme="success">In use</Tag>
+    return (
+      <Tag colorScheme="success" _active={{}} _hover={{}}>
+        In use
+      </Tag>
+    )
   }
   return (
-    <Tag bg="interaction.sub-subtle.default" color="base.divider.strong">
+    <Tag
+      bg="interaction.sub-subtle.default"
+      color="base.divider.strong"
+      _active={{}}
+      _hover={{}}
+    >
       Not in use
     </Tag>
   )
@@ -65,7 +74,7 @@ const TableHeader = () => {
 }
 
 const TableRow = (props: TableRowProps) => {
-  const { connection, hasEditPermission } = props
+  const { connection, flow, hasEditPermission } = props
   const {
     connectionId,
     connectionName,
@@ -108,16 +117,11 @@ const TableRow = (props: TableRowProps) => {
         <StatusTag inUse={isInUse} />
       </Td>
       <Td>
-        {/* TODO: Add the delete functionality */}
         {hasEditPermission && (
-          <IconButton
-            onClick={(event) => {
-              event.stopPropagation()
-            }}
-            colorScheme="critical"
-            variant="clear"
-            aria-label="Delete flow connection"
-            icon={<BiTrash />}
+          <DeleteFlowConnectionButton
+            flow={flow}
+            connection={connection}
+            isDisabled={flow.active}
           />
         )}
       </Td>

packages/frontend/src/components/EditorSettings/FlowConnections/DeleteFlowConnectionButton.tsx

@@ -0,0 +1,78 @@
+import { IFlow } from '@plumber/types'
+
+import { useCallback, useRef } from 'react'
+import { BiTrash } from 'react-icons/bi'
+import { useMutation } from '@apollo/client'
+import { useDisclosure } from '@chakra-ui/react'
+import { IconButton, TouchableTooltip } from '@opengovsg/design-system-react'
+
+import MenuAlertDialog from '@/components/MenuAlertDialog'
+import { DELETE_FLOW_CONNECTION } from '@/graphql/mutations/delete-flow-connection'
+import { GET_FLOW_CONNECTIONS } from '@/graphql/queries/get-flow-connections'
+
+import { SharedConnection } from './ConnectionsTable'
+
+interface DeleteFlowConnectionButtonProps {
+  flow: IFlow
+  connection: SharedConnection
+  isDisabled?: boolean
+}
+
+export default function DeleteFlowConnectionButton(
+  props: DeleteFlowConnectionButtonProps,
+) {
+  const { flow, connection, isDisabled } = props
+  const { connectionId, connectionName, connectionType } = connection
+
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  const {
+    isOpen: isDialogOpen,
+    onOpen: onDialogOpen,
+    onClose: onDialogClose,
+  } = useDisclosure()
+
+  const [deleteConnection, { loading: isDeletingConnection }] = useMutation(
+    DELETE_FLOW_CONNECTION,
+    { refetchQueries: [GET_FLOW_CONNECTIONS] },
+  )
+
+  const onDeleteConnection = useCallback(async () => {
+    await deleteConnection({
+      variables: {
+        input: { flowId: flow.id, connectionId, connectionType },
+      },
+      onCompleted: () => onDialogClose(),
+    })
+  }, [deleteConnection, flow.id, connectionId, connectionType, onDialogClose])
+  return (
+    <TouchableTooltip
+      label={
+        isDisabled
+          ? 'You cannot delete a connection when the Pipe is published'
+          : ''
+      }
+    >
+      <IconButton
+        onClick={(event) => {
+          event.stopPropagation()
+          onDialogOpen()
+        }}
+        colorScheme="critical"
+        variant="clear"
+        aria-label="Delete flow connection"
+        icon={<BiTrash />}
+        isDisabled={isDisabled}
+      />
+      <MenuAlertDialog
+        cancelRef={cancelRef}
+        isLoading={isDeletingConnection}
+        isDialogOpen={isDialogOpen}
+        onDialogClose={onDialogClose}
+        dialogType="delete"
+        dialogHeader={connectionName}
+        onClick={onDeleteConnection}
+        customBody="Are you sure you want to delete this shared connection? You will need to reconfigure the connection for all steps using this connection."
+      />
+    </TouchableTooltip>
+  )
+}

packages/frontend/src/components/MenuAlertDialog/index.tsx

@@ -30,7 +30,7 @@ interface MenuAlertDialogProps {
   cancelRef: React.RefObject<HTMLButtonElement>
   onDialogClose: () => void
   dialogType: AlertDialogType
-  dialogHeader: AlertHeaderType
+  dialogHeader: AlertHeaderType | string
   onClick: (() => void) | MouseEventHandler
   isLoading: boolean
   customBody?: string
@@ -44,7 +44,7 @@ interface AlertDialogContent {
 }
 
 function getAlertDialogContent(
-  dialogHeader: AlertHeaderType,
+  dialogHeader: AlertHeaderType | string,
   dialogType: AlertDialogType,
   customBody?: string,
 ): AlertDialogContent {

packages/frontend/src/graphql/mutations/delete-flow-connection.ts

@@ -0,0 +1,7 @@
+import { graphql } from '@/graphql/__generated__'
+
+export const DELETE_FLOW_CONNECTION = graphql(`
+  mutation DeleteFlowConnection($input: DeleteFlowConnectionInput!) {
+    deleteFlowConnection(input: $input)
+  }
+`)