diff --git a/airbyte-webapp/src/components/EntityTable/hooks.tsx b/airbyte-webapp/src/components/EntityTable/hooks.tsx index 1398120b98c0e..b2b8aafcd7a83 100644 --- a/airbyte-webapp/src/components/EntityTable/hooks.tsx +++ b/airbyte-webapp/src/components/EntityTable/hooks.tsx @@ -1,4 +1,5 @@ import { getFrequencyConfig } from "config/utils"; +import { buildConnectionUpdate } from "core/domain/connection"; import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService"; import { useSyncConnection, useUpdateConnection } from "hooks/services/useConnectionHook"; @@ -13,17 +14,11 @@ const useSyncActions = (): { const analyticsService = useAnalyticsService(); const changeStatus = async (connection: WebBackendConnectionRead) => { - await updateConnection({ - connectionId: connection.connectionId, - syncCatalog: connection.syncCatalog, - prefix: connection.prefix, - schedule: connection.schedule || null, - namespaceDefinition: connection.namespaceDefinition, - namespaceFormat: connection.namespaceFormat, - operations: connection.operations, - name: connection.name, - status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, - }); + await updateConnection( + buildConnectionUpdate(connection, { + status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, + }) + ); const frequency = getFrequencyConfig(connection.schedule); diff --git a/airbyte-webapp/src/core/domain/connection/index.ts b/airbyte-webapp/src/core/domain/connection/index.ts index 8d45002f6d9e3..73cfe9d6850b5 100644 --- a/airbyte-webapp/src/core/domain/connection/index.ts +++ b/airbyte-webapp/src/core/domain/connection/index.ts @@ -1,4 +1,5 @@ export * from "./operation"; export * from "./OperationService"; export * from "./types"; +export * from "./utils"; export * from "./WebBackendConnectionService"; diff --git a/airbyte-webapp/src/core/domain/connection/utils.ts b/airbyte-webapp/src/core/domain/connection/utils.ts new file mode 100644 index 0000000000000..15e242ed11b95 --- /dev/null +++ b/airbyte-webapp/src/core/domain/connection/utils.ts @@ -0,0 +1,24 @@ +import { WebBackendConnectionRead, WebBackendConnectionUpdate } from "core/request/AirbyteClient"; + +export const toWebBackendConnectionUpdate = (connection: WebBackendConnectionRead): WebBackendConnectionUpdate => ({ + name: connection.name, + connectionId: connection.connectionId, + namespaceDefinition: connection.namespaceDefinition, + namespaceFormat: connection.namespaceFormat, + prefix: connection.prefix, + operationIds: connection.operationIds, + syncCatalog: connection.syncCatalog, + schedule: connection.schedule, + status: connection.status, + resourceRequirements: connection.resourceRequirements, + operations: connection.operations, + sourceCatalogId: connection.catalogId, +}); + +export const buildConnectionUpdate = ( + connection: WebBackendConnectionRead, + connectionUpdate: Partial +): WebBackendConnectionUpdate => ({ + ...toWebBackendConnectionUpdate(connection), + ...connectionUpdate, +}); diff --git a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx index 33c8b99575e00..d1fed9fed5648 100644 --- a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx +++ b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx @@ -189,16 +189,16 @@ const useUpdateConnection = () => { const queryClient = useQueryClient(); return useMutation( - (conn: WebBackendConnectionUpdate) => { - const withRefreshedCatalogCleaned = conn.withRefreshedCatalog - ? { withRefreshedCatalog: conn.withRefreshedCatalog } + (connectionUpdate: WebBackendConnectionUpdate) => { + const withRefreshedCatalogCleaned = connectionUpdate.withRefreshedCatalog + ? { withRefreshedCatalog: connectionUpdate.withRefreshedCatalog } : null; - return service.update({ ...conn, ...withRefreshedCatalogCleaned }); + return service.update({ ...connectionUpdate, ...withRefreshedCatalogCleaned }); }, { - onSuccess: (data) => { - queryClient.setQueryData(connectionsKeys.detail(data.connectionId), data); + onSuccess: (connection) => { + queryClient.setQueryData(connectionsKeys.detail(connection.connectionId), connection); }, } ); diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx index 18ec5eb92b9d1..13cbee57fac6a 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx @@ -5,6 +5,7 @@ import styled from "styled-components"; import { Input } from "components"; +import { buildConnectionUpdate } from "core/domain/connection"; import { WebBackendConnectionRead } from "core/request/AirbyteClient"; import { useUpdateConnection } from "hooks/services/useConnectionHook"; import addEnterEscFuncForInput from "utils/addEnterEscFuncForInput"; @@ -133,17 +134,11 @@ const ConnectionName: React.FC = ({ connection }) => { // Update only when the name is changed if (connection.name !== connectionName) { setLoading(true); - await updateConnection({ - connectionId: connection.connectionId, - syncCatalog: connection.syncCatalog, - prefix: connection.prefix, - schedule: connection.schedule || null, - namespaceDefinition: connection.namespaceDefinition, - namespaceFormat: connection.namespaceFormat, - operations: connection.operations, - status: connection.status, - name: connectionName, - }); + await updateConnection( + buildConnectionUpdate(connection, { + name: connectionName, + }) + ); setLoading(false); } diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx index c4071048ef9fa..efaf6f37fb724 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx @@ -5,6 +5,7 @@ import styled from "styled-components"; import { Switch } from "components"; +import { buildConnectionUpdate } from "core/domain/connection"; import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService"; import { useUpdateConnection } from "hooks/services/useConnectionHook"; @@ -39,17 +40,11 @@ const EnabledControl: React.FC = ({ connection, disabled, f const analyticsService = useAnalyticsService(); const onChangeStatus = async () => { - await updateConnection({ - connectionId: connection.connectionId, - syncCatalog: connection.syncCatalog, - schedule: connection.schedule, - namespaceDefinition: connection.namespaceDefinition, - namespaceFormat: connection.namespaceFormat, - prefix: connection.prefix, - operations: connection.operations, - name: connection.name, - status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, - }); + await updateConnection( + buildConnectionUpdate(connection, { + status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, + }) + ); analyticsService.track("Source - Action", { action: connection.status === ConnectionStatus.active ? "Disable connection" : "Reenable connection", diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index fcf9c56c38ea9..e541012864f4e 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -9,6 +9,7 @@ import styled from "styled-components"; import { Button, Card } from "components"; import LoadingSchema from "components/LoadingSchema"; +import { toWebBackendConnectionUpdate } from "core/domain/connection"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConfirmationModalService } from "hooks/services/ConfirmationModal"; import { @@ -67,15 +68,23 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch const connection = activeUpdatingSchemaMode ? connectionWithRefreshCatalog : initialConnection; const onSubmit = async (values: ValuesProps, formikHelpers?: FormikHelpers) => { - const initialSyncSchema = connection?.syncCatalog; + if (!connection) { + // onSubmit should only be called when a connection object exists. + return; + } + + const initialSyncSchema = connection.syncCatalog; + const connectionAsUpdate = toWebBackendConnectionUpdate(connection); await updateConnection({ + ...connectionAsUpdate, ...values, connectionId, + // Use the name and status from the initial connection because + // The status can be toggled and the name can be changed in-between refreshing the schema + name: initialConnection.name, status: initialConnection.status || "", withRefreshedCatalog: activeUpdatingSchemaMode, - sourceCatalogId: connection?.catalogId, - name: connection?.name, }); setSaved(true); diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx index 480e42b2d7402..f07c4a1f0af09 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx @@ -6,7 +6,7 @@ import styled from "styled-components"; import { ContentCard, H4 } from "components"; -import { NormalizationType } from "core/domain/connection"; +import { buildConnectionUpdate, NormalizationType } from "core/domain/connection"; import { FeatureItem, useFeatureService } from "hooks/services/Feature"; import { useUpdateConnection } from "hooks/services/useConnectionHook"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; @@ -145,17 +145,11 @@ const TransformationView: React.FC = ({ connection }) = (connection.operations ?? [])?.filter((op) => op.operatorConfiguration.operatorType === OperatorType.dbt) ); - await updateConnection({ - namespaceDefinition: connection.namespaceDefinition, - namespaceFormat: connection.namespaceFormat, - prefix: connection.prefix, - schedule: connection.schedule, - syncCatalog: connection.syncCatalog, - connectionId: connection.connectionId, - status: connection.status, - name: connection.name, - operations: operations, - }); + await updateConnection( + buildConnectionUpdate(connection, { + operations: operations, + }) + ); const nextFormValues: typeof values = {}; if (values.transformations) {