diff --git a/openmetadata-ui/src/main/resources/ui/src/App.tsx b/openmetadata-ui/src/main/resources/ui/src/App.tsx index ce9dde0ff08..69c1f139631 100644 --- a/openmetadata-ui/src/main/resources/ui/src/App.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/App.tsx @@ -18,6 +18,7 @@ import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary'; import GlobalSearchProvider from 'components/GlobalSearchProvider/GlobalSearchProvider'; import PermissionProvider from 'components/PermissionProvider/PermissionProvider'; import AppRouter from 'components/router/AppRouter'; +import TourProvider from 'components/TourProvider/TourProvider'; import WebSocketProvider from 'components/web-scoket/web-scoket.provider'; import WebAnalyticsProvider from 'components/WebAnalytics/WebAnalyticsProvider'; import { TOAST_OPTIONS } from 'constants/Toasts.constants'; @@ -38,19 +39,21 @@ const App: FunctionComponent = () => { - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/AppState.ts b/openmetadata-ui/src/main/resources/ui/src/AppState.ts index 25befc387f4..f99930f771a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/AppState.ts +++ b/openmetadata-ui/src/main/resources/ui/src/AppState.ts @@ -12,13 +12,11 @@ */ import { EntityUnion } from 'components/Explore/explore.interface'; -import { EntityTabs } from 'enums/entity.enum'; import { isEmpty, isNil, isUndefined } from 'lodash'; import { action, makeAutoObservable } from 'mobx'; import { ClientAuth, NewUser } from 'Models'; import { reactLocalStorage } from 'reactjs-localstorage'; import { LOCALSTORAGE_USER_PROFILES } from './constants/constants'; -import { CurrentTourPageType } from './enums/tour.enum'; import { ResourcePermission } from './generated/entity/policies/accessControl/resourcePermission'; import { EntityReference as UserTeams, @@ -55,10 +53,6 @@ class AppState { inPageSearchText = ''; explorePageTab = 'tables'; - isTourOpen = false; - currentTourPage: CurrentTourPageType = CurrentTourPageType.MY_DATA_PAGE; - activeTabforTourDatasetPage = EntityTabs.SCHEMA; - constructor() { makeAutoObservable(this, { updateUserDetails: action, @@ -100,12 +94,6 @@ class AppState { this.users = data; this.nonSecureUserDetails = data[0]; } - updateActiveTabForTourDatasetPage(data: EntityTabs) { - this.activeTabforTourDatasetPage = data; - } - updateCurrentTourPage(data: CurrentTourPageType) { - this.currentTourPage = data; - } updateUserTeam(data: Array) { this.userTeams = data; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx index 606f63a51d7..67ffd892870 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx @@ -14,12 +14,14 @@ import { Space, Typography } from 'antd'; import { AxiosError } from 'axios'; import { useGlobalSearchProvider } from 'components/GlobalSearchProvider/GlobalSearchProvider'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { tabsInfo } from 'constants/explore.constants'; import { urlGitbookDocs, urlGithubRepo, urlJoinSlack, } from 'constants/URL.constants'; +import { CurrentTourPageType } from 'enums/tour.enum'; import { isEmpty, isString, max } from 'lodash'; import { observer } from 'mobx-react'; import Qs from 'qs'; @@ -43,6 +45,7 @@ import { ROUTES, TERM_ADMIN, TERM_USER, + TOUR_SEARCH_TERM, } from '../../constants/constants'; import { addToRecentSearched, @@ -58,6 +61,8 @@ const Appbar: React.FC = (): JSX.Element => { const location = useLocation(); const history = useHistory(); const { t } = useTranslation(); + const { isTourOpen, updateTourPage, updateTourSearch, tourSearchValue } = + useTourProvider(); const { isAuthDisabled, @@ -91,7 +96,11 @@ const Appbar: React.FC = (): JSX.Element => { const handleSearchChange = (value: string) => { setSearchValue(value); - value ? setIsOpen(true) : setIsOpen(false); + if (isTourOpen) { + updateTourSearch(value); + } else { + value ? setIsOpen(true) : setIsOpen(false); + } }; const supportLink = [ @@ -327,24 +336,31 @@ const Appbar: React.FC = (): JSX.Element => { ]; const searchHandler = (value: string) => { - setIsOpen(false); - addToRecentSearched(value); + if (!isTourOpen) { + setIsOpen(false); + addToRecentSearched(value); - const defaultTab: string = - searchCriteria !== '' ? tabsInfo[searchCriteria].path : ''; + const defaultTab: string = + searchCriteria !== '' ? tabsInfo[searchCriteria].path : ''; - history.push( - getExplorePath({ - tab: defaultTab, - search: value, - isPersistFilters: false, - }) - ); + history.push( + getExplorePath({ + tab: defaultTab, + search: value, + isPersistFilters: false, + }) + ); + } }; const handleKeyDown = (e: React.KeyboardEvent) => { const target = e.target as HTMLInputElement; if (e.key === 'Enter') { + if (isTourOpen && searchValue === TOUR_SEARCH_TERM) { + updateTourPage(CurrentTourPageType.EXPLORE_PAGE); + updateTourSearch(''); + } + searchHandler(target.value); } }; @@ -376,6 +392,11 @@ const Appbar: React.FC = (): JSX.Element => { useEffect(() => { setSearchValue(searchQuery); }, [searchQuery]); + useEffect(() => { + if (isTourOpen) { + setSearchValue(tourSearchValue); + } + }, [tourSearchValue, isTourOpen]); useEffect(() => { if (isAuthDisabled) { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx index d5dedac33d2..a54c1d302f7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx @@ -505,6 +505,7 @@ export const DataAssetsHeader = ({ + ) : ( + + + {stringToHTML(getEntityName(source))} + + + )} )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx index 69380ae9849..b23f8b13e28 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx @@ -13,12 +13,11 @@ import { Space, Table as AntdTable, Typography } from 'antd'; import { AxiosError } from 'axios'; -import { ROUTES } from 'constants/constants'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { mockDatasetData } from 'constants/mockTourData.constants'; import { t } from 'i18next'; import { isEmpty, lowerCase } from 'lodash'; -import React, { useEffect, useMemo, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import React, { useEffect, useState } from 'react'; import { getSampleDataByTableId } from 'rest/tableAPI'; import { WORKFLOWS_PROFILER_DOCS } from '../../constants/docs.constants'; import { Table } from '../../generated/entity/data/table'; @@ -34,17 +33,12 @@ import { SampleDataType, } from './sample.interface'; import './SampleDataTable.style.less'; - const SampleDataTable = ({ isTableDeleted, tableId }: SampleDataProps) => { - const location = useLocation(); + const { isTourOpen } = useTourProvider(); + const [sampleData, setSampleData] = useState(); const [isLoading, setIsLoading] = useState(true); - const isTourActive = useMemo( - () => location.pathname.includes(ROUTES.TOUR), - [location.pathname] - ); - const getSampleDataWithType = (table: Table) => { const { sampleData, columns } = table; const updatedColumns = sampleData?.columns?.map((column) => { @@ -96,12 +90,12 @@ const SampleDataTable = ({ isTableDeleted, tableId }: SampleDataProps) => { useEffect(() => { setIsLoading(true); - if (!isTableDeleted && tableId && !isTourActive) { + if (!isTableDeleted && tableId && !isTourOpen) { fetchSampleData(); } else { setIsLoading(false); } - if (isTourActive) { + if (isTourOpen) { setSampleData( getSampleDataWithType({ columns: mockDatasetData.tableDetails.columns, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx index 4cd79fe2347..1e83eb92f89 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx @@ -32,6 +32,7 @@ import { SummaryCard } from 'components/common/SummaryCard/SummaryCard.component import { SummaryCardProps } from 'components/common/SummaryCard/SummaryCard.interface'; import DatePickerMenu from 'components/DatePickerMenu/DatePickerMenu.component'; import { DateRangeObject } from 'components/ProfilerDashboard/component/TestSummary'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { mockDatasetData } from 'constants/mockTourData.constants'; import { Column } from 'generated/entity/data/container'; import { @@ -55,7 +56,7 @@ import { ReactComponent as DataQualityIcon } from '../../assets/svg/data-quality import { ReactComponent as SettingIcon } from '../../assets/svg/ic-settings-primery.svg'; import { ReactComponent as NoDataIcon } from '../../assets/svg/no-data-icon.svg'; import { ReactComponent as TableProfileIcon } from '../../assets/svg/table-profile.svg'; -import { API_RES_MAX_SIZE, ROUTES } from '../../constants/constants'; +import { API_RES_MAX_SIZE } from '../../constants/constants'; import { PAGE_HEADERS } from '../../constants/PageHeaders.constant'; import { allowedServiceForOperationGraph, @@ -93,20 +94,21 @@ const TableProfilerV1: FC = ({ const { t } = useTranslation(); const history = useHistory(); const location = useLocation(); + const { isTourOpen } = useTourProvider(); - const { activeTab = TableProfilerTab.TABLE_PROFILE, activeColumnFqn } = - useMemo(() => { - const param = location.search; - const searchData = Qs.parse( - param.startsWith('?') ? param.substring(1) : param - ); + const { + activeTab = isTourOpen + ? TableProfilerTab.COLUMN_PROFILE + : TableProfilerTab.TABLE_PROFILE, + activeColumnFqn, + } = useMemo(() => { + const param = location.search; + const searchData = Qs.parse( + param.startsWith('?') ? param.substring(1) : param + ); - return searchData as { activeTab: string; activeColumnFqn: string }; - }, [location.search]); - const isTourPage = useMemo( - () => location.pathname.includes(ROUTES.TOUR), - [location.pathname] - ); + return searchData as { activeTab: string; activeColumnFqn: string }; + }, [location.search, isTourOpen]); const { datasetFQN } = useParams<{ datasetFQN: string }>(); const [table, setTable] = useState(); @@ -299,12 +301,12 @@ const TableProfilerV1: FC = ({ useEffect(() => { if (isUndefined(activeTab)) { updateActiveTab( - isTourPage + isTourOpen ? TableProfilerTab.COLUMN_PROFILE : TableProfilerTab.TABLE_PROFILE ); } - }, []); + }, [isTourOpen]); const handleResultUpdate = (testCase: TestCase) => { setTableTests((prev) => { @@ -432,19 +434,19 @@ const TableProfilerV1: FC = ({ }, [activeColumnFqn, columnTests]); useEffect(() => { - if (!isUndefined(table) && viewTest && !isTourPage) { + if (!isUndefined(table) && viewTest && !isTourOpen) { fetchAllTests(); } - }, [table, viewTest]); + }, [table, viewTest, isTourOpen]); useEffect(() => { - if (!isTableDeleted && datasetFQN && !isTourPage) { + if (!isTableDeleted && datasetFQN && !isTourOpen) { fetchLatestProfilerData(); } - if (isTourPage) { + if (isTourOpen) { setTable(mockDatasetData.tableDetails as unknown as Table); } - }, [datasetFQN]); + }, [datasetFQN, isTourOpen]); return ( void; + updateTourPage: (value: CurrentTourPageType) => void; + updateActiveTab: (value: EntityTabs) => void; + updateTourSearch: (value: string) => void; +} + +export const TourContext = createContext({} as TourProviderContextProps); + +const TourProvider: FC = ({ children }) => { + const location = useLocation(); + const [isTourOpen, setIsTourOpen] = useState(false); + const [currentTourPage, setCurrentTourPage] = useState( + CurrentTourPageType.MY_DATA_PAGE + ); + const [activeTabForTourDatasetPage, setActiveTabForTourDatasetPage] = + useState(EntityTabs.SCHEMA); + const [searchValue, setSearchValue] = useState(''); + + const isTourPage = useMemo( + () => location.pathname.includes(ROUTES.TOUR), + [location.pathname] + ); + + const handleIsTourOpen = (value: boolean) => { + setIsTourOpen(value); + }; + + const handleTourPageChange = (value: CurrentTourPageType) => + setCurrentTourPage(value); + + const handleActiveTabChange = (value: EntityTabs) => + setActiveTabForTourDatasetPage(value); + + const handleUpdateTourSearch = (value: string) => setSearchValue(value); + + return ( + + {children} + + ); +}; + +export const useTourProvider = () => useContext(TourContext); + +export default TourProvider; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx index b62afb4a4aa..fc507d5e675 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.component.tsx @@ -14,6 +14,8 @@ import { Tabs } from 'antd'; import AppState from 'AppState'; import ActivityFeedListV1 from 'components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component'; import { useActivityFeedProvider } from 'components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; +import { mockFeedData } from 'constants/mockTourData.constants'; import { FeedFilter } from 'enums/mydata.enum'; import { ThreadType } from 'generated/entity/feed/thread'; import React, { useEffect, useMemo, useState } from 'react'; @@ -25,6 +27,7 @@ import './feeds-widget.less'; const FeedsWidget = () => { const { t } = useTranslation(); + const { isTourOpen } = useTourProvider(); const [activeTab, setActiveTab] = useState('all'); const { loading, entityThread, getFeedData } = useActivityFeedProvider(); const [taskCount, setTaskCount] = useState(0); @@ -86,9 +89,9 @@ const FeedsWidget = () => { key: 'all', children: ( ), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx index 6392b8d4f25..6f61c7441ef 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx @@ -54,7 +54,7 @@ export const OwnerLabel = ({ }, [owner]); return ( - + {profilePicture} {displayName ? ( 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 bb7092c504a..4307ee12ac0 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 @@ -12,15 +12,15 @@ */ import ReactTutorial, { TourSteps } from '@deuex-solutions/react-tour'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { PRIMERY_COLOR } from 'constants/constants'; import { observer } from 'mobx-react'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { useTour } from '../../hooks/useTour'; import TourEndModal from '../Modals/TourEndModal/TourEndModal'; const Tour = ({ steps }: { steps: TourSteps[] }) => { - const { isTourOpen, handleIsTourOpen } = useTour(); + const { isTourOpen, updateIsTourOpen } = useTourProvider(); const [showTourEndModal, setShowTourEndModal] = useState(false); const history = useHistory(); @@ -58,7 +58,7 @@ const Tour = ({ steps }: { steps: TourSteps[] }) => { playTour={isTourOpen} stepWaitTimer={300} steps={steps} - onRequestClose={() => handleIsTourOpen(false)} + onRequestClose={() => updateIsTourOpen(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 c236597769b..526c2fa032d 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 @@ -427,62 +427,6 @@ export const mockDatasetData = { 'Bosnia and Herzegovina', '399.279.7217x2246', ], - [ - '2fde1390-9bcd-486e-86e6-b4bb427faa75', - '8b8e2b20-020d-4be3-a11d-1408b0f394d6', - 'Edward', - 'Tim', - '86241 Marsh Fork', - '14727 Benjamin Place Suite 747', - 'Adams, Parker and Gomez', - 'Sanchezville', - '66293 Watson Unions', - '50865', - 'Saint Vincent and the Grenadines', - '(631)242-5727', - ], - [ - '376096fe-2c8f-4e56-9ee2-7bd1dd2f9a88', - '1a065321-c6cf-486c-91b1-57f8caab4727', - 'Joseph', - 'Brianna', - '297 Selena Underpass', - '41353 Mcdonald Squares Apt. 397', - 'Wright Inc', - 'New Melanie', - '6230 Scott Roads Apt. 163', - '42639', - 'Belgium', - '001-360-399-2694x145', - ], - [ - 'afdbca76-af4e-4783-867e-e2b92161c40e', - 'adc24930-9dab-400b-9f46-620c1be9c841', - 'Beth', - 'Justin', - '06732 Owens Ville Apt. 643', - '02881 Tyler Square', - 'Baker-Coleman', - 'South Jonathan', - '771 Smith Lodge Apt. 619', - '12995', - 'Ecuador', - '+1-060-277-3810x438', - ], - [ - 'b3d878b8-8e37-4922-a53a-f4b2295d8bb9', - '647a2505-86da-4bdf-b5f3-d67ac8ec7980', - 'Tiffany', - 'Justin', - '60489 Barbara Course Suite 095', - '9328 Ashley Drives', - 'Schmidt Ltd', - 'New William', - '6354 Johnson Glen', - '37229', - 'Antarctica (the territory South of 60 deg S)', - '(544)876-8904x194', - ], ], }, entityLineage: { diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useTour.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useTour.ts deleted file mode 100644 index bb0748874ef..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useTour.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright 2022 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 { useEffect, useState } from 'react'; -import AppState from '../AppState'; - -export const useTour = () => { - const [isTourOpen, setIsTourOpen] = useState(); - - useEffect(() => { - setIsTourOpen(AppState.isTourOpen); - }, [AppState.isTourOpen]); - - const handleIsTourOpen = (value: boolean) => { - AppState.isTourOpen = value; - }; - - return { - isTourOpen, - handleIsTourOpen, - }; -}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx index 15382290a5e..aaaabc90151 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx @@ -38,9 +38,11 @@ import TableProfilerV1 from 'components/TableProfiler/TableProfilerV1'; import TableQueries from 'components/TableQueries/TableQueries'; import TabsLabel from 'components/TabsLabel/TabsLabel.component'; import TagsContainerV1 from 'components/Tag/TagsContainerV1/TagsContainerV1'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { FQN_SEPARATOR_CHAR } from 'constants/char.constants'; import { getTableTabPath, getVersionPath, ROUTES } from 'constants/constants'; import { EntityField } from 'constants/Feeds.constants'; +import { mockDatasetData } from 'constants/mockTourData.constants'; import { EntityTabs, EntityType, FqnPart } from 'enums/entity.enum'; import { compare } from 'fast-json-patch'; import { CreateThread } from 'generated/api/feed/createThread'; @@ -80,6 +82,8 @@ import { FrequentlyJoinedTables } from './FrequentlyJoinedTables/FrequentlyJoine import './table-details-page-v1.less'; const TableDetailsPageV1 = () => { + const { isTourOpen, activeTabForTourDatasetPage, isTourPage } = + useTourProvider(); const [tableDetails, setTableDetails] = useState
(); const { datasetFQN, tab: activeTab = EntityTabs.SCHEMA } = useParams<{ datasetFQN: string; tab: string }>(); @@ -100,7 +104,7 @@ const TableDetailsPageV1 = () => { ); const [queryCount, setQueryCount] = useState(0); - const [loading, setLoading] = useState(true); + const [loading, setLoading] = useState(!isTourOpen); const fetchTableDetails = async () => { setLoading(true); @@ -141,7 +145,6 @@ const TableDetailsPageV1 = () => { DEFAULT_ENTITY_PERMISSION ); - const isTourPage = location.pathname.includes(ROUTES.TOUR); const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider(); const { tier, @@ -242,7 +245,7 @@ const TableDetailsPageV1 = () => { const handleTabChange = (activeKey: string) => { if (activeKey !== activeTab) { - if (!isTourPage) { + if (!isTourOpen) { history.push(getTableTabPath(datasetFQN, activeKey)); } } @@ -378,7 +381,7 @@ const TableDetailsPageV1 = () => { const schemaTab = useMemo( () => ( - +
{ }, [version]); useEffect(() => { - fetchTableDetails(); - getEntityFeedCount(); - }, [datasetFQN]); + if (isTourOpen || isTourPage) { + setTableDetails(mockDatasetData.tableDetails as unknown as Table); + } else { + fetchTableDetails(); + getEntityFeedCount(); + } + }, [datasetFQN, isTourOpen, isTourPage]); useEffect(() => { if (tableDetails) { @@ -798,7 +805,7 @@ const TableDetailsPageV1 = () => { title="Table details"> {/* Entity Heading */} -
+ { {/* Entity Tabs */} { const location = useLocation(); const history = useHistory(); + const { isTourOpen } = useTourProvider(); const { tab } = useParams(); @@ -438,10 +441,14 @@ const ExplorePageV1: FunctionComponent = () => { ) + : searchResults + } showDeleted={showDeleted} sortOrder={sortOrder} sortValue={sortValue} 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 53d3b9e9648..1c7b75c57c3 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 @@ -12,39 +12,33 @@ */ import Tour from 'components/tour/Tour'; -import { EntityTabs } from 'enums/entity.enum'; +import { useTourProvider } from 'components/TourProvider/TourProvider'; import { observer } from 'mobx-react'; import ExplorePageV1Component from 'pages/explore/ExplorePageV1.component'; import MyDataPageV1 from 'pages/MyDataPage/MyDataPageV1.component'; import TableDetailsPageV1 from 'pages/TableDetailsPageV1/TableDetailsPageV1'; -import React, { useEffect, useState } from 'react'; -import AppState from '../../AppState'; +import React, { useEffect } from 'react'; import { TOUR_SEARCH_TERM } from '../../constants/constants'; import { CurrentTourPageType } from '../../enums/tour.enum'; -import { useTour } from '../../hooks/useTour'; -import { getSteps } from '../../utils/TourUtils'; +import { getTourSteps } from '../../utils/TourUtils'; const TourPage = () => { - const { handleIsTourOpen } = useTour(); - const [currentPage, setCurrentPage] = useState( - AppState.currentTourPage - ); - const [, setSearchValue] = useState(''); + const { + updateIsTourOpen, + currentTourPage, + updateActiveTab, + updateTourPage, + updateTourSearch, + } = useTourProvider(); const clearSearchTerm = () => { - setSearchValue(''); + updateTourSearch(''); }; useEffect(() => { - handleIsTourOpen(true); - AppState.currentTourPage = CurrentTourPageType.MY_DATA_PAGE; - AppState.activeTabforTourDatasetPage = EntityTabs.SCHEMA; + updateIsTourOpen(true); }, []); - useEffect(() => { - setCurrentPage(AppState.currentTourPage); - }, [AppState.currentTourPage]); - const getCurrentPage = (page: CurrentTourPageType) => { switch (page) { case CurrentTourPageType.MY_DATA_PAGE: @@ -63,8 +57,15 @@ const TourPage = () => { return ( <> - - {getCurrentPage(currentPage)} + + {getCurrentPage(currentTourPage)} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx index 97986a5abc4..fd5a6ad2a52 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx @@ -14,29 +14,20 @@ import { EntityTabs } from 'enums/entity.enum'; import i18next from 'i18next'; import React from 'react'; -import AppState from '../AppState'; import { CurrentTourPageType } from '../enums/tour.enum'; import { Transi18next } from './CommonUtils'; -export const getSteps = (value: string, clearSearchTerm: () => void) => { - const { updateActiveTabForTourDatasetPage, updateCurrentTourPage } = AppState; +interface ArgObject { + searchTerm: string; + updateTourPage: (value: CurrentTourPageType) => void; + updateActiveTab: (value: EntityTabs) => void; + clearSearchTerm: () => void; +} + +export const getTourSteps = (args: ArgObject) => { + const { searchTerm, clearSearchTerm, updateActiveTab, updateTourPage } = args; return [ - { - content: () => ( -

- } - values={{ - text: i18next.t('label.open-metadata'), - }} - /> -

- ), - stepInteraction: false, - selector: '#assetStatsCount', - }, { content: () => (

@@ -76,23 +67,23 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => { i18nKey="message.tour-step-type-search-term" renderElement={} values={{ - text: value, + text: searchTerm, enterText: i18next.t('label.enter'), }} />

), actionType: 'enter', - userTypeText: value, + userTypeText: searchTerm, selector: '#searchBox', beforeNext: () => { clearSearchTerm(); - updateCurrentTourPage(CurrentTourPageType.EXPLORE_PAGE); + updateTourPage(CurrentTourPageType.EXPLORE_PAGE); }, }, { beforePrev: () => { - updateCurrentTourPage(CurrentTourPageType.MY_DATA_PAGE); + updateTourPage(CurrentTourPageType.MY_DATA_PAGE); }, content: () => (

@@ -118,14 +109,14 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => {

), actionType: 'click', - selector: '[data-testid="sample_data-dim_address"]', + selector: '[data-testid="sample_data.ecommerce_db.shopify.dim_address"]', beforeNext: () => { - updateCurrentTourPage(CurrentTourPageType.DATASET_PAGE); + updateTourPage(CurrentTourPageType.DATASET_PAGE); }, }, { beforePrev: () => { - updateCurrentTourPage(CurrentTourPageType.EXPLORE_PAGE); + updateTourPage(CurrentTourPageType.EXPLORE_PAGE); }, content: () => (

@@ -139,7 +130,7 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => {

), stepInteraction: false, - selector: '[data-testid="entity-page-info"]', + selector: '[data-testid="entity-page-header"]', }, { content: () => ( @@ -154,7 +145,7 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => {

), stepInteraction: false, - selector: '[data-testid="owner-link"]', + selector: '[data-testid="owner-label"]', }, { content: () => ( @@ -188,7 +179,7 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => { }, { beforePrev: () => { - updateActiveTabForTourDatasetPage(EntityTabs.SCHEMA); + updateActiveTab(EntityTabs.SCHEMA); }, actionType: 'click', content: () => ( @@ -204,7 +195,7 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => { ), selector: `[data-testid="${EntityTabs.SAMPLE_DATA}"]`, beforeNext: () => { - updateActiveTabForTourDatasetPage(EntityTabs.SAMPLE_DATA); + updateActiveTab(EntityTabs.SAMPLE_DATA); }, }, { @@ -219,14 +210,14 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => { />

), - selector: '#tab-details', + selector: '[data-testid="sample-data-table"]', }, { beforePrev: () => { - updateActiveTabForTourDatasetPage(EntityTabs.SAMPLE_DATA); + updateActiveTab(EntityTabs.SAMPLE_DATA); }, beforeNext: () => { - updateActiveTabForTourDatasetPage(EntityTabs.PROFILER); + updateActiveTab(EntityTabs.PROFILER); }, actionType: 'click', content: () => ( @@ -257,14 +248,14 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => {

), stepInteraction: false, - selector: '#tab-details', + selector: '#profilerDetails', }, { beforePrev: () => { - updateActiveTabForTourDatasetPage(EntityTabs.PROFILER); + updateActiveTab(EntityTabs.PROFILER); }, beforeNext: () => { - updateActiveTabForTourDatasetPage(EntityTabs.LINEAGE); + updateActiveTab(EntityTabs.LINEAGE); }, actionType: 'click', content: () => ( @@ -293,7 +284,7 @@ export const getSteps = (value: string, clearSearchTerm: () => void) => {

), stepInteraction: false, - selector: '#tab-details', + selector: '#lineageDetails', }, ]; };