From ab735e25e61bab090fe3918f16570c2f23b3ec57 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Date: Mon, 6 Jun 2022 15:26:22 -0400 Subject: [PATCH] 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 --- .../src/components/EntityTable/hooks.tsx | 1 + .../components/ConnectionName.tsx | 17 +++++++++++------ .../components/EnabledControl.tsx | 1 + .../components/ReplicationView.tsx | 1 + .../components/TransformationView.tsx | 1 + .../src/utils/addEnterEscFuncForInput.tsx | 18 ++++++------------ 6 files changed, 21 insertions(+), 18 deletions(-) diff --git a/airbyte-webapp/src/components/EntityTable/hooks.tsx b/airbyte-webapp/src/components/EntityTable/hooks.tsx index 66f8d9a9de5e..7d77fc0b1a80 100644 --- a/airbyte-webapp/src/components/EntityTable/hooks.tsx +++ b/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, }); 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 e47d2104b9b1..18ec5eb92b9d 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx +++ b/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 = ({ connection }) => { } }; - const onEscape = () => { + const onEscape: React.KeyboardEventHandler = (event) => { + event.stopPropagation(); setEditingState(false); setConnectionName(name); }; - const onEnter = async () => { + const onEnter: React.KeyboardEventHandler = async (event) => { + event.stopPropagation(); await updateConnectionAsync(); }; @@ -132,12 +134,15 @@ const ConnectionName: React.FC = ({ 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); } 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 acb3f1910d7d..d64ac1cab73e 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx @@ -47,6 +47,7 @@ const EnabledControl: React.FC = ({ connection, disabled, f namespaceFormat: connection.namespaceFormat, prefix: connection.prefix, operations: connection.operations, + name: connection.name, status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, }); 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 76848863e72f..fcf9c56c38ea 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -75,6 +75,7 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch 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 ee638c22a019..597e1fa18a4a 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx @@ -144,6 +144,7 @@ const TransformationView: React.FC = ({ connection }) = syncCatalog: connection.syncCatalog, connectionId: connection.connectionId, status: connection.status, + name: connection.name, operations: operations, }); diff --git a/airbyte-webapp/src/utils/addEnterEscFuncForInput.tsx b/airbyte-webapp/src/utils/addEnterEscFuncForInput.tsx index c10eee45bf3c..49a751ed4819 100644 --- a/airbyte-webapp/src/utils/addEnterEscFuncForInput.tsx +++ b/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) => { // 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 ;