🪟🧪 Remove empty state page when there are no connectors #19112

letiescanciano · 2022-11-08T09:57:05Z

🎬 Demo: https://www.loom.com/share/6c2860ec8f0a4d95b80eb024f848bdf6 (ignore connection step as we want to keep it as it is)
📓 Experiment details: https://airtable.com/appIuY0uKPVnk8TWT/tbl2SxXnUwf6fVCWS/viww5hSnXY1UUWb6w/rech044wPzAcSNZxV?blocks=hide

❓ Hypothesis
By reducing a step in the setup (source/destination) users will be more likely to interact with the list of connectors.

🎯 Goal
+30% in Airbyte.UI.Source.Select--> Bring users closer to available connectors

What

Redirect to set up pages instead of showing empty state

letiescanciano · 2022-11-16T07:38:09Z

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

 };

 export const openNewDestinationForm = () => {
-  cy.get(newDestination).click();
+  cy.wait("@getDestinationsList").then(({ response }) => {


Since we won’t have a button in the empty state (no destinations set up yet) we need to make a decision based on the response on this request.

letiescanciano · 2022-11-16T07:39:07Z

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

 };

 export const openSourceDestinationFromGrid = (value: string) => {
  cy.get("div").contains(value).click();
 };

 export const openNewSourceForm = () => {
-  cy.get(newSource).click();
+  cy.wait("@getSourcesList").then(({ response }) => {


Since we won’t have a button in the empty state (no sources set up yet) we need to make a decision based on the response on this request.

letiescanciano · 2022-11-16T07:39:56Z

airbyte-webapp/src/components/ui/Card/Card.tsx

-          {title}
-        </H5>
+          <H5 className={classNames(styles.title)}>{title}</H5>
+          {description ? (


Adding description of what a Source/Destination is in a tooltip since we are loosing the message coming from the empty state

Suggested change

{description ? (

{description && (

timroes · 2022-11-16T14:14:05Z

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

  cy.url().should("include", `/destination/new-destination`);
 };

-export const openAddSource = () => {
+export const aopenAddSource = () => {


Seems this method got accidentally renamed.

This was the issue with the e2e tests failing 🤦‍♀️

timroes · 2022-11-16T14:16:52Z

airbyte-webapp/src/components/ui/Card/Card.tsx

 import styles from "./Card.module.scss";

 export interface CardProps {
  title?: React.ReactNode;
+  description?: React.ReactNode;


Given that this is a basic UI component, I'm not sure we want to add something that specific as the description which renders as an Info icon here, or rather want to stay more generic, and e.g. just allow passing in headerComponents that would render there. @edmundito what are your thoughts around this?

timroes · 2022-11-16T14:17:47Z

It seems this is async with master and the e2e tests are still failing. I suspect this will need a bit more cleanup.

Demo: https://www.loom.com/share/6c2860ec8f0a4d95b80eb024f848bdf6

letiescanciano · 2022-11-17T08:45:46Z

@timroes issue was that function renamed by mistake. CI is passing again now :)

airbyte-webapp/src/components/ui/Card/Card.tsx

airbyte-webapp/src/components/ui/Card/Card.module.scss

timroes · 2022-11-21T16:02:19Z

Just a quick reminder, that EmptyResourceListView (and corresponding code) needs to still be removed, before the final review.

letiescanciano · 2022-11-21T16:13:48Z

Just a quick reminder, that EmptyResourceListView (and corresponding code) needs to still be removed, before the final review.

Thanks! Still have to work on that, but will probably pushed until next week.

* master: (74 commits) Fix support icon in sidebar fix: add BuildPulse report for helm ac tests (#19785) fix: yaml syntax (#19775) 🪟 🐛 Fix custom connection creation endpoint (#19702) Source facebook marketing: check "breakdowns" combinations (#19645) fix typo: notify instead of sync (#19737) find_non_rate_limited_PAT (#19736) Source Google Ads: fix schema for "campaigns" stream (#19700) 🎉 Source Asana: migrate to new SAT, added base HTTP errors handling (#19561) fix order not to randomly fail backward compatibility check (#19377) Bump helm chart version reference to 0.42.0 (#19706) fix: add extraEnv block (#19703) Bump Airbyte version from 0.40.21 to 0.40.22 (#19687) Bump helm chart version reference to 0.41.3 (#19685) Add connector builder server to airbyte proxy, kube overlays, and helm charts (#19554) dbt Cloud integration doc (#19619) 🪟 🎉 Display service token validation errors in the UI (#19578) 17644 Update Destination data type test to use the new data types (#19281) Docs: fix broken connector builder UI docs links (#19631) Bump Airbyte version from 0.40.20 to 0.40.21 (#19634) ...

timroes · 2022-11-28T12:06:13Z

airbyte-webapp/src/components/common/EmptyResourceListView/EmptyResourceListView.tsx

-        )}
-        <img
-          className={styles.octavia}
-          src={`/images/octavia/empty-${resourceType}.png`}


Those images in /public/images/octavia/empty-... should still be removed, since they are not used anywhere else.

you are right. Removed!

timroes

Code LGTM. Checked locally, navigating to those pages seems to work all as expected.

timroes

The refactoring on the Card actually broke the layout in the settings pages (buttons now on the left side):

letiescanciano

Fixed! thanks for the double check ;)

timroes

Code LGTM, tested locally.

letiescanciano requested a review from a team as a code owner November 8, 2022 09:57

github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp team/growth labels Nov 8, 2022

letiescanciano marked this pull request as draft November 8, 2022 14:23

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch 2 times, most recently from 625c57e to 86832b0 Compare November 14, 2022 08:26

timroes self-requested a review November 14, 2022 12:15

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch from 86832b0 to 2b3dc4f Compare November 14, 2022 14:29

letiescanciano marked this pull request as ready for review November 14, 2022 15:08

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch 2 times, most recently from a1d760a to 9f50dd1 Compare November 16, 2022 07:37

letiescanciano commented Nov 16, 2022

View reviewed changes

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch from 9f50dd1 to 018a069 Compare November 16, 2022 07:38

letiescanciano commented Nov 16, 2022

View reviewed changes

timroes reviewed Nov 16, 2022

View reviewed changes

🪟🧪 Remove empty state page when there are no connectors

516a2d3

Demo: https://www.loom.com/share/6c2860ec8f0a4d95b80eb024f848bdf6

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch from 018a069 to 516a2d3 Compare November 17, 2022 08:02

timroes reviewed Nov 18, 2022

View reviewed changes

airbyte-webapp/src/components/ui/Card/Card.tsx Outdated Show resolved Hide resolved

timroes reviewed Nov 18, 2022

View reviewed changes

airbyte-webapp/src/components/ui/Card/Card.module.scss Outdated Show resolved Hide resolved

letiescanciano added 2 commits November 28, 2022 10:13

Remove unused components

9dc850a

letiescanciano force-pushed the leti/remove-empty-state-in-connector-setup branch from 31c0fed to 9dc850a Compare November 28, 2022 09:21

letiescanciano requested a review from timroes November 28, 2022 09:24

timroes reviewed Nov 28, 2022

View reviewed changes

remove unnecesary images

b83801d

timroes approved these changes Nov 28, 2022

View reviewed changes

timroes suggested changes Nov 28, 2022

View reviewed changes

fix card broken layout

2cb9960

letiescanciano commented Nov 29, 2022

View reviewed changes

timroes approved these changes Nov 29, 2022

View reviewed changes

letiescanciano merged commit 8eac44c into master Nov 29, 2022

letiescanciano deleted the leti/remove-empty-state-in-connector-setup branch November 29, 2022 15:04

octavia-squidington-iii mentioned this pull request Nov 30, 2022

Bump Airbyte version from 0.40.22 to 0.40.23 #19941

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟🧪 Remove empty state page when there are no connectors #19112

🪟🧪 Remove empty state page when there are no connectors #19112

letiescanciano commented Nov 8, 2022 •

edited

Loading

letiescanciano Nov 16, 2022

letiescanciano Nov 16, 2022

letiescanciano Nov 16, 2022

timroes Nov 16, 2022

timroes Nov 16, 2022

letiescanciano Nov 17, 2022

timroes Nov 16, 2022

timroes commented Nov 16, 2022

letiescanciano commented Nov 17, 2022

timroes commented Nov 21, 2022

letiescanciano commented Nov 21, 2022

timroes Nov 28, 2022

letiescanciano Nov 28, 2022

timroes left a comment

timroes left a comment

letiescanciano left a comment

timroes left a comment

🪟🧪 Remove empty state page when there are no connectors #19112

🪟🧪 Remove empty state page when there are no connectors #19112

Conversation

letiescanciano commented Nov 8, 2022 • edited Loading

What

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timroes commented Nov 16, 2022

letiescanciano commented Nov 17, 2022

timroes commented Nov 21, 2022

letiescanciano commented Nov 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timroes left a comment

Choose a reason for hiding this comment

timroes left a comment

Choose a reason for hiding this comment

letiescanciano left a comment

Choose a reason for hiding this comment

timroes left a comment

Choose a reason for hiding this comment

letiescanciano commented Nov 8, 2022 •

edited

Loading