Add use-case links to onboarding (#10657)

* Add use-case links to onboarding

* Add new onboarding links

Author: Tim Roes

airbyte-webapp/src/config/casesConfig.json

@@ -1,7 +1,7 @@
-[
-  "replicateMySQL",
-  "consolidateMarketing",
-  "consolidatePayment",
-  "buildDashboard",
-  "zoomCalls"
-]
+{
+  "singleCustomerView": "https://airbyte.com/recipes/single-customer-view",
+  "buildDashboard": "https://airbyte.com/recipes/build-a-github-activity-dashboard-for-your-project",
+  "replicatePostgres": "https://airbyte.com/recipes/postgres-replication",
+  "syncMySQLKafka": "https://airbyte.com/recipes/mysql-cdc-to-kafka",
+  "mailchimpSnowflake": "https://airbyte.com/recipes/data-ingestion-pipeline-mailchimp-snowflake"
+}

airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx

@@ -7,7 +7,8 @@ import casesConfig from "config/casesConfig.json";
 type Context = {
   feedbackPassed?: boolean;
   passFeedback: () => void;
-  useCases?: string[];
+  visibleUseCases?: string[];
+  useCaseLinks: Record<string, string>;
   skipCase: (skipId: string) => void;
 };
 
@@ -21,21 +22,24 @@ export const OnboardingServiceProvider: React.FC = ({ children }) => {
     `${workspace.workspaceId}/passFeedback`,
     false
   );
-  const [useCases, setUseCases] = useLocalStorage<string[]>(
-    `${workspace.workspaceId}/useCases`,
-    casesConfig
+  const [skippedUseCases, setSkippedUseCases] = useLocalStorage<string[]>(
+    `${workspace.workspaceId}/skippedUseCases`,
+    []
   );
 
   const ctx = useMemo<Context>(
     () => ({
       feedbackPassed,
       passFeedback: () => setFeedbackPassed(true),
-      useCases,
+      visibleUseCases: Object.keys(casesConfig).filter(
+        (useCase) => !skippedUseCases?.includes(useCase)
+      ),
+      useCaseLinks: casesConfig,
       skipCase: (skipId: string) =>
-        setUseCases(useCases?.filter((item) => item !== skipId)),
+        setSkippedUseCases([...(skippedUseCases ?? []), skipId]),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [feedbackPassed, useCases]
+    [feedbackPassed, skippedUseCases]
   );
 
   return (

airbyte-webapp/src/locales/en.json

@@ -214,11 +214,11 @@
   "onboarding.createConnection.text": "Connections represent a sync between a source and a destination.",
   "onboarding.synchronizationProgress": "{source}{destination} = <sync>Synchronization</sync> in progress",
   "onboarding.useCases": "Enable <name>popular use cases</name>",
-  "onboarding.replicateMySQL": "Replicate your MySQL database to Postgres with log-based CDC",
-  "onboarding.consolidateMarketing": "Consolidate your marketing data to compute the CAC for your paid customers",
-  "onboarding.consolidatePayment": "Consolidate your payment data to compute your LTV",
-  "onboarding.buildDashboard": "Build an activity dashboard for your engineering project",
-  "onboarding.zoomCalls": "Visualize the time spent by your team in Zoom calls ",
+  "onboarding.useCase.singleCustomerView": "Build a single customer view",
+  "onboarding.useCase.replicatePostgres": "Replicate your data between PostgreSQL databases",
+  "onboarding.useCase.syncMySQLKafka": "Sync MySQL CDC to Kafka using Change Data Capture",
+  "onboarding.useCase.mailchimpSnowflake": "Build a data ingestion pipeline from Mailchimp to Snowflake",
+  "onboarding.useCase.buildDashboard": "Build an activity dashboard for your engineering project",
   "onboarding.skip": "Skip",
   "onboarding.closeOnboarding": "Close onboarding",
   "onboarding.syncCompleted": "Your first sync has been successfully completed!",

airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx

@@ -41,7 +41,8 @@ const FinalStep: React.FC<FinalStepProps> = ({ connectionId, onSync }) => {
   const {
     feedbackPassed,
     passFeedback,
-    useCases,
+    visibleUseCases,
+    useCaseLinks,
     skipCase,
   } = useOnboardingService();
   const connection = useResource(ConnectionResource.detailShape(), {
@@ -102,15 +103,15 @@ const FinalStep: React.FC<FinalStepProps> = ({ connectionId, onSync }) => {
         />
       </Title>
 
-      {useCases &&
-        useCases.map((item, key) => (
-          <UseCaseBlock
-            key={item}
-            count={key + 1}
-            onSkip={skipCase}
-            id={item}
-          />
-        ))}
+      {visibleUseCases?.map((item, key) => (
+        <UseCaseBlock
+          key={item}
+          count={key + 1}
+          href={useCaseLinks[item]}
+          onSkip={skipCase}
+          id={item}
+        />
+      ))}
 
       {isOpen ? (
         <SyncCompletedModal

airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx

@@ -7,6 +7,7 @@ import { FormattedMessage } from "react-intl";
 type UseCaseBlockProps = {
   count: number;
   id: string;
+  href: string;
   onSkip: (id: string) => void;
 };
 
@@ -36,19 +37,44 @@ const Num = styled.div`
   text-align: center;
 `;
 
-const SkipButton = styled.div`
+const SkipButton = styled.button`
+  background: none;
+  border: none;
   color: ${({ theme }) => theme.lightTextColor};
   font-size: 16px;
   line-height: 28px;
   cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover,
+  &:focus-visible {
+    color: ${({ theme }) => theme.blackColor};
+  }
+`;
+
+const Link = styled.a`
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
 `;
 
-const UseCaseBlock: React.FC<UseCaseBlockProps> = ({ id, count, onSkip }) => {
+const UseCaseBlock: React.FC<UseCaseBlockProps> = ({
+  id,
+  count,
+  onSkip,
+  href,
+}) => {
   return (
     <Block>
       <div>
         <Num>{count}</Num>
-        <FormattedMessage id={`onboarding.${id}`} />
+        <Link href={href} target="_blank">
+          <FormattedMessage id={`onboarding.useCase.${id}`} />
+        </Link>
       </div>
       <SkipButton onClick={() => onSkip(id)}>
         <FormattedMessage id="onboarding.skip" />