From ef2a27a21749f783cc986bfd51c25bffb8604d8f Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Thu, 9 Nov 2023 10:22:09 +0530
Subject: [PATCH] fix tour page not showing (#13902)

---
 .../ActivityFeedListV1.component.tsx          |   5 +-
 .../pages/tour-page/TourPage.component.tsx    |  10 +-
 .../main/resources/ui/src/utils/TourUtils.tsx | 509 +++++++++---------
 3 files changed, 264 insertions(+), 260 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
index 359996ccfc1..a014a4bb510 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
@@ -69,7 +69,10 @@ const ActivityFeedListV1 = ({
   }
 
   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
         icon={
           isTaskTab ? (
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 631cdc3042b..4b974b50d0f 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,7 +12,7 @@
  */
 
 import { observer } from 'mobx-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Tour from '../../components/tour/Tour';
 import { useTourProvider } from '../../components/TourProvider/TourProvider';
 import { TOUR_SEARCH_TERM } from '../../constants/constants';
@@ -39,8 +39,8 @@ const TourPage = () => {
     updateIsTourOpen(true);
   }, []);
 
-  const getCurrentPage = (page: CurrentTourPageType) => {
-    switch (page) {
+  const currentPageComponent = useMemo(() => {
+    switch (currentTourPage) {
       case CurrentTourPageType.MY_DATA_PAGE:
         return <MyDataPageV1 />;
 
@@ -53,7 +53,7 @@ const TourPage = () => {
       default:
         return;
     }
-  };
+  }, [currentTourPage]);
 
   return (
     <>
@@ -65,7 +65,7 @@ const TourPage = () => {
           updateTourPage,
         })}
       />
-      {getCurrentPage(currentTourPage)}
+      {currentPageComponent}
     </>
   );
 };
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 4e570e014cc..3e10cf08e0d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TourUtils.tsx
@@ -24,267 +24,268 @@ interface ArgObject {
   clearSearchTerm: () => void;
 }
 
-export const getTourSteps = (args: ArgObject) => {
-  const { searchTerm, clearSearchTerm, updateActiveTab, updateTourPage } = args;
-
-  return [
-    {
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-step-activity-feed"
-            renderElement={<strong />}
-            values={{
-              text: i18next.t('label.activity-feed-plural'),
-            }}
-          />
-        </p>
-      ),
-      selector: '#feedData',
-      stepInteraction: false,
+export const getTourSteps = ({
+  searchTerm,
+  clearSearchTerm,
+  updateActiveTab,
+  updateTourPage,
+}: ArgObject) => [
+  {
+    content: () => (
+      <p>
+        <Transi18next
+          i18nKey="message.tour-step-activity-feed"
+          renderElement={<strong />}
+          values={{
+            text: i18next.t('label.activity-feed-plural'),
+          }}
+        />
+      </p>
+    ),
+    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>
-          <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: () => {
+      updateTourPage(CurrentTourPageType.MY_DATA_PAGE);
     },
-    {
-      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>
+        <Transi18next
+          i18nKey="message.tour-step-explore-summary-asset"
+          renderElement={<strong />}
+          values={{
+            text: i18next.t('label.explore'),
+          }}
+        />
+      </p>
+    ),
+    selector: '#tabledatacard0',
+    stepInteraction: false,
+  },
+  {
+    content: () => (
+      <p>
+        <Transi18next
+          i18nKey="message.tour-step-click-on-link-to-view-more"
+          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);
-      },
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-step-explore-summary-asset"
-            renderElement={<strong />}
-            values={{
-              text: i18next.t('label.explore'),
-            }}
-          />
-        </p>
-      ),
-      selector: '#tabledatacard0',
-      stepInteraction: false,
+  },
+  {
+    beforePrev: () => {
+      updateTourPage(CurrentTourPageType.EXPLORE_PAGE);
     },
-    {
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-step-click-on-link-to-view-more"
-            renderElement={<strong />}
-          />
-        </p>
-      ),
-      actionType: 'click',
-      selector: '[data-testid="sample_data.ecommerce_db.shopify.dim_address"]',
-      beforeNext: () => {
-        updateTourPage(CurrentTourPageType.DATASET_PAGE);
-      },
+    content: () => (
+      <p>
+        <Transi18next
+          i18nKey="message.tour-high-level-assets-information-step"
+          renderElement={<strong />}
+          values={{
+            text: i18next.t('label.schema'),
+          }}
+        />
+      </p>
+    ),
+    stepInteraction: false,
+    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);
     },
-    {
-      beforePrev: () => {
-        updateTourPage(CurrentTourPageType.EXPLORE_PAGE);
-      },
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-high-level-assets-information-step"
-            renderElement={<strong />}
-            values={{
-              text: i18next.t('label.schema'),
-            }}
-          />
-        </p>
-      ),
-      stepInteraction: false,
-      selector: '[data-testid="entity-page-header"]',
+    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);
     },
-    {
-      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-step-look-at-sample-data"
+          renderElement={<strong />}
+          values={{
+            text: i18next.t('label.sample-data'),
+          }}
+        />
+      </p>
+    ),
+    selector: '[data-testid="sample-data-table"]',
+  },
+  {
+    beforePrev: () => {
+      updateActiveTab(EntityTabs.SAMPLE_DATA);
     },
-    {
-      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"]',
+    beforeNext: () => {
+      updateActiveTab(EntityTabs.PROFILER);
     },
-    {
-      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',
+    actionType: 'click',
+    content: () => (
+      <p>
+        <Transi18next
+          i18nKey="message.tour-step-click-on-entity-tab"
+          renderElement={<strong />}
+          values={{
+            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);
     },
-    {
-      beforePrev: () => {
-        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);
-      },
+    beforeNext: () => {
+      updateActiveTab(EntityTabs.LINEAGE);
     },
-    {
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-step-look-at-sample-data"
-            renderElement={<strong />}
-            values={{
-              text: i18next.t('label.sample-data'),
-            }}
-          />
-        </p>
-      ),
-      selector: '[data-testid="sample-data-table"]',
-    },
-    {
-      beforePrev: () => {
-        updateActiveTab(EntityTabs.SAMPLE_DATA);
-      },
-      beforeNext: () => {
-        updateActiveTab(EntityTabs.PROFILER);
-      },
-      actionType: 'click',
-      content: () => (
-        <p>
-          <Transi18next
-            i18nKey="message.tour-step-click-on-entity-tab"
-            renderElement={<strong />}
-            values={{
-              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',
-    },
-  ];
-};
+    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',
+  },
+];