feat(ui): Data Quality & Incident Manager UI – Core Components Migration

[shah-harshit]

Summary

Migrates Data Quality, Incident Manager, and Table Profiler UI to use @openmetadata/ui-core-components (Typography, Button, Dropdown, Tooltip, Tabs, ProgressBarCircle, etc.) and aligns styling with the design system. No changes to core-components package, yarn.lock, or unrelated common components.

Scope (32 files)

Incident Manager & Data Quality

• IncidentManagerPageHeader – Typography as="span" for inline layout in Space, tooltip styling
• InlineTestCaseIncidentStatus – Core components usage
• TestCaseResultTab – Antd Tooltip with showArrow={false}, white tooltip styles (test-case-result-tab.style.less)
• Severity (InlineSeverity) – Core components
• DimensionalityHeatmap & HeatmapCellTooltip – Typography, ProgressBarCircle, Tooltip; tests with core-component mocks
• IncidentManagerDetailPage – Minor wiring

Table Profiler & Data Observability

• DataObservabilityTab & TabFilters – Core Button, Dropdown, Tooltip; TabFilters tests with mocks
• ProfilerDetailsCard, ProfilerLatestValue – Typography and styling
• ColumnProfileTable, QualityTab, TableProfilerChart – Core components and tests
• TestSummary, TestSummaryGraph, TestSummaryCustomTooltip – Core components; tooltip styles (test-summary-custom-tooltip.less)

Test Suite Details

• TestSuiteDetailsPage – Core Tabs, Typography, Domain/Owner section and tab styling (test-suite-details-page.less)

Utils

• TestSummaryGraphUtils – Minor updates for graph/tooltip usage

Made with Cursor

---

Summary by Gitar

• UI Core Components migration: Replaced MUI layout components (Box, Stack) with @openmetadata/ui-core-components (Typography, Button, Dropdown, Tabs, ProgressBarCircle) across 32 files in Data Quality, Incident Manager, Table Profiler, and Test Suite modules for design system alignment
• Styling system overhaul: Transitioned from MUI sx props to Tailwind CSS utilities (tw:flex, tw:gap-*, tw:w-full) for layout with LESS stylesheets for custom theming and Antd Tooltip overrides (white background, border-radius)
• Component API updates: Migrated Tabs API (activeKey → selectedKey, onChange → onSelectionChange), updated Dropdown state management, and added semantic HTML via Typography as prop (e.g., as="span")
• Test infrastructure: Added jest mocks for core components, updated Playwright E2E selectors to use role-based queries (getByRole('menuitemradio')) for improved test resilience across 7 test files

_{This will update automatically on new commits.}

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	65.77% (56556/85986)	45.26% (29651/65516)	48.01% (8928/18597)

[gitar-bot]

💡 Quality: Test mocks unused Tooltip from core-components

The DimensionalityHeatmap.component.test.tsx mocks Tooltip from @openmetadata/ui-core-components (lines 57-72), but the actual component imports Tooltip from antd (line 18 of the component file), not from @openmetadata/ui-core-components. This mock is dead code that will never be exercised, since only Typography and ProgressBarCircle are imported from the core-components library.

This won't cause test failures, but it's misleading for future maintainers who may think the component uses core-components Tooltip.

Suggested fix:

jest.mock('@openmetadata/ui-core-components', () => ({
  Typography: ({
    as: Component = 'span',
    children,
    ...props
  }: {
    as?: React.ElementType;
    children: React.ReactNode;
    [key: string]: unknown;
  }) => <Component {...props}>{children}</Component>,
  ProgressBarCircle: ({
    valueFormatter: _vf,
    ...props
  }: Record<string, unknown>) => (
    <div data-testid="progress-bar-circle" role="progressbar" {...props} />
  ),
}));

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review 👍 Approved with suggestions 2 resolved / 4 findings

Clean migration from AntD/MUI to core-components across 32 files. One previous minor finding (dead TOOLTIP_STYLES export) remains unresolved, and a new minor dead mock in a test file. No bugs or logic issues found in the component migrations.

💡 Quality: Dead export: TOOLTIP_STYLES never imported after migration

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/DimensionalityHeatmap.constants.ts:47

The TOOLTIP_STYLES constant in DimensionalityHeatmap.constants.ts is still exported but no longer imported anywhere in the codebase. The only consumer was HeatmapCellTooltip.component.tsx, which removed its import as part of this migration to Tailwind CSS utilities.

This is dead code that should be cleaned up to avoid confusion about whether these MUI spacing-based values are still in use.

