Fix lost schedule when editing connection name and ensure connection …

…name is not cleared in other connection updates (#13510)

* Update updateConnection calls to include connection name
Update updateConnection calls in ConnectionName component to include all required fields

* Ensure that edit connection name sends update once

airbyte-webapp/src/components/EntityTable/hooks.tsx

@@ -21,6 +21,7 @@ const useSyncActions = (): {
       namespaceDefinition: connection.namespaceDefinition,
       namespaceFormat: connection.namespaceFormat,
       operations: connection.operations,
+      name: connection.name,
       status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active,
     });
 

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

@@ -1,6 +1,6 @@
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useState } from "react";
 import styled from "styled-components";
 
 import { Input } from "components";
@@ -114,12 +114,14 @@ const ConnectionName: React.FC<Props> = ({ connection }) => {
     }
   };
 
-  const onEscape = () => {
+  const onEscape: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+    event.stopPropagation();
     setEditingState(false);
     setConnectionName(name);
   };
 
-  const onEnter = async () => {
+  const onEnter: React.KeyboardEventHandler<HTMLInputElement> = async (event) => {
+    event.stopPropagation();
     await updateConnectionAsync();
   };
 
@@ -132,12 +134,15 @@ const ConnectionName: React.FC<Props> = ({ connection }) => {
     if (connection.name !== connectionName) {
       setLoading(true);
       await updateConnection({
-        name: connectionName,
         connectionId: connection.connectionId,
-        namespaceDefinition: connection.namespaceDefinition,
         syncCatalog: connection.syncCatalog,
-        status: connection.status,
         prefix: connection.prefix,
+        schedule: connection.schedule || null,
+        namespaceDefinition: connection.namespaceDefinition,
+        namespaceFormat: connection.namespaceFormat,
+        operations: connection.operations,
+        status: connection.status,
+        name: connectionName,
       });
       setLoading(false);
     }

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

@@ -47,6 +47,7 @@ const EnabledControl: React.FC<EnabledControlProps> = ({ connection, disabled, f
       namespaceFormat: connection.namespaceFormat,
       prefix: connection.prefix,
       operations: connection.operations,
+      name: connection.name,
       status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active,
     });
 

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

@@ -75,6 +75,7 @@ export const ReplicationView: React.FC<ReplicationViewProps> = ({ onAfterSaveSch
       status: initialConnection.status || "",
       withRefreshedCatalog: activeUpdatingSchemaMode,
       sourceCatalogId: connection?.catalogId,
+      name: connection?.name,
     });
 
     setSaved(true);

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

@@ -144,6 +144,7 @@ const TransformationView: React.FC<TransformationViewProps> = ({ connection }) =
       syncCatalog: connection.syncCatalog,
       connectionId: connection.connectionId,
       status: connection.status,
+      name: connection.name,
       operations: operations,
     });
 

airbyte-webapp/src/utils/addEnterEscFuncForInput.tsx

@@ -2,25 +2,19 @@ import * as React from "react";
 
 export default function addEnterEscFuncForInput(WrapperComponent: React.FC) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (props: any) => {
+  return ({ onEscape, onEnter, onKeyDown: onKeyDownProp, ...props }: any) => {
     const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       // Escape Key Event
-      if (event.key === "Escape") {
-        if (props.onEscape) {
-          props.onEscape(event);
-        }
+      if (event.key === "Escape" && onEscape) {
+        onEscape(event);
       }
 
       // Enter Key Event
-      if (event.key === "Enter") {
-        if (props.onEnter) {
-          props.onEnter(event);
-        }
+      if (event.key === "Enter" && onEnter) {
+        onEnter(event);
       }
 
-      if (props.onKeyDown) {
-        props.onKeyDown(event);
-      }
+      onKeyDownProp?.(event);
     };
 
     return <WrapperComponent {...props} onKeyDown={onKeyDown} />;