Update connection update calls to use central utility to ensure conne…

…ction update has all data (#13564)

* Update connection updates with build update utility
* Add buildConnectionUpdate utility
* Update components that update the connection to use utility when necessary

* Use conection name when saving connection from replication view to prevent override from refreshed catalog

* Improve connection check on ReplicationView onSubmit function

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);
 

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";

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>
+): WebBackendConnectionUpdate => ({
+  ...toWebBackendConnectionUpdate(connection),
+  ...connectionUpdate,
+});

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);
       },
     }
   );

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<Props> = ({ 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);
     }
 

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<EnabledControlProps> = ({ 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",

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<ReplicationViewProps> = ({ onAfterSaveSch
   const connection = activeUpdatingSchemaMode ? connectionWithRefreshCatalog : initialConnection;
 
   const onSubmit = async (values: ValuesProps, formikHelpers?: FormikHelpers<ValuesProps>) => {
-    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);

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<TransformationViewProps> = ({ 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) {