Suggested fix

/**
 * Heatmap layout and behavior constants
 * These values are tuned for optimal visualization of daily time-series data
 */
export const HEATMAP_CONSTANTS = {
  /** Width of the dimension label column */
  DIMENSION_LABEL_WIDTH: 150,
  DIMENSION_LABEL_WIDTH_PX: '150px',
  CELL_WIDTH: 44,
  CELL_WIDTH_PX: '44px',
  CELL_GAP: 4,
  SCROLL_STEP: 300,
  SCROLL_CHECK_DELAY: 100,
  SCROLL_THRESHOLD: 5,
  CONTAINER_PADDING_RIGHT: 60,
} as const;

💡 Quality: Test mocks unused Tooltip from core-components

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/DimensionalityHeatmap.component.test.tsx:57 📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/DimensionalityHeatmap.component.tsx:18

The DimensionalityHeatmap.component.test.tsx mocks Tooltip from @openmetadata/ui-core-components (lines 57-72), but the actual component imports Tooltip from antd (line 18 of the component file), not from @openmetadata/ui-core-components. This mock is dead code that will never be exercised, since only Typography and ProgressBarCircle are imported from the core-components library.

This won't cause test failures, but it's misleading for future maintainers who may think the component uses core-components Tooltip.

Suggested fix

jest.mock('@openmetadata/ui-core-components', () => ({
  Typography: ({
    as: Component = 'span',
    children,
    ...props
  }: {
    as?: React.ElementType;
    children: React.ReactNode;
    [key: string]: unknown;
  }) => <Component {...props}>{children}</Component>,
  ProgressBarCircle: ({
    valueFormatter: _vf,
    ...props
  }: Record<string, unknown>) => (
    <div data-testid="progress-bar-circle" role="progressbar" {...props} />
  ),
}));

✅ 2 resolved

✅ Bug: HeatmapCellTooltip: MUI spacing units used as raw CSS pixels

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/HeatmapCellTooltip.component.tsx:107 📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/HeatmapCellTooltip.component.tsx:98
The TOOLTIP_STYLES constants were designed for MUI's spacing system where 1 unit = 8px. After migration to raw CSS/Tailwind, these constants are being applied as inline style values, which interprets them as raw pixel values.

Specifically:

1. Line 108: style={{ gap: TOOLTIP_STYLES.STACK_SPACING }} — STACK_SPACING is 1, so this sets gap: 1px. The Tailwind class tw:gap-2 (8px) is also present but the inline style takes precedence, resulting in only 1px gap between tooltip rows instead of the intended 8px.
2. Lines 102-103: marginTop: TOOLTIP_STYLES.DIVIDER_MARGIN / marginBottom: TOOLTIP_STYLES.DIVIDER_MARGIN — DIVIDER_MARGIN is 2, so this sets 2px margins. The Tailwind class tw:my-2 (8px) is also present but overridden by inline styles to 2px, resulting in a cramped divider.

The tooltip will render with much tighter spacing than intended, degrading readability of the data quality metrics display.

✅ Bug: ProgressBarCircle with static value={75} misused as loading spinner

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityHeatmap/DimensionalityHeatmap.component.tsx:68 📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx:377
ProgressBarCircle is a determinate progress indicator — it renders a static SVG circle filled to the given percentage. Using value={75} with valueFormatter={() => ''} as a loading spinner results in a frozen 75%-filled circle with no animation, which is a poor replacement for the previous animated Loader/CircularProgress components.

Looking at the ProgressBarCircle source (progress-circles.tsx), it computes strokeDashoffset = 100 - percentage and renders a static SVG — there is no CSS animation, no indeterminate mode, and no spinning behavior. The valueFormatter={() => ''} only hides the percentage text but doesn't make the circle animate.

Impact: Users will see a static, partially-filled circle instead of an animated loading indicator, making it unclear that content is loading. This affects loading states in both the heatmap view and test case incident status view.

Suggestion: Either:

1. Revert to using the existing Loader component for these loading states, or
2. Use a CSS animation to rotate the circle (e.g., add tw:animate-spin to the wrapper), or
3. Use a dedicated spinner/loading component from the core design system if one exists

Rules 🎸 1 action taken

Gitar Rules

🎸 Flaky Test Retry: Retried job 65093965570 due to detected flaky test patterns (1 failed + 3 flaky tests unrelated to PR changes)

_{1 rule not applicable. Show all rules by commenting gitar display:verbose.}

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.3% Duplication on New Code

See analysis details on SonarQube Cloud