ui: fix infinite loader issue in lineage section (#24896)

* ui: fix infinite loader issue in lineage section

* nit

* fix failing sonar

* nit

* Fix flaky lienage specs (#24893)

* chore(ui): handle description render common with util

* fix lint error

* fix unit tests

* fix unit tests

* add license to new file

* fix unit tests

* address copilot comments and if metric spec failure

* fix unit tests

* fix flaky domain spec failure

* fix domain spec issue

* remove afterAll block as not required

* fix(test): lineage spec failure for AUT

* fix certification test issue

* fix api wait issue on reload

* fix tour spec

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

Author: harsh-vador

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/Tour.spec.ts

@@ -64,9 +64,9 @@ const validateTourSteps = async (page: Page) => {
   await page.getByTestId('searchBox').fill('dim_a');
   await page.getByTestId('searchBox').press('Enter', { delay: 500 });
 
-  await page.waitForSelector('[data-testid="loader"]', { state: 'detached' });
-
-  await expect(page.locator(`[data-tour-elem="badge"]`)).toHaveText('4');
+  await expect(page.locator(`[data-tour-elem="badge"]`)).toHaveText('4', {
+    timeout: 1000,
+  });
 
   // step 3
   await page.locator('[data-tour-elem="right-arrow"]').click();

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

@@ -120,10 +120,9 @@ for (const EntityClass of entities) {
           await rearrangeNodes(page);
         }
 
-        await page.reload();
         const lineageRes = page.waitForResponse('/api/v1/lineage/getLineage?*');
+        await page.reload();
         await lineageRes;
-        await page.waitForLoadState('networkidle');
         await page.waitForSelector('[data-testid="edit-lineage"]', {
           state: 'visible',
         });
@@ -296,6 +295,9 @@ test('Verify column lineage between table and topic', async ({ page }) => {
     `[data-testid="lineage-node-${topicServiceFqn}"]`
   );
 
+  // ensure node will be visible in the viewport
+  await performZoomOut(page);
+
   await expect(tableServiceNode).toBeVisible();
   await expect(topicServiceNode).toBeVisible();
 

openmetadata-ui/src/main/resources/ui/playwright/utils/explore.ts

@@ -14,7 +14,6 @@ import { expect } from '@playwright/test';
 import { Page } from 'playwright';
 import { EXPECTED_BUCKETS } from '../constant/explore';
 import { getApiContext, redirectToExplorePage } from './common';
-import { waitForAllLoadersToDisappear } from './entity';
 import { openEntitySummaryPanel } from './entityPanel';
 
 export interface Bucket {
@@ -40,8 +39,6 @@ export const searchAndClickOnOption = async (
     testId = filter.value ?? '';
   }
 
-  await waitForAllLoadersToDisappear(page);
-
   await page.getByTestId(testId).click();
 
   await checkCheckboxStatus(page, `${testId}-checkbox`, checkedAfterClick);

openmetadata-ui/src/main/resources/ui/src/components/DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.interface.ts

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 import { EntityTags } from 'Models';
-import { LineageData } from '../../components/Lineage/Lineage.interface';
 import { EntityType } from '../../enums/entity.enum';
 import { DataProduct } from '../../generated/entity/domains/dataProduct';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -31,8 +30,6 @@ export type DataAssetSummaryPanelProps = {
   entityType: EntityType;
   isDomainVisible?: boolean;
   isLineageView?: boolean;
-  lineageData?: LineageData | null;
-  isLineageLoading?: boolean;
   onOwnerUpdate?: (updatedOwners: EntityReference[]) => void;
   onDomainUpdate?: (updatedDomains: EntityReference[]) => void;
   onTierUpdate?: (updatedTier?: TagLabel) => void;

openmetadata-ui/src/main/resources/ui/src/components/DataAssetSummaryPanelV1/DataAssetSummaryPanelV1.tsx

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { isEmpty, isNil } from 'lodash';
+import { isEmpty } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@@ -23,7 +23,6 @@ import {
   getCurrentMillis,
   getEpochMillisForPastDays,
 } from '../../utils/date-time/DateTimeUtils';
-import { getUpstreamDownstreamNodesEdges } from '../../utils/EntityLineageUtils';
 import { getEntityChildDetails } from '../../utils/EntitySummaryPanelUtils';
 import {
   DRAWER_NAVIGATION_OPTIONS,
@@ -80,8 +79,6 @@ export const DataAssetSummaryPanelV1 = ({
   onGlossaryTermsUpdate,
   onDescriptionUpdate,
   onLinkClick,
-  lineageData,
-  isLineageLoading = false,
   onLineageClick,
 }: DataAssetSummaryPanelProps) => {
   const { t } = useTranslation();
@@ -170,52 +167,10 @@ export const DataAssetSummaryPanelV1 = ({
     );
   }, [dataAsset, entityType, highlights, charts, chartsDetailsLoading]);
 
-  const { upstreamCount, downstreamCount, shouldShowLineageSection } =
-    useMemo(() => {
-      if (!ENTITY_RIGHT_PANEL_LINEAGE_TABS.includes(entityType)) {
-        return {
-          upstreamCount: 0,
-          downstreamCount: 0,
-          shouldShowLineageSection: false,
-        };
-      }
-
-      if (
-        isLineageLoading ||
-        isNil(lineageData) ||
-        isEmpty(dataAsset.fullyQualifiedName)
-      ) {
-        return {
-          upstreamCount: 0,
-          downstreamCount: 0,
-          shouldShowLineageSection: true,
-        };
-      }
-
-      const nodes = Object.values(lineageData.nodes).map((node) => node.entity);
-      const edges = [
-        ...Object.values(lineageData.upstreamEdges),
-        ...Object.values(lineageData.downstreamEdges),
-      ];
-
-      const { upstreamNodes, downstreamNodes } =
-        getUpstreamDownstreamNodesEdges(
-          edges,
-          nodes,
-          dataAsset.fullyQualifiedName!
-        );
-
-      return {
-        upstreamCount: upstreamNodes.length,
-        downstreamCount: downstreamNodes.length,
-        shouldShowLineageSection: true,
-      };
-    }, [
-      lineageData,
-      entityType,
-      dataAsset.fullyQualifiedName,
-      isLineageLoading,
-    ]);
+  const shouldShowLineageSection = useMemo(
+    () => ENTITY_RIGHT_PANEL_LINEAGE_TABS.includes(entityType),
+    [entityType]
+  );
 
   const fetchIncidentCount = useCallback(async () => {
     if (
@@ -500,9 +455,9 @@ export const DataAssetSummaryPanelV1 = ({
             )}
             {shouldShowLineageSection && (
               <LineageSection
-                downstreamCount={downstreamCount}
-                isLoading={isLineageLoading}
-                upstreamCount={upstreamCount}
+                entityFqn={dataAsset.fullyQualifiedName}
+                entityType={entityType}
+                key={`lineage-${dataAsset.id}`}
                 onLineageClick={onLineageClick}
               />
             )}

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx

@@ -77,7 +77,6 @@ import Loader from '../../common/Loader/Loader';
 import { DataAssetSummaryPanel } from '../../DataAssetSummaryPanel/DataAssetSummaryPanel';
 import { DataAssetSummaryPanelV1 } from '../../DataAssetSummaryPanelV1/DataAssetSummaryPanelV1';
 import EntityRightPanelVerticalNav from '../../Entity/EntityRightPanel/EntityRightPanelVerticalNav';
-import { ENTITY_RIGHT_PANEL_LINEAGE_TABS } from '../../Entity/EntityRightPanel/EntityRightPanelVerticalNav.constants';
 import { EntityRightPanelTab } from '../../Entity/EntityRightPanel/EntityRightPanelVerticalNav.interface';
 import { SearchedDataProps } from '../../SearchedData/SearchedData.interface';
 import CustomPropertiesSection from './CustomPropertiesSection';
@@ -269,36 +268,30 @@ export default function EntitySummaryPanel({
     }
 
     try {
-      // Mark lineage as loading for the *current* entity.
       setIsLineageLoading(true);
 
       const response = await getLineageDataByFQN({
         fqn: currentFqn,
         entityType,
         config: {
-          // When called from lineage view, the parent component passes the user's configured depths.
           upstreamDepth: upstreamDepth ?? 1,
           downstreamDepth: downstreamDepth ?? 1,
           nodesPerLayer: nodesPerLayer ?? 50,
           pipelineViewMode: pipelineViewMode ?? PipelineViewMode.Node,
         },
       });
 
-      // If the user switched to another entity while this request was in-flight,
-      // ignore this stale response so we don't overwrite the newest lineage state.
       if (entityDetails?.details?.fullyQualifiedName !== currentFqn) {
         return;
       }
 
       setLineageData(response);
     } catch (error) {
-      // Only surface errors for the active entity.
       if (entityDetails?.details?.fullyQualifiedName === currentFqn) {
         showErrorToast(error as AxiosError);
         setLineageData(null);
       }
     } finally {
-      // Avoid toggling the loader for an entity that is no longer active.
       if (entityDetails?.details?.fullyQualifiedName === currentFqn) {
         setIsLineageLoading(false);
       }
@@ -436,9 +429,6 @@ export default function EntitySummaryPanel({
       fetchLineageData();
     } else if (activeTab === EntityRightPanelTab.OVERVIEW) {
       fetchEntityData();
-      if (entityType && ENTITY_RIGHT_PANEL_LINEAGE_TABS.includes(entityType)) {
-        fetchLineageData();
-      }
     }
   }, [
     activeTab,
@@ -518,8 +508,6 @@ export default function EntitySummaryPanel({
         }
         entityType={type}
         highlights={highlights}
-        isLineageLoading={isLineageLoading}
-        lineageData={lineageData}
         panelPath={panelPath}
         onDataProductsUpdate={handleDataProductsUpdate}
         onDescriptionUpdate={handleDescriptionUpdate}
@@ -546,8 +534,6 @@ export default function EntitySummaryPanel({
     handleDescriptionUpdate,
     handleGlossaryTermsUpdate,
     handleLineageClick,
-    lineageData,
-    isLineageLoading,
   ]);
   const entityLink = useMemo(
     () => searchClassBase.getEntityLink(entityDetails.details),

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.test.tsx

@@ -333,6 +333,11 @@ describe('EntitySummaryPanel component tests', () => {
     });
 
     it('should initialize with loading state for permissions', async () => {
+      // Force permission fetch to remain pending so we can reliably assert the initial loader state.
+      (
+        usePermissionProvider().getEntityPermission as jest.Mock
+      ).mockImplementationOnce(() => new Promise(() => undefined));
+
       const { container } = await act(async () => {
         return render(
           <EntitySummaryPanel

openmetadata-ui/src/main/resources/ui/src/components/common/LineageSection/LineageSection.interface.ts

@@ -11,9 +11,22 @@
  *  limitations under the License.
  */
 
+import { SxProps, Theme } from '@mui/material';
+import { EntityType } from '../../../enums/entity.enum';
+
 export interface LineageSectionProps {
-  upstreamCount: number;
-  downstreamCount: number;
-  isLoading?: boolean;
+  entityFqn?: string;
+  entityType?: EntityType;
   onLineageClick?: () => void;
 }
+type LineageDirection = 'upstream' | 'downstream';
+
+export interface LineageItemProps {
+  type: LineageDirection;
+  Icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  count: number;
+  onClick?: () => void;
+  sectionSx: SxProps<Theme>;
+  iconWrapperSx: SxProps<Theme>;
+  textSx: SxProps<Theme>;
+}

openmetadata-ui/src/main/resources/ui/src/components/common/LineageSection/LineageSection.styles.ts

@@ -18,11 +18,12 @@ export const getTextStyles = (theme: Theme): SxProps<Theme> => ({
   color: theme.palette.allShades?.info?.[700],
 });
 
-export const getSectionStyles = (): SxProps<Theme> => ({
+export const getSectionStyles = (gap?: number): SxProps<Theme> => ({
   flex: 1,
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
+  ...(gap !== undefined ? { gap } : {}),
 });
 
 export const getIconWrapperStyles = (theme: Theme): SxProps<Theme> => ({