Connection Form Refactor - Connection Form Service

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -1,28 +1,28 @@
 import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { Suspense, useMemo } from "react";
+import React, { Suspense, useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 
 import { Button, Card } from "components";
-import { IDataItem } from "components/base/DropDown/components/Option";
 import { JobItem } from "components/JobItem/JobItem";
 import LoadingSchema from "components/LoadingSchema";
 
-import { Action, Namespace } from "core/analytics";
 import { LogsRequestError } from "core/request/LogsRequestError";
-import { useAnalyticsService } from "hooks/services/Analytics";
+import { ConnectionFormServiceProvider } from "hooks/services/Connection/ConnectionFormService";
+import { useChangedFormsById, useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
-import { ConnectionForm, ConnectionFormProps } from "views/Connection/ConnectionForm";
+import { ConnectionForm } from "views/Connection/ConnectionForm";
 
-import { DestinationRead, SourceRead, WebBackendConnectionRead } from "../../core/request/AirbyteClient";
+import { DestinationRead, SourceRead } from "../../core/request/AirbyteClient";
 import { useDiscoverSchema } from "../../hooks/services/useSourceHook";
 import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
 import styles from "./CreateConnectionContent.module.scss";
 
 interface CreateConnectionContentProps {
   source: SourceRead;
   destination: DestinationRead;
-  afterSubmitConnection?: (connection: WebBackendConnectionRead) => void;
+  afterSubmitConnection?: () => void;
 }
 
 const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
@@ -31,61 +31,51 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   afterSubmitConnection,
 }) => {
   const { mutateAsync: createConnection } = useCreateConnection();
-  const analyticsService = useAnalyticsService();
+  const navigate = useNavigate();
+
+  const formId = useUniqueFormId();
+  const { clearFormChange } = useFormChangeTrackerService();
+  const [changedFormsById] = useChangedFormsById();
+  const formDirty = useMemo(() => !!changedFormsById?.[formId], [changedFormsById, formId]);
 
   const { schema, isLoading, schemaErrorStatus, catalogId, onDiscoverSchema } = useDiscoverSchema(
     source.sourceId,
     true
   );
 
-  const connection = useMemo<ConnectionFormProps["connection"]>(
-    () => ({
-      syncCatalog: schema,
-      destination,
-      source,
-      catalogId,
-    }),
-    [schema, destination, source, catalogId]
-  );
-
-  const onSubmitConnectionStep = async (values: ValuesProps) => {
-    const connection = await createConnection({
-      values,
-      source,
-      destination,
-      sourceDefinition: {
-        sourceDefinitionId: source?.sourceDefinitionId ?? "",
-      },
-      destinationDefinition: {
-        name: destination?.name ?? "",
-        destinationDefinitionId: destination?.destinationDefinitionId ?? "",
-      },
-      sourceCatalogId: catalogId,
-    });
-
-    return {
-      onSubmitComplete: () => {
-        afterSubmitConnection?.(connection);
-      },
-    };
+  const connection = {
+    syncCatalog: schema,
+    destination,
+    source,
+    catalogId,
   };
 
-  const onSelectFrequency = (item: IDataItem | null) => {
-    const enabledStreams = connection.syncCatalog.streams.filter((stream) => stream.config?.selected).length;
-
-    if (item) {
-      analyticsService.track(Namespace.CONNECTION, Action.FREQUENCY, {
-        actionDescription: "Frequency selected",
-        frequency: item.label,
-        connector_source_definition: source?.sourceName,
-        connector_source_definition_id: source?.sourceDefinitionId,
-        connector_destination_definition: destination?.destinationName,
-        connector_destination_definition_id: destination?.destinationDefinitionId,
-        available_streams: connection.syncCatalog.streams.length,
-        enabled_streams: enabledStreams,
+  const onSubmitConnectionStep = useCallback(
+    async (values: ValuesProps) => {
+      const createdConnection = await createConnection({
+        values,
+        source,
+        destination,
+        sourceDefinition: {
+          sourceDefinitionId: source?.sourceDefinitionId ?? "",
+        },
+        destinationDefinition: {
+          name: destination?.name ?? "",
+          destinationDefinitionId: destination?.destinationDefinitionId ?? "",
+        },
+        sourceCatalogId: catalogId,
       });
-    }
-  };
+
+      // We only want to go to the new connection if we _do not_ have an after submit action.
+      if (!afterSubmitConnection) {
+        // We have to clear the form change to prevent the dirty-form tracking modal from appearing.
+        clearFormChange(formId);
+        // This is the "default behavior", go to the created connection.
+        navigate(`../../connections/${createdConnection.connectionId}`);
+      }
+    },
+    [afterSubmitConnection, catalogId, clearFormChange, createConnection, destination, formId, navigate, source]
+  );
 
   if (schemaErrorStatus) {
     const job = LogsRequestError.extractJobInfo(schemaErrorStatus);
@@ -102,18 +92,23 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   ) : (
     <Suspense fallback={<LoadingSchema />}>
       <div className={styles.connectionFormContainer}>
-        <ConnectionForm
-          mode="create"
+        <ConnectionFormServiceProvider
           connection={connection}
-          onDropDownSelect={onSelectFrequency}
+          mode="create"
+          formId={formId}
           onSubmit={onSubmitConnectionStep}
-          additionalSchemaControl={
-            <Button onClick={onDiscoverSchema} type="button">
-              <FontAwesomeIcon className={styles.tryArrowIcon} icon={faRedoAlt} />
-              <FormattedMessage id="connection.refreshSchema" />
-            </Button>
-          }
-        />
+          onAfterSubmit={afterSubmitConnection}
+          formDirty={formDirty}
+        >
+          <ConnectionForm
+            additionalSchemaControl={
+              <Button onClick={onDiscoverSchema} type="button">
+                <FontAwesomeIcon className={styles.tryArrowIcon} icon={faRedoAlt} />
+                <FormattedMessage id="connection.refreshSchema" />
+              </Button>
+            }
+          />
+        </ConnectionFormServiceProvider>
       </div>
     </Suspense>
   );

airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx

@@ -19,7 +19,6 @@ const AgainButton = styled(Button)`
 interface TryAfterErrorBlockProps {
   message?: React.ReactNode;
   onClick: () => void;
-  additionControl?: React.ReactNode;
 }
 
 const TryAfterErrorBlock: React.FC<TryAfterErrorBlockProps> = ({ message, onClick }) => (

airbyte-webapp/src/hooks/services/Connection/ConnectionFormService.test.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { act } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import mockConnection from "test-utils/mock-data/mockConnection.json";
+import mockDest from "test-utils/mock-data/mockDestinationDefinition.json";
+import mockWorkspace from "test-utils/mock-data/mockWorkspace.json";
+import { TestWrapper } from "test-utils/testutils";
+
+import { WebBackendConnectionRead } from "core/request/AirbyteClient";
+
+import { ModalCancel } from "../Modal";
+import {
+  ConnectionFormServiceProvider,
+  ConnectionServiceProps,
+  useConnectionFormService,
+} from "./ConnectionFormService";
+
+["packages/cloud/services/workspaces/WorkspacesService", "services/workspaces/WorkspacesService"].forEach((s) =>
+  jest.mock(s, () => ({
+    useCurrentWorkspaceId: () => mockWorkspace.workspaceId,
+    useCurrentWorkspace: () => mockWorkspace,
+  }))
+);
+
+jest.mock("../FormChangeTracker", () => ({
+  useFormChangeTrackerService: () => ({ clearFormChange: () => null }),
+  useUniqueFormId: () => "blah",
+}));
+jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
+  useGetDestinationDefinitionSpecification: () => mockDest,
+}));
+
+describe("ConnectionFormService", () => {
+  const Wrapper: React.FC<ConnectionServiceProps> = ({ children, ...props }) => (
+    <TestWrapper>
+      <MemoryRouter>
+        <ConnectionFormServiceProvider {...props}>{children}</ConnectionFormServiceProvider>
+      </MemoryRouter>
+    </TestWrapper>
+  );
+
+  const onSubmit = jest.fn();
+  const onAfterSubmit = jest.fn();
+  const onCancel = jest.fn();
+
+  beforeEach(() => {
+    onSubmit.mockReset();
+    onAfterSubmit.mockReset();
+    onCancel.mockReset();
+  });
+
+  it("should call onSubmit when submitted", async () => {
+    const { result } = renderHook(useConnectionFormService, {
+      wrapper: Wrapper,
+      initialProps: {
+        connection: mockConnection as WebBackendConnectionRead,
+        mode: "create",
+        formId: Math.random().toString(),
+        onSubmit,
+        onAfterSubmit,
+        onCancel,
+      },
+    });
+
+    const resetForm = jest.fn();
+    const testValues: any = {};
+    await act(async () => {
+      await result.current.onFormSubmit(testValues, { resetForm } as any);
+    });
+
+    expect(resetForm).toBeCalledWith({ values: testValues });
+    expect(onSubmit).toBeCalledWith({
+      operations: [],
+      scheduleData: {
+        basicSchedule: {
+          timeUnit: undefined,
+          units: undefined,
+        },
+      },
+      scheduleType: "manual",
+      syncCatalog: {
+        streams: undefined,
+      },
+    });
+    expect(onAfterSubmit).toBeCalledWith();
+  });
+
+  it("should catch if onSubmit throws and generate an error message", async () => {
+    const errorMessage = "asdf";
+    onSubmit.mockImplementation(async () => {
+      throw new Error(errorMessage);
+    });
+
+    const { result } = renderHook(useConnectionFormService, {
+      wrapper: Wrapper,
+      initialProps: {
+        connection: mockConnection as WebBackendConnectionRead,
+        mode: "create",
+        formId: Math.random().toString(),
+        onSubmit,
+        onAfterSubmit,
+        onCancel,
+      },
+    });
+
+    const resetForm = jest.fn();
+    const testValues: any = {};
+    await act(async () => {
+      await result.current.onFormSubmit(testValues, { resetForm } as any);
+    });
+
+    expect(result.current.errorMessage).toBe(errorMessage);
+    expect(resetForm).not.toHaveBeenCalled();
+  });
+
+  it("should catch if onSubmit throws but not generate an error if it's a ModalCancel error", async () => {
+    onSubmit.mockImplementation(async () => {
+      throw new ModalCancel();
+    });
+
+    const { result } = renderHook(useConnectionFormService, {
+      wrapper: Wrapper,
+      initialProps: {
+        connection: mockConnection as WebBackendConnectionRead,
+        mode: "create",
+        formId: Math.random().toString(),
+        onSubmit,
+        onAfterSubmit,
+        onCancel,
+      },
+    });
+
+    const resetForm = jest.fn();
+    const testValues: any = {};
+    await act(async () => {
+      await result.current.onFormSubmit(testValues, { resetForm } as any);
+    });
+
+    expect(result.current.errorMessage).toBe(null);
+    expect(resetForm).not.toHaveBeenCalled();
+  });
+});