refactor(frontend): remove initial form values from connection form c…

…ontext (#13298) Co-authored-by: Vladimir <dizel852@gmail.com>
airbytehq · Aug 2, 2024 · f342f54 · f342f54
1 parent 7abf588
commit f342f54
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 27 deletions.
diff --git a/...yte-webapp/src/components/connection/ConnectionForm/SyncCatalogTable/SyncCatalogTable.tsx b/...yte-webapp/src/components/connection/ConnectionForm/SyncCatalogTable/SyncCatalogTable.tsx
@@ -41,7 +41,7 @@ import { TableControls } from "./components/TableControls";
 import { useInitialRowIndex } from "./hooks/useInitialRowIndex";
 import styles from "./SyncCatalogTable.module.scss";
 import { getRowChangeStatus, getSyncCatalogRows, isStreamRow } from "./utils";
-import { FormConnectionFormValues, SyncStreamFieldWithId } from "../formConfig";
+import { FormConnectionFormValues, SyncStreamFieldWithId, useInitialFormValues } from "../formConfig";
 
 export interface SyncCatalogTableProps {
   /**
@@ -93,7 +93,8 @@ export interface SyncCatalogUIModel {
 
 export const SyncCatalogTable: FC<SyncCatalogTableProps> = ({ scrollParentContainer }) => {
   const { formatMessage } = useIntl();
-  const { mode, initialValues } = useConnectionFormService();
+  const { mode, connection } = useConnectionFormService();
+  const initialValues = useInitialFormValues(connection, mode);
   const { control, trigger } = useFormContext<FormConnectionFormValues>();
   const { fields: streams, update } = useFieldArray({
     name: "syncCatalog.streams",

diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.tsx b/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.tsx
@@ -21,15 +21,20 @@ import { SchemaError } from "./SchemaError";
 import { SimplifiedConnectionConfiguration } from "./SimplifiedConnectionCreation/SimplifiedConnectionConfiguration";
 import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions";
 import { ScrollableContainer } from "../../ScrollableContainer";
-import { FormConnectionFormValues, useConnectionValidationSchema } from "../ConnectionForm/formConfig";
+import {
+  FormConnectionFormValues,
+  useConnectionValidationSchema,
+  useInitialFormValues,
+} from "../ConnectionForm/formConfig";
 
 export const CREATE_CONNECTION_FORM_ID = "create-connection-form";
 
 const CreateConnectionFormInner: React.FC = () => {
   const navigate = useNavigate();
   const { clearAllFormChanges } = useFormChangeTrackerService();
   const { mutateAsync: createConnection } = useCreateConnection();
-  const { connection, initialValues, setSubmitError } = useConnectionFormService();
+  const { connection, mode, setSubmitError } = useConnectionFormService();
+  const initialValues = useInitialFormValues(connection, mode);
   const { registerNotification } = useNotificationService();
   const { formatMessage } = useIntl();
   useExperimentContext("source-definition", connection.source?.sourceDefinitionId);

diff --git a/...mponents/connection/syncCatalog/StreamsConfigTable/useStreamsConfigTableRowProps.test.tsx b/...mponents/connection/syncCatalog/StreamsConfigTable/useStreamsConfigTableRowProps.test.tsx
@@ -1,9 +1,9 @@
 import { renderHook } from "@testing-library/react";
 
-import { FormConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
+import { FormConnectionFormValues, useInitialFormValues } from "components/connection/ConnectionForm/formConfig";
+import { mocked } from "test-utils";
 
 import { AirbyteStreamAndConfiguration } from "core/api/types/AirbyteClient";
-import * as connectionFormService from "hooks/services/ConnectionForm/ConnectionFormService";
 
 import { useStreamsConfigTableRowProps } from "./useStreamsConfigTableRowProps";
 
@@ -15,7 +15,9 @@ const mockStream: Partial<AirbyteStreamAndConfiguration> = {
   config: { selected: true, syncMode: "full_refresh", destinationSyncMode: "overwrite" },
 };
 
-const mockInitialValues: Partial<FormConnectionFormValues> = {
+const mockInitialValues: FormConnectionFormValues = {
+  name: "connection_name",
+  scheduleType: "manual",
   syncCatalog: {
     streams: [
       {
@@ -27,38 +29,42 @@ const mockInitialValues: Partial<FormConnectionFormValues> = {
       },
     ],
   },
+  namespaceDefinition: "source",
+  prefix: "",
 };
 
-const mockDisabledInitialValues: Partial<FormConnectionFormValues> = {
+const mockDisabledInitialValues: FormConnectionFormValues = {
+  ...mockInitialValues,
   syncCatalog: {
     streams: [
       {
         ...mockInitialValues.syncCatalog?.streams[0],
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        config: { ...mockInitialValues.syncCatalog!.streams[0].config!, selected: false },
+        config: { ...mockInitialValues.syncCatalog.streams[0].config!, selected: false },
       },
     ],
   },
 };
 
-const testSetup = (initialValues: Partial<FormConnectionFormValues>) => {
-  jest.spyOn(connectionFormService, "useConnectionFormService").mockImplementation(() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return { initialValues, mode: "edit" } as any;
-  });
-};
+jest.mock("components/connection/ConnectionForm/formConfig", () => ({
+  useInitialFormValues: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock("hooks/services/ConnectionForm/ConnectionFormService", () => ({
+  useConnectionFormService: () => ({ mode: "edit" }),
+}));
 
 describe(`${useStreamsConfigTableRowProps.name}`, () => {
   it("should return default styles for a row that starts enabled", () => {
-    testSetup(mockInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockInitialValues);
 
     const { result } = renderHook(() => useStreamsConfigTableRowProps(mockStream));
 
     expect(result.current.streamHeaderContentStyle).toEqual("streamHeaderContent");
     expect(result.current.pillButtonVariant).toEqual("grey");
   });
   it("should return disabled styles for a row that starts disabled", () => {
-    testSetup(mockDisabledInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockDisabledInitialValues);
 
     const { result } = renderHook(() =>
       useStreamsConfigTableRowProps({
@@ -72,15 +78,15 @@ describe(`${useStreamsConfigTableRowProps.name}`, () => {
     expect(result.current.pillButtonVariant).toEqual("grey");
   });
   it("should return added styles for a row that is added", () => {
-    testSetup(mockDisabledInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockDisabledInitialValues);
 
     const { result } = renderHook(() => useStreamsConfigTableRowProps(mockStream));
 
     expect(result.current.streamHeaderContentStyle).toEqual("streamHeaderContent added");
     expect(result.current.pillButtonVariant).toEqual("green");
   });
   it("should return removed styles for a row that is removed", () => {
-    testSetup(mockInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockInitialValues);
 
     const { result } = renderHook(() =>
       useStreamsConfigTableRowProps({
@@ -94,7 +100,7 @@ describe(`${useStreamsConfigTableRowProps.name}`, () => {
     expect(result.current.pillButtonVariant).toEqual("red");
   });
   it("should return updated styles for a row that is updated", () => {
-    testSetup(mockInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockInitialValues);
 
     const { result } = renderHook(() =>
       useStreamsConfigTableRowProps({
@@ -109,7 +115,7 @@ describe(`${useStreamsConfigTableRowProps.name}`, () => {
   });
 
   it("should return added styles for a row that is both added and updated", () => {
-    testSetup(mockDisabledInitialValues);
+    mocked(useInitialFormValues).mockReturnValueOnce(mockDisabledInitialValues);
 
     const { result } = renderHook(() =>
       useStreamsConfigTableRowProps({

diff --git a/...rc/components/connection/syncCatalog/StreamsConfigTable/useStreamsConfigTableRowProps.tsx b/...rc/components/connection/syncCatalog/StreamsConfigTable/useStreamsConfigTableRowProps.tsx
@@ -2,6 +2,7 @@
 import classNames from "classnames";
 import { useMemo } from "react";
 
+import { useInitialFormValues } from "components/connection/ConnectionForm/formConfig";
 import { PillButtonVariant } from "components/ui/PillListBox/PillButton";
 
 import { AirbyteStreamAndConfiguration, AirbyteStreamConfiguration } from "core/api/types/AirbyteClient";
@@ -14,7 +15,8 @@ import { compareObjectsByFields } from "../utils";
 export type StatusToDisplay = "disabled" | "added" | "removed" | "changed" | "unchanged";
 
 export const useStreamsConfigTableRowProps = (stream: AirbyteStreamAndConfiguration) => {
-  const { initialValues, mode } = useConnectionFormService();
+  const { connection, mode } = useConnectionFormService();
+  const initialValues = useInitialFormValues(connection, mode);
 
   const isStreamEnabled = stream.config?.selected;
 

diff --git a/airbyte-webapp/src/hooks/services/ConnectionForm/ConnectionFormService.tsx b/airbyte-webapp/src/hooks/services/ConnectionForm/ConnectionFormService.tsx
@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useContext, useState } from "react";
 import { FieldErrors } from "react-hook-form";
 import { useIntl } from "react-intl";
 
-import { FormConnectionFormValues, useInitialFormValues } from "components/connection/ConnectionForm/formConfig";
+import { FormConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
 import { ExternalLink } from "components/ui/Link";
 
 import { HttpProblem } from "core/api";
@@ -27,7 +27,6 @@ interface ConnectionServiceProps {
 interface ConnectionFormHook {
   connection: ConnectionOrPartialConnection;
   mode: ConnectionFormMode;
-  initialValues: FormConnectionFormValues;
   schemaError?: Error | null;
   refreshSchema: () => Promise<void>;
   setSubmitError: (submitError: FormError | null) => void;
@@ -41,7 +40,6 @@ const useConnectionForm = ({
   refreshSchema,
 }: ConnectionServiceProps): ConnectionFormHook => {
   const formatError = useFormatError();
-  const initialValues = useInitialFormValues(connection, mode);
   const { formatMessage } = useIntl();
   const [submitError, setSubmitError] = useState<FormError | null>(null);
 
@@ -75,7 +73,6 @@ const useConnectionForm = ({
   return {
     connection,
     mode,
-    initialValues,
     schemaError,
     refreshSchema,
     setSubmitError,

diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx
@@ -8,6 +8,7 @@ import { useUnmount } from "react-use";
 import {
   FormConnectionFormValues,
   useConnectionValidationSchema,
+  useInitialFormValues,
 } from "components/connection/ConnectionForm/formConfig";
 import { useRefreshSourceSchemaWithConfirmationOnDirty } from "components/connection/ConnectionForm/refreshSourceSchemaWithConfirmationOnDirty";
 import { SchemaChangeBackdrop } from "components/connection/ConnectionForm/SchemaChangeBackdrop";
@@ -89,7 +90,9 @@ export const ConnectionReplicationPage: React.FC = () => {
   const { openModal } = useModalService();
 
   const { connection, schemaRefreshing, updateConnection, discardRefreshedSchema } = useConnectionEditService();
-  const { initialValues, schemaError, setSubmitError, refreshSchema, mode } = useConnectionFormService();
+  const { schemaError, setSubmitError, refreshSchema, mode } = useConnectionFormService();
+  const initialValues = useInitialFormValues(connection, mode);
+
   const { supportsRefreshes: destinationSupportsRefreshes } = useDestinationDefinitionVersion(
     connection.destination.destinationId
   );