feat(onboarding): adds framework and some steps for onboarding steps UI

datahub-project · Dec 6, 2022 · 5956960 · 5956960
1 parent 0f19ad7
commit 5956960
Show file tree

Hide file tree

Showing 52 changed files with 1,482 additions and 198 deletions.
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -85,6 +85,7 @@
         "react-syntax-highlighter": "^15.4.4",
         "react-timezone-select": "^1.1.15",
         "react-visibility-sensor": "^5.1.1",
+        "reactour": "1.18.7",
         "sinon": "^11.1.1",
         "start-server-and-test": "1.12.2",
         "styled-components": "^5.2.1",

diff --git a/datahub-web-react/src/app/ProtectedRoutes.tsx b/datahub-web-react/src/app/ProtectedRoutes.tsx
@@ -4,21 +4,24 @@ import { Layout } from 'antd';
 import { HomePage } from './home/HomePage';
 import AppConfigProvider from '../AppConfigProvider';
 import { SearchRoutes } from './SearchRoutes';
+import { EducationStepsProvider } from '../providers/EducationStepsProvider';
 
 /**
  * Container for all views behind an authentication wall.
  */
 export const ProtectedRoutes = (): JSX.Element => {
     return (
         <AppConfigProvider>
-            <Layout style={{ height: '100%', width: '100%' }}>
-                <Layout>
-                    <Switch>
-                        <Route exact path="/" render={() => <HomePage />} />
-                        <Route path="/*" render={() => <SearchRoutes />} />
-                    </Switch>
+            <EducationStepsProvider>
+                <Layout style={{ height: '100%', width: '100%' }}>
+                    <Layout>
+                        <Switch>
+                            <Route exact path="/" render={() => <HomePage />} />
+                            <Route path="/*" render={() => <SearchRoutes />} />
+                        </Switch>
+                    </Layout>
                 </Layout>
-            </Layout>
+            </EducationStepsProvider>
         </AppConfigProvider>
     );
 };
diff --git a/datahub-web-react/src/app/domain/DomainsList.tsx b/datahub-web-react/src/app/domain/DomainsList.tsx
@@ -14,6 +14,8 @@ import { SearchBar } from '../search/SearchBar';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { scrollToTop } from '../shared/searchUtils';
 import { addToListDomainsCache, removeFromListDomainsCache } from './utils';
+import { OnboardingTour } from '../onboarding/OnboardingTour';
+import { DOMAINS_INTRO_ID, DOMAINS_CREATE_DOMAIN_ID } from '../onboarding/config/DomainsOnboardingConfig';
 
 const DomainsContainer = styled.div``;
 
