fix tour page not showing (#13902)

This commit is contained in:
Ashish Gupta 2023-11-09 10:22:09 +05:30 committed by GitHub
parent 2adce103f4
commit ef2a27a217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 264 additions and 260 deletions

View File

@ -69,7 +69,10 @@ const ActivityFeedListV1 = ({
} }
return isEmpty(entityThread) ? ( return isEmpty(entityThread) ? (
<div className="h-full p-x-md" data-testid="no-data-placeholder-container"> <div
className="h-full p-x-md"
data-testid="no-data-placeholder-container"
id="feedData">
<ErrorPlaceHolder <ErrorPlaceHolder
icon={ icon={
isTaskTab ? ( isTaskTab ? (

View File

@ -12,7 +12,7 @@
*/ */
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { useEffect } from 'react'; import React, { useEffect, useMemo } from 'react';
import Tour from '../../components/tour/Tour'; import Tour from '../../components/tour/Tour';
import { useTourProvider } from '../../components/TourProvider/TourProvider'; import { useTourProvider } from '../../components/TourProvider/TourProvider';
import { TOUR_SEARCH_TERM } from '../../constants/constants'; import { TOUR_SEARCH_TERM } from '../../constants/constants';
@ -39,8 +39,8 @@ const TourPage = () => {
updateIsTourOpen(true); updateIsTourOpen(true);
}, []); }, []);
const getCurrentPage = (page: CurrentTourPageType) => { const currentPageComponent = useMemo(() => {
switch (page) { switch (currentTourPage) {
case CurrentTourPageType.MY_DATA_PAGE: case CurrentTourPageType.MY_DATA_PAGE:
return <MyDataPageV1 />; return <MyDataPageV1 />;
@ -53,7 +53,7 @@ const TourPage = () => {
default: default:
return; return;
} }
}; }, [currentTourPage]);
return ( return (
<> <>
@ -65,7 +65,7 @@ const TourPage = () => {
updateTourPage, updateTourPage,
})} })}
/> />
{getCurrentPage(currentTourPage)} {currentPageComponent}
</> </>
); );
}; };

View File

