🪟🎨 Clean up connector form form controls (#21698)

* refactor

* review comments

* do not pass changes to retest source

* reorder imports

Author: Joe Reuter

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

@@ -1,12 +1,11 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useNavigate } from "react-router-dom";
 
 import { H5 } from "components/base/Titles";
 import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 
-import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
+import { useDeleteModal } from "hooks/useDeleteModal";
 
 import styles from "./DeleteBlock.module.scss";
 
@@ -16,22 +15,7 @@ interface IProps {
 }
 
 export const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
-  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
-  const navigate = useNavigate();
-
-  const onDeleteButtonClick = useCallback(() => {
-    openConfirmationModal({
-      text: `tables.${type}DeleteModalText`,
-      title: `tables.${type}DeleteConfirm`,
-      submitButtonText: "form.delete",
-      onSubmit: async () => {
-        await onDelete();
-        closeConfirmationModal();
-        navigate("../..");
-      },
-      submitButtonDataId: "delete",
-    });
-  }, [closeConfirmationModal, onDelete, openConfirmationModal, navigate, type]);
+  const onDeleteButtonClick = useDeleteModal(type, onDelete);
 
   return (
     <Card className={styles.deleteBlock}>

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx

@@ -1,11 +1,12 @@
 import { faClose, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMemo } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { useLocalStorage } from "react-use";
 
 import { Button } from "components/ui/Button";
 import { Callout } from "components/ui/Callout";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Modal, ModalBody } from "components/ui/Modal";
 import { NumberBadge } from "components/ui/NumberBadge";
 import { Tooltip } from "components/ui/Tooltip";
@@ -27,7 +28,6 @@ interface ConfigMenuProps {
 }
 
 export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, testInputJsonErrors, isOpen, setIsOpen }) => {
-  const { formatMessage } = useIntl();
   const { jsonManifest, editorView, setEditorView } = useConnectorBuilderFormState();
 
   const { testInputJson, setTestInputJson } = useConnectorBuilderTestState();
@@ -112,20 +112,36 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, testInputJson
                 <ConnectorForm
                   formType="source"
                   bodyClassName={styles.formContent}
-                  footerClassName={styles.inputFormModalFooter}
                   selectedConnectorDefinitionSpecification={connectorDefinitionSpecification}
                   formValues={{ connectionConfiguration: testInputJson }}
                   onSubmit={async (values) => {
                     setTestInputJson(values.connectionConfiguration as StreamReadRequestBodyConfig);
                     setIsOpen(false);
                   }}
-                  onCancel={() => {
-                    setIsOpen(false);
-                  }}
-                  onReset={() => {
-                    setTestInputJson({});
-                  }}
-                  submitLabel={formatMessage({ id: "connectorBuilder.saveInputsForm" })}
+                  renderFooter={({ dirty, isSubmitting, resetConnectorForm }) => (
+                    <div className={styles.inputFormModalFooter}>
+                      <FlexContainer>
+                        <FlexItem grow>
+                          <Button
+                            onClick={() => {
+                              resetConnectorForm();
+                              setTestInputJson({});
+                            }}
+                            type="button"
+                            variant="danger"
+                          >
+                            <FormattedMessage id="form.reset" />
+                          </Button>
+                        </FlexItem>
+                        <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
+                          <FormattedMessage id="form.cancel" />
+                        </Button>
+                        <Button type="submit" disabled={isSubmitting || !dirty}>
+                          <FormattedMessage id="connectorBuilder.saveInputsForm" />
+                        </Button>
+                      </FlexContainer>
+                    </div>
+                  )}
                 />
               </>
             </ConfigMenuErrorBoundaryComponent>

airbyte-webapp/src/hooks/useDeleteModal.tsx

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

airbyte-webapp/src/locales/en.json

@@ -62,9 +62,12 @@
   "form.saveChanges": "Save changes",
   "form.openDatepicker": "Open datepicker",
   "form.datepickerTimeCaption": "Time (UTC)",
-  "form.saveChangesAndTest": "Save changes and test",
-  "form.sourceRetest": "Retest source",
-  "form.destinationRetest": "Retest destination",
+  "form.saveChangesAndTest": "Test and save",
+  "form.sourceRetest": "Retest saved source",
+  "form.destinationRetest": "Retest saved destination",
+  "form.test": "Test",
+  "form.sourceRetestTitle": "Test the source",
+  "form.destinationRetestTitle": "Test the destination",
   "form.discardChanges": "Discard changes",
   "form.discardChangesConfirmation": "There are unsaved changes. Are you sure you want to discard your changes?",
   "form.every.minutes": "Every {value, plural, one {minute} other {# minutes}}",

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

@@ -1,13 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { DeleteBlock } from "components/common/DeleteBlock";
-
 import { ConnectionConfiguration } from "core/domain/connection";
 import { SourceRead, WebBackendConnectionListItem } from "core/request/AirbyteClient";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useDeleteSource, useUpdateSource } from "hooks/services/useSourceHook";
