Fix(UI) #7403 : Explore page tabs data loading issue (#7461)

* Worked on fixing issue #7403

* Worked on explore page loading tab data issue

* code optimization

* Worked on comments

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -16,17 +16,20 @@ import {
   faSortAmountUpAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AxiosError } from 'axios';
 import classNames from 'classnames';
-import { cloneDeep, isEmpty, lowerCase } from 'lodash';
+import { cloneDeep, get, isEmpty, lowerCase } from 'lodash';
 import {
   AggregationType,
   Bucket,
   FilterObject,
   FormattedTableData,
+  SearchDataFunctionType,
   SearchResponse,
 } from 'Models';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import { searchData } from '../../axiosAPIs/miscAPI';
 import { Button } from '../../components/buttons/Button/Button';
 import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES';
 import FacetFilter from '../../components/common/facetfilter/FacetFilter';
@@ -50,6 +53,7 @@ import {
   UPDATABLE_AGGREGATION,
   ZERO_SIZE,
 } from '../../constants/explore.constants';
+import { mockSearchData } from '../../constants/mockTourData.constants';
 import { SearchIndex } from '../../enums/search.enum';
 import { usePrevious } from '../../hooks/usePrevious';
 import {
@@ -63,7 +67,11 @@ import AdvancedFields from '../AdvancedSearch/AdvancedFields';
 import AdvancedSearchDropDown from '../AdvancedSearch/AdvancedSearchDropDown';
 import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
 import PageLayoutV1 from '../containers/PageLayoutV1';
-import { AdvanceField, ExploreProps } from './explore.interface';
+import {
+  AdvanceField,
+  ExploreProps,
+  ExploreSearchData,
+} from './explore.interface';
 import SortingDropDown from './SortingDropDown';
 
 const Explore: React.FC<ExploreProps> = ({
@@ -73,20 +81,18 @@ const Explore: React.FC<ExploreProps> = ({
   searchFilter,
   tab,
   searchQuery,
-  searchResult,
   sortValue,
-  error,
   fetchCount,
   handleFilterChange,
   handlePathChange,
   handleSearchText,
-  fetchData,
   showDeleted,
   onShowDeleted,
   isFilterSelected,
   handleTabCounts,
 }: ExploreProps) => {
   const location = useLocation();
+  const isTourPage = location.pathname.includes(ROUTES.TOUR);
   const history = useHistory();
   const filterObject: FilterObject = {
     ...INITIAL_FILTERS,
@@ -106,6 +112,8 @@ const Explore: React.FC<ExploreProps> = ({
   const [sortOrder, setSortOrder] = useState<string>(INITIAL_SORT_ORDER);
   const [searchIndex, setSearchIndex] = useState<string>(getCurrentIndex(tab));
   const [currentTab, setCurrentTab] = useState<number>(getCurrentTab(tab));
+  const [error, setError] = useState<string>('');
+  const currentSearchIndex = useRef<string>();
 
   const [isEntityLoading, setIsEntityLoading] = useState(true);
   const [isFilterSet, setIsFilterSet] = useState<boolean>(
@@ -287,6 +295,117 @@ const Explore: React.FC<ExploreProps> = ({
     }
   };
 
+  const updateData = (searchResult: ExploreSearchData) => {
+    if (searchResult) {
+      updateSearchResults(searchResult.resSearchResults);
+      setCount(searchResult.resSearchResults.data.hits.total.value);
+      if (forceSetAgg.current) {
+        setAggregations(
+          searchResult.resSearchResults.data.hits.hits.length > 0
+            ? getAggregationList(
+                searchResult.resSearchResults.data.aggregations
+              )
+            : getAggregationListFromQS(location.search)
+        );
+        setIsInitialFilterSet(false);
+      } else {
+        const aggServiceType = getAggregationList(
+          searchResult.resAggServiceType.data.aggregations,
+          'service'
+        );
+        const aggTier = getAggregationList(
+          searchResult.resAggTier.data.aggregations,
+          'tier'
+        );
+        const aggTag = getAggregationList(
+          searchResult.resAggTag.data.aggregations,
+          'tags'
+        );
+        const aggDatabase = getAggregationList(
+          searchResult.resAggDatabase.data.aggregations,
+          'database'
+        );
+        const aggDatabaseSchema = getAggregationList(
+          searchResult.resAggDatabaseSchema.data.aggregations,
+          'databaseschema'
+        );
+        const aggServiceName = getAggregationList(
+          searchResult.resAggServiceName.data.aggregations,
+          'servicename'
+        );
+
+        updateAggregationCount([
+          ...aggServiceType,
+          ...aggTier,
+          ...aggTag,
+          ...aggDatabase,
+          ...aggDatabaseSchema,
+          ...aggServiceName,
+        ]);
+      }
+    }
+    setIsEntityLoading(false);
+  };
+
+  const fetchData = (value: SearchDataFunctionType[]) => {
+    if (isTourPage) {
+      updateData(mockSearchData as unknown as ExploreSearchData);
+    } else {
+      const promiseValue = value.map((d) => {
+        currentSearchIndex.current = d.searchIndex;
+
+        return searchData(
+          d.queryString,
+          d.from,
+          d.size,
+          d.filters,
+          d.sortField,
+          d.sortOrder,
+          d.searchIndex,
+          showDeleted
+        );
+      });
+
+      Promise.all(promiseValue)
+        .then(
+          ([
+            resSearchResults,
+            resAggServiceType,
+            resAggTier,
+            resAggTag,
+            resAggDatabase,
+            resAggDatabaseSchema,
+            resAggServiceName,
+          ]: Array<SearchResponse>) => {
+            setError('');
+            if (
+              currentSearchIndex.current ===
+                resSearchResults.data.hits.hits[0]?._index ||
+              isEmpty(resSearchResults.data.hits.hits)
+            ) {
+              updateData({
+                resSearchResults,
+                resAggServiceType,
+                resAggTier,
+                resAggTag,
+                resAggDatabase,
+                resAggDatabaseSchema,
+                resAggServiceName,
+              });
+              if (isEmpty(resSearchResults.data.hits.hits)) {
+                setTotalNumberOfValues(0);
+                setIsEntityLoading(false);
+              }
+            }
+          }
+        )
+        .catch((err: AxiosError) => {
+          const errMsg = get(err, 'response.data.responseMessage', '');
+          setError(errMsg);
+        });
+    }
+  };
+
   const fetchTableData = () => {
     setIsEntityLoading(true);
     const fetchParams = [
@@ -507,7 +626,9 @@ const Explore: React.FC<ExploreProps> = ({
   };
 
   useEffect(() => {
-    handleSearchText(searchQuery || emptyValue);
+    isTourPage
+      ? updateData(mockSearchData as unknown as ExploreSearchData)
+      : handleSearchText && handleSearchText(searchQuery || emptyValue);
     setCurrentPage(1);
   }, [searchQuery]);
 
@@ -546,58 +667,6 @@ const Explore: React.FC<ExploreProps> = ({
     }
   }, [searchText, searchIndex, showDeleted]);
 
-  useEffect(() => {
-    if (searchResult) {
-      updateSearchResults(searchResult.resSearchResults);
-      setCount(searchResult.resSearchResults.data.hits.total.value);
-      if (forceSetAgg.current) {
-        setAggregations(
-          searchResult.resSearchResults.data.hits.hits.length > 0
-            ? getAggregationList(
-                searchResult.resSearchResults.data.aggregations
-              )
-            : getAggregationListFromQS(location.search)
-        );
-        setIsInitialFilterSet(false);
-      } else {
-        const aggServiceType = getAggregationList(
-          searchResult.resAggServiceType.data.aggregations,
-          'service'
-        );
-        const aggTier = getAggregationList(
-          searchResult.resAggTier.data.aggregations,
-          'tier'
-        );
-        const aggTag = getAggregationList(
-          searchResult.resAggTag.data.aggregations,
-          'tags'
-        );
-        const aggDatabase = getAggregationList(
-          searchResult.resAggDatabase.data.aggregations,
-          'database'
-        );
-        const aggDatabaseSchema = getAggregationList(
-          searchResult.resAggDatabaseSchema.data.aggregations,
-          'databaseschema'
-        );
-        const aggServiceName = getAggregationList(
-          searchResult.resAggServiceName.data.aggregations,
-          'servicename'
-        );
-
-        updateAggregationCount([
-          ...aggServiceType,
-          ...aggTier,
-          ...aggTag,
-          ...aggDatabase,
-          ...aggDatabaseSchema,
-          ...aggServiceName,
-        ]);
-      }
-      setIsEntityLoading(false);
-    }
-  }, [searchResult]);
-
   useEffect(() => {
     getData();
   }, [currentPage, sortField, sortOrder]);
@@ -704,9 +773,7 @@ const Explore: React.FC<ExploreProps> = ({
             currentPage={currentPage}
             data={data}
             isFilterSelected={isFilterSelected}
-            isLoading={
+            isLoading={!isTourPage && isEntityLoading}
-              !location.pathname.includes(ROUTES.TOUR) && isEntityLoading
-            }
             paginate={paginate}
             searchText={searchText}
             totalValue={totalNumberOfValue}

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx

@@ -12,10 +12,8 @@
  */
 
 import { findAllByTestId, findByTestId, render } from '@testing-library/react';
-import { SearchResponse } from 'Models';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { mockResponse } from './exlore.mock';
 import Explore from './Explore.component';
 jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(),
@@ -55,6 +53,10 @@ jest.mock('../../components/common/facetfilter/FacetFilter', () =>
   jest.fn().mockImplementation(() => <div>FacetFilter</div>)
 );
 
+jest.mock('../../axiosAPIs/miscAPI', () => ({
+  searchData: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
 jest.mock(
   '../containers/PageLayoutV1',
   () =>
@@ -78,30 +80,17 @@ jest.mock(
 
 const mockFunction = jest.fn();
 
-const mockSearchResult = {
-  resSearchResults: mockResponse as unknown as SearchResponse,
-  resAggServiceType: mockResponse as unknown as SearchResponse,
-  resAggTier: mockResponse as unknown as SearchResponse,
-  resAggTag: mockResponse as unknown as SearchResponse,
-  resAggDatabase: mockResponse as unknown as SearchResponse,
-  resAggDatabaseSchema: mockResponse as unknown as SearchResponse,
-  resAggServiceName: mockResponse as unknown as SearchResponse,
-};
-
 describe('Test Explore component', () => {
   it('Component should render', async () => {
     const { container } = render(
       <Explore
         isFilterSelected
-        error=""
         fetchCount={mockFunction}
-        fetchData={mockFunction}
         handleFilterChange={mockFunction}
         handlePathChange={mockFunction}
         handleSearchText={mockFunction}
         handleTabCounts={mockFunction}
         searchQuery=""
-        searchResult={mockSearchResult}
         searchText=""
         showDeleted={false}
         sortValue=""

openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { FilterObject, SearchDataFunctionType, SearchResponse } from 'Models';
+import { FilterObject, SearchResponse } from 'Models';
 
 export type UrlParams = {
   searchQuery: string;
@@ -35,16 +35,13 @@ export interface ExploreProps {
   searchFilter?: FilterObject;
   sortValue: string;
   tab: string;
-  error: string;
   searchQuery: string;
   showDeleted: boolean;
-  searchResult: ExploreSearchData | undefined;
   isFilterSelected: boolean;
   fetchCount: () => void;
   handleFilterChange: (data: FilterObject) => void;
   handlePathChange: (path: string) => void;
-  handleSearchText: (text: string) => void;
+  handleSearchText?: (text: string) => void;
-  fetchData: (value: SearchDataFunctionType[]) => void;
   onShowDeleted: (checked: boolean) => void;
   handleTabCounts: (value: { [key: string]: number }) => void;
 }

openmetadata-ui/src/main/resources/ui/src/constants/mockTourData.constants.ts

@@ -4152,4 +4152,391 @@ export const mockSearchData = {
     },
     request: {},
   },
+  resAggDatabase: {
+    data: {
+      took: 1,
+      timed_out: false,
+      _shards: {
+        total: 1,
+        successful: 1,
+        skipped: 0,
+        failed: 0,
+      },
+      hits: {
+        total: {
+          value: 18,
+          relation: 'eq',
+        },
+        max_score: null,
+        hits: [],
+      },
+      aggregations: {
+        'sterms#EntityType': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'table',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#ServiceCategory': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'databaseService',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tier': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [],
+        },
+        'sterms#ServiceName': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'sample_data',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Database': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'ecommerce_db',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Service': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'BigQuery',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tags': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'PII.None',
+              doc_count: 1,
+            },
+          ],
+        },
+        'sterms#DatabaseSchema': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'shopify',
+              doc_count: 18,
+            },
+          ],
+        },
+      },
+    },
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      connection: 'close',
+      'content-encoding': 'gzip',
+      'content-type': 'application/json',
+      date: 'Thu, 15 Sep 2022 17:29:32 GMT',
+      'transfer-encoding': 'chunked',
+      vary: 'Accept-Encoding',
+      'x-powered-by': 'Express',
+    },
+    config: {
+      transitional: {
+        silentJSONParsing: true,
+        forcedJSONParsing: true,
+        clarifyTimeoutError: false,
+      },
+      transformRequest: [null],
+      transformResponse: [null],
+      timeout: 0,
+      xsrfCookieName: 'XSRF-TOKEN',
+      xsrfHeaderName: 'X-XSRF-TOKEN',
+      maxContentLength: -1,
+      maxBodyLength: -1,
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+      },
+      baseURL: '/api/v1',
+      method: 'get',
+      url: '/search/query?q=*&from=0&size=0&sort_field=updatedAt&sort_order=desc&index=table_search_index',
+    },
+    request: {},
+  },
+  resAggDatabaseSchema: {
+    data: {
+      took: 1,
+      timed_out: false,
+      _shards: {
+        total: 1,
+        successful: 1,
+        skipped: 0,
+        failed: 0,
+      },
+      hits: {
+        total: {
+          value: 18,
+          relation: 'eq',
+        },
+        max_score: null,
+        hits: [],
+      },
+      aggregations: {
+        'sterms#EntityType': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'table',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#ServiceCategory': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'databaseService',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tier': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [],
+        },
+        'sterms#ServiceName': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'sample_data',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Database': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'ecommerce_db',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Service': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'BigQuery',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tags': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'PII.None',
+              doc_count: 1,
+            },
+          ],
+        },
+        'sterms#DatabaseSchema': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'shopify',
+              doc_count: 18,
+            },
+          ],
+        },
+      },
+    },
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      connection: 'close',
+      'content-encoding': 'gzip',
+      'content-type': 'application/json',
+      date: 'Thu, 15 Sep 2022 17:29:32 GMT',
+      'transfer-encoding': 'chunked',
+      vary: 'Accept-Encoding',
+      'x-powered-by': 'Express',
+    },
+    config: {
+      transitional: {
+        silentJSONParsing: true,
+        forcedJSONParsing: true,
+        clarifyTimeoutError: false,
+      },
+      transformRequest: [null],
+      transformResponse: [null],
+      timeout: 0,
+      xsrfCookieName: 'XSRF-TOKEN',
+      xsrfHeaderName: 'X-XSRF-TOKEN',
+      maxContentLength: -1,
+      maxBodyLength: -1,
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+      },
+      baseURL: '/api/v1',
+      method: 'get',
+      url: '/search/query?q=*&from=0&size=0&sort_field=updatedAt&sort_order=desc&index=table_search_index',
+    },
+    request: {},
+  },
+  resAggServiceName: {
+    data: {
+      took: 1,
+      timed_out: false,
+      _shards: {
+        total: 1,
+        successful: 1,
+        skipped: 0,
+        failed: 0,
+      },
+      hits: {
+        total: {
+          value: 18,
+          relation: 'eq',
+        },
+        max_score: null,
+        hits: [],
+      },
+      aggregations: {
+        'sterms#EntityType': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'table',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#ServiceCategory': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'databaseService',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tier': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [],
+        },
+        'sterms#ServiceName': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'sample_data',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Database': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'ecommerce_db',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Service': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'BigQuery',
+              doc_count: 18,
+            },
+          ],
+        },
+        'sterms#Tags': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'PII.None',
+              doc_count: 1,
+            },
+          ],
+        },
+        'sterms#DatabaseSchema': {
+          doc_count_error_upper_bound: 0,
+          sum_other_doc_count: 0,
+          buckets: [
+            {
+              key: 'shopify',
+              doc_count: 18,
+            },
+          ],
+        },
+      },
+    },
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      connection: 'close',
+      'content-encoding': 'gzip',
+      'content-type': 'application/json',
+      date: 'Thu, 15 Sep 2022 17:29:32 GMT',
+      'transfer-encoding': 'chunked',
+      vary: 'Accept-Encoding',
+      'x-powered-by': 'Express',
+    },
+    config: {
+      transitional: {
+        silentJSONParsing: true,
+        forcedJSONParsing: true,
+        clarifyTimeoutError: false,
+      },
+      transformRequest: [null],
+      transformResponse: [null],
+      timeout: 0,
+      xsrfCookieName: 'XSRF-TOKEN',
+      xsrfHeaderName: 'X-XSRF-TOKEN',
+      maxContentLength: -1,
+      maxBodyLength: -1,
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+      },
+      baseURL: '/api/v1',
+      method: 'get',
+      url: '/search/query?q=*&from=0&size=0&sort_field=updatedAt&sort_order=desc&index=table_search_index',
+    },
+    request: {},
+  },
 };

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx

