Fix bugs in form behavior (#13052)

* Fix bugs in form behavior

* Fix e2e tests

* Clear timeout properly

Author: Tim Roes

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

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

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 @@ export const ConnectorCard: React.FC<
   const [saved, setSaved] = useState(false);
   const [errorStatusRequest, setErrorStatusRequest] = useState<Error | null>(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);

airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx

@@ -22,6 +22,7 @@ export const useTestConnector = (
   onStopTesting: () => void;
   testConnector: (v?: ServiceFormValues) => Promise<CheckConnectionRead>;
   error: Error | null;
+  reset: () => void;
 } => {
   const { mutateAsync, isLoading, error, isSuccess, reset } = useCheckConnector(props.formType);
 
@@ -31,6 +32,7 @@ export const useTestConnector = (
     isTestConnectionInProgress: isLoading,
     isSuccess,
     error,
+    reset,
     onStopTesting: () => {
       abortControllerRef.current?.abort();
       reset();

airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx

@@ -82,8 +82,14 @@ const SetDefaultName: React.FC = () => {
 
   useEffect(() => {
     if (selectedService) {
-      setFieldValue("name", selectedService.name);
+      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]);