Search: migrate dashboard notices to @wordpress/ui Notice (depends on #48537)#48550
Search: migrate dashboard notices to @wordpress/ui Notice (depends on #48537)#48550
Conversation
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Code Coverage SummaryCoverage changed in 1 file.
|
|
Does it make sense to keep basic components in Search like |
Replace the local SimpleNotice + NoticeAction wrappers with Notice.* from @wordpress/ui across the search dashboard: - record-meter/notice-box: tier notices use Notice.Root/Title/Description + Notice.Actions/ActionLink (openInNewTab); the legacy jp-search-notice-box__important class becomes intent="error". - pages/sections/first-run-section: indexing notice uses Notice.Root/Title/ Description. - global-notices: snackbar notices use Notice.Root + Notice.Description + Notice.CloseIcon, with auto-dismiss preserved via a useEffect timer. Status strings remain in the redux store; mapped to wp-ui intents at render. Drops vestigial fields the redux notice creators never set anyway (isCompact, isPersistent, displayOnNextPage, notice.button/href). Deletes the SimpleNotice/NoticeAction sources, their stylesheets, and notice-box.scss; strips the dead .dops-notice* overrides from global-notices/style.scss while keeping the snackbar positioning rules. Removes one site of @automattic/jetpack-components Gridicon usage (SimpleNotice's icon-wrapper) — helps the broader modernization sweep. Follow-up to simison review feedback on #48537.
53594a6 to
b3c84b2
Compare
Fixes #
Important
Depends on #48537. Do not merge until #48537 has landed.
This branch is based on
trunk. PR #48537 contains an interim Gridicon →@wordpress/iconsmigration ofnotice-action.jsx. This PR deletes that file outright. If this PR merges first, #48537 will conflict (and the interim swap there becomes meaningless). Merging in the order #48537 → this keeps the history of the wider Gridicon-removal sweep clean.Proposed changes
Migrate the search dashboard's notice surface from the local
SimpleNotice+NoticeActionwrappers toNotice.*from@wordpress/ui.record-meter/notice-box.jsx— tier notices useNotice.Root+Notice.Title+Notice.Description+Notice.Actions/Notice.ActionLink openInNewTabfor the "Learn more" link. The legacyjp-search-notice-box__importantclass is replaced withintent="error", letting wp-ui handle the color/state via WPDS tokens.pages/sections/first-run-section.jsx— indexing notice converted toNotice.Root+Title+Description.global-notices/index.jsx— snackbar notices useNotice.Root+Notice.Description+Notice.CloseIcon, with auto-dismiss preserved via a smalluseEffecttimer (replacesSimpleNotice's built-indurationprop). The redux store still shipsis-info/is-success/is-warning/is-errorstatus strings; they're mapped to wp-ui intents at render.global-notices/store/actions.js— drops vestigial defaults (isCompact,isPersistent,displayOnNextPage) that no consumer ever read.Deletions
notice/index.jsx(SimpleNotice — 130 lines, class component)notice/notice-action.jsx(NoticeAction)notice/style.scss(~270 lines of legacydops-noticestyling)notice/test/index.test.jsx(tested SimpleNotice'sdops-notice__icon-wrapperclass)record-meter/notice-box.scss(selectors only matched legacy markup)dops-noticeoverrides fromglobal-notices/style.scss(snackbar positioning kept)Bonus
Removes one site of
@automattic/jetpack-componentsGridicon usage (the icon insideSimpleNotice) — helps the broader #48160 modernization sweep.Net diff
13 files, +72 / −681 lines. Single commit.
Related product discussion/links
Does this pull request change what data or activity we track or use?
No.
Testing instructions
Verified locally on a dev site after seeding a fake plan info option to bypass paid-plan gating:
record-meter/notice-box) — surface the close-to-limit notice (e.g. recordCount in 80-99% oftierMaximumRecords) on the Jetpack Search admin page. Confirm:aria-label="(opens in a new tab)"indicator.first-run-section) — visible on a freshly licensed/uninitialized search dashboard. Should render with the same visual treatment as the tier notice but no actions.global-notices) — trigger an action that dispatchessuccessNotice,errorNotice, orupdatingNotice(e.g. toggle a setting on the search settings page). Confirm:durationms (default 2 s,updatingNotice30 s).A before/after of the tier-3 close-to-limit notice has been captured locally; happy to attach to the PR if reviewers want a visual.