supported followed data in Following widget using search api (#17689)

(cherry picked from commit 84036048baf08970e04d2710646069e18768bcc7)

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

@@ -96,9 +96,15 @@ jest.mock('../../../../rest/feedsAPI', () => ({
     .mockImplementation(() => mockActiveAnnouncementData),
 }));
 
-jest.mock('../../../../rest/userAPI', () => ({
-  getUserById: jest.fn().mockImplementation(() => mockUserData),
-}));
+jest.mock('../../../../rest/searchAPI', () => {
+  return {
+    searchQuery: jest
+      .fn()
+      .mockImplementation(() =>
+        Promise.resolve({ hits: { hits: [], total: { value: 0 } } })
+      ),
+  };
+});
 
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockImplementation(() => ({ pathname: '' })),

openmetadata-ui/src/main/resources/ui/src/components/MyData/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx

@@ -19,12 +19,13 @@ import RGL, { Layout, WidthProvider } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import gridBgImg from '../../../../assets/img/grid-bg-img.png';
+import { KNOWLEDGE_LIST_LENGTH } from '../../../../constants/constants';
 import {
   GlobalSettingOptions,
   GlobalSettingsMenuCategory,
 } from '../../../../constants/GlobalSettings.constants';
 import { LandingPageWidgetKeys } from '../../../../enums/CustomizablePage.enum';
-import { TabSpecificField } from '../../../../enums/entity.enum';
+import { SearchIndex } from '../../../../enums/search.enum';
 import { Document } from '../../../../generated/entity/docStore/document';
 import { EntityReference } from '../../../../generated/entity/type';
 import { useApplicationStore } from '../../../../hooks/useApplicationStore';
@@ -32,7 +33,7 @@ import { useFqn } from '../../../../hooks/useFqn';
 import { useGridLayoutDirection } from '../../../../hooks/useGridLayoutDirection';
 import { WidgetConfig } from '../../../../pages/CustomizablePage/CustomizablePage.interface';
 import '../../../../pages/MyDataPage/my-data.less';
-import { getUserById } from '../../../../rest/userAPI';
+import { searchQuery } from '../../../../rest/searchAPI';
 import { Transi18next } from '../../../../utils/CommonUtils';
 import {
   getAddWidgetHandler,
@@ -82,7 +83,7 @@ function CustomizeMyData({
   );
   const [isWidgetModalOpen, setIsWidgetModalOpen] = useState<boolean>(false);
   const [isResetModalOpen, setIsResetModalOpen] = useState<boolean>(false);
-  const [followedData, setFollowedData] = useState<Array<EntityReference>>();
+  const [followedData, setFollowedData] = useState<Array<EntityReference>>([]);
   const [followedDataCount, setFollowedDataCount] = useState(0);
   const [isLoadingOwnedData, setIsLoadingOwnedData] = useState<boolean>(false);
   const [saving, setSaving] = useState<boolean>(false);
@@ -139,23 +140,22 @@ function CustomizeMyData({
     setIsWidgetModalOpen(false);
   }, []);
 
-  const fetchMyData = async () => {
+  const fetchUserFollowedData = async () => {
     if (!currentUser?.id) {
       return;
     }
     setIsLoadingOwnedData(true);
     try {
-      const userData = await getUserById(currentUser?.id, {
-        fields: [TabSpecificField.FOLLOWS, TabSpecificField.OWNS],
+      const res = await searchQuery({
+        pageSize: KNOWLEDGE_LIST_LENGTH,
+        searchIndex: SearchIndex.ALL,
+        query: '*',
+        filters: `followers:${currentUser.id}`,
       });
 
-      if (userData) {
-        const follows: EntityReference[] = userData.follows ?? [];
-        setFollowedDataCount(follows.length);
-        setFollowedData(follows.slice(0, 8));
-      }
+      setFollowedDataCount(res?.hits?.total.value ?? 0);
+      setFollowedData(res.hits.hits.map((hit) => hit._source));
     } catch (err) {
-      setFollowedData([]);
       showErrorToast(err as AxiosError);
     } finally {
       setIsLoadingOwnedData(false);
@@ -175,8 +175,8 @@ function CustomizeMyData({
       layout.map((widget) => (
         <div data-grid={widget} id={widget.i} key={widget.i}>
           {getWidgetFromKey({
-            followedData: followedData ?? [],
-            followedDataCount: followedDataCount,
+            followedData,
+            followedDataCount,
             isLoadingOwnedData: isLoadingOwnedData,
             widgetConfig: widget,
             handleOpenAddWidgetModal: handleOpenAddWidgetModal,
@@ -238,7 +238,7 @@ function CustomizeMyData({
   }, []);
 
   useEffect(() => {
-    fetchMyData();
+    fetchUserFollowedData();
   }, []);
 
   const handleSave = async () => {

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

@@ -55,6 +55,7 @@ export const REFRESH_TOKEN_KEY = 'refreshToken';
 export const USER_DATA_SIZE = 5;
 export const INITIAL_PAGING_VALUE = 1;
 export const JSON_TAB_SIZE = 2;
+export const KNOWLEDGE_LIST_LENGTH = 8;
 export const PAGE_SIZE = 10;
 export const PAGE_SIZE_BASE = 15;
 export const PAGE_SIZE_MEDIUM = 25;

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

@@ -26,8 +26,12 @@ import ActivityFeedProvider from '../../components/ActivityFeed/ActivityFeedProv
 import Loader from '../../components/common/Loader/Loader';
 import WelcomeScreen from '../../components/MyData/WelcomeScreen/WelcomeScreen.component';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
-import { LOGGED_IN_USER_STORAGE_KEY } from '../../constants/constants';
-import { EntityType, TabSpecificField } from '../../enums/entity.enum';
+import {
+  KNOWLEDGE_LIST_LENGTH,
+  LOGGED_IN_USER_STORAGE_KEY,
+} from '../../constants/constants';
+import { EntityType } from '../../enums/entity.enum';
+import { SearchIndex } from '../../enums/search.enum';
 import { Thread } from '../../generated/entity/feed/thread';
 import { PageType } from '../../generated/system/ui/page';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -36,7 +40,7 @@ import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useGridLayoutDirection } from '../../hooks/useGridLayoutDirection';
 import { getDocumentByFQN } from '../../rest/DocStoreAPI';
 import { getActiveAnnouncement } from '../../rest/feedsAPI';
-import { getUserById } from '../../rest/userAPI';
+import { searchQuery } from '../../rest/searchAPI';
 import { getWidgetFromKey } from '../../utils/CustomizableLandingPageUtils';
 import customizePageClassBase from '../../utils/CustomizePageClassBase';
 import { showErrorToast } from '../../utils/ToastUtils';
@@ -48,7 +52,7 @@ const ReactGridLayout = WidthProvider(RGL);
 const MyDataPage = () => {
   const { t } = useTranslation();
   const { currentUser, selectedPersona } = useApplicationStore();
-  const [followedData, setFollowedData] = useState<Array<EntityReference>>();
+  const [followedData, setFollowedData] = useState<Array<EntityReference>>([]);
   const [followedDataCount, setFollowedDataCount] = useState(0);
   const [isLoadingOwnedData, setIsLoadingOwnedData] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -109,23 +113,22 @@ const MyDataPage = () => {
     return () => updateWelcomeScreen(false);
   }, []);
 
-  const fetchMyData = async () => {
+  const fetchUserFollowedData = async () => {
     if (!currentUser?.id) {
       return;
     }
     setIsLoadingOwnedData(true);
     try {
-      const userData = await getUserById(currentUser?.id, {
-        fields: [TabSpecificField.FOLLOWS, TabSpecificField.OWNS],
+      const res = await searchQuery({
+        pageSize: KNOWLEDGE_LIST_LENGTH,
+        searchIndex: SearchIndex.ALL,
+        query: '*',
+        filters: `followers:${currentUser.id}`,
       });
 
-      if (userData) {
-        const follows: EntityReference[] = userData.follows ?? [];
-        setFollowedDataCount(follows.length);
-        setFollowedData(follows.slice(0, 8));
-      }
+      setFollowedDataCount(res?.hits?.total.value ?? 0);
+      setFollowedData(res.hits.hits.map((hit) => hit._source));
     } catch (err) {
-      setFollowedData([]);
       showErrorToast(err as AxiosError);
     } finally {
       setIsLoadingOwnedData(false);
@@ -134,7 +137,7 @@ const MyDataPage = () => {
 
   useEffect(() => {
     if (currentUser) {
-      fetchMyData();
+      fetchUserFollowedData();
     }
   }, [currentUser]);
 
@@ -152,8 +155,8 @@ const MyDataPage = () => {
         <div data-grid={widget} key={widget.i}>
           {getWidgetFromKey({
             announcements: announcements,
-            followedData: followedData ?? [],
-            followedDataCount: followedDataCount,
+            followedData,
+            followedDataCount,
             isLoadingOwnedData: isLoadingOwnedData,
             widgetConfig: widget,
           })}

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

@@ -103,11 +103,15 @@ jest.mock('../../rest/feedsAPI', () => ({
     .fn()
     .mockImplementation(() => Promise.resolve(mockActiveAnnouncementData)),
 }));
-jest.mock('../../rest/userAPI', () => ({
-  getUserById: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve(mockUserData)),
-}));
+jest.mock('../../rest/searchAPI', () => {
+  return {
+    searchQuery: jest
+      .fn()
+      .mockImplementation(() =>
+        Promise.resolve({ hits: { hits: [], total: { value: 0 } } })
+      ),
+  };
+});
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockImplementation(() => ({ pathname: '' })),
 }));