🪟 🐛 Prevent false triggers of "some streams have changed" modal (#16443)

* add missing sort

* sort both for good measure

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx

@@ -19,7 +19,7 @@ import {
   useUpdateConnection,
   ValuesProps,
 } from "hooks/services/useConnectionHook";
-import { equal } from "utils/objects";
+import { equal, naturalComparatorBy } from "utils/objects";
 import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal";
 import { ConnectionForm, ConnectionFormSubmitResult } from "views/Connection/ConnectionForm";
 
@@ -142,8 +142,13 @@ export const ReplicationView: React.FC<ReplicationViewProps> = ({ onAfterSaveSch
     // 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 hasCatalogChanged = !equal(
-      values.syncCatalog.streams.filter((s) => s.config?.selected),
-      initialConnection.syncCatalog.streams.filter((s) => s.config?.selected)
+      values.syncCatalog.streams
+        .filter((s) => s.config?.selected)
+        .sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? "")),
+      initialConnection.syncCatalog.streams
+        .filter((s) => s.config?.selected)
+
+        .sort(naturalComparatorBy((syncStream) => syncStream.stream?.name ?? ""))
     );
     // Whenever the catalog changed show a warning to the user, that we're about to reset their data.
     // Given them a choice to opt-out in which case we'll be sending skipRefresh: true to the update