refactor(DimensionalityTab): migrate table to core-ui Table component

[shah-harshit]

Summary

• Replace Ant Design Table with core-ui Table (react-aria-components) in DimensionalityTab
• Flatten cell renderer and memoize columns for performance
• Minor UI fix for dimension count div min-width

Test plan

• Verify DimensionalityTab table renders correctly with all columns visible
• Run unit tests for affected components

🤖 Generated with Claude Code

---

Summary by Gitar

• Refactored DimensionalityTab:
  • Migrated DimensionalityTab table to core-ui Table component, replacing the Ant Design implementation.
  • Optimized rendering by flattening the cell renderer and memoizing table columns.
• UI enhancements:
  • Added tw:h-8 and fontSize="xs" to dimension-select for consistent styling.
  • Updated DataQualityTab to set tw:min-w-13 on the dimension count container.
  • Added border styling to DimensionalityTab by wrapping the table in a container with tw:rounded-xl and tw:ring-1.
  • Applied consistent table container styling in DataQualityTab using tw:rounded-xl and tw:ring-1.
• Code cleanup:
  • Reverted TransComponent custom wrapper, now utilizing standard Trans directly in DimensionalityTab.
  • Wrapped renderCell in useCallback to improve performance.
• IncidentManager Playwright updates:
  • Updated E2E selectors to use test-case data-testids instead of Ant Design class names.
  • Refactored incidentManager.ts utility to target test cases by specific data-testid.

_{This will update automatically on new commits.}

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	62.49% (63198/101119)	42.97% (34252/79704)	45.87% (10088/21992)

[gitar-bot]

Code Review ✅ Approved 8 resolved / 8 findings

Migrates DimensionalityTab to the core-ui Table component and optimizes rendering through column memoization and flattened cell logic. All previous findings regarding readability, missing keys, and performance have been fully addressed.

✅ 8 resolved

✅ Quality: Deeply nested ternary chain in cell renderer hurts readability

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityTab.tsx:285-299
The cell rendering logic (lines 286–323) uses a 4-level nested ternary expression to switch on col.id. This is hard to read and maintain. Consider extracting a helper function or using a switch statement / lookup map pattern, which is more consistent with how other core-ui Table consumers typically render cells.

✅ Performance: dimensionTableColumns recreated on every render

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityTab.tsx:181-190
dimensionTableColumns is declared as a plain array inside the component body (lines 181–190). Since it depends on t() (which is stable across renders unless the language changes), wrapping it in useMemo with [t] as a dependency would avoid creating a new array reference on every render, preventing unnecessary reconciliation of Table.Header.

✅ Bug: Table.Row key is undefined when record.id is missing

📄 openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx:628
At line 628, key={record.id} passes undefined as the React key when record.id is absent (it's an optional field in TestCaseResolutionStatus). If multiple records lack an id, React cannot distinguish them during reconciliation, leading to duplicate-key warnings and potentially corrupted component state. The id prop also falls back to '', giving multiple rows the same DOM id.

✅ Performance: renderRow is not memoized, recreated every render

📄 openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx:615-629
renderRow is a plain function that closes over multiple reactive values (testCasePermissions, isPermissionLoading, handleStatusSubmit, etc.). Because it's recreated on every render, the Table.Body's dependencies array alone controls re-rendering — but having a new function reference every time defeats React's ability to bail out of rendering children. Wrapping it in useCallback with the same deps used in dependencies would be more consistent.

✅ Quality: Orphan CSS class 'failed-sample-data-column' has no definition

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/FailedTestCaseSampleData/FailedTestCaseSampleData.component.tsx:292
The class failed-sample-data-column is applied at line 292 but has no corresponding style definition anywhere in the codebase (the .less file import was removed, and no global definition exists). Since Tailwind utility tw:bg-error-primary is already applied alongside it, the orphan class name is dead code that adds confusion.

...and 3 more resolved from earlier reviews

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
1290 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