Add links to demo page (airbytehq#18828)

Author: Tim Roes

airbyte-webapp/src/components/common/EmptyResourceListView/EmptyResourceListView.module.scss

@@ -1,4 +1,5 @@
 @use "scss/colors";
+@use "scss/variables";
 
 .container {
   display: flex;
@@ -42,3 +43,7 @@
     left: 0;
   }
 }
+
+.footer {
+  margin-top: variables.$spacing-xl;
+}

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

@@ -12,12 +12,14 @@ interface EmptyResourceListViewProps {
   buttonLabel: string;
   resourceType: "connections" | "destinations" | "sources";
   onCreateClick: () => void;
+  footer?: React.ReactNode;
 }
 
 export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({
   resourceType,
   onCreateClick,
   buttonLabel,
+  footer,
 }) => {
   const { headingMessageId, singularResourceType } = useMemo(() => {
     const singularResourceType = resourceType.substring(0, resourceType.length - 1);
@@ -50,6 +52,7 @@ export const EmptyResourceListView: React.FC<EmptyResourceListViewProps> = ({
       <Button onClick={onCreateClick} size="lg" data-id={`new-${singularResourceType}`}>
         {buttonLabel}
       </Button>
+      {footer && <div className={styles.footer}>{footer}</div>}
     </div>
   );
 };

airbyte-webapp/src/locales/en.json

@@ -17,11 +17,12 @@
   "sidebar.resources": "Resources",
   "sidebar.documentation": "Documentation",
   "sidebar.joinSlack": "Join our Slack",
-  "sidebar.status": "Airbyte status",
+  "sidebar.status": "Airbyte Status",
   "sidebar.chat": "Chat with us",
   "sidebar.support": "Support",
   "sidebar.supportTicket": "Submit a Ticket",
   "sidebar.recipes": "Tutorials - Use cases",
+  "sidebar.demo": "Explore our demo",
 
   "form.continue": "Continue",
   "form.error": "Error: {message}",
@@ -334,6 +335,7 @@
   "syncMode.full_refresh": "Full refresh",
   "syncMode.incremental": "Incremental",
 
+  "connection.emptyStateFooter": "or play around in our <demoLnk>demo instance</demoLnk>.",
   "connection.resetModalTitle": "Stream configuration changed",
   "connection.streamResetHint": "Due to changes in the stream configuration, we recommend a data reset. A reset will delete data in the destination of the affected streams and then re-sync that data. Skipping the reset is discouraged and might lead to unexpected behavior.",
   "connection.streamFullResetHint": "Due to changes in the stream configuration, we recommend a data reset. A reset will delete data in the destination of the affected streams and then re-sync that data. Skipping the reset is discouraged and might lead to unexpected behavior.",

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -1,6 +1,6 @@
 import { faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
-import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faDesktop, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
@@ -23,7 +23,6 @@ import ChatIcon from "views/layout/SideBar/components/ChatIcon";
 import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
 import DestinationIcon from "views/layout/SideBar/components/DestinationIcon";
 import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon";
-import RecipesIcon from "views/layout/SideBar/components/RecipesIcon";
 import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import { SidebarDropdownMenu, SidebarDropdownMenuItemType } from "views/layout/SideBar/components/SidebarDropdownMenu";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
@@ -129,9 +128,9 @@ const SideBar: React.FC = () => {
               },
               {
                 type: SidebarDropdownMenuItemType.LINK,
-                href: links.tutorialLink,
-                icon: <RecipesIcon />,
-                displayName: <FormattedMessage id="sidebar.recipes" />,
+                href: links.demoLink,
+                icon: <FontAwesomeIcon icon={faDesktop} />,
+                displayName: <FormattedMessage id="sidebar.demo" />,
               },
             ]}
           />

airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.module.scss

@@ -0,0 +1,10 @@
+@use "scss/colors";
+
+.link {
+  color: colors.$dark-blue;
+
+  &:hover,
+  &:focus {
+    color: colors.$blue-400;
+  }
+}

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

@@ -12,8 +12,10 @@ import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
+import { links } from "utils/links";
 
 import { RoutePaths } from "../../../routePaths";
+import styles from "./AllConnectionsPage.module.scss";
 import ConnectionsTable from "./components/ConnectionsTable";
 
 const AllConnectionsPage: React.FC = () => {
@@ -48,6 +50,18 @@ const AllConnectionsPage: React.FC = () => {
           resourceType="connections"
           onCreateClick={onCreateClick}
           buttonLabel={formatMessage({ id: "connection.createFirst" })}
+          footer={
+            <FormattedMessage
+              id="connection.emptyStateFooter"
+              values={{
+                demoLnk: (children: React.ReactNode) => (
+                  <a href={links.demoLink} target="_blank" rel="noreferrer noopener" className={styles.link}>
+                    {children}
+                  </a>
+                ),
+              }}
+            />
+          }
         />
       )}
     </Suspense>