refactor(ui): migrate Settings > Home Page posts from Ant Design to Alchemy components CAT-1562#16640
Conversation
…lchemy components Replace all Ant Design components (Button, Empty, Pagination, Table, Dropdown, Menu, Form, Input, Radio, Typography, message) with Alchemy equivalents (Button, EmptyState, Pagination, Table, Menu, Input, TabButtons, toast, Modal, Alert). Key changes: - Settings posts page: full Alchemy migration with Phosphor icons, semantic color tokens, pill-style type badges, and fixed-layout table - AnnouncementCard: replaced custom card with Alchemy Alert (brand variant) - Alert component: 14px title text, flex-start alignment, 12px icon gap, consistent padding, explicit color inheritance for variant text - CreatePostModal: useState lazy initializer to fix description wipe on edit, removed useEnterKeyListener to fix Enter key submitting from Editor - Cypress test: updated selectors for Alchemy Button (dropdown-menu-item), TabButtons (button vs label), and Input (inputTestId for native targeting) Made-with: Cursor
github-actions
Bot
added
product
|
Linear: CAT-1561 |
annadoesdesign
changed the title
|
🔴 Meticulous spotted visual differences in 66 of 1624 screens tested: view and approve differences detected. Meticulous evaluated ~9 hours of user flows against your PR. Last updated for commit 04aa424. This comment will update as new commits are pushed. |
Bundle ReportChanges will increase total bundle size by 1.1kB (0.0%) ⬆️. 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! |
maggiehays
added
the
needs-review
Resolve AnnouncementCard.tsx conflict keeping Alert migration. Replace string icon names with Phosphor component refs in ManagePosts, PostItemMenu, and PostsList. Made-with: Cursor
| </> | ||
| )} | ||
| </Form> | ||
| </div> |
There was a problem hiding this comment.
Are we no longer wrapping the form in <form> tag?
There was a problem hiding this comment.
Good catch! The Ant Design <Form> was dropped during the migration since we moved state management to React useState, but that also lost the semantic <form> tag. Fixed in 218486f — the wrapper is now <form onSubmit={(e) => e.preventDefault()}> so we keep form landmark semantics for accessibility without interfering with the modal's button-driven submission.
Replace <div> wrapper with <form onSubmit={preventDefault}> to preserve
form landmark semantics for screen readers after Ant Design migration.
Made-with: Cursor
| dataIndex: '', | ||
| key: 'description', | ||
| render: (record: PostEntry) => PostColumn(record.description || ''), | ||
| render: (record) => <OverflowText text={stripMarkdown(record.description || '')} />, |
There was a problem hiding this comment.
Do we actually want to strip or render markdown? If render then we could use CompactMarkdownViewer + hideShowMore. If we want to strip markdown we should do that properly (since remove-markdown is already installed) e.g.
import removeMd from '@tommoor/remove-markdown';
render: (record) => (
<OverflowText text={removeMd(record.description || '')} />
),
| <Pill | ||
| label={POST_TYPE_TO_DISPLAY_TEXT[record.contentType]} | ||
| variant="filled" | ||
| color={record.contentType === PostContentType.Link ? 'blue' : 'violet'} |
There was a problem hiding this comment.
Does this color need to be tokenized?
There was a problem hiding this comment.
These are already tokenized — 'blue' and 'violet' are ColorOptions values from the Alchemy theme config (ColorValues enum in alchemy-components/theme/config/types.ts). The Pill component maps them to themed colors internally via PillContainer, so no raw hex values here.
maggiehays
added
pending-submitter-response
Replace hand-rolled stripMarkdown regex with the already-installed @tommoor/remove-markdown library for more robust markdown stripping in the posts description column. Made-with: Cursor
maggiehays
added
needs-review
3 participants
Before:
After:
Summary
Migrates the Settings > Home Page posts management page (
/settings/posts) and the AnnouncementCard component from Ant Design to DataHub's Alchemy component library.Changes
Settings Posts Page (7 files):
Button,Empty,Pagination,Table,Dropdown,Menu,Form,Input,Radio,Typography,messagewith Alchemy equivalents (Button,EmptyState,Pagination,Table,Menu,Input,TabButtons,toast,Modal)PageTitleheader (consistent with other settingsV2 pages)Pillbadges (blue for Link, violet for Announcement)DotsThreeVerticalicon with AlchemyMenutableLayout: fixedfor proper column width enforcementAnnouncementCard (1 file):
Alertcomponent (variant="brand")Alert Component (2 files):
md)align-items: flex-startfor multi-line contentBug Fixes (included in migration):
useStateinitializer)useEnterKeyListener)Cypress Test (1 file):
aria-label="more"→data-testid="dropdown-menu-item"label→buttonelement selectordata-testid→inputTestIdprop for native<input>targetingChecklist
Test plan
v2_homePagePost.jspasses with updated selectorsyarn prettierandyarn lintpass cleanlyMade with Cursor