chore(UI): upgrade react-router-dom v6 → v7 and fix column panel race condition

openmetadata-ui/src/main/resources/ui/package.json

@@ -166,7 +166,7 @@
     "react-quill-new": "^3.4.0",
     "react-reflex": "^4.1.0",
     "react-resizable": "^3.1.3",
-    "react-router-dom": "^6.30.4",
+    "react-router-dom": "7.18.1",
     "reactflow": "^11.10.2",
     "reactjs-localstorage": "^1.0.1",
     "recharts": "2.10.3",

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

@@ -632,12 +632,15 @@
       .getByTestId(`knowledge-card-${articleEntity.responseData.displayName}`);
     await expect(viewedCard).toBeVisible();
 
+    const knowledgePageResponse = page.waitForResponse((response) =>
+      response.url().includes('/api/v1/contextCenter/pages/name/')
+    );
     await viewedCard.getByTestId('knowledge-page-link').first().click();
     await page.waitForURL((url) =>
       url.pathname.includes('/context-center/articles/')
     );
+    await knowledgePageResponse;
     await waitForAllLoadersToDisappear(page);
-    await page.waitForTimeout(500);
 
     await navigateToArticles(page);
     const rightPanel = page.getByTestId('knowledge-center-right-panel');
@@ -1200,7 +1203,7 @@
         .click();
       await page.getByTestId('save').click();
 
       await page.waitForSelector(
         '[role="dialog"].description-markdown-editor',
         { state: 'hidden' }
       );
@@ -1455,7 +1458,7 @@
           .getByTestId('entity-header-display-name')
           .fill(newDisplayName);
         await page.getByText('Unsaved').waitFor({ state: 'visible' });
         await page.waitForTimeout(400);
         await page.getByRole('link', { name: 'Articles' }).click();
       });
 
