🪟 🐛 Focus Connection Name input on field selection

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>