Migrate FailedTestCaseSampleData table to core-ui Table component

[shah-harshit]

Summary

• Replace Ant Design Table with core-ui Table (react-aria-components) in FailedTestCaseSampleData.component.tsx
• Add border wrapper tw:overflow-x-auto tw:border tw:border-border-secondary tw:rounded-[10px] with horizontal scroll support
• Add 210px min-width on data cells for consistent column sizing
• Add 8px padding on header and data cells
• Center diff-type column content vertically and horizontally
• Move all styles from failed-test-case-sample-data.less to tw: theme token classes — delete the .less file entirely
• Use semantic tw: tokens: tw:bg-success-primary, tw:bg-error-primary, tw:text-error-primary, tw:text-success-primary, tw:text-gray-500, tw:bg-gray-50, tw:border-r-gray-blue-100
• Preserve failed-sample-data-column CSS class for e2e test selector compatibility

Reference

https://github.com/open-metadata/openmetadata-collate/issues/3837

Test plan

• Verify failed test case sample data table renders with correct border and layout
• Verify diff rows show correct background colors (green for add, red for remove, grey for not-equal)
• Verify diff-type column (+/-/!=) shows centered with correct text color
• Verify failed column highlighted with red background and text
• Verify horizontal scroll works when many columns present
• Run e2e: yarn playwright:run --grep FailedTestCaseSampleData

🤖 Generated with Claude Code

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.5% (63200/101117)	42.98% (34252/79689)	45.87% (10088/21992)

[github-actions]

🔴 Playwright Results — 2 failure(s), 14 flaky

✅ 4012 passed · ❌ 2 failed · 🟡 14 flaky · ⏭️ 86 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	298	0	1	4
🟡 Shard 2	752	0	3	8
🔴 Shard 3	752	2	5	7
✅ Shard 4	790	0	0	18
🟡 Shard 5	686	0	1	41
🟡 Shard 6	734	0	4	8

Genuine Failures (failed on all attempts)

❌ Features/Tasks/TaskNavigation.spec.ts › clicking task notification while on entity task tab refreshes the task list (shard 3)

Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m(�[22m�[2m)�[22m failed

Locator: locator('.notification-box').locator('li.ant-list-item.notification-dropdown-list-btn').first()
Expected: visible
Timeout: 15000ms
Error: element(s) not found

Call log:
�[2m  - Expect "toBeVisible" with timeout 15000ms�[22m
�[2m  - waiting for locator('.notification-box').locator('li.ant-list-item.notification-dropdown-list-btn').first()�[22m

❌ Features/Tasks/TaskNavigation.spec.ts › two sessions: admin on Columns tab creates task, assignee sees refresh on notification click (shard 3)

Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m(�[22m�[2m)�[22m failed

Locator: locator('.notification-box').locator('li.ant-list-item.notification-dropdown-list-btn').first()
Expected: visible
Timeout: 15000ms
Error: element(s) not found

Call log:
�[2m  - Expect "toBeVisible" with timeout 15000ms�[22m
�[2m  - waiting for locator('.notification-box').locator('li.ant-list-item.notification-dropdown-list-btn').first()�[22m

🟡 14 flaky test(s) (passed on retry)

• Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
• Features/ActivityAPI.spec.ts › Activity event shows the actor who made the change (shard 2, 1 retry)
• Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
• Features/Glossary/GlossaryWorkflow.spec.ts › should start term as Draft when glossary has reviewers (shard 2, 2 retries)
• Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
• Features/SearchExport.spec.ts › Search mode visible export downloads CSV with tab-specific row count (shard 3, 1 retry)
• Features/UserProfileOnlineStatus.spec.ts › Should show "Active recently" for users active within last hour (shard 3, 1 retry)
• Flow/ObservabilityAlerts.spec.ts › Alert operations for a user with and without permissions (shard 3, 2 retries)
• Flow/PersonaDeletionUserProfile.spec.ts › User profile loads correctly before and after persona deletion (shard 3, 1 retry)
• Pages/Entity.spec.ts › Tier Add, Update and Remove (shard 5, 1 retry)
• Pages/Glossary.spec.ts › Column dropdown drag-and-drop functionality for Glossary Terms table (shard 6, 1 retry)
• Pages/Lineage/DataAssetLineage.spec.ts › Column lineage for apiEndpoint -> topic (shard 6, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify Impact Analysis service filter selection (shard 6, 1 retry)
• Pages/ServiceListing.spec.ts › should render the service listing page (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Migrates FailedTestCaseSampleData to the core-ui Table component and adopts Tailwind utility classes. Refactor the hardcoded tw:rounded-[10px] value to use a standard theme-defined border-radius token to align with styling guidelines.

✅ 1 resolved

✅ Quality: Hardcoded border-radius value violates styling guidelines

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/FailedTestCaseSampleData/FailedTestCaseSampleData.component.tsx:249
The class tw:rounded-[10px] uses an arbitrary hardcoded value. Per project guidelines, hardcoded values should be avoided in favor of semantic CSS custom properties or standard Tailwind scale values (e.g., tw:rounded-xl which is 12px, or tw:rounded-lg which is 8px). Consider using the closest standard value or defining a semantic token if 10px is intentional.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

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

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
1291 New issues
0 Accepted issues

Measures
17 Security Hotspots
0.0% Coverage on New Code
3.8% Duplication on New Code

See analysis details on SonarQube Cloud