perf(ui): deduplicate docStore persona requests via shared React Query key

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.test.tsx

@@ -21,10 +21,10 @@
 import GlossaryDetails from './GlossaryDetails.component';
 
 jest.mock('../GlossaryTermTab/GlossaryTermTab.component', () => {
   return jest.fn().mockReturnValue(<p>GlossaryTermTab.component</p>);
 });
 jest.mock('../GlossaryHeader/GlossaryHeader.component', () => {
   return jest.fn().mockReturnValue(<p>GlossaryHeader.component</p>);
 });
 jest.mock('react-router-dom', () => ({
   Link: jest
@@ -44,14 +44,22 @@
   () => ({
     ActivityFeedTab: jest
       .fn()
       .mockImplementation(() => <p>testActivityFeedTab</p>),
   })
 );
 
 jest.mock('../../common/EntityDescription/Description', () =>
   jest.fn().mockImplementation(() => <div>Description</div>)
 );
 
+jest.mock('../../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 const mockProps = {
   glossary: mockedGlossaries[0],
   glossaryTerms: [],
@@ -84,7 +92,7 @@
 }));
 
 jest.mock('../../Customization/GenericTab/GenericTab', () => ({
   GenericTab: jest.fn().mockImplementation(() => <div>GenericTab</div>),
 }));
 
 describe('Test Glossary-details component', () => {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.test.tsx

@@ -74,25 +74,25 @@
 
 jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockImplementation(() => params),
   Link: jest.fn().mockImplementation(({ children }) => <a>{children}</a>),
   useNavigate: jest.fn().mockReturnValue(jest.fn()),
   useLocation: jest.fn().mockImplementation(() => ({ pathname: 'mockPath' })),
 }));
 
 jest.mock('./GlossaryDetails/GlossaryDetails.component', () => {
   return jest.fn().mockReturnValue(<>Glossary-Details component</>);
 });
 
 jest.mock('./GlossaryTerms/GlossaryTermsV1.component', () => {
   return jest.fn().mockReturnValue(<>Glossary-Term component</>);
 });
 
 jest.mock('../common/TitleBreadcrumb/TitleBreadcrumb.component', () => {
   return jest.fn().mockReturnValue(<>TitleBreadcrumb</>);
 });
 
 jest.mock('../common/TitleBreadcrumb/TitleBreadcrumb.component', () =>
   jest.fn().mockReturnValue(<div>Breadcrumb</div>)
 );
 
 jest.mock('../common/ProfilePicture/ProfilePicture', () =>
@@ -130,6 +130,14 @@
   })
 );
 
+jest.mock('../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 const mockProps: GlossaryV1Props = {
   selectedData: mockedGlossaries[0],
   isGlossaryActive: true,

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

@@ -21,6 +21,14 @@ jest.mock(
   })
 );
 
