🪟 🎉 Adds extra information while deleting source or destination (#21594)

* Adds extra information while deleting source or destination

* Fixes extra property to make the usage more general, not limiting with p tag

* Fixes extra to additionalContent; Adds pluralization for deletion message

* Add bold text for connection names

* Update airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* Update airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* Fixes connection names rendering; Changes sources/destination deletion modal text

* Fixes useDeleteModal hook usage

---------

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

Author: YatsukBogdan1

airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx

@@ -16,12 +16,14 @@ export interface ConfirmationModalProps {
   onSubmit: () => void;
   submitButtonDataId?: string;
   cancelButtonText?: string;
+  additionalContent?: React.ReactNode;
 }
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   onClose,
   title,
   text,
+  additionalContent,
   textValues,
   onSubmit,
   submitButtonText,
@@ -35,6 +37,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
     <Modal onClose={onClose} title={<FormattedMessage id={title} />} testId="confirmationModal">
       <div className={styles.content}>
         <FormattedMessage id={text} values={textValues} />
+        {additionalContent}
         <div className={styles.buttonContent}>
           <Button
             className={styles.buttonWithMargin}

airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx

@@ -12,6 +12,7 @@ import styles from "./DeleteBlock.module.scss";
 interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;
+  modalAdditionalContent?: React.ReactNode;
 }
 
 export const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {

airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx

@@ -60,6 +60,7 @@ export const ConfirmationModalService = ({ children }: { children: React.ReactNo
       {state.isOpen && state.confirmationModal ? (
         <ConfirmationModal
           onClose={closeConfirmationModal}
+          additionalContent={state.confirmationModal.additionalContent}
           title={state.confirmationModal.title}
           text={state.confirmationModal.text}
           textValues={state.confirmationModal.textValues}

airbyte-webapp/src/hooks/useDeleteModal.tsx

@@ -1,15 +1,20 @@
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useConfirmationModalService } from "./services/ConfirmationModal";
 
-export function useDeleteModal(type: "source" | "destination" | "connection", onDelete: () => Promise<unknown>) {
+export function useDeleteModal(
+  type: "source" | "destination" | "connection",
+  onDelete: () => Promise<unknown>,
+  additionalContent?: React.ReactNode
+) {
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const navigate = useNavigate();
 
   return useCallback(() => {
     openConfirmationModal({
       text: `tables.${type}DeleteModalText`,
+      additionalContent,
       title: `tables.${type}DeleteConfirm`,
       submitButtonText: "form.delete",
       onSubmit: async () => {
@@ -19,5 +24,5 @@ export function useDeleteModal(type: "source" | "destination" | "connection", on
       },
       submitButtonDataId: "delete",
     });
-  }, [closeConfirmationModal, onDelete, openConfirmationModal, navigate, type]);
+  }, [openConfirmationModal, type, additionalContent, onDelete, closeConfirmationModal, navigate]);
 }

airbyte-webapp/src/locales/en.json

@@ -485,8 +485,9 @@
   "tables.sourceDeleteConfirm": "Confirm source deletion",
   "tables.destinationDeleteConfirm": "Confirm destination deletion",
   "tables.connectionDeleteConfirm": "Confirm connection deletion",
-  "tables.sourceDeleteModalText": "Deleting a source cannot be undone without a full re-sync. Note that:\n  - All connections with this source will be deleted, including their past logs and configurations.\n  - No existing data in the destination will be altered",
-  "tables.destinationDeleteModalText": "Deleting a destination cannot be undone. Note that:\n  - All connections with this destination will be deleted, including their past logs and configurations.\n  - No existing data in the destination will be altered.",
+  "tables.sourceDeleteModalText": "Deleting a source cannot be undone without a full re-sync. No existing data in the destination will be altered.",
+  "tables.destinationDeleteModalText": "Deleting a destination cannot be undone. No existing data in the destination will be altered.",
+  "tables.affectedConnectionsOnDeletion": "The following {count, plural, one {connection} other {connections}} will be deleted:\n",
   "tables.connectionDeleteModalText": "Deleting a connection cannot be undone without a full re-sync. Note that:\n  - All past logs and configurations will be deleted\n  - Updates of new data will stop\n  - No existing data in the destination will be altered",
   "tables.connectionState.title": "Connection State",
   "tables.connectionState.noConnectionState": "This connection doesn‘t have a state (yet).",

airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { ConnectionConfiguration } from "core/domain/connection";
@@ -53,7 +53,23 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
     await deleteSource({ connectionsWithSource, source: currentSource });
   }, [clearFormChange, connectionsWithSource, currentSource, deleteSource, formId]);
 
-  const onDeleteClick = useDeleteModal("source", onDelete);
+  const modalAdditionalContent = useMemo<React.ReactNode>(() => {
+    if (connectionsWithSource.length === 0) {
+      return null;
+    }
+    return (
+      <p>
+        <FormattedMessage id="tables.affectedConnectionsOnDeletion" values={{ count: connectionsWithSource.length }} />
+        {connectionsWithSource.map((connection) => (
+          <>
+            - <strong>{`${connection.name}\n`}</strong>
+          </>
+        ))}
+      </p>
+    );
+  }, [connectionsWithSource]);
+
+  const onDeleteClick = useDeleteModal("source", onDelete, modalAdditionalContent);
 
   return (
     <div className={styles.content}>

airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
 
@@ -44,7 +44,26 @@ export const DestinationSettingsPage: React.FC = () => {
     });
   }, [clearFormChange, connectionsWithDestination, deleteDestination, destination, formId]);
 
-  const onDeleteClick = useDeleteModal("destination", onDelete);
+  const modalAdditionalContent = useMemo<React.ReactNode>(() => {
+    if (connectionsWithDestination.length === 0) {
+      return null;
+    }
+    return (
+      <p>
+        <FormattedMessage
+          id="tables.affectedConnectionsOnDeletion"
+          values={{ count: connectionsWithDestination.length }}
+        />
+        {connectionsWithDestination.map((connection) => (
+          <>
+            - <strong>{`${connection.name}\n`}</strong>
+          </>
+        ))}
+      </p>
+    );
+  }, [connectionsWithDestination]);
+
+  const onDeleteClick = useDeleteModal("destination", onDelete, modalAdditionalContent);
 
   return (
     <div className={styles.content}>