🪟 🐛 Fix validation when setting the connection stream cursor or primary key (#18933)

* Update sorted streams memo to make a copy of the stream before sorting
Move changedStreams from CatalogTreeBody to CatalogTree so that the order of the changedStreams is based on the correct order

* Remove sorting when saving changes. It's no longer needed.

Author: edmundito

airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx

@@ -28,7 +28,7 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
   isLoading,
 }) => {
   const isNewStreamsTableEnabled = process.env.REACT_APP_NEW_STREAMS_TABLE ?? false;
-  const { mode } = useConnectionFormService();
+  const { initialValues, mode } = useConnectionFormService();
 
   const [searchString, setSearchString] = useState("");
 
@@ -38,7 +38,7 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
   );
 
   const sortedSchema = useMemo(
-    () => streams.sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? "")),
+    () => [...streams].sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? "")),
     [streams]
   );
 
@@ -53,6 +53,14 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
     return sortedSchema.filter((stream) => filters.every((f) => f(stream)));
   }, [searchString, sortedSchema]);
 
+  const changedStreams = useMemo(
+    () =>
+      streams.filter((stream, idx) => {
+        return stream.config?.selected !== initialValues.syncCatalog.streams[idx].config?.selected;
+      }),
+    [initialValues.syncCatalog.streams, streams]
+  );
+
   return (
     <BulkEditServiceProvider nodes={streams} update={onStreamsChanged}>
       <LoadingBackdrop loading={isLoading}>
@@ -69,7 +77,11 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
             <BulkHeader />
           </>
         )}
-        <CatalogTreeBody streams={filteredStreams} onStreamChanged={onSingleStreamChanged} />
+        <CatalogTreeBody
+          streams={filteredStreams}
+          changedStreams={changedStreams}
+          onStreamChanged={onSingleStreamChanged}
+        />
       </LoadingBackdrop>
       {isNewStreamsTableEnabled && <BulkEditPanel />}
     </BulkEditServiceProvider>

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx

@@ -1,20 +1,21 @@
-import { Field, FieldProps, setIn, useFormikContext } from "formik";
+import { Field, FieldProps, setIn } from "formik";
 import React, { useCallback } from "react";
 
 import { SyncSchemaStream } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { ConnectionFormValues, FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
+import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import { CatalogSection } from "./CatalogSection";
 import styles from "./CatalogTreeBody.module.scss";
 
 interface CatalogTreeBodyProps {
   streams: SyncSchemaStream[];
+  changedStreams: SyncSchemaStream[];
   onStreamChanged: (stream: SyncSchemaStream) => void;
 }
 
-export const CatalogTreeBody: React.FC<CatalogTreeBodyProps> = ({ streams, onStreamChanged }) => {
+export const CatalogTreeBody: React.FC<CatalogTreeBodyProps> = ({ streams, changedStreams, onStreamChanged }) => {
   const { mode } = useConnectionFormService();
 
   const onUpdateStream = useCallback(
@@ -30,12 +31,6 @@ export const CatalogTreeBody: React.FC<CatalogTreeBodyProps> = ({ streams, onStr
     [streams, onStreamChanged]
   );
 
-  const { initialValues } = useFormikContext<ConnectionFormValues>();
-
-  const changedStreams = streams.filter((stream, idx) => {
-    return stream.config?.selected !== initialValues.syncCatalog.streams[idx].config?.selected;
-  });
-
   return (
     <div className={styles.container}>
       {streams.map((streamNode) => (

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx

@@ -18,7 +18,7 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useModalService } from "hooks/services/Modal";
 import { useConnectionService, ValuesProps } from "hooks/services/useConnectionHook";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
-import { equal, naturalComparatorBy } from "utils/objects";
+import { equal } from "utils/objects";
 import { useConfirmCatalogDiff } from "views/Connection/CatalogDiffModal/useConfirmCatalogDiff";
 import EditControls from "views/Connection/ConnectionForm/components/EditControls";
 import { ConnectionFormFields } from "views/Connection/ConnectionForm/ConnectionFormFields";
@@ -90,12 +90,8 @@ export const ConnectionReplicationTab: React.FC = () => {
       // This could be due to user changes (e.g. in the sync mode) or due to new/removed
       // streams due to a "refreshed source schema".
       const catalogHasChanged = !equal(
-        formValues.syncCatalog.streams
-          .filter((s) => s.config?.selected)
-          .sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? "")),
-        connection.syncCatalog.streams
-          .filter((s) => s.config?.selected)
-          .sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? ""))
+        formValues.syncCatalog.streams.filter((s) => s.config?.selected),
+        connection.syncCatalog.streams.filter((s) => s.config?.selected)
       );
 
       setSubmitError(null);