@ -24,267 +24,268 @@ interface ArgObject {
clearSearchTerm: () => void; clearSearchTerm: () => void;
} }
export const getTourSteps = (args: ArgObject) => { export const getTourSteps = ({
const { searchTerm, clearSearchTerm, updateActiveTab, updateTourPage } = args; searchTerm,
clearSearchTerm,
return [ updateActiveTab,
{ updateTourPage,
content: () => ( }: ArgObject) => [
<p> {
<Transi18next content: () => (
i18nKey="message.tour-step-activity-feed" <p>
renderElement={<strong />} <Transi18next
values={{ i18nKey="message.tour-step-activity-feed"
text: i18next.t('label.activity-feed-plural'), renderElement={<strong />}
}} values={{
/> text: i18next.t('label.activity-feed-plural'),
</p> }}
), />
selector: '#feedData', </p>
stepInteraction: false, ),
selector: '#feedData',
stepInteraction: false,
},
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-search-for-matching-dataset"
renderElement={<strong />}
values={{
text: i18next.t('label.search'),
}}
/>
</p>
),
selector: '#searchBox',
stepInteraction: false,
beforeNext: clearSearchTerm,
},
{
beforePrev: clearSearchTerm,
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-type-search-term"
renderElement={<strong />}
values={{
text: searchTerm,
enterText: i18next.t('label.enter'),
}}
/>
</p>
),
actionType: 'enter',
userTypeText: searchTerm,
selector: '#searchBox',
beforeNext: () => {
clearSearchTerm();
updateTourPage(CurrentTourPageType.EXPLORE_PAGE);
}, },
{ },
content: () => ( {
<p> beforePrev: () => {
<Transi18next updateTourPage(CurrentTourPageType.MY_DATA_PAGE);
i18nKey="message.tour-step-search-for-matching-dataset"
renderElement={<strong />}
values={{
text: i18next.t('label.search'),
}}
/>
</p>
),
selector: '#searchBox',
stepInteraction: false,
beforeNext: clearSearchTerm,
}, },
{ content: () => (
beforePrev: clearSearchTerm, <p>
content: () => ( <Transi18next
<p> i18nKey="message.tour-step-explore-summary-asset"
<Transi18next renderElement={<strong />}
i18nKey="message.tour-step-type-search-term" values={{
renderElement={<strong />} text: i18next.t('label.explore'),
values={{ }}
text: searchTerm, />
enterText: i18next.t('label.enter'), </p>
}} ),
/> selector: '#tabledatacard0',
</p> stepInteraction: false,
), },
actionType: 'enter', {
userTypeText: searchTerm, content: () => (
selector: '#searchBox', <p>
beforeNext: () => { <Transi18next
clearSearchTerm(); i18nKey="message.tour-step-click-on-link-to-view-more"
updateTourPage(CurrentTourPageType.EXPLORE_PAGE); renderElement={<strong />}
}, />
</p>
),
actionType: 'click',
selector: '[data-testid="sample_data.ecommerce_db.shopify.dim_address"]',
beforeNext: () => {
updateTourPage(CurrentTourPageType.DATASET_PAGE);
}, },
{ },
beforePrev: () => { {
updateTourPage(CurrentTourPageType.MY_DATA_PAGE); beforePrev: () => {
}, updateTourPage(CurrentTourPageType.EXPLORE_PAGE);
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-explore-summary-asset"
renderElement={<strong />}
values={{
text: i18next.t('label.explore'),
}}
/>
</p>
),
selector: '#tabledatacard0',
stepInteraction: false,
}, },
{ content: () => (
content: () => ( <p>
<p> <Transi18next
<Transi18next i18nKey="message.tour-high-level-assets-information-step"
i18nKey="message.tour-step-click-on-link-to-view-more" renderElement={<strong />}
renderElement={<strong />} values={{
/> text: i18next.t('label.schema'),
</p> }}
), />
actionType: 'click', </p>
selector: '[data-testid="sample_data.ecommerce_db.shopify.dim_address"]', ),
beforeNext: () => { stepInteraction: false,
updateTourPage(CurrentTourPageType.DATASET_PAGE); selector: '[data-testid="entity-page-header"]',
}, },
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-owner-step"
renderElement={<strong />}
values={{
text: i18next.t('label.schema'),
}}
/>
</p>
),
stepInteraction: false,
selector: '[data-testid="owner-label"]',
},
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-follow-step"
renderElement={<strong />}
values={{
text: i18next.t('label.schema'),
}}
/>
</p>
),
stepInteraction: false,
selector: '[data-testid="entity-follow-button"]',
},
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-get-to-know-table-schema"
renderElement={<strong />}
values={{
text: i18next.t('label.schema'),
}}
/>
</p>
),
stepInteraction: false,
selector: '#schemaDetails',
},
{
beforePrev: () => {
updateActiveTab(EntityTabs.SCHEMA);
}, },
{ actionType: 'click',
beforePrev: () => { content: () => (
updateTourPage(CurrentTourPageType.EXPLORE_PAGE); <p>
}, <Transi18next
content: () => ( i18nKey="message.tour-step-click-on-entity-tab"
<p> renderElement={<strong />}
<Transi18next values={{
i18nKey="message.tour-high-level-assets-information-step" text: i18next.t('label.sample-data'),
renderElement={<strong />} }}
values={{ />
text: i18next.t('label.schema'), </p>
}} ),
/> selector: `[data-testid="${EntityTabs.SAMPLE_DATA}"]`,
</p> beforeNext: () => {
), updateActiveTab(EntityTabs.SAMPLE_DATA);
stepInteraction: false,
selector: '[data-testid="entity-page-header"]',
}, },
{ },
content: () => ( {
<p> content: () => (
<Transi18next <p>
i18nKey="message.tour-owner-step" <Transi18next
renderElement={<strong />} i18nKey="message.tour-step-look-at-sample-data"
values={{ renderElement={<strong />}
text: i18next.t('label.schema'), values={{
}} text: i18next.t('label.sample-data'),
/> }}
</p> />
), </p>
stepInteraction: false, ),
selector: '[data-testid="owner-label"]', selector: '[data-testid="sample-data-table"]',
},
{
beforePrev: () => {
updateActiveTab(EntityTabs.SAMPLE_DATA);
}, },
{ beforeNext: () => {
content: () => ( updateActiveTab(EntityTabs.PROFILER);
<p>
<Transi18next
i18nKey="message.tour-follow-step"
renderElement={<strong />}
values={{
text: i18next.t('label.schema'),
}}
/>
</p>
),
stepInteraction: false,
selector: '[data-testid="entity-follow-button"]',
}, },
{ actionType: 'click',
content: () => ( content: () => (
<p> <p>
<Transi18next <Transi18next
i18nKey="message.tour-step-get-to-know-table-schema" i18nKey="message.tour-step-click-on-entity-tab"
renderElement={<strong />} renderElement={<strong />}
values={{ values={{
text: i18next.t('label.schema'), text: i18next.t('label.profiler'),
}} }}
/> />
</p> </p>
), ),
stepInteraction: false, selector: `[data-testid="${EntityTabs.PROFILER}"]`,
selector: '#schemaDetails', },
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-discover-data-assets-with-data-profile"
renderElement={<strong />}
values={{
text: i18next.t('label.data-entity', {
entity: i18next.t('label.profiler'),
}),
}}
/>
</p>
),
stepInteraction: false,
selector: '#profilerDetails',
},
{
beforePrev: () => {
updateActiveTab(EntityTabs.PROFILER);
}, },
{ beforeNext: () => {
beforePrev: () => { updateActiveTab(EntityTabs.LINEAGE);
updateActiveTab(EntityTabs.SCHEMA);
},
actionType: 'click',
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-click-on-entity-tab"
renderElement={<strong />}
values={{
text: i18next.t('label.sample-data'),
}}
/>
</p>
),
selector: `[data-testid="${EntityTabs.SAMPLE_DATA}"]`,
beforeNext: () => {
updateActiveTab(EntityTabs.SAMPLE_DATA);
},
}, },
{ actionType: 'click',
content: () => ( content: () => (
<p> <p>
<Transi18next <Transi18next
i18nKey="message.tour-step-look-at-sample-data" i18nKey="message.tour-step-click-on-entity-tab"
renderElement={<strong />} renderElement={<strong />}
values={{ values={{
text: i18next.t('label.sample-data'), text: i18next.t('label.lineage'),
}} }}
/> />
</p> </p>
), ),
selector: '[data-testid="sample-data-table"]', selector: `[data-testid="${EntityTabs.LINEAGE}"]`,
}, },
{ {
beforePrev: () => { content: () => (
updateActiveTab(EntityTabs.SAMPLE_DATA); <p>
}, <Transi18next
beforeNext: () => { i18nKey="message.tour-step-trace-path-across-tables"
updateActiveTab(EntityTabs.PROFILER); renderElement={<strong />}
}, values={{
actionType: 'click', text: i18next.t('label.lineage'),
content: () => ( }}
<p> />
<Transi18next </p>
i18nKey="message.tour-step-click-on-entity-tab" ),
renderElement={<strong />} stepInteraction: false,
values={{ selector: '#lineageDetails',
text: i18next.t('label.profiler'), },
}} ];
/>
</p>
),
selector: `[data-testid="${EntityTabs.PROFILER}"]`,
},
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-discover-data-assets-with-data-profile"
renderElement={<strong />}
values={{
text: i18next.t('label.data-entity', {
entity: i18next.t('label.profiler'),
}),
}}
/>
</p>
),
stepInteraction: false,
selector: '#profilerDetails',
},
{
beforePrev: () => {
updateActiveTab(EntityTabs.PROFILER);
},
beforeNext: () => {
updateActiveTab(EntityTabs.LINEAGE);
},
actionType: 'click',
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-click-on-entity-tab"
renderElement={<strong />}
values={{
text: i18next.t('label.lineage'),
}}
/>
</p>
),
selector: `[data-testid="${EntityTabs.LINEAGE}"]`,
},
{
content: () => (
<p>
<Transi18next
i18nKey="message.tour-step-trace-path-across-tables"
renderElement={<strong />}
values={{
text: i18next.t('label.lineage'),
}}
/>
</p>
),
stepInteraction: false,
selector: '#lineageDetails',
},
];
};