Skip to content

refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563#16642

Merged
annadoesdesign merged 6 commits into
masterfrom
refactor/migrate-ownership-page-to-alchemy
Mar 18, 2026
Merged

refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563#16642
annadoesdesign merged 6 commits into
masterfrom
refactor/migrate-ownership-page-to-alchemy

Conversation

@annadoesdesign

@annadoesdesign annadoesdesign commented Mar 18, 2026

Copy link
Copy Markdown
Contributor

Before:
Screenshot 2026-03-18 at 11 45 53 AM
Screenshot 2026-03-18 at 11 45 55 AM
Screenshot 2026-03-18 at 11 47 02 AM
Screenshot 2026-03-18 at 11 47 10 AM
Screenshot 2026-03-18 at 11 47 05 AM

After:
Screenshot 2026-03-17 at 5 47 19 PM
Screenshot 2026-03-17 at 5 47 17 PM
Screenshot 2026-03-17 at 5 47 12 PM
Screenshot 2026-03-17 at 5 46 44 PM

Summary

  • Migrates the Manage Ownership settings page from antd components to Alchemy design system components
  • Moves the Create button to the page header (right-aligned) to match the Users & Groups page pattern
  • Replaces antd Table, Dropdown/Menu, Form/Input, Pagination, notification/message with Alchemy equivalents (Table, Menu, Input, TextArea, Pagination, toast)
  • Adds Alchemy EmptyState component when no ownership types exist
  • Removes all styled-component wrappers on top of Alchemy components
  • Deletes NameColumn.tsx and DescriptionColumn.tsx (inlined directly in table columns)
  • Net reduction of ~176 lines of code

Test plan

  • Cypress test updated to match new Alchemy component selectors (v2_manage_ownership.js)
  • Verify create ownership type modal opens and saves correctly
  • Verify edit ownership type modal pre-fills and updates correctly
  • Verify delete ownership type works from three-dot menu
  • Verify search filters ownership types
  • Verify pagination works when >10 ownership types exist
  • Verify empty state shows when no ownership types match search

Made with Cursor

…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
@github-actions

Copy link
Copy Markdown
Contributor

Linear: CAT-1564

@github-actions github-actions Bot added product PR or Issue related to the DataHub UI/UX smoke_test Contains changes related to smoke tests labels Mar 18, 2026
@annadoesdesign annadoesdesign changed the title refactor(ui): migrate Manage Ownership page from antd to Alchemy components refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563 Mar 18, 2026
@alwaysmeticulous

alwaysmeticulous Bot commented Mar 18, 2026

Copy link
Copy Markdown

✅ 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.

@codecov

codecov Bot commented Mar 18, 2026

Copy link
Copy Markdown

Bundle Report

Changes will decrease total bundle size by 2.11kB (-0.01%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
datahub-react-web-esm 23.78MB -2.11kB (-0.01%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/index-*.js -2.11kB 13.61MB -0.02%

Files in assets/index-*.js:

  • ./src/app/entityV2/ownership/OwnershipList.tsx → Total Size: 2.48kB

  • ./src/app/entityV2/ownership/table/OwnershipTable.tsx → Total Size: 1.13kB

  • ./src/app/entityV2/ownership/OwnershipBuilderModal.tsx → Total Size: 3.65kB

  • ./src/app/entityV2/ownership/table/ActionsColumn.tsx → Total Size: 1.42kB

  • ./src/app/entityV2/ownership/ManageOwnership.tsx → Total Size: 1.4kB

@codecov

codecov Bot commented Mar 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 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>,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@maggiehays maggiehays added pending-submitter-response Issue/request has been reviewed but requires a response from the submitter and removed needs-review Label for PRs that need review from a maintainer. labels Mar 18, 2026
annadoesdesign and others added 2 commits March 18, 2026 15:51
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
@annadoesdesign annadoesdesign merged commit 184adf1 into master Mar 18, 2026
44 checks passed
@annadoesdesign annadoesdesign deleted the refactor/migrate-ownership-page-to-alchemy branch March 18, 2026 23:43
david-leifker pushed a commit that referenced this pull request May 27, 2026
- refactor(ui): migrate Manage Ownership page from antd to Alchemy components CAT-1563 (#16642)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pending-submitter-response Issue/request has been reviewed but requires a response from the submitter product PR or Issue related to the DataHub UI/UX smoke_test Contains changes related to smoke tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants