chore(ui): Revamp Test case details page

[shah-harshit]

Describe your changes:

Fixes #23396

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

---

Summary by Gitar

• Parameter display unification:
  • Merged parameters and compute row count into single "Parameter" section with 2-column grid layout in TestCaseResultTab.component.tsx
  • Replaced separate edit buttons with unified control for both parameters and compute row count
• Graph readability improvements:
  • Rotated X-axis labels -45° in TestSummaryGraph.tsx to prevent label overlap on test result timeline
• Tooltip redesign:
  • Restructured TestSummaryCustomTooltip.component.tsx with date-time header, color-coded status (red/green), and row metrics displayed as fractions
• Visual consistency:
  • Applied 10px border-radius and consistent grey-scale backgrounds across test case details cards

_{This will update automatically on new commits.}

---

[Copilot]

Pull request overview

This PR revamps the test case details page UI to improve visual consistency and user experience. The changes unify the parameter display by merging parameters and compute row count into a single section, improve graph readability with rotated X-axis labels, redesign the tooltip with a cleaner structure, and apply consistent styling across all components.

Key changes:

• Unified Parameter Display: Merged parameters and compute row count into a single "Parameter" section with a 2-column grid layout
• Improved Graph Readability: Rotated X-axis labels -45° to prevent overlap on the test result timeline
• Enhanced Tooltip: Restructured with date-time header, color-coded status indicators, and row metrics displayed as fractions

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
EntityVersionUtils.tsx	Updated CSS class names for parameter labels and values to use new styling classes
description-v1.less	Added 10px border-radius to description card for visual consistency
test-summary-custom-tooltip.less	Added tooltip styling for date-time header, separators, and increased max-height
TestSummaryCustomTooltip.test.tsx	Updated test expectations to match new tooltip structure (rows displayed as fractions)
TestSummaryCustomTooltip.component.tsx	Refactored tooltip to show date-time header, color-coded status, and rows as fractions (e.g., "4/6")
TestSummaryGraph.tsx	Added -45° angle rotation to X-axis labels with increased bottom margin for readability
incident-manager.style.less	Removed background and padding from parameter-value-container for cleaner design
test-case-result-tab.style.less	Added comprehensive parameter section styles with grid layout, labels, and SQL expression container
TestCaseResultTab.test.tsx	Updated tests to match unified parameter container structure
TestCaseResultTab.component.tsx	Major refactoring: merged parameter and compute row count sections, added 2-column grid layout with chunk-based row rendering

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	64.67% (51641/79850)	42.3% (25285/59781)	45.87% (7961/17357)

[gitar-bot]

🔍 CI failure analysis for 031a53e: Multiple Playwright CI jobs (3 different matrix configurations) are failing with the same infrastructure and flakiness patterns, confirming systematic test environment issues unrelated to PR changes.

Issue

Three different Playwright CI matrix configurations have now failed:

1. Job 59697367068: playwright-ci-postgresql (3, 6)
2. Job 59763016155: playwright-ci-postgresql (6, 6)
3. Job 59763016160: playwright-ci-postgresql (2, 6)

All three show the same infrastructure and flakiness patterns.

Root Cause

Consistent Infrastructure Issues Across All Jobs:

• DAG validation failed: ModuleNotFoundError: No module named 'cachetools'
• Failed to unpause index_metadata (HTTP 404)
• Missing authentication tokens during test setup

Consistent Test Failure Patterns:

• Flaky tests in unrelated areas: Settings Navigation, Glossary, Permissions, Query Entity, Lineage, AutoPilot, Tag, Users
• Common errors across all runs:
  • Error: page.waitForResponse: Target page, context or browser has been closed
  • Error: page.click: Target page, context or browser has been closed
  • TimeoutError: page.goto: Timeout 60000ms exceeded
  • Error: locator.fill: value: expected string, got undefined
  • Error: element(s) not found
  • Visibility assertion failures

Analysis

This is a systematic test environment problem affecting multiple matrix configurations:

1. Not PR-related: The failures are in test areas (Settings, Glossary, Permissions, Lineage, AutoPilot, Tag, Users) that are completely unrelated to this PR's changes to the test case details page UI

2. Infrastructure root cause: The missing cachetools Python module and index_metadata issues are blocking proper test environment setup

3. Flakiness multiplier: The infrastructure problems are causing cascading timing issues and race conditions throughout the test suite

4. PR changes are isolated: This PR only modified:

   • TestCaseResultTab component (parameter display UI)
   • TestSummaryGraph (X-axis label rotation)
   • TestSummaryCustomTooltip (tooltip redesign)
   • Associated test files

None of the failing tests exercise these modified components.

Details

Why Multiple Matrix Configurations Are Failing:

• The infrastructure issues (missing modules, indexing problems) affect the entire test environment
• All matrix configurations share the same flawed setup
• The failures are not deterministic to specific test splits, but rather systemic to the environment

Pattern Confirmation:

• Same error types across all three jobs
• Same infrastructure failures in all three jobs
• Different tests failing in each matrix (confirming randomness/flakiness)
• No failures in areas touched by the PR

Code Review 👍 Approved with suggestions

Clean UI revamp with well-structured component refactoring. Previous minor edge case findings remain unaddressed but are low-risk.

Suggestions 💡 2 suggestions

Edge Case: Tooltip status color undefined for non-Failed/Success statuses

📄 openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummaryCustomTooltip/TestSummaryCustomTooltip.component.tsx:69-75

In TestSummaryCustomTooltip.component.tsx, the statusColor variable is only set for Failed (RED_3) and Success (GREEN_3) statuses. For other statuses like Queued, Aborted, or Warning, the color will be undefined, which could result in inconsistent styling or default browser text color.

const statusColor =
  status === TestCaseStatus.Failed
    ? RED_3
    : status === TestCaseStatus.Success
    ? GREEN_3
    : undefined;

Suggested fix: Consider adding explicit colors for other status types (e.g., yellow/orange for Warning, grey for Aborted/Queued) to ensure consistent visual feedback across all possible statuses.

Edge Case: totalRows calculation may hide row data when passedRows/failedRows are 0

📄 openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummaryCustomTooltip/TestSummaryCustomTooltip.component.tsx:58

The totalRows calculation uses (passedRows ?? 0) + (failedRows ?? 0), which correctly handles undefined values. However, when displaying rows (lines ~93-112), the condition totalRows > 0 will hide the row display even when valid data exists but all rows passed (failedRows = 0) or all rows failed (passedRows = 0).

For example, if passedRows = 0 and failedRows = 5, totalRows = 5 and both rows will be displayed correctly. But if both are 0 (e.g., empty table test), the rows section won't display, which may be intentional but could be surprising.

More importantly, if one of passedRows or failedRows is explicitly 0 and the other is undefined, the display would show "0/0" which might not be accurate. Consider adding explicit handling for when only one value is present:

const hasRowData = passedRows !== undefined || failedRows !== undefined;

And use this alongside the totalRows > 0 check for clearer logic.

Resolved ✅ 3 resolved

Edge Case: Missing key prop on divider inside rows.map

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx:115-136
In the renderParameterRows function, when using rows.map(), the outer div uses rowIndex as the key, but since React recommends stable keys for proper reconciliation, consider whether items could be reordered. While using index is fine for static display data, having a more stable key from the item data (like row[0]?.label) would be more robust.

However, this is a minor issue since the parameter list is unlikely to change order during the component's lifecycle.

Bug: renderParameterRows function causes stale closure in useMemo

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx:75-142 📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx:144-193
The renderParameterRows function is defined as a regular function inside the component but is called within the testCaseParams useMemo. However, renderParameterRows is not memoized or included in the dependency array, which could lead to stale closures if the function references any state or props that change.

More critically, because renderParameterRows is recreated on every render but not included in the useMemo dependencies, the memoization might return stale results when only the function's closures change.

Suggested fix: Either wrap renderParameterRows in useCallback and add it to the dependency array of testCaseParams, or move it inside the useMemo if it's only used there, or define it outside the component if it doesn't need any component state.

Code Quality: Removed data-testid for computed-row-count-container

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseResultTab/TestCaseResultTab.component.tsx:226-228
The original code had a separate Col with data-testid="computed-row-count-container" for testing purposes. In the refactored code, the compute row count is merged into the parameter section, but the specific test identifier for computed row count container is removed.

This could break existing tests that rely on data-testid="computed-row-count-container" to verify the compute row count section is rendered.

Suggested fix: Consider adding a data-testid attribute to the compute row count item within the merged parameter section to maintain test coverage.

What Works Well

Good use of lodash's chunk for 2-column grid layout. Proper memoization of parameter items and render functions. Nice improvements in EntityVersionUtils using Number.isNaN instead of global isNaN and .some() instead of .find() for boolean checks.

Tip

Comment Gitar fix CI or enable auto-apply: gitar auto-apply:on

Options

Auto-apply is off Gitar will not commit updates to this branch.
Display: compact Hiding non-applicable rules.

Comment with these commands to change:

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

_{Was this helpful? React with 👍 / 👎 | This comment will update automatically (Docs)}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
5 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[ShaileshParmar11]

since you are working on test case details page revamp, lets migrate it to MUI base structure

[ShaileshParmar11]

any reason for this change?

[shah-harshit]

Path imports (lodash/startCase) are better because they guarantee minimal bundle size and avoid tree-shaking uncertainty, while named imports from lodash may accidentally include the entire library.

[ShaileshParmar11]

We should use MUI instead of antd