From 3787bd715ec278254eddce3f9e9751f627381605 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 20 May 2022 13:13:37 +0200 Subject: [PATCH 1/3] Fix bugs in form behavior --- .../views/Connector/ConnectorCard/ConnectorCard.tsx | 10 ++++++++-- .../views/Connector/ConnectorCard/useTestConnector.tsx | 2 ++ .../src/views/Connector/ServiceForm/ServiceForm.tsx | 6 +++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx index a6203af3205c9..31bd26d0f7512 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { FormattedMessage } from "react-intl"; import { ContentCard } from "components"; @@ -37,7 +37,13 @@ const ConnectorCard: React.FC< const [saved, setSaved] = useState(false); const [errorStatusRequest, setErrorStatusRequest] = useState(null); - const { testConnector, isTestConnectionInProgress, onStopTesting, error } = useTestConnector(props); + const { testConnector, isTestConnectionInProgress, onStopTesting, error, reset } = useTestConnector(props); + + useEffect(() => { + // Whenever the selected connector changed, reset the check connection call and other errors + reset(); + setErrorStatusRequest(null); + }, [props.selectedConnectorDefinitionSpecification, reset]); const trackNewSourceAction = useTrackAction(TrackActionType.NEW_SOURCE); const trackNewDestinationAction = useTrackAction(TrackActionType.NEW_DESTINATION); diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx index 15e22e48120c2..bd42fe5c66fd4 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx @@ -20,6 +20,7 @@ export const useTestConnector = ( onStopTesting: () => void; testConnector: (v?: ServiceFormValues) => Promise; error: Error | null; + reset: () => void; } => { const { mutateAsync, isLoading, error, isSuccess, reset } = useCheckConnector(props.formType); @@ -29,6 +30,7 @@ export const useTestConnector = ( isTestConnectionInProgress: isLoading, isSuccess, error, + reset, onStopTesting: () => { abortControllerRef.current?.abort(); reset(); diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index c42913a4155c1..5be61dbd88b44 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -85,7 +85,11 @@ const SetDefaultName: React.FC = () => { useEffect(() => { if (selectedService) { - setFieldValue("name", selectedService.name); + setTimeout(() => { + // We need to push this out one execution slot, so the form isn't still in its + // initialization status and won't react to this call but would just take the initialValues instead. + setFieldValue("name", selectedService.name); + }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedService]); From 776c6005286e5d74a9817ecfbe06d72d84e97d5c Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 20 May 2022 15:35:41 +0200 Subject: [PATCH 2/3] Fix e2e tests --- airbyte-webapp-e2e-tests/cypress/support/commands/common.js | 2 +- airbyte-webapp-e2e-tests/cypress/support/commands/source.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp-e2e-tests/cypress/support/commands/common.js b/airbyte-webapp-e2e-tests/cypress/support/commands/common.js index ef2386c50fdc1..079011751b6b7 100644 --- a/airbyte-webapp-e2e-tests/cypress/support/commands/common.js +++ b/airbyte-webapp-e2e-tests/cypress/support/commands/common.js @@ -14,7 +14,7 @@ Cypress.Commands.add("fillTestLocalJsonForm", (name) => { cy.wait("@getDestinationSpecifications"); - cy.get("input[name=name]").type(name); + cy.get("input[name=name]").clear().type(name); cy.get("input[name='connectionConfiguration.destination_path']").type("/local"); }) diff --git a/airbyte-webapp-e2e-tests/cypress/support/commands/source.js b/airbyte-webapp-e2e-tests/cypress/support/commands/source.js index 72bc1a959569a..c231d0701c80c 100644 --- a/airbyte-webapp-e2e-tests/cypress/support/commands/source.js +++ b/airbyte-webapp-e2e-tests/cypress/support/commands/source.js @@ -8,7 +8,7 @@ Cypress.Commands.add("fillPgSourceForm", (name) => { cy.wait("@getSourceSpecifications"); - cy.get("input[name=name]").type(name); + cy.get("input[name=name]").clear().type(name); cy.get("input[name='connectionConfiguration.host']").type("localhost"); cy.get("input[name='connectionConfiguration.port']").type("{selectAll}{del}5433"); cy.get("input[name='connectionConfiguration.database']").type("airbyte_ci"); From fea98808204fc360835ebbbf9db775207c9aa35c Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Tue, 24 May 2022 16:25:00 +0200 Subject: [PATCH 3/3] Clear timeout properly --- .../src/views/Connector/ServiceForm/ServiceForm.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index c758a70c34d8b..a85f57ef05b72 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -82,12 +82,14 @@ const SetDefaultName: React.FC = () => { useEffect(() => { if (selectedService) { - setTimeout(() => { + const timeout = setTimeout(() => { // We need to push this out one execution slot, so the form isn't still in its // initialization status and won't react to this call but would just take the initialValues instead. setFieldValue("name", selectedService.name); }); + return () => clearTimeout(timeout); } + return; // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedService]);