+jest.mock('../../../hooks/useCustomPages', () => ({
+  useCustomPages: jest.fn().mockReturnValue({
+    customizedPage: null,
+    navigation: null,
+    isLoading: false,
+  }),
+}));
+
 describe('LeftSidebar', () => {
   it('renders sidebar links correctly', () => {
     render(

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomPages.test.ts

@@ -10,7 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
 import { Document } from '../generated/entity/docStore/document';
 import { PageType } from '../generated/system/ui/page';
 import { getDocumentByFQN } from '../rest/DocStoreAPI';
@@ -32,7 +34,16 @@ jest.mock('../rest/DocStoreAPI', () => ({
   getDocumentByFQN: jest.fn(),
 }));
 
+const createWrapper = (queryClient: QueryClient) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children);
+
+  return Wrapper;
+};
+
 describe('useCustomPages', () => {
+  let queryClient: QueryClient;
+
   const mockSelectedPersona = {
     fullyQualifiedName: 'test-persona',
   };
@@ -61,6 +72,11 @@ describe('useCustomPages', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
     mockUseApplicationStore.mockReturnValue({
       selectedPersona: mockSelectedPersona,
     });
@@ -69,8 +85,9 @@ describe('useCustomPages', () => {
   it('should fetch and return customized page and navigation when persona is selected', async () => {
     mockGetDocumentByFQN.mockResolvedValue(mockDocument);
 
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCustomPages(PageType.Table)
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCustomPages(PageType.Table),
+      { wrapper: createWrapper(queryClient) }
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -86,8 +103,9 @@ describe('useCustomPages', () => {
   it('should handle error when fetching document fails', async () => {
     mockGetDocumentByFQN.mockRejectedValue(new Error('API Error'));
 
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useCustomPages(PageType.Table)
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCustomPages(PageType.Table),
+      { wrapper: createWrapper(queryClient) }
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -105,33 +123,47 @@ describe('useCustomPages', () => {
       selectedPersona: null,
     });
 
-    const { result } = renderHook(() => useCustomPages(PageType.Table));
+    const { result } = renderHook(() => useCustomPages(PageType.Table), {
+      wrapper: createWrapper(queryClient),
+    });
 
     expect(mockGetDocumentByFQN).not.toHaveBeenCalled();
     expect(result.current.customizedPage).toBeNull();
     expect(result.current.navigation).toBeNull();
     expect(result.current.isLoading).toBe(false);
   });
 
-  it('should refetch document when pageType changes', async () => {
-    mockGetDocumentByFQN.mockResolvedValue(mockDocument);
+  it('should filter by pageType from cached doc without re-fetching', async () => {
+    const mockDocWithMultiplePages: Document = {
+      ...mockDocument,
+      data: {
+        pages: [
+          { pageType: PageType.Table, tabs: [] },
+          { pageType: PageType.Dashboard, tabs: [] },
+        ],
+        navigation: mockNavigation,
+      },
+    };
+    mockGetDocumentByFQN.mockResolvedValue(mockDocWithMultiplePages);
 
-    const { rerender, waitForNextUpdate } = renderHook(
-      ({ pageType }) => useCustomPages(pageType),
+    const { result, rerender, waitForNextUpdate } = renderHook(
+      ({ pageType }: { pageType: PageType }) => useCustomPages(pageType),
       {
         initialProps: { pageType: PageType.Table },
+        wrapper: createWrapper(queryClient),
       }
     );
 
     await waitForNextUpdate();
 
     expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(1);
+    expect(result.current.customizedPage?.pageType).toBe(PageType.Table);
 
     rerender({ pageType: PageType.Dashboard });
 
-    await waitForNextUpdate();
-
-    expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(2);
+    // Changing pageType filters from the cached doc — no additional network request.
+    expect(mockGetDocumentByFQN).toHaveBeenCalledTimes(1);
+    expect(result.current.customizedPage?.pageType).toBe(PageType.Dashboard);
   });
 
   it('should return updated results when selected persona changes', async () => {
@@ -149,6 +181,7 @@ describe('useCustomPages', () => {
         initialProps: {
           selectedPersona: { fullyQualifiedName: 'test-persona' },
         },
+        wrapper: createWrapper(queryClient),
       }
     );
 

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomPages.ts

@@ -10,48 +10,40 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { useCallback, useEffect, useState } from 'react';
-import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
-import { EntityType } from '../enums/entity.enum';
+import { useQuery } from '@tanstack/react-query';
 import { Page, PageType } from '../generated/system/ui/page';
 import { NavigationItem } from '../generated/system/ui/uiCustomization';
-import { getDocumentByFQN } from '../rest/DocStoreAPI';
+import {
+  docStoreQueryFn,
+  docStoreQueryKey,
+  personaDocFqn,
+} from '../rest/queries/docStoreQuery';
 import { useApplicationStore } from './useApplicationStore';
 
 export const useCustomPages = (pageType: PageType | 'Navigation') => {
   const { selectedPersona } = useApplicationStore();
-  const [customizedPage, setCustomizedPage] = useState<Page | null>(null);
-  const [navigation, setNavigation] = useState<NavigationItem[] | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const fqn = personaDocFqn(selectedPersona);
 
-  const fetchDocument = useCallback(async () => {
-    const pageFQN = `${EntityType.PERSONA}${FQN_SEPARATOR_CHAR}${selectedPersona?.fullyQualifiedName}`;
-    try {
-      const doc = await getDocumentByFQN(pageFQN);
-      setCustomizedPage(
-        doc.data?.pages?.find((p: Page | null) => p?.pageType === pageType)
-      );
-      setNavigation(doc.data?.navigation);
-    } catch (error) {
-      // Need to reset Navigation to avoid showing old navigation items
-      setNavigation([]);
-      setCustomizedPage(null);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [selectedPersona?.fullyQualifiedName, pageType]);
-
-  useEffect(() => {
-    if (selectedPersona?.fullyQualifiedName) {
-      fetchDocument();
-    } else {
-      setIsLoading(false);
-    }
-  }, [selectedPersona, pageType]);
+  const {
+    data: doc,
+    isPending,
+    isError,
+  } = useQuery({
+    queryKey: docStoreQueryKey(fqn ?? ''),
+    queryFn: docStoreQueryFn(fqn ?? ''),
+    enabled: !!fqn,
+    retry: false,
+  });
 
   return {
-    customizedPage,
-    navigation,
-    isLoading,
+    customizedPage:
+      (doc?.data?.pages?.find((p: Page | null) => p?.pageType === pageType) as
+        | Page
+        | undefined) ?? null,
+    // Reset to [] on error to clear stale navigation items, null when no persona selected.
+    navigation: isError
+      ? ([] as NavigationItem[])
+      : ((doc?.data?.navigation ?? null) as NavigationItem[] | null),
+    isLoading: !!fqn && isPending,
   };
 };

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

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { isEmpty } from 'lodash';
@@ -25,7 +26,6 @@ import CustomiseLandingPageHeader from '../../components/MyData/CustomizableComp
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
 import { LOGGED_IN_USER_STORAGE_KEY } from '../../constants/constants';
 import { LandingPageWidgetKeys } from '../../enums/CustomizablePage.enum';
-import { EntityType } from '../../enums/entity.enum';
 import type { Page } from '../../generated/system/ui/page';
 import { PageType } from '../../generated/system/ui/page';
 import type { PersonaPreferences } from '../../generated/type/personaPreferences';
@@ -37,7 +37,11 @@ import {
   AnnouncementEntity,
   getActiveAnnouncements,
 } from '../../rest/announcementsAPI';
-import { getDocumentByFQN } from '../../rest/DocStoreAPI';
+import {
+  docStoreQueryFn,
+  docStoreQueryKey,
+  personaDocFqn,
+} from '../../rest/queries/docStoreQuery';
 import { updateUserDetail } from '../../rest/userAPI';
 import { getConstrainedWidgetWidth } from '../../utils/CustomizableLandingPagePureUtils';
 import customizeMyDataPageClassBase from '../../utils/CustomizeMyDataPageClassBase';
@@ -75,18 +79,50 @@ const MyDataPage = () => {
     useApplicationStore();
   const { isWelcomeVisible } = useWelcomeStore();
 
-  const [isLoading, setIsLoading] = useState(true);
-  const [layout, setLayout] = useState<Array<WidgetConfig>>(
-    getDefaultLandingPageLayout
-  );
-
   const [showWelcomeScreen, setShowWelcomeScreen] = useState(false);
   const [isAnnouncementLoading, setIsAnnouncementLoading] =
     useState<boolean>(true);
   const [announcements, setAnnouncements] = useState<AnnouncementEntity[]>([]);
-  const [personaPreferences, setPersonaPreferences] = useState<
-    PersonaPreferences[]
-  >([]);
+
+  const personaFqn = personaDocFqn(selectedPersona);
+
+  const { data: docData, isPending: isDocPending } = useQuery({
+    queryKey: docStoreQueryKey(personaFqn ?? ''),
+    queryFn: docStoreQueryFn(personaFqn ?? ''),
+    enabled: !!personaFqn,
+    retry: false,
+  });
+
+  const isLoading = !!personaFqn && isDocPending;
+
+  const personaPreferences = useMemo<PersonaPreferences[]>(
+    () => docData?.data?.personPreferences ?? [],
+    [docData]
+  );
+
+  const layout = useMemo<Array<WidgetConfig>>(() => {
+    if (!docData || !selectedPersona) {
+      return getDefaultLandingPageLayout();
+    }
+    const pageData = docData.data?.pages?.find(
+      (p: Page) => p.pageType === PageType.LandingPage
+    ) ?? { layout: [], pageType: PageType.LandingPage };
+    const filteredLayout = (pageData.layout as WidgetConfig[])
+      .filter(
+        (widget: WidgetConfig) =>
+          !widget.i.startsWith(LandingPageWidgetKeys.CURATED_ASSETS) ||
+          !isEmpty(widget.config)
+      )
+      .map((widget: WidgetConfig) => ({
+        ...widget,
+        w: getConstrainedWidgetWidth(widget.w),
+        h: 3,
+      }));
+
+    return isEmpty(filteredLayout)
+      ? getDefaultLandingPageLayout()
+      : filteredLayout;
+  }, [docData, selectedPersona]);
   const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY);
 
   const loggedInUserName = useMemo(() => {
@@ -115,49 +151,6 @@ const MyDataPage = () => {
     return userPersonaBackgroundColor ?? adminPersonaBackgroundColor;
   }, [userPersonaBackgroundColor, adminPersonaBackgroundColor]);
 
-  const fetchDocument = async () => {
-    setIsLoading(true);
-
-    try {
-      if (selectedPersona) {
-        const pageFQN = `${EntityType.PERSONA}.${selectedPersona.fullyQualifiedName}`;
-        const docData = await getDocumentByFQN(pageFQN);
-
-        setPersonaPreferences(docData.data?.personPreferences ?? []);
-
-        const pageData = docData.data?.pages?.find(
-          (p: Page) => p.pageType === PageType.LandingPage
-        ) ?? { layout: [], pageType: PageType.LandingPage };
-
-        const filteredLayout = pageData.layout
-          .filter(
-            (widget: WidgetConfig) =>
-              !widget.i.startsWith(LandingPageWidgetKeys.CURATED_ASSETS) ||
-              !isEmpty(widget.config)
-          )
-          .map((widget: WidgetConfig) => {
-            return {
-              ...widget,
-              w: getConstrainedWidgetWidth(widget.w),
-              h: 3,
-            };
-          });
-
-        setLayout(
-          isEmpty(filteredLayout)
-            ? getDefaultLandingPageLayout()
-            : filteredLayout
-        );
-      } else {
-        setLayout(getDefaultLandingPageLayout());
-      }
-    } catch {
-      setLayout(getDefaultLandingPageLayout());
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   const updateWelcomeScreen = (show: boolean) => {
     if (loggedInUserName) {
       const arr = storageData ? storageData.split(',') : [];
@@ -169,10 +162,6 @@ const MyDataPage = () => {
     setShowWelcomeScreen(show);
   };
 
-  useEffect(() => {
-    fetchDocument();
-  }, [selectedPersona]);
-
   useEffect(() => {
     updateWelcomeScreen(!usernameExistsInCookie && isWelcomeVisible);