From be86329168b3030abdb7126c417706673d2b5bb4 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Thu, 3 Nov 2022 14:37:42 -0400 Subject: [PATCH 1/2] 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 --- .../connection/CatalogTree/CatalogTree.tsx | 18 +++++++++++++++--- .../connection/CatalogTree/CatalogTreeBody.tsx | 13 ++++--------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx index 932a78b16d5fd4..b3b3dc37f90f3a 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx @@ -28,7 +28,7 @@ const CatalogTreeComponent: React.FC> 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> ); 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> 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 ( @@ -69,7 +77,11 @@ const CatalogTreeComponent: React.FC> )} - + {isNewStreamsTableEnabled && } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx index a61d55a9897efa..23c4c3c11904fe 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx +++ b/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 = ({ streams, onStreamChanged }) => { +export const CatalogTreeBody: React.FC = ({ streams, changedStreams, onStreamChanged }) => { const { mode } = useConnectionFormService(); const onUpdateStream = useCallback( @@ -30,12 +31,6 @@ export const CatalogTreeBody: React.FC = ({ streams, onStr [streams, onStreamChanged] ); - const { initialValues } = useFormikContext(); - - const changedStreams = streams.filter((stream, idx) => { - return stream.config?.selected !== initialValues.syncCatalog.streams[idx].config?.selected; - }); - return (
{streams.map((streamNode) => ( From f08639f924ec57eda98f461158d128d7e8165481 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Thu, 3 Nov 2022 15:01:03 -0400 Subject: [PATCH 2/2] Remove sorting when saving changes. It's no longer needed. --- .../ConnectionItemPage/ConnectionReplicationTab.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx index 1241c2f73541ca..2973aeac150d30 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx +++ b/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);