🪟 🐛 Focus Connection Name input on field selection (#20162)

* fix using autofocus

* see if this fixes e2e

* debug e2e

* cleanup

Author: teallarson

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts

@@ -23,7 +23,7 @@ import {
   selectPrimaryKeyField,
   checkPreFilledPrimaryKeyField,
   checkStreamFields,
-  expandStreamDetails
+  expandStreamDetails,
 } from "pages/replicationPage";
 import { openSourceDestinationFromGrid, goToSourcePage } from "pages/sourcePage";
 import { goToSettingsPage } from "pages/settingsConnectionPage";
@@ -155,11 +155,6 @@ describe("Connection - main actions", () => {
 
     createTestConnection(sourceName, destName);
 
-    cy.get("div").contains(sourceName).should("exist");
-    cy.get("div").contains(destName).should("exist");
-
-    openSourceDestinationFromGrid(sourceName);
-
     goToReplicationTab();
 
     selectSchedule("Cron");
@@ -558,7 +553,6 @@ describe("Connection - detect changes in source", () => {
     cy.get("div").contains(destName).should("exist");
 
     makeChangesInDBSource();
-    openSourceDestinationFromGrid(sourceName);
     goToReplicationTab();
     refreshSourceSchemaBtnClick();
 

airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts

@@ -80,16 +80,14 @@ export const selectCursorField = (value: string) => {
   cy.get(`.react-select__option`).contains(value).click();
 };
 
-export const checkStreamFields = (listNames: Array<String>, listTypes: Array<String>,) => {
-  cy.get(streamFieldNames)
-   .each(($span, i) => {
-        expect($span.text()).to.equal(listNames[i]);
-   });
-
-   cy.get(streamDataTypes)
-   .each(($span, i) => {
-        expect($span.text()).to.equal(listTypes[i]);
-   });
+export const checkStreamFields = (listNames: string[], listTypes: string[]) => {
+  cy.get(streamFieldNames).each(($span, i) => {
+    expect($span.text()).to.equal(listNames[i]);
+  });
+
+  cy.get(streamDataTypes).each(($span, i) => {
+    expect($span.text()).to.equal(listTypes[i]);
+  });
 };
 
 export const checkCursorField = (expectedValue: string) => {

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-autofocus */
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useState } from "react";
@@ -77,6 +78,7 @@ export const ConnectionName: React.FC = () => {
               onEscape={onEscape}
               onEnter={onEnter}
               disabled={loading}
+              autoFocus
             />
           </div>
         </div>