Add link to data source in our docs

web/src/components/ui/list/ListEmptyStateWithButton.tsx

@@ -10,10 +10,24 @@ export const ListEmptyStateWithButton: React.FC<{
   description: string;
   onClick?: () => void;
   buttonText: string;
+  buttonPrefix?: React.ReactNode;
+  buttonSuffix?: React.ReactNode;
   loading?: boolean;
   linkButton?: string;
+  linkButtonTarget?: '_blank' | '_self';
 }> = React.memo(
-  ({ isAdmin = true, linkButton, title, buttonText, description, onClick, loading = false }) => {
+  ({
+    isAdmin = true,
+    buttonPrefix,
+    buttonSuffix,
+    linkButton,
+    title,
+    buttonText,
+    description,
+    onClick,
+    loading = false,
+    linkButtonTarget
+  }) => {
     return (
       <div className="flex h-full w-full flex-col">
         <div
@@ -21,7 +35,7 @@ export const ListEmptyStateWithButton: React.FC<{
           style={{
             marginTop: '25vh'
           }}>
-          <div className="flex w-[350px] flex-col justify-center space-y-3">
+          <div className="flex w-full max-w-[450px] min-w-[350px] flex-col justify-center space-y-3">
             <Title as="h4" className="leading-1.3 text-center [text-wrap:balance]">
               {title}
             </Title>
@@ -30,8 +44,13 @@ export const ListEmptyStateWithButton: React.FC<{
           </div>
 
           {isAdmin && (
-            <ButtonWrapper href={linkButton}>
-              <Button variant="default" prefix={<Plus />} loading={loading} onClick={onClick}>
+            <ButtonWrapper href={linkButton} target={linkButtonTarget}>
+              <Button
+                variant="default"
+                prefix={buttonPrefix || <Plus />}
+                suffix={buttonSuffix}
+                loading={loading}
+                onClick={onClick}>
                 {buttonText}
               </Button>
             </ButtonWrapper>
@@ -45,9 +64,14 @@ export const ListEmptyStateWithButton: React.FC<{
 const ButtonWrapper: React.FC<{
   children: React.ReactNode;
   href?: string;
-}> = ({ children, href }) => {
+  target?: '_blank' | '_self';
+}> = ({ children, href, target }) => {
   if (!href) return <>{children}</>;
-  return <Link href={href}>{children}</Link>;
+  return (
+    <Link href={href} target={target || '_self'}>
+      {children}
+    </Link>
+  );
 };
 
 ListEmptyStateWithButton.displayName = 'ListEmptyStateWithButton';

web/src/controllers/DatasetsListController/DatasetListContent.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import React, { useState, useMemo } from 'react';
-import { AppPageLayoutContent } from '@/components/ui/layouts/AppPageLayoutContent';
 import { Avatar } from '@/components/ui/avatar';
 import { formatDate } from '@/lib';
 import { BusterList, BusterListColumn, BusterListRow } from '@/components/ui/list';
-import { BusterRoutes, createBusterRoute } from '@/routes';
+import { BUSTER_DOCS_QUICKSTART, BusterRoutes, createBusterRoute } from '@/routes';
 import type { BusterDatasetListItem } from '@/api/asset_interfaces';
 import { ListEmptyStateWithButton } from '@/components/ui/list';
 import { useMemoizedFn } from '@/hooks';
 import { DatasetSelectedOptionPopup } from './DatasetSelectedPopup';
+import { ArrowUpRight, ExternalLink } from '@/components/ui/icons';
 
 const columns: BusterListColumn[] = [
   {
@@ -91,9 +91,13 @@ export const DatasetListContent: React.FC<{
               <ListEmptyStateWithButton
                 isAdmin={isAdmin}
                 title="You don't have any datasets yet."
-                buttonText="New dataset"
-                description="Datasets help you organize your data. Datasets will appear here when you create them."
-                onClick={onClickEmptyState}
+                buttonText="Link to docs"
+                linkButton={BUSTER_DOCS_QUICKSTART}
+                buttonPrefix={<></>}
+                buttonSuffix={<ArrowUpRight />}
+                linkButtonTarget="_blank"
+                description="Datasets help you organize your data and Buster uses them to help answer questions. Datasets will appear here when you create them. Currently, you can only create datasets through our CLI tool which you can read more about in our docs."
+                //  onClick={onClickEmptyState}
               />
             ),
           [isFetchedDatasets, isAdmin, onClickEmptyState]

web/src/controllers/DatasetsListController/DatasetsListController.tsx

@@ -48,7 +48,7 @@ export const DatasetsListController: React.FC<{}> = ({}) => {
         />
       }>
       <DatasetListContent
-        datasetsList={datasetsList || []}
+        datasetsList={[]}
         isFetchedDatasets={isFetchedDatasets}
         isAdmin={isAdmin}
         setOpenNewDatasetModal={setOpenDatasetModal}

web/src/routes/externalRoutes.ts

@@ -1,3 +1,4 @@
 export const BUSTER_HOME_PAGE = 'https://buster.so';
 export const BUSTER_DOCS_URL = 'https://docs.buster.so';
 export const BUSTER_GETTING_STARTED_URL = 'https://www.buster.so/get-started';
+export const BUSTER_DOCS_QUICKSTART = 'https://docs.buster.so/docs/getting-started/quickstart';