🪟🧪 Remove empty state page when there are no connectors

Demo: https://www.loom.com/share/6c2860ec8f0a4d95b80eb024f848bdf6
airbytehq · Nov 17, 2022 · 516a2d3 · 516a2d3
1 parent e69ecf3
commit 516a2d3
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 35 deletions.
diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -171,7 +171,11 @@ describe("Connection main actions", () => {
 
     let loadedConnection: any = null; // Should be a WebBackendConnectionRead
     cy.wait("@getConnection").then((interception) => {
-      const { scheduleType: readScheduleType, scheduleData: readScheduleData, ...connectionRead } = interception.response?.body;
+      const {
+        scheduleType: readScheduleType,
+        scheduleData: readScheduleData,
+        ...connectionRead
+      } = interception.response?.body;
       loadedConnection = connectionRead;
 
       expect(loadedConnection).not.to.eq(null);

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/destinationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/destinationPage.ts
@@ -1,15 +1,18 @@
-const newDestination = "button[data-id='new-destination'";
-const addSourceButton = "button[data-id='select-source']";
+const newDestination = "button[data-id='new-destination']";
+const addSourceButton = "button[data-testid='select-source']";
 
 export const goToDestinationPage = () => {
   cy.intercept("/api/v1/destinations/list").as("getDestinationsList");
   cy.visit("/destination");
   cy.wait(3000);
-  cy.wait("@getDestinationsList");
 };
 
 export const openNewDestinationForm = () => {
-  cy.get(newDestination).click();
+  cy.wait("@getDestinationsList").then(({ response }) => {
+    if (response?.body.destinations.length) {
+      cy.get(newDestination).click();
+    }
+  });
   cy.url().should("include", `/destination/new-destination`);
 };
 

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts b/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
@@ -1,17 +1,20 @@
-const newSource = "button[data-id='new-source'";
+const newSource = "button[data-id='new-source']";
 
 export const goToSourcePage = () => {
   cy.intercept("/api/v1/sources/list").as("getSourcesList");
   cy.visit("/source");
   cy.wait(3000);
-  cy.wait("@getSourcesList");
 };
 
 export const openSourceDestinationFromGrid = (value: string) => {
   cy.get("div").contains(value).click();
 };
 
 export const openNewSourceForm = () => {
-  cy.get(newSource).click();
+  cy.wait("@getSourcesList").then(({ response }) => {
+    if (response?.body.sources.length) {
+      cy.get(newSource).click();
+    }
+  });
   cy.url().should("include", `/source/new-source`);
 };
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx b/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx
@@ -63,7 +63,7 @@ const TableItemTitle: React.FC<TableItemTitleProps> = ({
           onChange={onSelect}
         >
           {() => (
-            <Button data-id={`select-${type}`}>
+            <Button data-testid={`select-${type}`}>
               <FormattedMessage id={`tables.${type}Add`} />
             </Button>
           )}

diff --git a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx
@@ -87,6 +87,7 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
       <ConnectorCard
         formType="destination"
         title={<FormattedMessage id="onboarding.destinationSetUp" />}
+        description={<FormattedMessage id="destinations.description" />}
         isLoading={isLoading}
         hasSuccess={hasSuccess}
         errorMessage={errorMessage}

diff --git a/airbyte-webapp/src/components/ui/Card/Card.module.scss b/airbyte-webapp/src/components/ui/Card/Card.module.scss
@@ -18,7 +18,9 @@
   }
 }
 
-.title {
+.header {
+  display: flex;
+  align-items: center;
   padding: variables.$spacing-xl;
   color: colors.$dark-blue;
   border-bottom: colors.$grey-100 variables.$border-thin solid;
@@ -35,3 +37,7 @@
     border-radius: 10px;
   }
 }
+
+.infoTooltip {
+  color: white;
+}
diff --git a/airbyte-webapp/src/components/ui/Card/Card.tsx b/airbyte-webapp/src/components/ui/Card/Card.tsx
@@ -2,11 +2,14 @@ import classNames from "classnames";
 import React from "react";
 
 import { H5 } from "components/base/Titles";
+import { Text } from "components/ui/Text";
 
+import { InfoTooltip } from "../Tooltip";
 import styles from "./Card.module.scss";
 
 export interface CardProps {
   title?: React.ReactNode;
+  description?: React.ReactNode;
   className?: string;
   fullWidth?: boolean;
   lightPadding?: boolean;
@@ -17,6 +20,7 @@ export interface CardProps {
 export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   children,
   title,
+  description,
   className,
   fullWidth,
   lightPadding,
@@ -31,14 +35,22 @@ export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
       })}
     >
       {title ? (
-        <H5
-          className={classNames(styles.title, {
+        <div
+          className={classNames(styles.header, {
             [styles.lightPadding]: lightPadding || !children,
             [styles.roundedBottom]: roundedBottom,
           })}
         >
-          {title}
-        </H5>
+          <H5 className={classNames(styles.title)}>{title}</H5>
+          {description && (
+            <InfoTooltip>
+              {" "}
+              <Text className={styles.infoTooltip} size="sm">
+                {description}
+              </Text>
+            </InfoTooltip>
+          )}
+        </div>
       ) : null}
       {children}
     </div>

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -253,7 +253,6 @@
   "sources.frequentlyUsed": "Suggested sources",
   "sources.incremental": "Incremental - based on...",
   "sources.newSource": "New source",
-  "sources.createFirst": "Connect your first source",
   "sources.newSourceTitle": "New Source",
   "sources.selectSource": "Select a source",
   "sources.status": "Status",
@@ -317,7 +316,6 @@
 
   "destination.destinationSettings": "Destination Settings",
   "destinations.newDestination": "New destination",
-  "destinations.createFirst": "Connect your first destination",
   "destinations.description": "<b>Destinations</b> are where you <b>send</b> or <b>push</b> your data to.",
   "destinations.noDestinations": "Destination list is empty",
   "destinations.noSources": "No sources yet",

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
@@ -1,10 +1,9 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { Navigate, useNavigate } from "react-router-dom";
 
-import { EmptyResourceListView } from "components/common/EmptyResourceListView";
 import { HeadTitle } from "components/common/HeadTitle";
 import { MainPageWithScroll } from "components/common/MainPageWithScroll";
 import { Button } from "components/ui/Button";
@@ -18,7 +17,6 @@ import SourcesTable from "./components/SourcesTable";
 
 const AllSourcesPage: React.FC = () => {
   const navigate = useNavigate();
-  const { formatMessage } = useIntl();
   const { sources } = useSourceList();
   useTrackPage(PageTrackingCodes.SOURCE_LIST);
   const onCreateSource = () => navigate(`${RoutePaths.SourceNew}`);
@@ -39,11 +37,7 @@ const AllSourcesPage: React.FC = () => {
       <SourcesTable sources={sources} />
     </MainPageWithScroll>
   ) : (
-    <EmptyResourceListView
-      resourceType="sources"
-      onCreateClick={onCreateSource}
-      buttonLabel={formatMessage({ id: "sources.createFirst" })}
-    />
+    <Navigate to={RoutePaths.SourceNew} />
   );
 };
 

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx
@@ -60,6 +60,7 @@ export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefiniti
     <ConnectorCard
       formType="source"
       title={<FormattedMessage id="onboarding.sourceSetUp" />}
+      description={<FormattedMessage id="sources.description" />}
       isLoading={isLoading}
       hasSuccess={hasSuccess}
       errorMessage={errorMessage}

diff --git a/airbyte-webapp/src/pages/destination/AllDestinationsPage/AllDestinationsPage.tsx b/airbyte-webapp/src/pages/destination/AllDestinationsPage/AllDestinationsPage.tsx
@@ -1,10 +1,9 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { Navigate, useNavigate } from "react-router-dom";
 
-import { EmptyResourceListView } from "components/common/EmptyResourceListView";
 import { HeadTitle } from "components/common/HeadTitle";
 import { MainPageWithScroll } from "components/common/MainPageWithScroll";
 import { DestinationsTable } from "components/destination/DestinationsTable";
@@ -18,7 +17,6 @@ import { RoutePaths } from "../../routePaths";
 
 export const AllDestinationsPage: React.FC = () => {
   const navigate = useNavigate();
-  const { formatMessage } = useIntl();
   const { destinations } = useDestinationList();
   useTrackPage(PageTrackingCodes.DESTINATION_LIST);
 
@@ -46,10 +44,6 @@ export const AllDestinationsPage: React.FC = () => {
       <DestinationsTable destinations={destinations} />
     </MainPageWithScroll>
   ) : (
-    <EmptyResourceListView
-      resourceType="destinations"
-      onCreateClick={onCreateDestination}
-      buttonLabel={formatMessage({ id: "destinations.createFirst" })}
-    />
+    <Navigate to={RoutePaths.DestinationNew} />
   );
 };
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -28,6 +28,7 @@ import { useTestConnector } from "./useTestConnector";
 // https://github.com/airbytehq/airbyte/issues/18553
 interface ConnectorCardBaseProps {
   title?: React.ReactNode;
+  description?: React.ReactNode;
   full?: boolean;
   jobInfo?: SynchronousJobRead | null;
   additionalSelectorComponent?: React.ReactNode;
@@ -64,6 +65,7 @@ const getConnectorId = (connectorRead: DestinationRead | SourceRead) => {
 
 export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEditProps> = ({
   title,
+  description,
   full,
   jobInfo,
   onSubmit,
@@ -156,7 +158,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   const formValues = isEditMode ? props.connector : { name: selectedConnectorDefinition?.name };
 
   return (
-    <Card title={title} fullWidth={full}>
+    <Card title={title} description={description} fullWidth={full}>
       <div className={styles.cardForm}>
         <div className={styles.connectorSelectControl}>
           <ConnectorDefinitionTypeControl