reset form changes if user decided to choose the existing source/dest…

…ination (#15517)

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

@@ -8,6 +8,7 @@ import CreateConnectionContent from "components/CreateConnectionContent";
 import HeadTitle from "components/HeadTitle";
 import StepsMenu from "components/StepsMenu";
 
+import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
 import { useGetDestination } from "hooks/services/useDestinationHook";
 import { useGetSource } from "hooks/services/useSourceHook";
 import useRouter from "hooks/useRouter";
@@ -70,6 +71,7 @@ function usePreloadData(): {
 
 export const CreationFormPage: React.FC = () => {
   const { location, push } = useRouter();
+  const { clearAllFormChanges } = useFormChangeTrackerService();
 
   // TODO: Probably there is a better way to figure it out instead of just checking third elem
   const locationType = location.pathname.split("/")[3];
@@ -93,6 +95,7 @@ export const CreationFormPage: React.FC = () => {
   const { destinationDefinition, sourceDefinition, source, destination } = usePreloadData();
 
   const onSelectExistingSource = (id: string) => {
+    clearAllFormChanges();
     push("", {
       state: {
         ...(location.state as Record<string, unknown>),
@@ -104,6 +107,7 @@ export const CreationFormPage: React.FC = () => {
   };
 
   const onSelectExistingDestination = (id: string) => {
+    clearAllFormChanges();
     push("", {
       state: {
         ...(location.state as Record<string, unknown>),