🪟 🎉 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>

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();
-};
+};