feat(UI): Add "Getting Started" Modal on fresh deployment (#3773)

datahub-web-react/src/app/home/GettingStartedModal.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Divider, Image, Modal, Steps, Typography } from 'antd';
+import pipinstall from '../../images/pipinstall.png';
+import recipeExample from '../../images/recipe-example.png';
+import ingestExample from '../../images/ingest-example.png';
+
+const StyledModal = styled(Modal)`
+    top: 20px;
+`;
+
+const StepImage = styled(Image)`
+    width: auto;
+    object-fit: contain;
+    margin-right: 10px;
+    background-color: transparent;
+    border-radius: 8px;
+`;
+
+const GettingStartedParagraph = styled(Typography.Paragraph)`
+    font-size: 14px;
+    && {
+        margin-bottom: 28px;
+    }
+`;
+
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+};
+
+export const GettingStartedModal = ({ visible, onClose }: Props) => {
+    return (
+        <StyledModal onCancel={onClose} width={800} visible={visible} footer={null}>
+            <Typography.Title level={3}>Welcome to DataHub</Typography.Title>
+            <Divider />
+            <Typography.Title level={5}>Getting Started</Typography.Title>
+            <GettingStartedParagraph>
+                It looks like you&apos;re new to DataHub - Welcome! To start ingesting metadata, follow these steps or
+                check out the full{' '}
+                <a href="https://datahubproject.io/docs/metadata-ingestion" target="_blank" rel="noreferrer">
+                    Metadata Ingestion Quickstart Guide.
+                </a>
+            </GettingStartedParagraph>
+            <Steps current={-1} direction="vertical">
+                <Steps.Step
+                    title="Install the DataHub CLI"
+                    description={
+                        <>
+                            <Typography.Paragraph>
+                                From your command line, install the acryl-datahub package from PyPI.
+                            </Typography.Paragraph>
+                            <StepImage preview={false} height={52} src={pipinstall} />
+                        </>
+                    }
+                />
+                <Steps.Step
+                    title="Create a Recipe File"
+                    description={
+                        <>
+                            <Typography.Paragraph>
+                                Define a YAML file defining the source from which you wish to extract metadata. This is
+                                where you&apos;ll tell DataHub how to connect to your data source and configure the
+                                metadata to be extracted.
+                            </Typography.Paragraph>
+                            <StepImage preview={false} height={300} src={recipeExample} />
+                        </>
+                    }
+                />
+                <Steps.Step
+                    title="Run 'datahub ingest'"
+                    description={
+                        <>
+                            <Typography.Paragraph>
+                                Execute the datahub ingest command from your command line to ingest metadata into
+                                DataHub.
+                            </Typography.Paragraph>
+                            <StepImage preview={false} height={52} src={ingestExample} />
+                        </>
+                    }
+                />
+            </Steps>
+            <Typography.Paragraph>
+                That&apos;s it! Once you&apos;ve ingested metadata, you can begin to search, document, tag, and assign
+                ownership for your data assets.
+            </Typography.Paragraph>
+            <Typography.Title level={5}>Still have questions?</Typography.Title>
+            <Typography.Paragraph>
+                Join our <a href="https://slack.datahubproject.io/">Slack</a> to ask questions, provide feedback and
+                more.
+            </Typography.Paragraph>
+        </StyledModal>
+    );
+};

datahub-web-react/src/app/home/HomePageRecommendations.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Divider, Typography } from 'antd';
+import { Button, Divider, Empty, Typography } from 'antd';
+import { RocketOutlined } from '@ant-design/icons';
 import { RecommendationModule as RecommendationModuleType, ScenarioType } from '../../types.generated';
 import { useListRecommendationsQuery } from '../../graphql/recommendations.generated';
 import { RecommendationModule } from '../recommendations/RecommendationModule';
 import { BrowseEntityCard } from '../search/BrowseEntityCard';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { useGetEntityCountsQuery } from '../../graphql/app.generated';
