Skip to content

Commit 0cef7b0

Browse files
lmossmanJoe Reuter
andauthored
🪟 🎉 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>
1 parent 67d6498 commit 0cef7b0

File tree

27 files changed

+1250
-90
lines changed

27 files changed

+1250
-90
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { goToConnectorBuilderPage, testStream } from "pages/connectorBuilderPage";
1+
import { goToConnectorBuilderPage, startFromScratch, testStream } from "pages/connectorBuilderPage";
22
import {
33
assertTestReadItems,
44
assertTestReadAuthFailure,
@@ -14,6 +14,7 @@ describe("Connector builder", () => {
1414
before(() => {
1515
initialSetupCompleted();
1616
goToConnectorBuilderPage();
17+
startFromScratch();
1718
});
1819

1920
it("Configure basic connector", () => {

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const startFromScratchButton = "button[data-testid='start-from-scratch']";
12
const nameInput = "input[name='global.connectorName']";
23
const urlBaseInput = "input[name='global.urlBase']";
34
const addStreamButton = "button[data-testid='add-stream']";
@@ -12,16 +13,20 @@ const limitInput = "[name='streams[0].paginator.strategy.page_size']";
1213
const injectOffsetInto = "[data-testid$='paginator.pageTokenOption.inject_into']";
1314
const injectOffsetFieldName = "[name='streams[0].paginator.pageTokenOption.field_name']";
1415
const testPageItem = "[data-testid='test-pages'] li";
15-
const submit = "button[type='submit']"
16+
const submit = "button[type='submit']";
1617
const testStreamButton = "button[data-testid='read-stream']";
1718

1819
export const goToConnectorBuilderPage = () => {
1920
cy.visit("/connector-builder");
2021
cy.wait(3000);
2122
};
2223

24+
export const startFromScratch = () => {
25+
cy.get(startFromScratchButton).click();
26+
};
27+
2328
export const enterName = (name: string) => {
24-
cy.get(nameInput).type(name);
29+
cy.get(nameInput).clear().type(name);
2530
};
2631

2732
export const enterUrlBase = (urlBase: string) => {
@@ -36,37 +41,37 @@ const selectFromDropdown = (selector: string, value: string) => {
3641
cy.get(`${selector} .react-select__dropdown-indicator`).last().click({ force: true });
3742

3843
cy.get(`.react-select__option`).contains(value).click();
39-
}
44+
};
4045

4146
export const selectAuthMethod = (value: string) => {
4247
selectFromDropdown(authType, value);
4348
};
4449

4550
export const goToView = (view: string) => {
4651
cy.get(`button[data-testid=navbutton-${view}]`).click();
47-
}
52+
};
4853

4954
export const openTestInputs = () => {
5055
cy.get(testInputsButton).click();
51-
}
56+
};
5257

5358
export const enterTestInputs = ({ apiKey }: { apiKey: string }) => {
5459
cy.get(apiKeyInput).type(apiKey);
55-
}
60+
};
5661

5762
export const goToTestPage = (page: number) => {
5863
cy.get(testPageItem).contains(page).click();
59-
}
64+
};
6065

6166
export const togglePagination = () => {
6267
cy.get(toggleInput).first().click({ force: true });
63-
}
68+
};
6469

6570
export const configureOffsetPagination = (limit: string, into: string, fieldName: string) => {
6671
cy.get(limitInput).type(limit);
6772
selectFromDropdown(injectOffsetInto, into);
6873
cy.get(injectOffsetFieldName).type(fieldName);
69-
}
74+
};
7075

7176
export const addStream = () => {
7277
cy.get(addStreamButton).click();
@@ -88,4 +93,4 @@ export const testStream = () => {
8893
// wait for debounced form
8994
cy.wait(500);
9095
cy.get(testStreamButton).click();
91-
};
96+
};
Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)