Replace DeleteModal with Confirmation Modal (#12275)

When delete is confirmed, navigate away from route
airbytehq · Apr 27, 2022 · 3ece0c4 · 3ece0c4
1 parent eea6d1a
commit 3ece0c4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 58 deletions.
diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -29,6 +29,7 @@ export interface ConfirmationModalProps {
   text: string;
   submitButtonText: string;
   onSubmit: () => void;
+  submitButtonDataId?: string;
 }
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
@@ -37,6 +38,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   text,
   onSubmit,
   submitButtonText,
+  submitButtonDataId,
 }) => (
   <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
     <Content>
@@ -45,7 +47,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
         <ButtonWithMargin onClick={onClose} type="button" secondary>
           <FormattedMessage id="form.cancel" />
         </ButtonWithMargin>
-        <Button type="button" danger onClick={onSubmit}>
+        <Button type="button" danger onClick={onSubmit} data-id={submitButtonDataId}>
           <FormattedMessage id={submitButtonText} />
         </Button>
       </ButtonContent>

diff --git a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { Button, H5 } from "components";
 import ContentCard from "components/ContentCard";
 
-import DeleteModal from "./components/DeleteModal";
+import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
+import useRouter from "hooks/useRouter";
 
 type IProps = {
   type: "source" | "destination" | "connection";
@@ -29,7 +30,22 @@ const Text = styled.div`
 `;
 
 const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
+  const { push } = useRouter();
+
+  const onDeleteButtonClick = useCallback(() => {
+    openConfirmationModal({
+      text: `tables.${type}DeleteModalText`,
+      title: `tables.${type}DeleteConfirm`,
+      submitButtonText: "form.delete",
+      onSubmit: async () => {
+        await onDelete();
+        closeConfirmationModal();
+        push("../..");
+      },
+      submitButtonDataId: "delete",
+    });
+  }, [closeConfirmationModal, onDelete, openConfirmationModal, push, type]);
 
   return (
     <>
@@ -40,11 +56,10 @@ const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
           </H5>
           <FormattedMessage id={`tables.${type}DataDelete`} />
         </Text>
-        <Button danger onClick={() => setIsModalOpen(true)} data-id="open-delete-modal">
+        <Button danger onClick={onDeleteButtonClick} data-id="open-delete-modal">
           <FormattedMessage id={`tables.${type}Delete`} />
         </Button>
       </DeleteBlockComponent>
-      {isModalOpen && <DeleteModal type={type} onClose={() => setIsModalOpen(false)} onSubmit={onDelete} />}
     </>
   );
 };

diff --git a/airbyte-webapp/src/components/DeleteBlock/components/DeleteModal.tsx b/airbyte-webapp/src/components/DeleteBlock/components/DeleteModal.tsx
diff --git a/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx b/airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx
@@ -64,6 +64,7 @@ export const ConfirmationModalService = ({ children }: { children: React.ReactNo
           text={state.confirmationModal.text}
           onSubmit={state.confirmationModal.onSubmit}
           submitButtonText={state.confirmationModal.submitButtonText}
+          submitButtonDataId={state.confirmationModal.submitButtonDataId}
         />
       ) : null}
     </>