Refactor code splitting and optimize chunk loading in Vite config

openmetadata-ui/pom.xml

@@ -152,6 +152,7 @@
               <!--arguments>build</arguments-->
               <environmentVariables>
                 <NODE_OPTIONS>--max-old-space-size=${node.heap.size}</NODE_OPTIONS>
+                <APP_VERSION>${project.version}</APP_VERSION>
               </environmentVariables>
             </configuration>
           </execution>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/RTL.spec.ts

@@ -20,6 +20,7 @@ import { clickOutside, redirectToHomePage } from '../../utils/common';
 import {
   followEntity,
   validateFollowedEntityToWidget,
+  waitForAllLoadersToDisappear,
 } from '../../utils/entity';
 
 const user = new UserClass();
@@ -52,6 +53,7 @@ test.describe('Verify RTL Layout for landing page', () => {
       .locator('.ant-dropdown:visible [data-menu-id*="-he-HE"]')
       .click();
     await page.waitForLoadState('domcontentloaded');
+    await waitForAllLoadersToDisappear(page);
   });
 
   test('Verify DataAssets widget functionality', async ({

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Login.spec.ts

@@ -15,9 +15,14 @@ import { JWT_EXPIRY_TIME_MAP, LOGIN_ERROR_MESSAGE } from '../../constant/login';
 import { AdminClass } from '../../support/user/AdminClass';
 import { UserClass } from '../../support/user/UserClass';
 import { performAdminLogin } from '../../utils/admin';
-import { clickOutside, redirectToHomePage } from '../../utils/common';
+import {
+  clickOutside,
+  getDefaultAdminAPIContext,
+  redirectToHomePage,
+  visitOwnProfilePage,
+} from '../../utils/common';
+import { waitForAllLoadersToDisappear } from '../../utils/entity';
 import { updateJWTTokenExpiryTime } from '../../utils/login';
-import { visitUserProfilePage } from '../../utils/user';
 
 const user = new UserClass();
 const CREDENTIALS = user.data;
@@ -149,36 +154,56 @@ test.describe('Login flow should work properly', () => {
     await page.locator('[data-testid="go-back-button"]').click();
   });
 
-  test('Refresh should work', async ({ browser }) => {
-    const browserContext = await browser.newContext();
-    const { apiContext, afterAction } = await performAdminLogin(browser);
-    const page1 = await browserContext.newPage(),
-      page2 = await browserContext.newPage();
+  test('Refresh should work', async ({ page: page1, browser }) => {
+    test.slow();
+
+    const { apiContext, afterAction } = await getDefaultAdminAPIContext(
+      browser
+    );
+    const context = page1.context();
+    const page2 = await context.newPage();
 
     const testUser = new UserClass();
     await testUser.create(apiContext);
+    await testUser.setAdminRole(apiContext);
 
     await test.step('Login and wait for refresh call is made', async () => {
       // User login
 
       await testUser.login(page1);
       await redirectToHomePage(page1);
+      await waitForAllLoadersToDisappear(page1);
       await redirectToHomePage(page2);
+      await waitForAllLoadersToDisappear(page2);
+      await page2.reload();
 
       // eslint-disable-next-line playwright/no-wait-for-timeout -- wait for token refresh timer to fire
       await page1.waitForTimeout(3 * 60 * 1000);
 
-      await redirectToHomePage(page1);
+      await page1.bringToFront();
+      await visitOwnProfilePage(page1);
+      await waitForAllLoadersToDisappear(page1);
+      await expect(page1.getByTestId('user-display-name')).toHaveText(
+        testUser.responseData.displayName ?? testUser.responseData.name
+      );
 
-      await visitUserProfilePage(page1, testUser.responseData.name);
-      await redirectToHomePage(page2);
-      await visitUserProfilePage(page2, testUser.responseData.name);
+      await page2.bringToFront();
+      await page2.evaluate(() => {
+        document.dispatchEvent(
+          new Event('visibilitychange', { bubbles: true })
+        );
+      });
+
+      await visitOwnProfilePage(page2);
+      await waitForAllLoadersToDisappear(page2);
+      await expect(page2.getByTestId('user-display-name')).toHaveText(
+        testUser.responseData.displayName ?? testUser.responseData.name
+      );
 
       await page1.close();
       await page2.close();
     });
 
-    await browserContext.close();
     await afterAction();
   });
 

openmetadata-ui/src/main/resources/ui/src/App.test.tsx

@@ -12,30 +12,58 @@
  */
 
 import { render } from '@testing-library/react';
+import React from 'react';
 import App from './App';
-import { AuthProvider } from './components/Auth/AuthProviders/AuthProvider';
+import AppRouter from './components/AppRouter/AppRouter';
 
-jest.mock('./components/AppRouter/AppRouter', () => {
-  return jest.fn().mockReturnValue(<p>AppRouter</p>);
-});
+const mockAuthProvider = jest.fn();
 
-jest.mock('./components/Auth/AuthProviders/AuthProvider', () => {
-  return {
-    AuthProvider: jest
-      .fn()
-      .mockImplementation(({ children }) => <>{children}</>),
-    AuthContext: {
-      Provider: jest.fn().mockImplementation(({ children }) => <>{children}</>),
-    },
-  };
-});
+jest.mock('./components/AppRouter/AppRouter', () => ({
+  __esModule: true,
+  default: function AppRouter() {
+    return React.createElement(
+      'div',
+      { 'data-testid': 'app-router' },
+      'AppRouter'
+    );
+  },
+}));
+
+jest.mock('./components/Auth/AuthProviders/AuthProvider', () => ({
+  AuthProvider: function AuthProvider({
+    children,
+    childComponentType,
+  }: {
+    children: React.ReactNode;
+    childComponentType: React.ComponentType;
+  }) {
+    mockAuthProvider({ childComponentType });
+
+    return React.createElement(
+      'div',
+      { 'data-testid': 'auth-provider' },
+      children
+    );
+  },
+}));
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render AuthProvider wrapping AppRouter', () => {
+    const { getByTestId } = render(React.createElement(App));
+
+    expect(getByTestId('auth-provider')).toBeInTheDocument();
+    expect(getByTestId('app-router')).toBeInTheDocument();
+  });
+
+  it('should pass AppRouter as childComponentType to AuthProvider', () => {
+    render(React.createElement(App));
 
-it('renders learn react link', () => {
-  const { getAllByTestId } = render(
-    <AuthProvider childComponentType={App}>
-      <App />
-    </AuthProvider>
-  );
-  const linkElement = getAllByTestId(/content-wrapper/i);
-  linkElement.map((elm) => expect(elm).toBeInTheDocument());
+    expect(mockAuthProvider).toHaveBeenCalledWith({
+      childComponentType: AppRouter,
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/App.tsx

@@ -11,171 +11,15 @@
  *  limitations under the License.
  */
 
-import { isEmpty } from 'lodash';
-import { FC, ReactNode, useEffect, useMemo } from 'react';
-import { RouterProvider } from 'react-aria-components';
-import { HelmetProvider } from 'react-helmet-async';
-import { I18nextProvider } from 'react-i18next';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
-import { useShallow } from 'zustand/react/shallow';
+import { FC } from 'react';
 import AppRouter from './components/AppRouter/AppRouter';
 import { AuthProvider } from './components/Auth/AuthProviders/AuthProvider';
-import ErrorBoundary from './components/common/ErrorBoundary/ErrorBoundary';
-import { EntityExportModalProvider } from './components/Entity/EntityExportModalProvider/EntityExportModalProvider.component';
-import ApplicationsProvider from './components/Settings/Applications/ApplicationsProvider/ApplicationsProvider';
-import WebAnalyticsProvider from './components/WebAnalytics/WebAnalyticsProvider';
-import AirflowStatusProvider from './context/AirflowStatusProvider/AirflowStatusProvider';
-import AntDConfigProvider from './context/AntDConfigProvider/AntDConfigProvider';
-import AsyncDeleteProvider from './context/AsyncDeleteProvider/AsyncDeleteProvider';
-import PermissionProvider from './context/PermissionProvider/PermissionProvider';
-import TourProvider from './context/TourProvider/TourProvider';
-import WebSocketProvider from './context/WebSocketProvider/WebSocketProvider';
-import { useApplicationStore } from './hooks/useApplicationStore';
-import {
-  getCustomUiThemePreference,
-  getSystemConfig,
-} from './rest/settingConfigAPI';
-import { getBasePath } from './utils/HistoryUtils';
-
-import GlobalStyles from '@mui/material/GlobalStyles';
-import { ThemeProvider } from '@mui/material/styles';
-import {
-  createMuiTheme,
-  SnackbarContent,
-} from '@openmetadata/ui-core-components';
-import { SnackbarProvider } from 'notistack';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DEFAULT_THEME } from './constants/Appearance.constants';
-import RuleEnforcementProvider from './context/RuleEnforcementProvider/RuleEnforcementProvider';
-import { ThemeProvider as UntitledUIThemeProvider } from './context/UntitledUIThemeProvider/theme-provider';
-import i18n from './utils/i18next/LocalUtil';
-import { getThemeConfig } from './utils/ThemeUtils';
-
-const ReactAriaRouterBridge = ({ children }: { children: ReactNode }) => {
-  const navigate = useNavigate();
-
-  return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
-};
 
 const App: FC = () => {
-  const { applicationConfig, setApplicationConfig, setRdfEnabled } =
-    useApplicationStore(
-      useShallow((state) => ({
-        applicationConfig: state.applicationConfig,
-        setApplicationConfig: state.setApplicationConfig,
-        setRdfEnabled: state.setRdfEnabled,
-      }))
-    );
-
-  // Create dynamic MUI theme based on user customizations
-  const muiTheme = useMemo(
-    () => createMuiTheme(applicationConfig?.customTheme, DEFAULT_THEME),
-    [applicationConfig?.customTheme]
-  );
-
-  const fetchApplicationConfig = async () => {
-    try {
-      const [themeData, systemConfig] = await Promise.all([
-        getCustomUiThemePreference(),
-        getSystemConfig(),
-      ]);
-
-      setApplicationConfig({
-        ...themeData,
-        customTheme: getThemeConfig(themeData.customTheme),
-      });
-
-      // Set RDF enabled state
-      setRdfEnabled(systemConfig.rdfEnabled || false);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  };
-
-  useEffect(() => {
-    fetchApplicationConfig();
-  }, []);
-
-  useEffect(() => {
-    const faviconHref = isEmpty(
-      applicationConfig?.customLogoConfig?.customFaviconUrlPath
-    )
-      ? '/favicon.png'
-      : applicationConfig?.customLogoConfig?.customFaviconUrlPath ??
-        '/favicon.png';
-    const link = document.querySelectorAll('link[rel~="icon"]');
-
-    if (!isEmpty(link)) {
-      link.forEach((item) => {
-        item.setAttribute('href', faviconHref);
-      });
-    }
-  }, [applicationConfig]);
-
   return (
-    <div className="main-container">
-      <div className="content-wrapper" data-testid="content-wrapper">
-        <BrowserRouter basename={getBasePath()}>
-          <ReactAriaRouterBridge>
-            <I18nextProvider i18n={i18n}>
-              <HelmetProvider>
-                <ErrorBoundary>
-                  <AntDConfigProvider>
-                    <UntitledUIThemeProvider
-                      brandColors={applicationConfig?.customTheme}>
-                      <ThemeProvider theme={muiTheme}>
-                        <GlobalStyles styles={{ html: { fontSize: '14px' } }} />
-                        <SnackbarProvider
-                          Components={{
-                            default: SnackbarContent,
-                            error: SnackbarContent,
-                            success: SnackbarContent,
-                            warning: SnackbarContent,
-                            info: SnackbarContent,
-                          }}
-                          anchorOrigin={{
-                            vertical: 'top',
-                            horizontal: 'right',
-                          }}
-                          autoHideDuration={6000}
-                          maxSnack={3}>
-                          <AuthProvider childComponentType={AppRouter}>
-                            <TourProvider>
-                              <WebAnalyticsProvider>
-                                <PermissionProvider>
-                                  <WebSocketProvider>
-                                    <ApplicationsProvider>
-                                      <AsyncDeleteProvider>
-                                        <EntityExportModalProvider>
-                                          <AirflowStatusProvider>
-                                            <RuleEnforcementProvider>
-                                              <DndProvider
-                                                backend={HTML5Backend}>
-                                                <AppRouter />
-                                              </DndProvider>
-                                            </RuleEnforcementProvider>
-                                          </AirflowStatusProvider>
-                                        </EntityExportModalProvider>
-                                      </AsyncDeleteProvider>
-                                    </ApplicationsProvider>
-                                  </WebSocketProvider>
-                                </PermissionProvider>
-                              </WebAnalyticsProvider>
-                            </TourProvider>
-                          </AuthProvider>
-                        </SnackbarProvider>
-                      </ThemeProvider>
-                    </UntitledUIThemeProvider>
-                  </AntDConfigProvider>
-                </ErrorBoundary>
-              </HelmetProvider>
-            </I18nextProvider>
-          </ReactAriaRouterBridge>
-        </BrowserRouter>
-      </div>
-    </div>
+    <AuthProvider childComponentType={AppRouter}>
+      <AppRouter />
+    </AuthProvider>
   );
 };