refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563#16642
Conversation
…onents - Move Create button to page header (right-aligned) matching Users & Groups pattern - Replace antd SearchBar with Alchemy SearchBar - Replace antd StyledTable with Alchemy Table (fixed layout, column widths) - Replace antd Dropdown/Menu with Alchemy Menu + Button for row actions - Replace antd Form/Input with Alchemy Input and TextArea in create/edit modal - Replace antd notification/message with Alchemy toast - Replace antd Pagination with Alchemy Pagination - Add Alchemy EmptyState when no ownership types exist - Delete NameColumn.tsx and DescriptionColumn.tsx (inlined in table) - Remove all styled-components wrappers on Alchemy components - Update Cypress test selectors for Alchemy Table and Menu Made-with: Cursor
|
Linear: CAT-1564 |
|
✅ Meticulous spotted visual differences in 2 of 1494 screens tested, but all differences have already been approved: view differences detected. Meticulous evaluated ~9 hours of user flows against your PR. Last updated for commit f68098e. This comment will update as new commits are pushed. |
Bundle ReportChanges will decrease total bundle size by 2.11kB (-0.01%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: datahub-react-web-esmAssets Changed:
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Update Phosphor icon usage in ownership components to pass direct component references instead of string literals, aligning with the new Icon API from #16338. Made-with: Cursor
| render: (_, record: any) => <NameColumn ownershipType={record} />, | ||
| width: '25%', | ||
| sorter: (a, b) => (a?.info?.name || '').localeCompare(b?.info?.name || ''), | ||
| render: (record) => <b>{record?.info?.name || record?.urn}</b>, |
There was a problem hiding this comment.
It's a good practice to use a class with <b> to add semantic meaning. Or, if this just meant to make it boldface, we should use font-weight instead. If we want to to specify importance, we should use <strong>.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b
Use CSS font-weight via styled-components instead of the <b> HTML element, since the bolding is purely visual and carries no semantic importance. Made-with: Cursor
- refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563 (#16642)
Before:





After:




Summary
Test plan
v2_manage_ownership.js)Made with Cursor