@@ -11,14 +11,8 @@
  *  limitations under the License.
  */
 
-import { AxiosError } from 'axios';
+import { isEmpty } from 'lodash';
-import { get, isEmpty } from 'lodash';
+import { Bucket, FilterObject } from 'Models';
-import {
-  Bucket,
-  FilterObject,
-  SearchDataFunctionType,
-  SearchResponse,
-} from 'Models';
 import React, { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
@@ -26,24 +20,19 @@ import { searchData } from '../../axiosAPIs/miscAPI';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Explore from '../../components/Explore/Explore.component';
 import {
-  ExploreSearchData,
   TabCounts,
   UrlParams,
 } from '../../components/Explore/explore.interface';
-import { getExplorePathWithSearch, PAGE_SIZE } from '../../constants/constants';
+import { getExplorePathWithSearch } from '../../constants/constants';
 import {
   emptyValue,
-  getCurrentIndex,
   getCurrentTab,
   getEntityTypeByIndex,
   getInitialFilter,
   getQueryParam,
   getSearchFilter,
-  INITIAL_FROM,
-  INITIAL_SORT_ORDER,
   INITIAL_TAB_COUNTS,
   tabsInfo,
-  ZERO_SIZE,
 } from '../../constants/explore.constants';
 import { SearchIndex } from '../../enums/search.enum';
 import jsonData from '../../jsons/en';
@@ -62,11 +51,11 @@ const ExplorePage: FunctionComponent = () => {
     () => getQueryParam(getSearchFilter(location.search)),
     [location.search]
   );
-  const [error, setError] = useState<string>('');
+
   const { searchQuery, tab } = useParams<UrlParams>();
+
   const [searchText, setSearchText] = useState<string>(searchQuery || '');
   const [tabCounts, setTabCounts] = useState<TabCounts>(INITIAL_TAB_COUNTS);
-  const [searchResult, setSearchResult] = useState<ExploreSearchData>();
   const [showDeleted, setShowDeleted] = useState(false);
   const [initialSortField] = useState<string>(
     tabsInfo[getCurrentTab(tab) - 1].sortField
@@ -137,49 +126,6 @@ const ExplorePage: FunctionComponent = () => {
     fetchEntityCount(SearchIndex.MLMODEL);
   };
 
-  const fetchData = (value: SearchDataFunctionType[]) => {
-    const promiseValue = value.map((d) => {
-      return searchData(
-        d.queryString,
-        d.from,
-        d.size,
-        d.filters,
-        d.sortField,
-        d.sortOrder,
-        d.searchIndex,
-        showDeleted
-      );
-    });
-
-    Promise.all(promiseValue)
-      .then(
-        ([
-          resSearchResults,
-          resAggServiceType,
-          resAggTier,
-          resAggTag,
-          resAggDatabase,
-          resAggDatabaseSchema,
-          resAggServiceName,
-        ]: Array<SearchResponse>) => {
-          setError('');
-          setSearchResult({
-            resSearchResults,
-            resAggServiceType,
-            resAggTier,
-            resAggTag,
-            resAggDatabase,
-            resAggDatabaseSchema,
-            resAggServiceName,
-          });
-        }
-      )
-      .catch((err: AxiosError) => {
-        const errMsg = get(err, 'response.data.responseMessage', '');
-        setError(errMsg);
-      });
-  };
-
   useEffect(() => {
     fetchCounts();
   }, [searchText, showDeleted, initialFilter]);
@@ -188,55 +134,10 @@ const ExplorePage: FunctionComponent = () => {
     AppState.updateExplorePageTab(tab);
   }, [tab]);
 
-  useEffect(() => {
-    setSearchResult(undefined);
-
-    fetchData([
-      {
-        queryString: searchText,
-        from: INITIAL_FROM,
-        size: PAGE_SIZE,
-        filters: getFilterString(initialFilter),
-        sortField: initialSortField,
-        sortOrder: INITIAL_SORT_ORDER,
-        searchIndex: getCurrentIndex(tab),
-      },
-      {
-        queryString: searchText,
-        from: INITIAL_FROM,
-        size: ZERO_SIZE,
-        filters: getFilterString(initialFilter),
-        sortField: initialSortField,
-        sortOrder: INITIAL_SORT_ORDER,
-        searchIndex: getCurrentIndex(tab),
-      },
-      {
-        queryString: searchText,
-        from: INITIAL_FROM,
-        size: ZERO_SIZE,
-        filters: getFilterString(initialFilter),
-        sortField: initialSortField,
-        sortOrder: INITIAL_SORT_ORDER,
-        searchIndex: getCurrentIndex(tab),
-      },
-      {
-        queryString: searchText,
-        from: INITIAL_FROM,
-        size: ZERO_SIZE,
-        filters: getFilterString(initialFilter),
-        sortField: initialSortField,
-        sortOrder: INITIAL_SORT_ORDER,
-        searchIndex: getCurrentIndex(tab),
-      },
-    ]);
-  }, []);
-
   return (
     <PageContainerV1>
       <Explore
-        error={error}
         fetchCount={fetchCounts}
-        fetchData={fetchData}
         handleFilterChange={handleFilterChange}
         handlePathChange={handlePathChange}
         handleSearchText={handleSearchText}
@@ -245,7 +146,6 @@ const ExplorePage: FunctionComponent = () => {
         isFilterSelected={!isEmpty(searchFilter) || !isEmpty(initialFilter)}
         searchFilter={searchFilter}
         searchQuery={searchQuery}
-        searchResult={searchResult}
         searchText={searchText}
         showDeleted={showDeleted}
         sortValue={initialSortField}

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx

@@ -18,7 +18,6 @@ import { useLocation } from 'react-router-dom';
 import AppState from '../../AppState';
 import DatasetDetails from '../../components/DatasetDetails/DatasetDetails.component';
 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';
@@ -27,7 +26,6 @@ import { ROUTES, TOUR_SEARCH_TERM } from '../../constants/constants';
 import {
   mockDatasetData,
   mockFeedData,
-  mockSearchData as exploreSearchData,
 } from '../../constants/mockTourData.constants';
 import { CurrentTourPageType } from '../../enums/tour.enum';
 import {
@@ -58,8 +56,6 @@ const TourPage = () => {
     AppState.currentTourPage
   );
   const [myDataSearchResult, setMyDataSearchResult] = useState(mockFeedData);
-  const [exploreSearchResult, setExploreSearchResult] =
-    useState(exploreSearchData);
   const [datasetActiveTab, setdatasetActiveTab] = useState(
     AppState.activeTabforTourDatasetPage
   );
@@ -159,15 +155,11 @@ const TourPage = () => {
         return (
           <Explore
             isFilterSelected
-            error=""
             fetchCount={handleCountChange}
-            fetchData={() => setExploreSearchResult(exploreSearchData)}
             handleFilterChange={handleFilterChange}
             handlePathChange={handleCountChange}
-            handleSearchText={() => setExploreSearchResult(exploreSearchData)}
             handleTabCounts={handleCountChange}
             searchQuery=""
-            searchResult={exploreSearchResult as unknown as ExploreSearchData}
             searchText=""
             showDeleted={false}
             sortValue=""