🪟 🎉 Connector Builder Landing Page (#22122)

* save working version of minimal landing page * move landing page to own component and show Toast on invalid yaml * add default Untitled connector name * save styling progress * style the landing page * use card component * reword descriptions * undo unnecessary syntax change * use file name as connector name * move showLandingPage to global state and set to true on reset * fix e2e test * move local storage hooks into a separate service/context * move landing page to its own page * update doc * move full file input handling logic into callback * use hidden * clear out notification on unmount * use url if filename is 'manifest' * add comment --------- Co-authored-by: Joe Reuter <joe@airbyte.io>

Author: lmossman

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

@@ -1,4 +1,4 @@
-import { goToConnectorBuilderPage, testStream } from "pages/connectorBuilderPage";
+import { goToConnectorBuilderPage, startFromScratch, testStream } from "pages/connectorBuilderPage";
 import {
  assertTestReadItems,
  assertTestReadAuthFailure,
@@ -14,6 +14,7 @@ describe("Connector builder", () => {
  before(() => {
  initialSetupCompleted();
  goToConnectorBuilderPage();
+ startFromScratch();
  });
 
  it("Configure basic connector", () => {

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

@@ -1,3 +1,4 @@
+const startFromScratchButton = "button[data-testid='start-from-scratch']";
 const nameInput = "input[name='global.connectorName']";
 const urlBaseInput = "input[name='global.urlBase']";
 const addStreamButton = "button[data-testid='add-stream']";
@@ -12,16 +13,20 @@ const limitInput = "[name='streams[0].paginator.strategy.page_size']";
 const injectOffsetInto = "[data-testid$='paginator.pageTokenOption.inject_into']";
 const injectOffsetFieldName = "[name='streams[0].paginator.pageTokenOption.field_name']";
 const testPageItem = "[data-testid='test-pages'] li";
-const submit = "button[type='submit']"
+const submit = "button[type='submit']";
 const testStreamButton = "button[data-testid='read-stream']";
 
 export const goToConnectorBuilderPage = () => {
  cy.visit("/connector-builder");
  cy.wait(3000);
 };
 
+export const startFromScratch = () => {
+ cy.get(startFromScratchButton).click();
+};
+
 export const enterName = (name: string) => {
- cy.get(nameInput).type(name);
+ cy.get(nameInput).clear().type(name);
 };
 
 export const enterUrlBase = (urlBase: string) => {
@@ -36,37 +41,37 @@ const selectFromDropdown = (selector: string, value: string) => {
  cy.get(`${selector} .react-select__dropdown-indicator`).last().click({ force: true });
 
  cy.get(`.react-select__option`).contains(value).click();
-}
+};
 
 export const selectAuthMethod = (value: string) => {
  selectFromDropdown(authType, value);
 };
 
 export const goToView = (view: string) => {
  cy.get(`button[data-testid=navbutton-${view}]`).click();
-}
+};
 
 export const openTestInputs = () => {
  cy.get(testInputsButton).click();
-}
+};
 
 export const enterTestInputs = ({ apiKey }: { apiKey: string }) => {
  cy.get(apiKeyInput).type(apiKey);
-}
+};
 
 export const goToTestPage = (page: number) => {
  cy.get(testPageItem).contains(page).click();
-}
+};
 
 export const togglePagination = () => {
  cy.get(toggleInput).first().click({ force: true });
-}
+};
 
 export const configureOffsetPagination = (limit: string, into: string, fieldName: string) => {
  cy.get(limitInput).type(limit);
  selectFromDropdown(injectOffsetInto, into);
  cy.get(injectOffsetFieldName).type(fieldName);
-}
+};
 
 export const addStream = () => {
  cy.get(addStreamButton).click();
@@ -88,4 +93,4 @@ export const testStream = () => {
  // wait for debounced form
  cy.wait(500);
  cy.get(testStreamButton).click();
-};
+};