+import { useDeleteModal } from "hooks/useDeleteModal";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 import { useGetSourceDefinitionSpecification } from "services/connector/SourceDefinitionSpecificationService";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
@@ -49,10 +48,12 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
     });
   };
 
-  const onDelete = async () => {
+  const onDelete = useCallback(async () => {
     clearFormChange(formId);
     await deleteSource({ connectionsWithSource, source: currentSource });
-  };
+  }, [clearFormChange, connectionsWithSource, currentSource, deleteSource, formId]);
+
+  const onDeleteClick = useDeleteModal("source", onDelete);
 
   return (
     <div className={styles.content}>
@@ -66,8 +67,8 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
         selectedConnectorDefinitionId={sourceDefinitionSpecification.sourceDefinitionId}
         connector={currentSource}
         onSubmit={onSubmit}
+        onDeleteClick={onDeleteClick}
       />
-      <DeleteBlock type="source" onDelete={onDelete} />
     </div>
   );
 };

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

@@ -1,14 +1,14 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
 
-import { DeleteBlock } from "components/common/DeleteBlock";
 import { StepsTypes } from "components/ConnectorBlocks";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useConnectionList } from "hooks/services/useConnectionHook";
 import { useDeleteDestination, useGetDestination, useUpdateDestination } from "hooks/services/useDestinationHook";
+import { useDeleteModal } from "hooks/useDeleteModal";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
@@ -36,13 +36,15 @@ export const DestinationSettingsPage: React.FC = () => {
     });
   };
 
-  const onDelete = async () => {
+  const onDelete = useCallback(async () => {
     clearFormChange(formId);
     await deleteDestination({
       connectionsWithDestination,
       destination,
     });
-  };
+  }, [clearFormChange, connectionsWithDestination, deleteDestination, destination, formId]);
+
+  const onDeleteClick = useDeleteModal("destination", onDelete);
 
   return (
     <div className={styles.content}>
@@ -56,8 +58,8 @@ export const DestinationSettingsPage: React.FC = () => {
         selectedConnectorDefinitionId={destinationSpecification.destinationDefinitionId}
         connector={destination}
         onSubmit={onSubmitForm}
+        onDeleteClick={onDeleteClick}
       />
-      <DeleteBlock type="destination" onDelete={onDelete} />
     </div>
   );
 };

airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss

@@ -1,9 +1,5 @@
 @use "scss/variables";
 
-.cardForm {
-  padding: 22px 27px 23px 24px;
-}
-
 .connectorSelectControl {
   margin-bottom: variables.$spacing-xl;
 }
@@ -19,7 +15,3 @@
   margin-top: variables.$spacing-md;
   margin-left: variables.$spacing-lg;
 }
-
-.connectionTestLogs {
-  margin-top: variables.$spacing-lg;
-}