🪟 🎨 Improve empty state of resource pages

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

@@ -5,24 +5,27 @@ import { FormattedMessage } from "react-intl";
 import { Button } from "components/ui/Button";
 import { Text } from "components/ui/Text";
 
+import { ReactComponent as BowtieHalf } from "./bowtie-half.svg";
 import styles from "./EmptyResourceListView.module.scss";
 
 interface EmptyResourceListViewProps {
+  buttonLabel: string;
   resourceType: "connections" | "destinations" | "sources";
   onCreateClick: () => void;
 }
 
-export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({ resourceType, onCreateClick }) => {
-  const { headingMessageId, buttonMessageId, singularResourceType } = useMemo(() => {
+export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({
+  resourceType,
+  onCreateClick,
+  buttonLabel,
+}) => {
+  const { headingMessageId, singularResourceType } = useMemo(() => {
     const singularResourceType = resourceType.substring(0, resourceType.length - 1);
     const baseMessageId = resourceType === "connections" ? singularResourceType : resourceType;
 
     const headingMessageId = `${baseMessageId}.description`;
-    const buttonMessageId = `${baseMessageId}.new${
-      singularResourceType.substring(0, 1).toUpperCase() + singularResourceType.substring(1)
-    }`;
 
-    return { headingMessageId, buttonMessageId, singularResourceType };
+    return { headingMessageId, singularResourceType };
   }, [resourceType]);
 
   return (
@@ -32,20 +35,20 @@ export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({ re
       </Text>
       <div className={classNames(styles.container, styles.illustration)}>
         {resourceType !== "destinations" && (
-          <img src="/images/bowtie-half.svg" alt="Left Bowtie" className={classNames(styles.bowtie, styles.left)} />
+          <BowtieHalf aria-hidden="true" className={classNames(styles.bowtie, styles.left)} />
         )}
         {resourceType !== "sources" && (
-          <img src="/images/bowtie-half.svg" alt="Right Bowtie" className={classNames(styles.bowtie, styles.right)} />
+          <BowtieHalf aria-hidden="true" className={classNames(styles.bowtie, styles.right)} />
         )}
         <img
           className={styles.octavia}
           src={`/images/octavia/empty-${resourceType}.png`}
-          alt="Octavia"
+          alt=""
           resource={resourceType}
         />
       </div>
       <Button onClick={onCreateClick} size="lg" data-id={`new-${singularResourceType}`}>
-        <FormattedMessage id={buttonMessageId} />
+        {buttonLabel}
       </Button>
     </div>
   );

airbyte-webapp/src/locales/en.json

@@ -247,6 +247,7 @@
   "sources.full_refresh": "Full refresh",
   "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",
@@ -310,6 +311,7 @@
 
   "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",
@@ -361,6 +363,7 @@
   "connection.catalogTree.destinationSchema": "'<destination schema>",
 
   "connection.newConnection": "New connection",
+  "connection.createFirst": "Create your first connection",
   "connection.newConnectionTitle": "New connection",
   "connection.noConnections": "Connection list is empty",
   "connection.disabledConnection": "Disabled connection",

airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { Suspense } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
 import { LoadingPage, MainPageWithScroll } from "components";
@@ -18,6 +18,7 @@ import ConnectionsTable from "./components/ConnectionsTable";
 
 const AllConnectionsPage: React.FC = () => {
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
 
   useTrackPage(PageTrackingCodes.CONNECTIONS_LIST);
   const { connections } = useConnectionList();
@@ -43,7 +44,11 @@ const AllConnectionsPage: React.FC = () => {
           <ConnectionsTable connections={connections} />
         </MainPageWithScroll>
       ) : (
-        <EmptyResourceListView resourceType="connections" onCreateClick={onCreateClick} />
+        <EmptyResourceListView
+          resourceType="connections"
+          onCreateClick={onCreateClick}
+          buttonLabel={formatMessage({ id: "connection.createFirst" })}
+        />
       )}
     </Suspense>
   );

airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
 import { EmptyResourceListView } from "components/EmptyResourceListView";
@@ -18,6 +18,7 @@ import DestinationsTable from "./components/DestinationsTable";
 
 const AllDestinationsPage: React.FC = () => {
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   const { destinations } = useDestinationList();
   useTrackPage(PageTrackingCodes.DESTINATION_LIST);
 
@@ -45,7 +46,11 @@ const AllDestinationsPage: React.FC = () => {
       <DestinationsTable destinations={destinations} />
     </MainPageWithScroll>
   ) : (
-    <EmptyResourceListView resourceType="destinations" onCreateClick={onCreateDestination} />
+    <EmptyResourceListView
+      resourceType="destinations"
+      onCreateClick={onCreateDestination}
+      buttonLabel={formatMessage({ id: "destinations.createFirst" })}
+    />
   );
 };
 

airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
 import { EmptyResourceListView } from "components/EmptyResourceListView";
@@ -18,6 +18,7 @@ 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}`);
@@ -38,7 +39,11 @@ const AllSourcesPage: React.FC = () => {
       <SourcesTable sources={sources} />
     </MainPageWithScroll>
   ) : (
-    <EmptyResourceListView resourceType="sources" onCreateClick={onCreateSource} />
+    <EmptyResourceListView
+      resourceType="sources"
+      onCreateClick={onCreateSource}
+      buttonLabel={formatMessage({ id: "sources.createFirst" })}
+    />
   );
 };