diff --git a/datahub-web-react/src/app/home/GettingStartedModal.tsx b/datahub-web-react/src/app/home/GettingStartedModal.tsx new file mode 100644 index 0000000000..9354239f6f --- /dev/null +++ b/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 ( + + Welcome to DataHub + + Getting Started + + It looks like you're new to DataHub - Welcome! To start ingesting metadata, follow these steps or + check out the full{' '} + + Metadata Ingestion Quickstart Guide. + + + + + + From your command line, install the acryl-datahub package from PyPI. + + + + } + /> + + + Define a YAML file defining the source from which you wish to extract metadata. This is + where you'll tell DataHub how to connect to your data source and configure the + metadata to be extracted. + + + + } + /> + + + Execute the datahub ingest command from your command line to ingest metadata into + DataHub. + + + + } + /> + + + That's it! Once you've ingested metadata, you can begin to search, document, tag, and assign + ownership for your data assets. + + Still have questions? + + Join our Slack to ask questions, provide feedback and + more. + + + ); +}; diff --git a/datahub-web-react/src/app/home/HomePageRecommendations.tsx b/datahub-web-react/src/app/home/HomePageRecommendations.tsx index bd8d285629..82f77c7115 100644 --- a/datahub-web-react/src/app/home/HomePageRecommendations.tsx +++ b/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,25 +95,45 @@ 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 ( {orderedEntityCounts && orderedEntityCounts.length > 0 && ( Explore your Metadata - - {orderedEntityCounts.map( - (entityCount) => - entityCount && - entityCount.count !== 0 && ( - - ), - )} - + {hasIngestedMetadata ? ( + + {orderedEntityCounts.map( + (entityCount) => + entityCount && + entityCount.count !== 0 && ( + + ), + )} + + ) : ( + + + setShowGettingStartedModal(true)}> + Connect your data sources + + + )} )} {recommendationModules && @@ -109,6 +149,7 @@ export const HomePageRecommendations = ({ userUrn }: Props) => { /> ))} + setShowGettingStartedModal(false)} visible={showGettingStartedModal} /> ); }; diff --git a/datahub-web-react/src/conf/theme/theme_light.config.json b/datahub-web-react/src/conf/theme/theme_light.config.json index ae41629118..15bf42a771 100644 --- a/datahub-web-react/src/conf/theme/theme_light.config.json +++ b/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 } diff --git a/datahub-web-react/src/images/ingest-example.png b/datahub-web-react/src/images/ingest-example.png new file mode 100644 index 0000000000..2ac3f68f6e Binary files /dev/null and b/datahub-web-react/src/images/ingest-example.png differ diff --git a/datahub-web-react/src/images/pipinstall.png b/datahub-web-react/src/images/pipinstall.png new file mode 100644 index 0000000000..82265dfe07 Binary files /dev/null and b/datahub-web-react/src/images/pipinstall.png differ diff --git a/datahub-web-react/src/images/recipe-example.png b/datahub-web-react/src/images/recipe-example.png new file mode 100644 index 0000000000..d94eaaedcb Binary files /dev/null and b/datahub-web-react/src/images/recipe-example.png differ