fix(ui): handle test suite tab loading race (#29561)

Author: shah-harshit

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

@@ -10,9 +10,10 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { expect } from '@playwright/test';
+import { expect, Route } from '@playwright/test';
 import { PLAYWRIGHT_INGESTION_TAG_OBJ } from '../../constant/config';
 import { Domain } from '../../support/domain/Domain';
+import { BundleTestSuiteClass } from '../../support/entity/BundleTestSuiteClass';
 import { EntityTypeEndpoint } from '../../support/entity/Entity.interface';
 import { TableClass } from '../../support/entity/TableClass';
 import { UserClass } from '../../support/user/UserClass';
@@ -50,6 +51,16 @@ const user1 = new UserClass();
 const user2 = new UserClass();
 const domain1 = new Domain();
 const domain2 = new Domain();
+const bundleTestSuite = new BundleTestSuiteClass();
+
+const createDeferred = () => {
+  let resolveDeferred: () => void = () => undefined;
+  const promise = new Promise<void>((resolve) => {
+    resolveDeferred = resolve;
+  });
+
+  return { promise, resolve: resolveDeferred };
+};
 
 test.beforeAll(async ({ browser }) => {
   const { apiContext, afterAction } = await performAdminLogin(browser);
@@ -60,13 +71,83 @@ test.beforeAll(async ({ browser }) => {
   await table.createTestCase(apiContext);
   await domain1.create(apiContext);
   await domain2.create(apiContext);
+  await bundleTestSuite.createBundleTestSuite(apiContext);
   await afterAction();
 });
 
+test.afterAll(async ({ browser }) => {
+  const bundleSuiteName = bundleTestSuite.bundleTestSuiteResponseData?.name;
+
+  if (bundleSuiteName) {
+    const { apiContext, afterAction } = await performAdminLogin(browser);
+    await apiContext.delete(
+      `/api/v1/dataQuality/testSuites/name/${encodeURIComponent(
+        bundleSuiteName
+      )}?hardDelete=true&recursive=true`
+    );
+    await afterAction();
+  }
+});
+
 test.beforeEach(async ({ page }) => {
   await redirectToHomePage(page);
 });
 
+test('Test suite tab switching keeps active bundle suite data after stale table suite response', async ({
+  page,
+}) => {
+  const bundleSuiteName =
+    bundleTestSuite.bundleTestSuiteResponseData?.name ?? '';
+  const tableFqn = table.entityResponseData?.fullyQualifiedName ?? '';
+  const tableSuiteRequestReceived = createDeferred();
+  const tableSuiteResponseRelease = createDeferred();
+  const tableSuiteResponseFulfilled = createDeferred();
+
+  expect(bundleSuiteName).not.toBe('');
+  expect(tableFqn).not.toBe('');
+
+  await page.route(
+    '**/api/v1/dataQuality/testSuites/search/list**',
+    async (route: Route) => {
+      const requestUrl = new URL(route.request().url());
+      const testSuiteType = requestUrl.searchParams.get('testSuiteType');
+
+      if (testSuiteType === 'basic') {
+        tableSuiteRequestReceived.resolve();
+        const tableSuiteResponse = await route.fetch();
+        await tableSuiteResponseRelease.promise;
+
+        await route.fulfill({
+          response: tableSuiteResponse,
+        });
+        tableSuiteResponseFulfilled.resolve();
+
+        return;
+      }
+
+      await route.continue();
+    }
+  );
+
+  await page.goto('/data-quality/test-suites/table-suites');
+  await tableSuiteRequestReceived.promise;
+
+  await expect(page.getByTestId('test-suite-table')).toBeVisible();
+  await expect(page.getByTestId('loader')).toBeVisible();
+
+  await page.getByTestId('bundle-suite-radio-btn').click();
+
+  await expect(page.getByTestId(bundleSuiteName)).toBeVisible();
+
+  tableSuiteResponseRelease.resolve();
+  await tableSuiteResponseFulfilled.promise;
+
+  await expect(page.getByTestId(bundleSuiteName)).toBeVisible();
+  await expect(
+    page.getByTestId('test-suite-table').getByText(tableFqn)
+  ).not.toBeVisible();
+});
+
 test(
   'Logical TestSuite',
   PLAYWRIGHT_INGESTION_TAG_OBJ,

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx

@@ -24,7 +24,7 @@ import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import QueryString from 'qs';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { INITIAL_PAGING_VALUE } from '../../../../constants/constants';
@@ -120,6 +120,7 @@ export const TestSuites = () => {
   } = usePaging();
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const latestRequestId = useRef(0);
 
   const ownerFilterValue = useMemo(() => {
     return selectedOwner
@@ -212,41 +213,56 @@ export const TestSuites = () => {
     return data;
   }, []);
 
-  const fetchTestSuites = async (
-    currentPage = INITIAL_PAGING_VALUE,
-    params?: ListTestSuitePramsBySearch
-  ) => {
-    setIsLoading(true);
-    try {
-      const result = await getListTestSuitesBySearch({
-        ...params,
-        fields: [TabSpecificField.OWNERS, TabSpecificField.SUMMARY],
-        q: searchValue ? `*${searchValue}*` : undefined,
-        owner: ownerFilterValue?.key,
-        offset: (currentPage - 1) * pageSize,
-        includeEmptyTestSuites: subTab !== DataQualitySubTabs.TABLE_SUITES,
-        testSuiteType:
-          subTab === DataQualitySubTabs.TABLE_SUITES
-            ? TestSuiteType.basic
-            : TestSuiteType.logical,
-        sortField: 'lastResultTimestamp',
-        sortType: SORT_ORDER.DESC,
-      });
-      setTestSuites(result.data);
-      handlePagingChange(result.paging);
-    } catch (error) {
-      showErrorToast(error as AxiosError);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const fetchTestSuites = useCallback(
+    async (
+      currentPage = INITIAL_PAGING_VALUE,
+      params?: ListTestSuitePramsBySearch
+    ) => {
+      const requestId = latestRequestId.current + 1;
+      latestRequestId.current = requestId;
+
+      setIsLoading(true);
+      try {
+        const result = await getListTestSuitesBySearch({
+          ...params,
+          fields: [TabSpecificField.OWNERS, TabSpecificField.SUMMARY],
+          q: searchValue ? `*${searchValue}*` : undefined,
+          owner: ownerFilterValue?.key,
+          offset: (currentPage - 1) * pageSize,
+          includeEmptyTestSuites: subTab !== DataQualitySubTabs.TABLE_SUITES,
+          testSuiteType:
+            subTab === DataQualitySubTabs.TABLE_SUITES
+              ? TestSuiteType.basic
+              : TestSuiteType.logical,
+          sortField: 'lastResultTimestamp',
+          sortType: SORT_ORDER.DESC,
+        });
+
+        if (requestId !== latestRequestId.current) {
+          return;
+        }
+
+        setTestSuites(result.data);
+        handlePagingChange(result.paging);
+      } catch (error) {
+        if (requestId === latestRequestId.current) {
+          showErrorToast(error as AxiosError);
+        }
+      } finally {
+        if (requestId === latestRequestId.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [searchValue, ownerFilterValue?.key, pageSize, subTab, handlePagingChange]
+  );
 
   const handleTestSuitesPageChange = useCallback(
     ({ currentPage }: PagingHandlerParams) => {
       fetchTestSuites(currentPage, { limit: pageSize });
       handlePageChange(currentPage);
     },
-    [pageSize, handlePageChange]
+    [fetchTestSuites, pageSize, handlePageChange]
   );
 
   const handleSearchParam = (
@@ -324,7 +340,15 @@ export const TestSuites = () => {
     } else {
       setIsLoading(false);
     }
-  }, [testSuitePermission, pageSize, searchValue, owner, subTab, currentPage]);
+  }, [
+    testSuitePermission,
+    pageSize,
+    searchValue,
+    owner,
+    subTab,
+    currentPage,
+    fetchTestSuites,
+  ]);
 
   if (!testSuitePermission?.ViewAll && !testSuitePermission?.ViewBasic) {
     return (