FormNavigationBlocker -> FormChangesTracker

useFormNavigationBlocking -> useDiscardFormChangesConfirmation
Update exports from default to module

airbyte-webapp/src/App.tsx

@@ -9,7 +9,7 @@ import { FeatureService } from "hooks/services/Feature";
 import { ServicesProvider } from "core/servicesProvider";
 import { ApiServices } from "core/ApiServices";
 import { StoreProvider } from "views/common/StoreProvider";
-import ConfirmationModalServiceProvider from "hooks/services/ConfirmationModal";
+import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 
 import en from "./locales/en.json";
 import GlobalStyle from "./global-styles";
@@ -54,9 +54,9 @@ const Services: React.FC = ({ children }) => (
       <WorkspaceServiceProvider>
         <FeatureService>
           <NotificationService>
-            <ConfirmationModalServiceProvider>
+            <ConfirmationModalService>
               <ApiServices>{children}</ApiServices>
-            </ConfirmationModalServiceProvider>
+            </ConfirmationModalService>
           </NotificationService>
         </FeatureService>
       </WorkspaceServiceProvider>

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

@@ -31,7 +31,7 @@ interface Props {
   onSubmit: () => void;
 }
 
-const ConfirmationModal: React.FC<Props> = ({ onClose, title, text, onSubmit, submitButtonText }) => (
+export const ConfirmationModal: React.FC<Props> = ({ onClose, title, text, onSubmit, submitButtonText }) => (
   <Modal onClose={onClose} title={title}>
     <Content>
       {text}
@@ -46,5 +46,3 @@ const ConfirmationModal: React.FC<Props> = ({ onClose, title, text, onSubmit, su
     </Content>
   </Modal>
 );
-
-export default ConfirmationModal;

airbyte-webapp/src/components/ConfirmationModal/index.ts

@@ -1,4 +1 @@
-import ConfirmationModal from "./ConfirmationModal";
-
-export default ConfirmationModal;
-export { ConfirmationModal };
+export { ConfirmationModal } from "./ConfirmationModal";

airbyte-webapp/src/components/FormChangesTracker/index.tsx

@@ -0,0 +1,25 @@
+import { useLayoutEffect, useMemo } from "react";
+import { uniqueId } from "lodash";
+import { useLocation } from "react-router-dom";
+
+import { useChangedFormsById } from "hooks/useDiscardFormChangesConfirmation";
+
+interface Props {
+  changed: boolean;
+}
+
+const FormChangesTracker: React.FC<Props> = ({ changed }) => {
+  const location = useLocation();
+  const [changedFormsById, setChangedFormsById] = useChangedFormsById();
+  const id = useMemo(() => `${location.pathname}__${uniqueId("form_")}`, [location.pathname]);
+
+  useLayoutEffect(() => {
+    if (!!changedFormsById?.[id] !== changed) {
+      setChangedFormsById({ ...changedFormsById, [id]: changed });
+    }
+  }, [id, changed, setChangedFormsById, changedFormsById]);
+
+  return null;
+};
+
+export default FormChangesTracker;

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

@@ -1,22 +1,22 @@
 import React, { useContext, useEffect, useMemo } from "react";
 
-import ConfirmationModalComponent from "components/ConfirmationModal";
+import { ConfirmationModal } from "components/ConfirmationModal";
 
 import useTypesafeReducer from "hooks/useTypesafeReducer";
 
-import { ConfirmationModal, ConfirmationModalServiceApi, ConfirmationModalState } from "./types";
+import { ConfirmationModalOptions, ConfirmationModalServiceApi, ConfirmationModalState } from "./types";
 import { actions, initialState, confirmationModalServiceReducer } from "./reducer";
 
-const confirmationModalServiceContext = React.createContext<ConfirmationModalServiceApi | undefined>(undefined);
+const ConfirmationModalServiceContext = React.createContext<ConfirmationModalServiceApi | undefined>(undefined);
 
 export const useConfirmationModalService: (
-  confirmationModal?: ConfirmationModal,
+  confirmationModal?: ConfirmationModalOptions,
   dependencies?: []
 ) => {
-  openConfirmationModal: (confirmationModal: ConfirmationModal) => void;
+  openConfirmationModal: (confirmationModal: ConfirmationModalOptions) => void;
   closeConfirmationModal: () => void;
 } = (confirmationModal, dependencies) => {
-  const confirmationModalService = useContext(confirmationModalServiceContext);
+  const confirmationModalService = useContext(ConfirmationModalServiceContext);
   if (!confirmationModalService) {
     throw new Error("useConfirmationModalService must be used within a ConfirmationModalService.");
   }
@@ -39,7 +39,7 @@ export const useConfirmationModalService: (
   };
 };
 
-const ConfirmationModalService = ({ children }: { children: React.ReactNode }) => {
+export const ConfirmationModalService = React.memo(({ children }: { children: React.ReactNode }) => {
   const [state, { openConfirmationModal, closeConfirmationModal }] = useTypesafeReducer<
     ConfirmationModalState,
     typeof actions
@@ -55,11 +55,11 @@ const ConfirmationModalService = ({ children }: { children: React.ReactNode }) =
 
   return (
     <>
-      <confirmationModalServiceContext.Provider value={confirmationModalService}>
+      <ConfirmationModalServiceContext.Provider value={confirmationModalService}>
         {children}
-      </confirmationModalServiceContext.Provider>
+      </ConfirmationModalServiceContext.Provider>
       {state.isOpen && state.confirmationModal ? (
-        <ConfirmationModalComponent
+        <ConfirmationModal
           onClose={closeConfirmationModal}
           title={state.confirmationModal.title}
           text={state.confirmationModal.text}
@@ -69,6 +69,4 @@ const ConfirmationModalService = ({ children }: { children: React.ReactNode }) =
       ) : null}
     </>
   );
-};
-
-export default React.memo(ConfirmationModalService);
+});

airbyte-webapp/src/hooks/services/ConfirmationModal/index.ts

@@ -1,4 +1 @@
-import ConfirmationModalService from "./ConfirmationModalService";
-
-export default ConfirmationModalService;
-export { ConfirmationModalService };
+export * from "./ConfirmationModalService";

airbyte-webapp/src/hooks/services/ConfirmationModal/reducer.ts

@@ -1,9 +1,9 @@
 import { ActionType, createAction, createReducer } from "typesafe-actions";
 
-import { ConfirmationModal, ConfirmationModalState } from "./types";
+import { ConfirmationModalOptions, ConfirmationModalState } from "./types";
 
 export const actions = {
-  openConfirmationModal: createAction("OPEN_CONFIRMATION_MODAL")<ConfirmationModal>(),
+  openConfirmationModal: createAction("OPEN_CONFIRMATION_MODAL")<ConfirmationModalOptions>(),
   closeConfirmationModal: createAction("CLOSE_CONFIRMATION_MODAL")(),
 };
 

airbyte-webapp/src/hooks/services/ConfirmationModal/types.ts

@@ -1,18 +1,18 @@
 import React from "react";
 
-export interface ConfirmationModal {
+export interface ConfirmationModalOptions {
   submitButtonText: React.ReactNode;
   title: React.ReactNode;
   text: React.ReactNode;
   onSubmit: () => Promise<void>;
 }
 
 export interface ConfirmationModalServiceApi {
-  openConfirmationModal: (confirmationModal: ConfirmationModal) => void;
+  openConfirmationModal: (confirmationModal: ConfirmationModalOptions) => void;
   closeConfirmationModal: () => void;
 }
 
 export interface ConfirmationModalState {
   isOpen: boolean;
-  confirmationModal: ConfirmationModal | null;
+  confirmationModal: ConfirmationModalOptions | null;
 }

airbyte-webapp/src/hooks/useFormNavigationBlocking.tsx → airbyte-webapp/src/hooks/useDiscardFormChangesConfirmation.tsx

@@ -4,39 +4,39 @@ import { useCallback, useMemo } from "react";
 import { createGlobalState } from "react-use";
 
 import { useBlocker } from "./router/useBlocker";
-import { useConfirmationModalService } from "./services/ConfirmationModal/ConfirmationModalService";
-import { ConfirmationModal } from "./services/ConfirmationModal/types";
+import { useConfirmationModalService } from "./services/ConfirmationModal";
+import { ConfirmationModalOptions } from "./services/ConfirmationModal/types";
 
-export const useBlockingFormsById = createGlobalState<Record<string, boolean>>({});
+export const useChangedFormsById = createGlobalState<Record<string, boolean>>({});
 
-const useFormNavigationBlocking = () => {
-  const [blockingFormsById, setBlockingFormsById] = useBlockingFormsById();
+const useDiscardFormChangesConfirmation = () => {
+  const [changedFormsById, setChangedFormsById] = useChangedFormsById();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
 
   const blocker = useCallback(
     (tx: Transition) => {
-      const modalData: ConfirmationModal = {
+      const modalData: ConfirmationModalOptions = {
         title: "Discard changes",
         text: "There are unsaved changes. Are you sure you want to discard your changes?",
         submitButtonText: "Discard changes",
         onSubmit: async () => {
-          setBlockingFormsById({});
+          setChangedFormsById({});
           closeConfirmationModal();
           tx.retry();
         },
       };
 
       openConfirmationModal(modalData);
     },
-    [closeConfirmationModal, openConfirmationModal, setBlockingFormsById]
+    [closeConfirmationModal, openConfirmationModal, setChangedFormsById]
   );
 
-  const isFormBlocking = useMemo(
-    () => Object.values(blockingFormsById ?? {}).reduce((acc, value) => acc || value, false),
-    [blockingFormsById]
+  const formsChanged = useMemo(
+    () => Object.values(changedFormsById ?? {}).reduce((acc, value) => acc || value, false),
+    [changedFormsById]
   );
 
-  useBlocker(blocker, isFormBlocking);
+  useBlocker(blocker, formsChanged);
 };
 
-export default useFormNavigationBlocking;
+export default useDiscardFormChangesConfirmation;

airbyte-webapp/src/packages/cloud/App.tsx

@@ -16,7 +16,7 @@ import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { FeatureService } from "hooks/services/Feature";
 import { AuthenticationProvider } from "packages/cloud/services/auth/AuthService";
 import { StoreProvider } from "views/common/StoreProvider";
-import ConfirmationModalServiceProvider from "hooks/services/ConfirmationModal";
+import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 
 import { AppServicesProvider } from "./services/AppServicesProvider";
 import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvider";
@@ -47,15 +47,15 @@ const Services: React.FC = ({ children }) => (
   <AnalyticsProvider>
     <ApiErrorBoundary>
       <NotificationServiceProvider>
-        <ConfirmationModalServiceProvider>
+        <ConfirmationModalService>
           <FeatureService>
             <AppServicesProvider>
               <AuthenticationProvider>
                 <IntercomProvider>{children}</IntercomProvider>
               </AuthenticationProvider>
             </AppServicesProvider>
           </FeatureService>
-        </ConfirmationModalServiceProvider>
+        </ConfirmationModalService>
       </NotificationServiceProvider>
     </ApiErrorBoundary>
   </AnalyticsProvider>

airbyte-webapp/src/pages/routes.tsx

@@ -3,7 +3,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { useEffectOnce } from "react-use";
 
-import useFormNavigationBlocking from "hooks/useFormNavigationBlocking";
+import useDiscardFormChangesConfirmation from "hooks/useDiscardFormChangesConfirmation";
 import { useConfig } from "config";
 import MainView from "views/layout/MainView";
 import { CompleteOauthRequest } from "views/CompleteOauthRequest";
@@ -54,7 +54,7 @@ const useAddAnalyticsContextForWorkspace = (workspace: Workspace): void => {
 };
 
 const MainViewRoutes: React.FC<{ workspace: Workspace }> = ({ workspace }) => {
-  useFormNavigationBlocking();
+  useDiscardFormChangesConfirmation();
 
   return (
     <MainView>

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx

@@ -6,7 +6,7 @@ import { Field, FieldProps, Form, Formik } from "formik";
 import { ControlLabels, DropDown, DropDownRow, H5, Input, Label } from "components";
 import ResetDataModal from "components/ResetDataModal";
 import { ModalTypes } from "components/ResetDataModal/types";
-import FormNavigationBlocker from "components/FormNavigationBlocker";
+import FormChangesTracker from "components/FormChangesTracker";
 
 import { equal } from "utils/objects";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
@@ -154,7 +154,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
     >
       {({ isSubmitting, setFieldValue, isValid, dirty, resetForm, values }) => (
         <FormContainer className={className}>
-          <FormNavigationBlocker block={dirty} />
+          <FormChangesTracker changed={dirty} />
           <Section title={<FormattedMessage id="connection.transfer" />}>
             <Field name="schedule">
               {({ field, meta }: FieldProps<ScheduleProperties>) => (

airbyte-webapp/src/views/Connection/FormCard.tsx

@@ -4,7 +4,7 @@ import { useMutation } from "react-query";
 import { useIntl } from "react-intl";
 import styled from "styled-components";
 
-import FormNavigationBlocker from "components/FormNavigationBlocker";
+import FormChangesTracker from "components/FormChangesTracker";
 
 import EditControls from "views/Connection/ConnectionForm/components/EditControls";
 import { CollapsibleCardProps, CollapsibleCard } from "views/Connection/CollapsibleCard";
@@ -34,7 +34,7 @@ export const FormCard: React.FC<
       {({ resetForm, isSubmitting, dirty, isValid }) => (
         <CollapsibleCard {...props}>
           <FormContainer>
-            <FormNavigationBlocker block={dirty} />
+            <FormChangesTracker changed={dirty} />
             {children}
             <div>
               <EditControls

airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx

@@ -7,7 +7,7 @@ import * as yup from "yup";
 import { getIn, useFormik, useFormikContext } from "formik";
 
 import { Button, ControlLabels, DropDown, Input } from "components";
-import FormNavigationBlocker from "components/FormNavigationBlocker";
+import FormChangesTracker from "components/FormChangesTracker";
 
 import { equal } from "utils/objects";
 import { Transformation } from "core/domain/connection/operation";
@@ -100,7 +100,7 @@ const TransformationForm: React.FC<TransformationProps> = ({
 
   return (
     <>
-      <FormNavigationBlocker block={isNewTransformation || dirty} />
+      <FormChangesTracker changed={isNewTransformation || dirty} />
       <Content>
         <Column>
           <Label