Fix #4391 UI : Use user API to get owns and following data on home page. (#6431)

openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx

@@ -12,7 +12,6 @@
  */
 
 import { Button, Card, Typography } from 'antd';
-import { FormattedTableData } from 'Models';
 import React, { Fragment, FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -21,14 +20,14 @@ import { getEntityIcon, getEntityLink } from '../../utils/TableUtils';
 import Ellipses from '../common/Ellipses/Ellipses';
 import { leftPanelAntCardStyle } from '../containers/PageLayout';
 interface Prop {
-  entityList: Array<FormattedTableData>;
+  entityList: Array<EntityReference>;
   headerText: string | JSX.Element;
   noDataPlaceholder: JSX.Element;
   testIDText: string;
 }
 
 interface AntdEntityListProp {
-  entityList: Array<FormattedTableData>;
+  entityList: Array<EntityReference>;
   headerText?: string | JSX.Element;
   headerTextLabel: string;
   noDataPlaceholder: JSX.Element;
@@ -58,12 +57,12 @@ const EntityList: FunctionComponent<Prop> = ({
                 )}`}
                 key={index}>
                 <div className="tw-flex">
-                  {getEntityIcon(item.index || item.type || '')}
+                  {getEntityIcon(item.type || '')}
                   <Link
                     className="tw-font-medium"
                     to={getEntityLink(
-                      item.index || item.type || '',
+                      item.type || '',
-                      item.fullyQualifiedName
+                      item.fullyQualifiedName as string
                     )}>
                     <Button
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
@@ -103,12 +102,12 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
                 )}`}
                 key={index}>
                 <div className="tw-flex">
-                  {getEntityIcon(item.index || item.type || '')}
+                  {getEntityIcon(item.type || '')}
                   <Link
                     className="tw-font-medium"
                     to={getEntityLink(
-                      item.index || item.type || '',
+                      item.type || '',
-                      item.fullyQualifiedName
+                      item.fullyQualifiedName as string
                     )}>
                     <Button
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { FormattedTableData, SearchDataFunctionType } from 'Models';
+import { EntityReference, SearchDataFunctionType } from 'Models';
 import { FeedFilter } from '../../enums/mydata.enum';
 import { Thread, ThreadType } from '../../generated/entity/feed/thread';
 import { User } from '../../generated/entity/teams/user';
@@ -34,8 +34,8 @@ export interface MyDataProps {
   ownedDataCount: number;
   countPipelines: number;
   userDetails?: User;
-  ownedData: Array<FormattedTableData>;
+  ownedData: Array<EntityReference>;
-  followedData: Array<FormattedTableData>;
+  followedData: Array<EntityReference>;
   feedData: Thread[];
   paging: Paging;
   isFeedLoading: boolean;

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

@@ -19,6 +19,7 @@ import {
   findByText,
   render,
 } from '@testing-library/react';
+import { EntityReference } from 'Models';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { User } from '../../generated/entity/teams/user';
@@ -233,6 +234,16 @@ const mockUserDetails = {
   },
 };
 
+const currentUserMockData = {
+  id: '7b26a534-25e8-4112-ae08-ee059f8918c4',
+  type: 'table',
+  name: 'test_dim_staff',
+  fullyQualifiedName: 'test_sample.test_db.test_dim_staff',
+  description: 'test test_dim_staff',
+  deleted: false,
+  href: 'http://localhost:8585/api/v1/tables/7b26a534-25e8-4112-ae08-ee059f8918c4',
+} as EntityReference;
+
 jest.mock('../../axiosAPIs/miscAPI', () => ({
   searchData: jest
     .fn()
@@ -333,14 +344,14 @@ const mockProp: MyDataProps = {
   feedData: formatDataResponse(mockData.data.hits.hits),
   fetchData: fetchData,
   fetchFeedHandler: mockFetchFeedHandler,
-  followedData: formatDataResponse(mockData.data.hits.hits),
+  followedData: currentUserMockData,
   isFeedLoading: false,
-  ownedData: formatDataResponse(mockData.data.hits.hits),
+  ownedData: currentUserMockData,
   paging: mockPaging,
   postFeedHandler: postFeed,
   userDetails: mockUserDetails as unknown as User,
   updateThreadHandler: jest.fn(),
-};
+} as unknown as MyDataProps;
 
 const mockObserve = jest.fn();
 const mockunObserve = jest.fn();

openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { FormattedTableData } from 'Models';
+import { EntityReference } from 'Models';
 import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { getRecentlyViewedData, prepareLabel } from '../../utils/CommonUtils';
 import { EntityListWithAntd } from '../EntityList/EntityList';
@@ -19,7 +19,7 @@ import Loader from '../Loader/Loader';
 
 const RecentlyViewed: FunctionComponent = () => {
   const recentlyViewedData = getRecentlyViewedData();
-  const [data, setData] = useState<Array<FormattedTableData>>([]);
+  const [data, setData] = useState<Array<EntityReference>>([]);
   const [isLoading, setIsloading] = useState<boolean>(false);
 
   const prepareData = () => {
@@ -31,11 +31,11 @@ const RecentlyViewed: FunctionComponent = () => {
             serviceType: item.serviceType,
             name: item.displayName || prepareLabel(item.entityType, item.fqn),
             fullyQualifiedName: item.fqn,
-            index: item.entityType,
+            type: item.entityType,
           };
         })
         .filter((item) => item.name);
-      setData(formattedData as unknown as FormattedTableData[]);
+      setData(formattedData as unknown as EntityReference[]);
       setIsloading(false);
     }
   };

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -491,6 +491,7 @@ declare module 'Models' {
     fqn: string;
     serviceType?: string;
     timestamp: number;
+    id: number;
   }
 
   interface RecentlySearchedData {

openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx

@@ -376,6 +376,7 @@ const DashboardDetailsPage = () => {
             fqn: fullyQualifiedName,
             serviceType: serviceType,
             timestamp: 0,
+            id: id,
           });
 
           fetchServiceDetails(service.type, service.name)

openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -369,6 +369,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
             fqn: fullyQualifiedName,
             serviceType: serviceType,
             timestamp: 0,
+            id: id,
           });
           setName(name);
 

openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx

@@ -15,7 +15,7 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { Operation } from 'fast-json-patch';
 import { isEmpty, isNil, isUndefined } from 'lodash';
 import { observer } from 'mobx-react';
-import { FormattedTableData } from 'Models';
+import { EntityReference } from 'Models';
 import React, {
   Fragment,
   useCallback,
@@ -27,13 +27,13 @@ import { useLocation } from 'react-router-dom';
 import AppState from '../../AppState';
 import { getAllDashboards } from '../../axiosAPIs/dashboardAPI';
 import { getFeedsWithFilter, postFeedById } from '../../axiosAPIs/feedsAPI';
-import { fetchSandboxConfig, searchData } from '../../axiosAPIs/miscAPI';
+import { fetchSandboxConfig } from '../../axiosAPIs/miscAPI';
 import { getAllMlModal } from '../../axiosAPIs/mlModelAPI';
 import { getAllPipelines } from '../../axiosAPIs/pipelineAPI';
 import { getAllTables } from '../../axiosAPIs/tableAPI';
 import { getTeams } from '../../axiosAPIs/teamsAPI';
 import { getAllTopics } from '../../axiosAPIs/topicsAPI';
-import { getUsers } from '../../axiosAPIs/userAPI';
+import { getUserById, getUsers } from '../../axiosAPIs/userAPI';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import GithubStarButton from '../../components/GithubStarButton/GithubStarButton';
 import Loader from '../../components/Loader/Loader';
@@ -44,19 +44,17 @@ import {
   onErrorText,
   onUpdatedConversastionError,
 } from '../../constants/feed.constants';
-import { myDataSearchIndex } from '../../constants/Mydata.constants';
+import { AssetsType } from '../../enums/entity.enum';
-import { FeedFilter, Ownership } from '../../enums/mydata.enum';
+import { FeedFilter } from '../../enums/mydata.enum';
 import { Thread, ThreadType } from '../../generated/entity/feed/thread';
 import { Paging } from '../../generated/type/paging';
 import { useAuth } from '../../hooks/authHooks';
 import jsonData from '../../jsons/en';
-import { formatDataResponse } from '../../utils/APIUtils';
 import {
   deletePost,
   getUpdatedThread,
   updateThreadData,
 } from '../../utils/FeedUtils';
-import { getMyDataFilters } from '../../utils/MyDataUtils';
 import { getAllServices } from '../../utils/ServiceUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 
@@ -73,8 +71,8 @@ const MyDataPage = () => {
   const [countUsers, setCountUsers] = useState<number>();
   const [countTeams, setCountTeams] = useState<number>();
 
-  const [ownedData, setOwnedData] = useState<Array<FormattedTableData>>();
+  const [ownedData, setOwnedData] = useState<Array<EntityReference>>();
-  const [followedData, setFollowedData] = useState<Array<FormattedTableData>>();
+  const [followedData, setFollowedData] = useState<Array<EntityReference>>();
   const [ownedDataCount, setOwnedDataCount] = useState(0);
   const [followedDataCount, setFollowedDataCount] = useState(0);
   const [pendingTaskCount, setPendingTaskCount] = useState(0);
@@ -263,52 +261,38 @@ const MyDataPage = () => {
     }
   };
 
-  const fetchMyData = () => {
+  const fetchMyData = async () => {
-    const ownedEntity = searchData(
+    if (!currentUser || !currentUser.id) {
-      '',
+      return;
-      1,
+    }
-      8,
+    try {
-      getMyDataFilters(
+      const { data: userData } = await getUserById(
-        Ownership.OWNER,
+        currentUser?.id,
-        AppState.userDetails,
+        'follows, owns'
-        AppState.nonSecureUserDetails
+      );
-      ),
-      '',
-      '',
-      myDataSearchIndex
-    );
 
-    const followedEntity = searchData(
+      if (userData) {
-      '',
+        const includeData = Object.values(AssetsType);
-      1,
+        const owns: EntityReference[] = userData.owns ?? [];
-      8,
+        const follows: EntityReference[] = userData.follows ?? [];
-      getMyDataFilters(
-        Ownership.FOLLOWERS,
-        AppState.userDetails,
-        AppState.nonSecureUserDetails
-      ),
-      '',
-      '',
-      myDataSearchIndex
-    );
 
-    Promise.allSettled([ownedEntity, followedEntity])
+        setFollowedDataCount(follows.length);
-      .then(([resOwnedEntity, resFollowedEntity]) => {
+        setOwnedDataCount(owns.length);
-        if (resOwnedEntity.status === 'fulfilled') {
+
-          setOwnedData(formatDataResponse(resOwnedEntity.value.data.hits.hits));
+        const includedOwnsData = owns.filter((data) =>
-          setOwnedDataCount(resOwnedEntity.value.data.hits.total.value);
+          includeData.includes(data.type as AssetsType)
-        }
+        );
-        if (resFollowedEntity.status === 'fulfilled') {
+        const includedFollowsData = follows.filter((data) =>
-          setFollowedDataCount(resFollowedEntity.value.data.hits.total.value);
+          includeData.includes(data.type as AssetsType)
-          setFollowedData(
+        );
-            formatDataResponse(resFollowedEntity.value.data.hits.hits)
+
-          );
+        setFollowedData(includedFollowsData.slice(0, 8));
-        }
+        setOwnedData(includedOwnsData.slice(0, 8));
-      })
+      }
-      .catch(() => {
+    } catch (err) {
-        setOwnedData([]);
+      setOwnedData([]);
-        setFollowedData([]);
+      setFollowedData([]);
-      });
+    }
   };
 
   const getFeedData = (

openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx

@@ -317,6 +317,7 @@ const PipelineDetailsPage = () => {
             fqn: fullyQualifiedName,
             serviceType: serviceType,
             timestamp: 0,
+            id: id,
           });
 
           setPipelineUrl(pipelineUrl);

openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx

@@ -428,6 +428,7 @@ const TopicDetailsPage: FunctionComponent = () => {
             fqn: fullyQualifiedName,
             serviceType: serviceType,
             timestamp: 0,
+            id: id,
           });
         } else {
           showErrorToast(