@@ -87,9 +89,10 @@ export const DomainsList = () => {
         <>
             {!data && loading && <Message type="loading" content="Loading domains..." />}
             {error && <Message type="error" content="Failed to load domains! An unexpected error occurred." />}
+            <OnboardingTour stepIds={[DOMAINS_INTRO_ID, DOMAINS_CREATE_DOMAIN_ID]} />
             <DomainsContainer>
                 <TabToolbar>
-                    <Button type="text" onClick={() => setIsCreatingDomain(true)}>
+                    <Button id={DOMAINS_CREATE_DOMAIN_ID} type="text" onClick={() => setIsCreatingDomain(true)}>
                         <PlusOutlined /> New Domain
                     </Button>
                     <SearchBar

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router';
 import { EntityType, Exact } from '../../../../../types.generated';
 import { Message } from '../../../../shared/Message';
-import { getDataForEntityType, getEntityPath, useRoutedTab } from './utils';
+import { getDataForEntityType, getEntityPath, getOnboardingStepIdsForEntityType, useRoutedTab } from './utils';
 import {
     EntitySidebarSection,
     EntitySubHeaderSection,
@@ -34,6 +34,7 @@ import { combineEntityDataWithSiblings, useIsSeparateSiblingsMode } from '../../
 import { EntityActionItem } from '../../entity/EntityActions';
 import { ErrorSection } from '../../../../shared/error/ErrorSection';
 import { EntityHead } from '../../../../shared/EntityHead';
+import { OnboardingTour } from '../../../../onboarding/OnboardingTour';
 
 type Props<T, U> = {
     urn: string;
@@ -164,6 +165,7 @@ export const EntityProfile = <T, U>({
     const [sidebarWidth, setSidebarWidth] = useState(window.innerWidth * 0.25);
     const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
     const [shouldUpdateBrowser, setShouldUpdateBrowser] = useState(false);
+    const stepIds: string[] = getOnboardingStepIdsForEntityType(entityType);
 
     function refreshBrowser() {
         setShouldUpdateBrowser(true);
@@ -298,6 +300,7 @@ export const EntityProfile = <T, U>({
             }}
         >
             <>
+                <OnboardingTour stepIds={stepIds} />
                 <EntityHead />
                 {customNavBar}
                 {showBrowseBar && !customNavBar && <EntityProfileNavBar urn={urn} entityType={entityType} />}

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Tabs } from 'antd';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { EntityTab } from '../../../types';
 import { useBaseEntity, useEntityData, useRouteToTab } from '../../../EntityContext';

diff --git a/...eb-react/src/app/entity/shared/containers/profile/sidebar/Domain/SidebarDomainSection.tsx b/...eb-react/src/app/entity/shared/containers/profile/sidebar/Domain/SidebarDomainSection.tsx
@@ -7,6 +7,7 @@ import { SidebarHeader } from '../SidebarHeader';
 import { SetDomainModal } from './SetDomainModal';
 import { useUnsetDomainMutation } from '../../../../../../../graphql/mutations.generated';
 import { DomainLink } from '../../../../../../shared/tags/DomainLink';
+import { ENTITY_PROFILE_DOMAINS_ID } from '../../../../../../onboarding/config/EntityProfileOnboardingConfig';
 
 export const SidebarDomainSection = () => {
     const { entityData } = useEntityData();
@@ -45,7 +46,7 @@ export const SidebarDomainSection = () => {
     };
 
     return (
-        <div>
+        <div id={ENTITY_PROFILE_DOMAINS_ID}>
             <SidebarHeader title="Domain" />
             <div>
                 {domain && (

diff --git a/...-react/src/app/entity/shared/containers/profile/sidebar/Ownership/SidebarOwnerSection.tsx b/...-react/src/app/entity/shared/containers/profile/sidebar/Ownership/SidebarOwnerSection.tsx
@@ -6,6 +6,7 @@ import { EMPTY_MESSAGES } from '../../../../constants';
 import { useEntityData, useMutationUrn, useRefetch } from '../../../../EntityContext';
 import { SidebarHeader } from '../SidebarHeader';
 import { EditOwnersModal } from './EditOwnersModal';
+import { ENTITY_PROFILE_OWNERS_ID } from '../../../../../../onboarding/config/EntityProfileOnboardingConfig';
 
 export const SidebarOwnerSection = ({ properties }: { properties?: any }) => {
     const { entityType, entityData } = useEntityData();
@@ -16,7 +17,7 @@ export const SidebarOwnerSection = ({ properties }: { properties?: any }) => {
     const ownersEmpty = !entityData?.ownership?.owners?.length;
 
     return (
-        <div>
+        <div id={ENTITY_PROFILE_OWNERS_ID}>
             <SidebarHeader title="Owners" />
             <div>
                 {entityData?.ownership?.owners?.map((owner) => (

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarTagsSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarTagsSection.tsx
@@ -4,6 +4,10 @@ import styled from 'styled-components';
 import TagTermGroup from '../../../../../shared/tags/TagTermGroup';
 import { SidebarHeader } from './SidebarHeader';
 import { useEntityData, useMutationUrn, useRefetch } from '../../../EntityContext';
+import {
+    ENTITY_PROFILE_GLOSSARY_TERMS_ID,
+    ENTITY_PROFILE_TAGS_ID,
+} from '../../../../../onboarding/config/EntityProfileOnboardingConfig';
 
 const TermSection = styled.div`
     margin-top: 20px;
@@ -21,27 +25,31 @@ export const SidebarTagsSection = ({ properties }: { properties?: any }) => {
 
     return (
         <div>
-            <SidebarHeader title="Tags" />
-            <TagTermGroup
-                editableTags={entityData?.globalTags}
-                canAddTag={canAddTag}
-                canRemove
-                showEmptyMessage
-                entityUrn={mutationUrn}
-                entityType={entityType}
-                refetch={refetch}
-            />
-            <TermSection>
-                <SidebarHeader title="Glossary Terms" />
+            <span id={ENTITY_PROFILE_TAGS_ID}>
+                <SidebarHeader title="Tags" />
                 <TagTermGroup
-                    editableGlossaryTerms={entityData?.glossaryTerms}
-                    canAddTerm={canAddTerm}
+                    editableTags={entityData?.globalTags}
+                    canAddTag={canAddTag}
                     canRemove
                     showEmptyMessage
                     entityUrn={mutationUrn}
                     entityType={entityType}
                     refetch={refetch}
                 />
+            </span>
+            <TermSection>
+                <span id={ENTITY_PROFILE_GLOSSARY_TERMS_ID}>
+                    <SidebarHeader title="Glossary Terms" />
+                    <TagTermGroup
+                        editableGlossaryTerms={entityData?.glossaryTerms}
+                        canAddTerm={canAddTerm}
+                        canRemove
+                        showEmptyMessage
+                        entityUrn={mutationUrn}
+                        entityType={entityType}
+                        refetch={refetch}
+                    />
+                </span>
             </TermSection>
         </div>
     );

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/utils.ts b/datahub-web-react/src/app/entity/shared/containers/profile/utils.ts
@@ -6,6 +6,17 @@ import { useEntityRegistry } from '../../../../useEntityRegistry';
 import EntityRegistry from '../../../EntityRegistry';
 import { EntityTab, GenericEntityProperties } from '../../types';
 import { useIsSeparateSiblingsMode, SEPARATE_SIBLINGS_URL_PARAM } from '../../siblingUtils';
+import {
+    ENTITY_PROFILE_DOCUMENTATION_ID,
+    ENTITY_PROFILE_DOMAINS_ID,
+    ENTITY_PROFILE_ENTITIES_ID,
+    ENTITY_PROFILE_GLOSSARY_TERMS_ID,
+    ENTITY_PROFILE_LINEAGE_ID,
+    ENTITY_PROFILE_OWNERS_ID,
+    ENTITY_PROFILE_PROPERTIES_ID,
+    ENTITY_PROFILE_SCHEMA_ID,
+    ENTITY_PROFILE_TAGS_ID,
+} from '../../../../onboarding/config/EntityProfileOnboardingConfig';
 
 export function getDataForEntityType<T>({
     data: entityData,
@@ -107,3 +118,42 @@ export function useEntityQueryParams() {
 
     return response;
 }
+
+export function getOnboardingStepIdsForEntityType(entityType: EntityType): string[] {
+    switch (entityType) {
+        case EntityType.Chart:
+            return [
+                ENTITY_PROFILE_DOCUMENTATION_ID,
+                ENTITY_PROFILE_PROPERTIES_ID,
+                ENTITY_PROFILE_LINEAGE_ID,
+                ENTITY_PROFILE_TAGS_ID,
+                ENTITY_PROFILE_GLOSSARY_TERMS_ID,
+                ENTITY_PROFILE_OWNERS_ID,
+                ENTITY_PROFILE_DOMAINS_ID,
+            ];
+        case EntityType.Container:
+            return [
+                ENTITY_PROFILE_ENTITIES_ID,
+                ENTITY_PROFILE_DOCUMENTATION_ID,
+                ENTITY_PROFILE_PROPERTIES_ID,
+                ENTITY_PROFILE_OWNERS_ID,
+                ENTITY_PROFILE_TAGS_ID,
+                ENTITY_PROFILE_GLOSSARY_TERMS_ID,
+                ENTITY_PROFILE_DOMAINS_ID,
+            ];
+        case EntityType.Dataset:
+            return [
+                ENTITY_PROFILE_SCHEMA_ID,
+                ENTITY_PROFILE_DOCUMENTATION_ID,
+                ENTITY_PROFILE_PROPERTIES_ID,
+                ENTITY_PROFILE_LINEAGE_ID,
+                ENTITY_PROFILE_OWNERS_ID,
+                ENTITY_PROFILE_TAGS_ID,
+                ENTITY_PROFILE_GLOSSARY_TERMS_ID,
+                ENTITY_PROFILE_DOMAINS_ID,
+            ];
+            break;
+        default:
+            return [];
+    }
+}
diff --git a/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx b/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
@@ -15,6 +15,12 @@ import { Message } from '../shared/Message';
 import { sortGlossaryTerms } from '../entity/glossaryTerm/utils';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { sortGlossaryNodes } from '../entity/glossaryNode/utils';
+import {
+    BUSINESS_GLOSSARY_INTRO_ID,
+    BUSINESS_GLOSSARY_CREATE_TERM_ID,
+    BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID,
+} from '../onboarding/config/BusinessGlossaryOnboardingConfig';
+import { OnboardingTour } from '../onboarding/OnboardingTour';
 
 export const HeaderWrapper = styled(TabToolbar)`
     padding: 15px 45px 10px 24px;
@@ -72,6 +78,13 @@ function BusinessGlossaryPage() {
 
     return (
         <>
+            <OnboardingTour
+                stepIds={[
+                    BUSINESS_GLOSSARY_INTRO_ID,
+                    BUSINESS_GLOSSARY_CREATE_TERM_ID,
+                    BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID,
+                ]}
+            />
             <GlossaryWrapper>
                 {(termsLoading || nodesLoading) && (
                     <Message type="loading" content="Loading Glossary..." style={{ marginTop: '10%' }} />
@@ -94,10 +107,18 @@ function BusinessGlossaryPage() {
                     <HeaderWrapper>
                         <Typography.Title level={3}>Business Glossary</Typography.Title>
                         <div>
-                            <Button type="text" onClick={() => setIsCreateTermModalVisible(true)}>
+                            <Button
+                                id={BUSINESS_GLOSSARY_CREATE_TERM_ID}
+                                type="text"
+                                onClick={() => setIsCreateTermModalVisible(true)}
+                            >
                                 <PlusOutlined /> Add Term
                             </Button>
-                            <Button type="text" onClick={() => setIsCreateNodeModalVisible(true)}>
+                            <Button
+                                id={BUSINESS_GLOSSARY_CREATE_TERM_GROUP_ID}
+                                type="text"
+                                onClick={() => setIsCreateNodeModalVisible(true)}
+                            >
                                 <PlusOutlined /> Add Term Group
                             </Button>
                         </div>