From b29fdd3ccc9e37d0fde4d9bb5dad9488a3ec766f Mon Sep 17 00:00:00 2001 From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com> Date: Thu, 13 Jan 2022 20:43:07 +0530 Subject: [PATCH] Enhanced Tour feature (#2082) * Enhanced Tour feature * Fix: #2182 - Tour steps getting skipped * Fix: #2180 - Stat links deactivated on browser back from Tour route * Addressing comments * Addressing comments * Adding license --- .../src/main/resources/ui/package.json | 2 +- .../DatasetDetails.component.tsx | 2 +- .../MyAssetStats/MyAssetStats.component.tsx | 4 +- .../ui/src/components/app-bar/Appbar.tsx | 301 ++++-------------- .../components/common/TabsPane/TabsPane.tsx | 6 +- .../components/nav-bar/NavBar.interface.ts | 29 ++ .../ui/src/components/nav-bar/NavBar.tsx | 221 +++++++++++++ .../resources/ui/src/components/tour/Tour.tsx | 204 +----------- .../src/constants/mockTourData.constants.ts | 13 + .../main/resources/ui/src/hooks/authHooks.ts | 4 +- .../resources/ui/src/interface/types.d.ts | 9 + .../pages/tour-page/TourPage.component.tsx | 52 ++- .../main/resources/ui/src/utils/TourUtils.tsx | 232 ++++++++++++++ .../src/main/resources/ui/yarn.lock | 8 +- 14 files changed, 634 insertions(+), 453 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.interface.ts create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json index 23abc80f69e..3c6dc4af636 100644 --- a/openmetadata-ui/src/main/resources/ui/package.json +++ b/openmetadata-ui/src/main/resources/ui/package.json @@ -12,7 +12,7 @@ "directory": "openmetadata-ui/src/main/resources/ui" }, "dependencies": { - "@deuex-solutions/react-tour": "^1.0.0", + "@deuex-solutions/react-tour": "^1.1.1", "@deuex-solutions/redoc": "2.0.0-rc.31", "autoprefixer": "^9.8.6", "axios": "^0.21.1", diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx index ced9810216e..b178e5f32d7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx @@ -451,7 +451,7 @@ const DatasetDetails: React.FC = ({ )} {activeTab === 2 && ( -
+
)} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx index 20b67591b94..8545d69914d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx @@ -127,9 +127,7 @@ const MyAssetStats: FunctionComponent = ({ className="tw-font-medium tw-pl-2" data-testid={data.dataTestId} to={data.link}> - diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx index 00ad45a36ae..ea593ac9239 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -17,47 +17,34 @@ import { isEmpty } from 'lodash'; import { observer } from 'mobx-react'; import { Match } from 'Models'; import React, { useEffect, useState } from 'react'; -import { - Link, - NavLink, - useHistory, - useLocation, - useRouteMatch, -} from 'react-router-dom'; +import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import appState from '../../AppState'; import { getVersion } from '../../axiosAPIs/miscAPI'; import { getExplorePathWithSearch, navLinkSettings, ROUTES, - TOUR_SEARCH_TERM, } from '../../constants/constants'; import { urlGitbookDocs, urlJoinSlack } from '../../constants/url.const'; -import { CurrentTourPageType } from '../../enums/tour.enum'; import { useAuth } from '../../hooks/authHooks'; import { userSignOut } from '../../utils/AuthUtils'; import { addToRecentSearched } from '../../utils/CommonUtils'; -import { - inPageSearchOptions, - isInPageSearchAllowed, -} from '../../utils/RouterUtils'; -import { activeLink, normalLink } from '../../utils/styleconstant'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; -import PopOver from '../common/popover/PopOver'; -import DropDown from '../dropdown/DropDown'; -import { WhatsNewModal } from '../Modals/WhatsNewModal'; import { COOKIE_VERSION } from '../Modals/WhatsNewModal/whatsNewData'; -import { ReactComponent as IconDefaultUserProfile } from './../../assets/svg/ic-default-profile.svg'; -import SearchOptions from './SearchOptions'; -import Suggestions from './Suggestions'; +import NavBar from '../nav-bar/NavBar'; const cookieStorage = new CookieStorage(); const Appbar: React.FC = (): JSX.Element => { const location = useLocation(); const history = useHistory(); - const { isAuthenticatedRoute, isSignedIn, isFirstTimeUser, isAuthDisabled } = - useAuth(location.pathname); + const { + isAuthenticatedRoute, + isSignedIn, + isFirstTimeUser, + isAuthDisabled, + isTourRoute, + } = useAuth(location.pathname); const match: Match | null = useRouteMatch({ path: ROUTES.EXPLORE_WITH_SEARCH, }); @@ -65,18 +52,15 @@ const Appbar: React.FC = (): JSX.Element => { const [searchValue, setSearchValue] = useState(searchQuery); const [isOpen, setIsOpen] = useState(true); const [isFeatureModalOpen, setIsFeatureModalOpen] = useState(false); - const [searchIcon, setSearchIcon] = useState('icon-searchv1'); const [version, setVersion] = useState(''); - const navStyle = (value: boolean) => { - if (value) return { color: activeLink }; - - return { color: normalLink }; + const handleFeatureModal = (value: boolean) => { + setIsFeatureModalOpen(value); }; - const openModal = () => { - setIsFeatureModalOpen(true); + const handleSearchChange = (value: string) => { + setSearchValue(value); }; const supportLinks = [ @@ -156,6 +140,40 @@ const Appbar: React.FC = (): JSX.Element => { ); }; + const profileDropdown = [ + { + name: getUserDisplayName(), + to: '', + disabled: false, + icon: <>, + isText: true, + }, + { + name: 'Logout', + to: '#/action-1', + disabled: false, + method: userSignOut, + }, + ]; + + const handleKeyDown = (e: React.KeyboardEvent) => { + const target = e.target as HTMLInputElement; + if (e.key === 'Enter') { + setIsOpen(false); + + addToRecentSearched(target.value); + history.push( + getExplorePathWithSearch( + target.value, + // this is for if user is searching from another page + location.pathname.startsWith(ROUTES.EXPLORE) + ? appState.explorePageTab + : 'tables' + ) + ); + } + }; + useEffect(() => { setSearchValue(searchQuery); }, [searchQuery]); @@ -183,217 +201,20 @@ const Appbar: React.FC = (): JSX.Element => { return ( <> - {isAuthenticatedRoute && isSignedIn ? ( -
-
-
- -
- - Explore - - -
-
-
- - setSearchIcon('icon-searchv1')} - onChange={(e) => { - setSearchValue(e.target.value); - }} - onFocus={() => setSearchIcon('icon-searchv1color')} - onKeyDown={(e: React.KeyboardEvent) => { - const target = e.target as HTMLInputElement; - if (e.key === 'Enter') { - setIsOpen(false); - // below code is for tour feature - if (location.pathname.includes(ROUTES.TOUR)) { - if (searchValue === TOUR_SEARCH_TERM) { - appState.currentTourPage = - CurrentTourPageType.EXPLORE_PAGE; - setSearchValue(''); - } - - return; - } - - addToRecentSearched(target.value); - history.push( - getExplorePathWithSearch( - target.value, - // this is for if user is searching from another page - location.pathname.startsWith(ROUTES.EXPLORE) - ? appState.explorePageTab - : 'tables' - ) - ); - } - }} - /> - {!location.pathname.includes(ROUTES.TOUR) && - searchValue && - (isInPageSearchAllowed(location.pathname) ? ( - { - appState.inPageSearchText = text; - }} - setIsOpen={setIsOpen} - /> - ) : ( - - ))} -
-
- - - -
- - - - } - isDropDownIconVisible={false} - isLableVisible={false} - label="Need Help" - type="link" - /> -
-
-
- , - isText: true, - }, - { - name: 'Logout', - to: '#/action-1', - disabled: false, - method: userSignOut, - }, - ]} - icon={ - <> - - {appState?.userDetails?.profile?.images?.image512 ? ( -
- user -
- ) : ( - - )} -
- - } - isDropDownIconVisible={false} - type="link" - /> -
-
- {isFeatureModalOpen && ( - setIsFeatureModalOpen(false)} - /> - )} -
+ {isAuthenticatedRoute && isSignedIn && !isTourRoute ? ( + ) : null} ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx index 5e9437794af..d0929584a7e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx @@ -12,7 +12,7 @@ */ import classNames from 'classnames'; -import { isNil, lowerCase } from 'lodash'; +import { camelCase, isNil } from 'lodash'; import React from 'react'; import { TITLE_FOR_NON_OWNER_ACTION } from '../../../constants/constants'; import { getCountBadge } from '../../../utils/CommonUtils'; @@ -58,7 +58,7 @@ const TabsPane = ({ activeTab, setActiveTab, tabs, className = '' }: Props) => { + +
+ + + + } + isDropDownIconVisible={false} + isLableVisible={false} + label="Need Help" + type="link" + /> +
+
+
+ + + {AppState?.userDetails?.profile?.images?.image512 ? ( +
+ user +
+ ) : ( + + )} +
+ + } + isDropDownIconVisible={false} + type="link" + /> +
+ + {isFeatureModalOpen && ( + handleFeatureModal(false)} + /> + )} + + + ); +}; + +export default NavBar; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx b/openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx index 4ed8329e26c..a29f5f57723 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx @@ -13,210 +13,14 @@ import ReactTutorial from '@deuex-solutions/react-tour'; import { observer } from 'mobx-react'; +import { TourSteps } from 'Models'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import AppState from '../../AppState'; -import { TOUR_SEARCH_TERM } from '../../constants/constants'; -import { CurrentTourPageType } from '../../enums/tour.enum'; import { useTour } from '../../hooks/useTour'; import TourEndModal from '../Modals/TourEndModal/TourEndModal'; -type Steps = { - content?: string | React.ReactNode; - actionType?: string; - position?: string | number[]; - selector?: string; - userTypeText?: string; - waitTimer?: number; -}; - -const getSteps = (value: string) => { - const modifiedValue = value.substr(0, 6); - - return [ - { - content: () => ( -

- Discover all your data assets in a single place with{' '} - OpenMetadata, a centralized metadata store. - Collaborate with your team and get a holistic picture of the data in - your organization. -

- ), - position: [5, 360], - stepInteraction: false, - selector: '#assetStatsCount', - }, - { - content: () => ( -

- Activity Feeds help you understand how the data is - changing in your organization. -

- ), - position: [540, 540], - selector: '#feedData', - stepInteraction: false, - }, - { - content: () => ( -

- Look up for matching data assets by "name", - "description", "column name", and so on from the{' '} - search box. -

- ), - position: [535, 70], - selector: '#searchBox', - }, - { - content: () => ( -

- In the search box, type "{modifiedValue}". - Hit Enter. -

- ), - actionType: 'enter', - userTypeText: modifiedValue, - position: [535, 70], - selector: '#searchBox', - beforeNext: () => { - AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; - }, - }, - { - beforePrev: () => { - AppState.currentTourPage = CurrentTourPageType.MY_DATA_PAGE; - }, - content: () => ( -

- From the "Explore" page, get to know the - details on the table entity, tier, usage, and database information -

- ), - selector: '#tabledatacard0', - stepInteraction: false, - position: [550, 310], - }, - { - content: () => ( -

- Click on the title of the asset to view more details. -

- ), - actionType: 'click', - selector: '#tabledatacard0Title', - position: [210, 190], - beforeNext: () => { - AppState.currentTourPage = CurrentTourPageType.DATASET_PAGE; - }, - }, - { - beforePrev: () => { - AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; - }, - content: () => ( -

- {' '} - Get to know the table schema. Add a description. -

- ), - stepInteraction: false, - position: [540, 65], - arrowPosition: 'bottom', - selector: '#schemaDetails', - }, - { - beforePrev: () => { - AppState.activeTabforTourDatasetPage = 1; - }, - beforeNext: () => { - AppState.activeTabforTourDatasetPage = 2; - }, - actionType: 'click', - content: () => ( -

- Click on the "Profiler" tab. -

- ), - position: [20, 240], - selector: '#profiler', - }, - { - content: () => ( -

- Discover assets with the Data Profiler. Get to know - the table usage stats, check for null values and duplicates, and - understand the column data distributions. -

- ), - arrowPosition: 'bottom', - stepInteraction: false, - position: [530, 20], - selector: '#profilerDetails', - }, - { - beforePrev: () => { - AppState.activeTabforTourDatasetPage = 2; - }, - beforeNext: () => { - AppState.activeTabforTourDatasetPage = 3; - }, - actionType: 'click', - content: () => ( -

- Click on the "Lineage" tab -

- ), - position: [140, 240], - selector: '#lineage', - }, - { - content: () => ( -

- With Lineage, trace the path of data across tables, - pipelines, & dashboards. -

- ), - position: [530, 45], - stepInteraction: false, - arrowPosition: 'bottom', - selector: '#lineageDetails', - }, - { - beforeNext: () => { - AppState.activeTabforTourDatasetPage = 5; - }, - actionType: 'click', - content: () => ( -

- Click on the "Manage" tab -

- ), - position: [260, 240], - selector: '#manage', - }, - { - beforePrev: () => { - AppState.activeTabforTourDatasetPage = 3; - }, - content: () => ( -

- From "Manage", you can claim ownership, and - set the tiers. -

- ), - position: [560, 60], - arrowPosition: 'bottom', - stepInteraction: false, - selector: '#manageTabDetails', - }, - ]; -}; - -const Tour = () => { +const Tour = ({ steps }: { steps: TourSteps[] }) => { const { isTourOpen, handleIsTourOpen } = useTour(); - const [steps] = useState(getSteps(TOUR_SEARCH_TERM)); const [showTourEndModal, setShowTourEndModal] = useState(false); const history = useHistory(); @@ -230,6 +34,7 @@ const Tour = () => { { } maskColor="#302E36" playTour={isTourOpen} - stepWaitTimer={100} + stepWaitTimer={300} steps={steps} onRequestClose={() => handleIsTourOpen(false)} + onRequestSkip={handleModalSubmit} /> ) : null} diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts index ca613cd35e9..a0f3f2f9406 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts @@ -1,3 +1,16 @@ +/* + * Copyright 2021 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + /* eslint-disable */ export const mockFeedData = [ diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/authHooks.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/authHooks.ts index 916ea3c769c..454df99ab30 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/authHooks.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/authHooks.ts @@ -21,6 +21,7 @@ export const useAuth = (pathname = '') => { pathname !== ROUTES.SIGNUP && pathname !== ROUTES.SIGNIN && pathname !== ROUTES.CALLBACK; + const isTourRoute = pathname === ROUTES.TOUR; return { isSigningIn: authProvider.signingIn, @@ -31,9 +32,10 @@ export const useAuth = (pathname = '') => { !authProvider.signingIn && isEmpty(userDetails) && isEmpty(newUser), - isAuthenticatedRoute: isAuthenticatedRoute, + isAuthenticatedRoute, isAuthDisabled: authDisabled, isAdminUser: userDetails?.isAdmin, isFirstTimeUser: !isEmpty(userDetails) && !isEmpty(newUser), + isTourRoute, }; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 19b256294e4..8a6a4ec0f03 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts @@ -423,6 +423,15 @@ declare module 'Models' { showLabel?: boolean; }; + export type TourSteps = { + content?: string | React.ReactNode; + actionType?: string; + position?: string | number[]; + selector?: string; + userTypeText?: string; + waitTimer?: number; + }; + export interface FormErrorData { [key: string]: string | undefined; } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx index 3e447bac628..a2099f4ea3b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx @@ -1,6 +1,20 @@ +/* + * Copyright 2021 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import { observer } from 'mobx-react'; import { LeafNodes, SearchResponse } from 'Models'; import React, { useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; import AppState from '../../AppState'; import DatasetDetails from '../../components/DatasetDetails/DatasetDetails.component'; import { DatasetOwner } from '../../components/DatasetDetails/DatasetDetails.interface'; @@ -8,7 +22,9 @@ import Explore from '../../components/Explore/Explore.component'; import { ExploreSearchData } from '../../components/Explore/explore.interface'; import MyData from '../../components/MyData/MyData.component'; import { MyDataProps } from '../../components/MyData/MyData.interface'; +import NavBar from '../../components/nav-bar/NavBar'; import Tour from '../../components/tour/Tour'; +import { ROUTES, TOUR_SEARCH_TERM } from '../../constants/constants'; import { mockDatasetData, mockFeedData, @@ -22,6 +38,7 @@ import { } from '../../generated/entity/data/table'; import { TagLabel } from '../../generated/type/tagLabel'; import { useTour } from '../../hooks/useTour'; +import { getSteps } from '../../utils/TourUtils'; const mockData = { data: { hits: { hits: [] } }, @@ -36,6 +53,7 @@ const exploreCount = { }; const TourPage = () => { + const location = useLocation(); const { handleIsTourOpen } = useTour(); const [currentPage, setCurrentPage] = useState( AppState.currentTourPage @@ -47,11 +65,29 @@ const TourPage = () => { AppState.activeTabforTourDatasetPage ); const [explorePageCounts, setExplorePageCounts] = useState(exploreCount); + const [searchValue, setSearchValue] = useState(''); const handleCountChange = () => { setExplorePageCounts(exploreCount); }; + const clearSearchTerm = () => { + setSearchValue(''); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + if (location.pathname.includes(ROUTES.TOUR)) { + if (searchValue === TOUR_SEARCH_TERM) { + AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; + clearSearchTerm(); + } + + return; + } + } + }; + useEffect(() => { handleIsTourOpen(true); AppState.currentTourPage = CurrentTourPageType.MY_DATA_PAGE; @@ -164,7 +200,21 @@ const TourPage = () => { return (
- + setSearchValue(value)} + isFeatureModalOpen={false} + isSearchBoxOpen={false} + pathname={location.pathname} + profileDropdown={[]} + searchValue={searchValue} + settingDropdown={[]} + supportDropdown={[]} + /> + {getCurrentPage(currentPage)}
); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx new file mode 100644 index 00000000000..5cc031aaed0 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx @@ -0,0 +1,232 @@ +/* + * Copyright 2021 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import AppState from '../AppState'; +import { CurrentTourPageType } from '../enums/tour.enum'; + +export const getSteps = (value: string, clearSearchTerm: () => void) => { + return [ + { + content: () => ( +

+ Discover all your data assets in a single place with{' '} + OpenMetadata, a centralized metadata store. + Collaborate with your team and get a holistic picture of the data in + your organization. +

+ ), + position: [5, 360], + stepInteraction: false, + selector: '#assetStatsCount', + }, + { + content: () => ( +

+ Activity Feeds help you understand how the data is + changing in your organization. +

+ ), + position: [540, 540], + selector: '#feedData', + stepInteraction: false, + }, + { + content: () => ( +

+ Search for matching data assets by "name", + "description", "column name", and so on from the{' '} + Search box. +

+ ), + position: [535, 70], + selector: '#searchBox', + stepInteraction: false, + beforeNext: clearSearchTerm, + }, + { + beforePrev: clearSearchTerm, + content: () => ( +

+ In the search box, type "{value}". Hit{' '} + Enter. +

+ ), + actionType: 'enter', + userTypeText: value, + position: [535, 70], + selector: '#searchBox', + beforeNext: () => { + clearSearchTerm(); + AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; + }, + }, + { + beforePrev: () => { + AppState.currentTourPage = CurrentTourPageType.MY_DATA_PAGE; + }, + content: () => ( +

+ From the "Explore" page, view a summary of + each asset, including: title, description, owner, tier (importance), + usage, and location. +

+ ), + selector: '#tabledatacard0', + stepInteraction: false, + position: [550, 310], + }, + { + content: () => ( +

+ Click on the title of the asset to view more details. +

+ ), + actionType: 'click', + selector: '#tabledatacard0Title', + position: [210, 190], + beforeNext: () => { + AppState.currentTourPage = CurrentTourPageType.DATASET_PAGE; + }, + }, + { + beforePrev: () => { + AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; + }, + content: () => ( +

+ {' '} + Get to know the table Schema, including column names + and data types as well as column descriptions and tags. You can even + view metadata for complex types such as structs. +

+ ), + stepInteraction: false, + position: [540, 23], + arrowPosition: 'bottom', + selector: '#schemaDetails', + }, + { + beforePrev: () => { + AppState.activeTabforTourDatasetPage = 1; + }, + actionType: 'click', + content: () => ( +

+ Click on the "Sample Data" tab. +

+ ), + position: [70, 240], + selector: '#sampleData', + beforeNext: () => { + AppState.activeTabforTourDatasetPage = 2; + }, + }, + { + arrowPosition: 'bottom', + content: () => ( +

+ Take a look at the Sample Data to get a feel for what + the table contains and how you might use it. +

+ ), + position: [530, 60], + selector: '#sampleDataDetails', + }, + { + beforePrev: () => { + AppState.activeTabforTourDatasetPage = 2; + }, + beforeNext: () => { + AppState.activeTabforTourDatasetPage = 3; + }, + actionType: 'click', + content: () => ( +

+ Click on the "Profiler" tab. +

+ ), + position: [200, 240], + selector: '#profiler', + }, + { + content: () => ( +

+ Discover assets with the Data Profiler. Get to know + the table usage stats, check for null values and duplicates, and + understand the column data distributions. +

+ ), + arrowPosition: 'bottom', + stepInteraction: false, + position: [530, 20], + selector: '#profilerDetails', + }, + { + beforePrev: () => { + AppState.activeTabforTourDatasetPage = 3; + }, + beforeNext: () => { + AppState.activeTabforTourDatasetPage = 4; + }, + actionType: 'click', + content: () => ( +

+ Click on the "Lineage" tab +

+ ), + position: [320, 240], + selector: '#lineage', + }, + { + content: () => ( +

+ With Lineage, trace the path of data across tables, + pipelines, & dashboards. +

+ ), + position: [530, 45], + stepInteraction: false, + arrowPosition: 'bottom', + selector: '#lineageDetails', + }, + { + beforeNext: () => { + AppState.activeTabforTourDatasetPage = 6; + }, + actionType: 'click', + content: () => ( +

+ Click on the "Manage" tab +

+ ), + position: [440, 240], + selector: '#manage', + }, + { + beforePrev: () => { + AppState.activeTabforTourDatasetPage = 4; + }, + content: () => ( +

+ From "Manage", you can claim ownership, and + set the tier. +

+ ), + position: [560, 60], + arrowPosition: 'bottom', + stepInteraction: false, + selector: '#manageTabDetails', + }, + ]; +}; diff --git a/openmetadata-ui/src/main/resources/ui/yarn.lock b/openmetadata-ui/src/main/resources/ui/yarn.lock index d8814d78413..de181690679 100644 --- a/openmetadata-ui/src/main/resources/ui/yarn.lock +++ b/openmetadata-ui/src/main/resources/ui/yarn.lock @@ -996,10 +996,10 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@deuex-solutions/react-tour@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@deuex-solutions/react-tour/-/react-tour-1.0.0.tgz#5714dd38cf3f89fc781cc7f53965b08400e68a13" - integrity sha512-oSprYz81nejf3ZqgZAy6dgyuyEEujJvGs5b+YB2Pnfui9i0vyOEseTtIoamYV+eRTjBsPhwv2wUa7RkdcJUcSQ== +"@deuex-solutions/react-tour@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@deuex-solutions/react-tour/-/react-tour-1.1.1.tgz#ad96bf0bcd651916a6e44d5e9c3bdc60e5fac036" + integrity sha512-BIw1zlGprOEtCoGexdyQl97bvBdeZb9ZPcB6e90fV+x2s9h+YDeZwEC+qisTQodLkBwovSRO990K2Quc6p39Aw== dependencies: classnames "^2.2.6" lodash "^4.17.15"