Fix: connector approval notice placement in request logs#598
Conversation
The PHP admin notice rendered by Admin_Notice::render() was being relocated by WordPress Core's common.js to sit after the first h1 it found inside .wrap. Because the React Page component renders its h1 inside a flex header container, the notice ended up as a flex child inline with the title and period-selector actions. Fix by suppressing the PHP notice on the tools_page_ai-request-logs screen and instead passing the pending approval data to the React app via the localized script. The notice is now rendered as a @wordpress/components Notice inside .ai-request-logs__app, which sits below the Page header and subtitle — the correct intended placement. Changes: - Admin_Notice.php: suppress on tools_page_ai-request-logs screen - AI_Request_Log_Page.php: pass connectorApprovalNotice data to JS; add get_connector_approval_notice_data() private method - types.ts: add ConnectorApprovalNotice interface and field to LocalizedSettings - index.tsx: import _n/sprintf; render Notice in content canvas
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #598 +/- ##
=============================================
- Coverage 73.18% 72.97% -0.21%
- Complexity 1731 1735 +4
=============================================
Files 85 85
Lines 7473 7494 +21
=============================================
Hits 5469 5469
- Misses 2004 2025 +21
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
dkotter
left a comment
dkotter
left a comment
There was a problem hiding this comment.
I haven't tested but I'm assuming this approach works but it's a lot of changes just to support a better notice placement on one specific page.
If this is the root problem:
WordPress Core's common.js moves .notice elements to after the first h1 in .wrap. The @wordpress/admin-ui Page component renders its h1 inside a flex header, so the notice ends up as an inline flex child in the header row instead of in the content area.
Is there a better/cleaner way to solve this by changing the markup of this Request Log page so this placement never happens?
3 participants
What?
Closes: #596
Fixes the connector approval notice appearing inside the page header on the AI Request Logs screen
Why?
WordPress Core's
common.jsmoves.noticeelements to after the firsth1in.wrap. The@wordpress/admin-uiPagecomponent renders itsh1inside a flex header, so the notice ends up as an inline flex child in the header row instead of in the content area.How?
Instead of displaying the notice via PHP (which triggers Core's relocation script), the PHP notice is suppressed on this screen and the pending approval data is passed to the React app. The notice is then rendered directly in the page content area, in the right place.
Changes:
Admin_Notice.php— suppress PHP notice on the Request Logs screenAI_Request_Log_Page.php— passconnectorApprovalNoticedata to JS; addget_connector_approval_notice_data()types.ts— addConnectorApprovalNoticeinterface and field toLocalizedSettingsindex.tsx— render the notice in the content canvasUse of AI Tools
AI assistance: Yes
Tool(s): Antigravity
Used for: Root cause analysis and implementation. Tested by me.
Testing Instructions
Screenshots or screencast
Before
After
Changelog Entry