+import { GettingStartedModal } from './GettingStartedModal';
+import { ANTD_GRAY } from '../entity/shared/constants';
 
 const RecommendationsContainer = styled.div`
     margin-top: 32px;
@@ -38,6 +41,22 @@ const BrowseCardContainer = styled.div`
     flex-wrap: wrap;
 `;
 
+const ConnectSourcesButton = styled(Button)`
+    margin: 16px;
+`;
+
+const NoMetadataEmpty = styled(Empty)`
+    font-size: 18px;
+    color: ${ANTD_GRAY[8]};
+`;
+
+const NoMetadataContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
 type Props = {
     userUrn: string;
 };
@@ -46,6 +65,7 @@ export const HomePageRecommendations = ({ userUrn }: Props) => {
     // Entity Types
     const entityRegistry = useEntityRegistry();
     const browseEntityList = entityRegistry.getBrowseEntityTypes();
+    const [showGettingStartedModal, setShowGettingStartedModal] = useState(false);
 
     const { data: entityCountData } = useGetEntityCountsQuery({
         variables: {
@@ -75,12 +95,24 @@ export const HomePageRecommendations = ({ userUrn }: Props) => {
     });
     const recommendationModules = data?.listRecommendations?.modules;
 
+    // Determine whether metadata has been ingested yet.
+    const hasLoadedEntityCounts = orderedEntityCounts && orderedEntityCounts.length > 0;
+    const hasIngestedMetadata =
+        orderedEntityCounts && orderedEntityCounts.filter((entityCount) => entityCount.count > 0).length > 0;
+
+    useEffect(() => {
+        if (hasLoadedEntityCounts && !hasIngestedMetadata) {
+            setShowGettingStartedModal(true);
+        }
+    }, [hasLoadedEntityCounts, hasIngestedMetadata]);
+
     return (
         <RecommendationsContainer>
             {orderedEntityCounts && orderedEntityCounts.length > 0 && (
                 <RecommendationContainer>
                     <RecommendationTitle level={4}>Explore your Metadata</RecommendationTitle>
                     <ThinDivider />
+                    {hasIngestedMetadata ? (
                         <BrowseCardContainer>
                             {orderedEntityCounts.map(
                                 (entityCount) =>
@@ -94,6 +126,14 @@ export const HomePageRecommendations = ({ userUrn }: Props) => {
                                     ),
                             )}
                         </BrowseCardContainer>
+                    ) : (
+                        <NoMetadataContainer>
+                            <NoMetadataEmpty description="No Metadata Found 😢" />
+                            <ConnectSourcesButton onClick={() => setShowGettingStartedModal(true)}>
+                                <RocketOutlined /> Connect your data sources
+                            </ConnectSourcesButton>
+                        </NoMetadataContainer>
+                    )}
                 </RecommendationContainer>
             )}
             {recommendationModules &&
@@ -109,6 +149,7 @@ export const HomePageRecommendations = ({ userUrn }: Props) => {
                         />
                     </RecommendationContainer>
                 ))}
+            <GettingStartedModal onClose={() => setShowGettingStartedModal(false)} visible={showGettingStartedModal} />
         </RecommendationsContainer>
     );
 };

datahub-web-react/src/conf/theme/theme_light.config.json

@@ -34,17 +34,22 @@
         "menu": {
             "items": [
                 {
-                    "label": "DataHub Project",
+                    "label": "Project",
                     "path": "https://datahubproject.io",
                     "shouldOpenInNewTab": true
                 },
                 {
-                    "label": "DataHub Docs",
+                    "label": "Docs",
                     "path": "https://datahubproject.io/docs",
                     "shouldOpenInNewTab": true
                 },
                 {
-                    "label": "DataHub GitHub",
+                    "label": "Releases",
+                    "path": "https://datahubproject.io/docs/releases/",
+                    "shouldOpenInNewTab": true
+                },
+                {
+                    "label": "GitHub",
                     "path": "https://github.com/linkedin/datahub",
                     "shouldOpenInNewTab": true
                 }