ConnectionForm now clears its own form tracking

Add hook to generate unique form id Update form tracker component to use new hook if no id is specified
airbytehq · Apr 13, 2022 · e59af21 · e59af21
1 parent c068419
commit e59af21
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 46 deletions.
diff --git a/airbyte-webapp/src/components/FormChangeTracker/FormChangeTracker.tsx b/airbyte-webapp/src/components/FormChangeTracker/FormChangeTracker.tsx
@@ -1,17 +1,15 @@
-import { useLayoutEffect, useMemo } from "react";
-import { uniqueId } from "lodash";
-import { useLocation } from "react-router-dom";
+import { useLayoutEffect } from "react";
 import { usePrevious } from "react-use";
 
-import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 
 interface Props {
   changed: boolean;
+  formId?: string;
 }
 
-const FormChangeTracker: React.FC<Props> = ({ changed }) => {
-  const location = useLocation();
-  const id = useMemo(() => `${location.pathname}__${uniqueId("form_")}`, [location.pathname]);
+const FormChangeTracker: React.FC<Props> = ({ changed, formId }) => {
+  const id = useUniqueFormId(formId);
   const prevChanged = usePrevious(changed);
 
   const { trackFormChange } = useFormChangeTrackerService();

diff --git a/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx b/airbyte-webapp/src/hooks/services/FormChangeTracker/FormChangeTrackerService.tsx
@@ -1,44 +1,11 @@
 import type { Transition } from "history";
 
 import React, { useCallback, useMemo } from "react";
-import { createGlobalState } from "react-use";
 
 import { useBlocker } from "hooks/router/useBlocker";
 
 import { useConfirmationModalService } from "../ConfirmationModal";
-import { FormChangeTrackerServiceApi } from "./types";
-
-const useChangedFormsById = createGlobalState<Record<string, boolean>>({});
-
-export const useFormChangeTrackerService = (): FormChangeTrackerServiceApi => {
-  const [changedFormsById, setChangedFormsById] = useChangedFormsById();
-
-  const clearAllFormChanges = useCallback(() => {
-    setChangedFormsById({});
-  }, [setChangedFormsById]);
-
-  const clearFormChange = useCallback(
-    (id: string) => {
-      setChangedFormsById({ ...changedFormsById, [id]: false });
-    },
-    [changedFormsById, setChangedFormsById]
-  );
-
-  const trackFormChange = useCallback(
-    (id: string, changed: boolean) => {
-      if (!!changedFormsById?.[id] !== changed) {
-        setChangedFormsById({ ...changedFormsById, [id]: changed });
-      }
-    },
-    [changedFormsById, setChangedFormsById]
-  );
-
-  return {
-    trackFormChange,
-    clearFormChange,
-    clearAllFormChanges,
-  };
-};
+import { useChangedFormsById } from "./hooks";
 
 export const FormChangeTrackerService: React.FC = ({ children }) => {
   const [changedFormsById, setChangedFormsById] = useChangedFormsById();

diff --git a/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts b/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts
@@ -0,0 +1,46 @@
+import { useCallback, useMemo } from "react";
+import { createGlobalState } from "react-use";
+import { useLocation } from "react-router-dom";
+import { uniqueId } from "lodash";
+
+import { FormChangeTrackerServiceApi } from "./types";
+
+export const useChangedFormsById = createGlobalState<Record<string, boolean>>({});
+
+export const useUniqueFormId = (formId?: string) => {
+  const location = useLocation();
+  return useMemo(
+    () => formId ?? `${location.pathname.toLowerCase().replace(/\//gi, "_")}__${uniqueId("form_")}`,
+    [formId, location.pathname]
+  );
+};
+
+export const useFormChangeTrackerService = (): FormChangeTrackerServiceApi => {
+  const [changedFormsById, setChangedFormsById] = useChangedFormsById();
+
+  const clearAllFormChanges = useCallback(() => {
+    setChangedFormsById({});
+  }, [setChangedFormsById]);
+
+  const clearFormChange = useCallback(
+    (id: string) => {
+      setChangedFormsById({ ...changedFormsById, [id]: false });
+    },
+    [changedFormsById, setChangedFormsById]
+  );
+
+  const trackFormChange = useCallback(
+    (id: string, changed: boolean) => {
+      if (!!changedFormsById?.[id] !== changed) {
+        setChangedFormsById({ ...changedFormsById, [id]: changed });
+      }
+    },
+    [changedFormsById, setChangedFormsById]
+  );
+
+  return {
+    trackFormChange,
+    clearFormChange,
+    clearAllFormChanges,
+  };
+};
diff --git a/airbyte-webapp/src/hooks/services/FormChangeTracker/index.ts b/airbyte-webapp/src/hooks/services/FormChangeTracker/index.ts
@@ -1 +1,2 @@
 export * from "./FormChangeTrackerService";
+export * from "./hooks";
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -13,7 +13,7 @@ import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
 import { Connection, ConnectionNamespaceDefinition, ScheduleProperties } from "core/domain/connection";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
-import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 
 import { NamespaceDefinitionField } from "./components/NamespaceDefinitionField";
 import CreateControls from "./components/CreateControls";
@@ -115,7 +115,8 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
   connection,
 }) => {
   const destDefinition = useGetDestinationDefinitionSpecification(connection.destination.destinationDefinitionId);
-  const { clearAllFormChanges } = useFormChangeTrackerService();
+  const { clearFormChange } = useFormChangeTrackerService();
+  const formId = useUniqueFormId();
 
   const [modalIsOpen, setResetModalIsOpen] = useState(false);
   const [submitError, setSubmitError] = useState<Error | null>(null);
@@ -138,7 +139,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
         const result = await onSubmit(formValues);
 
         formikHelpers.resetForm({ values });
-        clearAllFormChanges();
+        clearFormChange(formId);
 
         const requiresReset = isEditMode && !equal(initialValues.syncCatalog, values.syncCatalog) && !editSchemeMode;
         if (requiresReset) {
@@ -154,10 +155,11 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
       connection.operations,
       workspace.workspaceId,
       onSubmit,
+      clearFormChange,
+      formId,
       isEditMode,
       initialValues.syncCatalog,
       editSchemeMode,
-      clearAllFormChanges,
     ]
   );
 
@@ -173,7 +175,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
     >
       {({ isSubmitting, setFieldValue, isValid, dirty, resetForm, values }) => (
         <FormContainer className={className}>
-          <FormChangeTracker changed={dirty} />
+          <FormChangeTracker changed={dirty} formId={formId} />
           <Section title={<FormattedMessage id="connection.transfer" />}>
             <Field name="schedule">
               {({ field, meta }: FieldProps<ScheduleProperties>) => (