@@ -1520,7 +1523,7 @@
         await navigateToArticle(page, draftArticleA.fullyQualifiedName);
         await page.fill('.om-block-editor', reloadDescription);
         await page.getByText('Unsaved').waitFor({ state: 'visible' });
         await page.waitForTimeout(400);
       });
 
       await test.step('Reload the page (simulates browser refresh before auto-save)', async () => {
@@ -1599,7 +1602,7 @@
         await navigateToArticle(page, articleToDelete.fullyQualifiedName);
         await page.fill('.om-block-editor', 'This draft should be deleted');
         await page.getByText('Unsaved').waitFor({ state: 'visible' });
         await page.waitForTimeout(400);
       });
 
       await test.step('Navigate away to ensure draft is persisted in localStorage', async () => {
@@ -1647,14 +1650,14 @@
         await navigateToArticle(page, draftArticleA.fullyQualifiedName);
         await page.fill('.om-block-editor', contentA);
         await page.getByText('Unsaved').waitFor({ state: 'visible' });
         await page.waitForTimeout(400);
       });
 
       await test.step('Navigate to draft article B and type without saving', async () => {
         await navigateToArticle(page, draftArticleB.fullyQualifiedName);
         await page.fill('.om-block-editor', contentB);
         await page.getByText('Unsaved').waitFor({ state: 'visible' });
         await page.waitForTimeout(400);
       });
 
       await test.step('Reload Article B — its own draft should be synced', async () => {

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

@@ -43,6 +43,7 @@
   validateLeftSidebarWithHiddenItems,
 } from '../../utils/customizeNavigation';
 import {
+  clickTabAndWaitForPanel,
   getEncodedFqn,
   waitForAllLoadersToDisappear,
 } from '../../utils/entity';
@@ -60,13 +61,13 @@
   userPage: Page;
 }>({
   adminPage: async ({ browser }, use) => {
     const adminPage = await browser.newPage();
     await adminUser.login(adminPage);
     await use(adminPage);
     await adminPage.close();
   },
   userPage: async ({ browser }, use) => {
     const page = await browser.newPage();
     await user.login(page);
     await use(page);
     await page.close();
@@ -498,7 +499,15 @@
 
         await entity?.visitEntityPage(userPage);
         await waitForAllLoadersToDisappear(userPage);
-
+        await waitForAllLoadersToDisappear(userPage, 'table-loading');
+        await waitForAllLoadersToDisappear(
+          userPage,
+          'entity-detail-widget-skeleton'
+        );
+        await userPage.waitForLoadState('domcontentloaded');
+        await userPage
+          .getByTestId('asset-description-container')
+          .waitFor({ state: 'visible' });
         await expect(
           userPage.getByRole('tab', { name: 'Custom Tab' })
         ).toBeVisible();
@@ -508,8 +517,18 @@
           .last()
           .getByRole('tab', { name: 'Custom Tab' });
 
-        await customTab.focus();
-        await userPage.keyboard.press('Enter');
+        // waitForLoadState('domcontentloaded') is a no-op on this SPA tab
+        // switch and guarded nothing against react-router v7's deferred
+        // navigate(); wait for the tab's own panel to become active instead.
+        await clickTabAndWaitForPanel(userPage, customTab);
+        await waitForAllLoadersToDisappear(
+          userPage,
+          'entity-detail-widget-skeleton'
+        );
+        await userPage
+          .getByTestId('asset-description-container')
+          .locator('visible=true')
+          .waitFor({ state: 'visible' });
 
         await expect
           .poll(async () =>
@@ -652,8 +671,15 @@
 
         await entity?.visitEntityPage(userPage);
         await waitForAllLoadersToDisappear(userPage);
-        await waitForAllLoadersToDisappear(userPage);
-
+        await waitForAllLoadersToDisappear(userPage, 'table-loading');
+        await waitForAllLoadersToDisappear(
+          userPage,
+          'entity-detail-widget-skeleton'
+        );
+        await userPage.waitForLoadState('domcontentloaded');
+        await userPage
+          .getByTestId('asset-description-container')
+          .waitFor({ state: 'visible' });
         await expect(
           userPage.getByRole('tab', { name: 'Custom Tab' })
         ).toBeVisible();
@@ -663,8 +689,18 @@
           .last()
           .getByRole('tab', { name: 'Custom Tab' });
 
-        await customTab.focus();
-        await userPage.keyboard.press('Enter');
+        // waitForLoadState('domcontentloaded') is a no-op on this SPA tab
+        // switch and guarded nothing against react-router v7's deferred
+        // navigate(); wait for the tab's own panel to become active instead.
+        await clickTabAndWaitForPanel(userPage, customTab);
+        await waitForAllLoadersToDisappear(
+          userPage,
+          'entity-detail-widget-skeleton'
+        );
+        await userPage
+          .getByTestId('asset-description-container')
+          .locator('visible=true')
+          .waitFor({ state: 'visible' });
 
         await expect
           .poll(async () =>

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

@@ -12,9 +12,9 @@
  */
 import {
   APIRequestContext,
+  test as base,
   expect,
   Page,
-  test as base,
 } from '@playwright/test';
 import { ECustomizedGovernance } from '../../constant/customizeDetail';
 import { GlobalSettingOptions } from '../../constant/settings';
@@ -42,13 +42,13 @@
 const test = base.extend<{
   adminPage: Page;
   userPage: Page;
 }>({
   adminPage: async ({ browser }, use) => {
     const adminPage = await browser.newPage();
     await adminUser.login(adminPage);
     await use(adminPage);
     await adminPage.close();
   },
   userPage: async ({ browser }, use) => {
     const page = await browser.newPage();
     await user.login(page);
@@ -214,12 +214,18 @@
 
       await entity?.visitEntityPage(userPage);
       await waitForAllLoadersToDisappear(userPage);
-
+      await userPage.waitForLoadState('domcontentloaded');
+      await userPage.getByTestId('asset-description-container').waitFor({ state: 'visible' });
       await expect(
         userPage.getByRole('tab', { name: 'Custom Tab' })
       ).toBeVisible();
 
+
       await userPage.getByRole('tab', { name: 'Custom Tab' }).click();
+
+      await waitForAllLoadersToDisappear(userPage);
+      await userPage.waitForLoadState('domcontentloaded');
+      await userPage.getByTestId('asset-description-container').locator('visible=true').waitFor({ state: 'visible' });
 
       const visibleDescription = userPage
         .getByTestId(/KnowledgePanel.Description-/)

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

@@ -18,7 +18,10 @@ import {
   toastNotification,
   uuid,
 } from '../../../utils/common';
-import { fillDeleteConfirmationIfPresent } from '../../../utils/entity';
+import {
+  fillDeleteConfirmationIfPresent,
+  waitForAllLoadersToDisappear,
+} from '../../../utils/entity';
 import { findSystemTestDefinition } from '../../../utils/testCases';
 
 const TEST_DEFINITION_NAME = `AaroCustomTestDefinition${uuid()}`;
@@ -1212,6 +1215,7 @@ test.describe(
           );
           await nextButton.click();
           await fetchResponse;
+          await waitForAllLoadersToDisappear(page);
 
           // Check again after page load
           isItemVisible = await testDefLocator.isVisible();
@@ -1256,6 +1260,7 @@ test.describe(
         expect(updateResponse.status()).toBe(200);
 
         await toastNotification(page, /updated successfully/i);
+        await waitForAllLoadersToDisappear(page);
 
         // Verify we stayed on the same page (previous button state should be unchanged)
         if (prevDisabledBefore) {
@@ -1296,6 +1301,7 @@ test.describe(
 
         // Wait for the GET that happens after delete (page reset + fetch)
         await getResponse;
+        await waitForAllLoadersToDisappear(page);
 
         await toastNotification(page, /deleted successfully/i);
 

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

@@ -1129,10 +1129,18 @@ test.describe('Impact Analysis', () => {
 
     const downstreamCount = await page.locator('[data-row-key]').count();
 
+    const upstreamResponse = page.waitForResponse(
+      `/api/v1/lineage/getLineageByEntityCount?*`
+    );
     await page.getByRole('radio', { name: 'Upstream' }).click();
+    await upstreamResponse;
     await waitForAllLoadersToDisappear(page);
 
+    const downstreamResponse = page.waitForResponse(
+      `/api/v1/lineage/getLineageByEntityCount?*`
+    );
     await page.getByRole('radio', { name: 'Downstream' }).click();
+    await downstreamResponse;
     await waitForAllLoadersToDisappear(page);
 
     const finalCount = await page.locator('[data-row-key]').count();

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

@@ -227,13 +227,27 @@ test.describe('Data Products', () => {
     await test.step('Navigate to Data Products page', async () => {
       await sidebarClick(page, SidebarItem.DATA_PRODUCT);
       await waitForAllLoadersToDisappear(page);
+      await page.waitForLoadState('domcontentloaded');
     });
 
     await test.step('Search for specific data product', async () => {
+      // The listing page debounces search input by 300ms before firing
+      // /api/v1/search/query — waitForAllLoadersToDisappear alone doesn't
+      // guarantee that debounced request has even been sent yet, so assertions
+      // right after can still see the pre-search (unfiltered) list.
+      await page
+        .getByRole('main')
+        .getByPlaceholder('Search').waitFor({ state: 'visible' });
+      const searchResponse = page.waitForResponse(
+        (response) =>
+          response.url().includes('/api/v1/search/query') &&
+          response.url().includes(dataProduct1.data.name)
+      );
       await page
         .getByRole('main')
         .getByPlaceholder('Search')
         .fill(dataProduct1.data.name);
+      await searchResponse;
       await waitForAllLoadersToDisappear(page);
 
       await expect(page.getByText(dataProduct1.data.displayName)).toBeVisible();
@@ -243,7 +257,11 @@ test.describe('Data Products', () => {
     });
 
     await test.step('Clear search', async () => {
+      const clearResponse = page.waitForResponse((response) =>
+        response.url().includes('/api/v1/search/query')
+      );
       await page.getByRole('main').getByPlaceholder('Search').clear();
+      await clearResponse;
       await waitForAllLoadersToDisappear(page);
 
       await expect(page.getByLabel('Pagination Navigation')).toBeVisible();

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

@@ -41,7 +41,10 @@ import {
   verifyDescriptionRequiresScroll,
   verifyEndOfDescriptionReachable,
 } from '../../utils/domain';
-import { waitForAllLoadersToDisappear } from '../../utils/entity';
+import {
+  clickTabAndWaitForPanel,
+  waitForAllLoadersToDisappear,
+} from '../../utils/entity';
 import { navigateToPersonaWithPagination } from '../../utils/persona';
 import { settingClick, sidebarClick } from '../../utils/sidebar';
 import { test } from '../fixtures/pages';
@@ -409,15 +412,29 @@ test.describe(
 
       await table.visitEntityPage(userPage);
       await waitForAllLoadersToDisappear(userPage);
-
-      await expect(
-        userPage.getByRole('tab', { name: 'Description Tab' })
-      ).toBeVisible();
-      await userPage.getByRole('tab', { name: 'Description Tab' }).click();
+      await userPage
+        .getByTestId('asset-description-container')
+        .waitFor({ state: 'visible' });
+      await userPage.waitForLoadState('domcontentloaded');
+      const descriptionTab = userPage.getByRole('tab', {
+        name: 'Description Tab',
+      });
+      await expect(descriptionTab).toBeVisible();
+      // waitForLoadState('domcontentloaded') is a no-op here — an SPA tab click
+      // triggers no real navigation, so it resolved instantly and guarded
+      // nothing against react-router v7's deferred navigate(). Wait for the
+      // active tabpanel instead so the old "Columns" tab content can't still be
+      // the thing this assertion matches against.
+      await clickTabAndWaitForPanel(userPage, descriptionTab);
+      await waitForAllLoadersToDisappear(
+        userPage,
+        'entity-detail-widget-skeleton'
+      );
 
       const descriptionWidget = userPage
         .getByTestId(/KnowledgePanel.Description-/)
         .locator('visible=true');
+      await descriptionWidget.waitFor({ state: 'visible' });
       await expect(descriptionWidget).toBeVisible();
 
       // Widget truncates long content behind a "more" button
@@ -427,6 +444,17 @@ test.describe(
       await expect(moreButton).toBeVisible();
       await moreButton.click();
 
+      // The click flips readMore state, which swaps the BlockEditor (Tiptap)
+      // content prop from the truncated preview to the full text — but Tiptap
+      // applies content changes asynchronously (an effect-gated setTimeout,
+      // then a transaction event deferred behind two requestAnimationFrames),
+      // so the full text isn't guaranteed to be in the DOM immediately after
+      // the click. The button's own testid flipping to read-less-button is a
+      // direct signal that React has re-rendered with the expanded state.
+      await descriptionWidget
+        .getByTestId('read-less-button')
+        .waitFor({ state: 'visible' });
+
       await verifyEndOfDescriptionReachable(descriptionWidget, userPage);
 
       await userPage.close();

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

@@ -2882,7 +2882,9 @@ test.describe('Glossary tests', () => {
 
       // Open delete modal
       await page.click('[data-testid="manage-button"]');
-      await page.click('[data-testid="delete-button"]');
+      const deleteButton = page.locator('[data-testid="delete-button"]');
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
 
       // Verify delete modal is visible
       await expect(page.locator('[role="dialog"]')).toBeVisible();

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

@@ -356,7 +356,9 @@ test.describe('Lineage Filters', () => {
           await impactAnalysisTab.scrollIntoViewIfNeeded();
           await impactAnalysisTab.click();
           await waitForAllLoadersToDisappear(page);
-
+          await page.getByTestId(
+            `search-dropdown-${filterTestId}`
+          ).waitFor({ state: 'detached' });
           await page.getByTestId('filters-button').click();
           await page.getByTestId(`search-dropdown-${filterTestId}`).click();
 

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

@@ -224,6 +224,14 @@ test.describe(
         // Click on add rule button
         await page.locator('[data-testid="add-rule"]').click();
 
+        // add-rule navigates to AddRulePage, a real route change deferred
+        // under react-router v7's startTransition — without waiting for the
+        // new page's own marker, addRule()'s fill below can still hit
+        // [data-testid="rule-name"] on the *previous* page (a read-only span
+        // for an existing rule, reusing the same testid as the new page's
+        // input) while the navigation is still pending.
+        await page.getByTestId('add-rule-title').waitFor({ state: 'visible' });
+
         // Add rule (assuming addRule is a function you have defined elsewhere)
         await addRule(page, NEW_RULE_NAME, NEW_RULE_DESCRIPTION, 0);
 
@@ -259,6 +267,13 @@ test.describe(
         // Click on edit rule button
         await page.locator('[data-testid="edit-rule"]').click();
 
+        // edit-rule navigates to EditRulePage, a real route change deferred
+        // under react-router v7's startTransition — wait for the new page's
+        // own marker before touching [data-testid="rule-name"], which is
+        // otherwise ambiguous with the read-only rule-name span still on the
+        // previous page during the pending navigation.
+        await page.getByTestId('edit-rule-title').waitFor({ state: 'visible' });
+
         // Enter new name
         await page.locator('[data-testid="rule-name"]').fill(UPDATED_RULE_NAME);