Enhancement/8981 Refactor RRM Setup Success Notification #9367
Conversation
…ut and common components.
jimmymadon
changed the title
|
Build files for e6a961b are ready:
|
|
Size Change: -48.1 kB (-2.61%) Total Size: 1.8 MB
ℹ️ View Unchanged
|
…assing separately.
There was a problem hiding this comment.
Brilliant work here, thank you @jimmymadon !
I've added a few comments in the PR. Some issues that I've pointed out are also causing around 9 VRT failures, and the other 5 seem to be false positives/unrelated to this PR.
Please let me know if you have any questions, thank you!
There was a problem hiding this comment.
This component has a few styling discrepancies when compared to its predecessor assets/js/components/notifications/SubtleNotification.js:
Item 1
The type of warning does not have the appropriate colours.
Original SubtleNotification of variant warning:
This SubtleNotification with type warning:
Item 2
In smaller viewports, the positioning of buttons does not match the designs.
Original SubtleNotification:
This SubtleNotification:
Could we update these to match? Thanks!
| }, | ||
| } ); | ||
| } ); | ||
| it( 'should persist dismissal if notification is not dismissible', async () => { |
There was a problem hiding this comment.
| it( 'should persist dismissal if notification is not dismissible', async () => { | |
| it( 'should persist dismissal if notification is dismissible', async () => { |
| const handleCTAClick = async ( event ) => { | ||
| if ( ! event.defaultPrevented ) { | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| await onCTAClick?.( event ); | ||
|
|
||
| await trackEvents.confirm( gaConfirmEventLabel ); | ||
|
|
||
| if ( isCTALinkExternal ) { | ||
| global.open( ctaLink, '_blank' ); | ||
| } else { | ||
| navigateTo( ctaLink ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
I'd vote to keep this natural, as handleDismiss in assets/js/googlesitekit/notifications/components/common/Dismiss.js. Using global.open in RRMSetupSuccessSubtleNotification was more of a hack to make the core/forms setValues action to work with useRefocus.
| const handleCTAClick = async ( event ) => { | |
| if ( ! event.defaultPrevented ) { | |
| event.preventDefault(); | |
| } | |
| await onCTAClick?.( event ); | |
| await trackEvents.confirm( gaConfirmEventLabel ); | |
| if ( isCTALinkExternal ) { | |
| global.open( ctaLink, '_blank' ); | |
| } else { | |
| navigateTo( ctaLink ); | |
| } | |
| }; | |
| const handleCTAClick = async ( event ) => { | |
| await onCTAClick?.( event ); | |
| await trackEvents.confirm( gaConfirmEventLabel ); | |
| }; |
| const onCTAClick = ( event ) => { | ||
| event.preventDefault(); | ||
|
|
||
| const onCTAClick = () => { |
There was a problem hiding this comment.
As commented above:
| const onCTAClick = () => { | |
| const onCTAClick = ( event ) => { | |
| event.preventDefault(); | |
| @@ -127,16 +102,6 @@ function RRMSetupSuccessSubtleNotification() { | |||
| [ SYNC_PUBLICATION ]: true, | |||
| } ); | |||
| } | |||
There was a problem hiding this comment.
As commented above:
| } | |
| } | |
| global.open( serviceURL, '_blank' ); |
| @@ -71,3 +79,35 @@ export const registerModule = ( modules ) => { | |||
| }, | |||
| } ); | |||
| }; | |||
|
|
|||
| export const registerNotifications = ( notifications ) => { | |||
| notifications.registerNotification( 'setup-success-notification-rrm', { | |||
There was a problem hiding this comment.
The notification seems to have a little delay and does not appear immediately, not at least on a first load. Is this expected?
| areaSlug: NOTIFICATION_AREAS.BANNERS_BELOW_NAV, | ||
| viewContexts: [ | ||
| VIEW_CONTEXT_MAIN_DASHBOARD, | ||
| VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY, |
There was a problem hiding this comment.
While we're at it, we can prevent the notification from appearing on the view only dashboard.
| VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY, |
| export default function Notification( { | ||
| id, | ||
| className, | ||
| gaViewEventLabel, |
There was a problem hiding this comment.
One question regarding this gaViewEventLabel prop: Looking at the trackEvent function, it also supports an additional value parameter:
Instead of accepting a gaViewEventLabel prop here, what if we received an array prop, say gaEventArgs, and spread that in the function, e.g. trackEvents.view( ...gaEventArgs )?
This will ensure that this mechanism is future proof and we do not need to make any changes in case an event also requires the value parameter.
What do you think?
| ctaLabel, | ||
| onCTAClick, | ||
| isCTALinkExternal = false, | ||
| gaConfirmEventLabel, |
There was a problem hiding this comment.
Same thoughts as gaViewEventLabel above.
| @@ -34,14 +39,15 @@ export default function Dismiss( { | |||
| dismissExpires = 0, | |||
| disabled, | |||
| onDismiss = () => {}, | |||
| gaDismissEventLabel, | |||
There was a problem hiding this comment.
Same thoughts as gaViewEventLabel above.
Summary
Addresses issue:
RRMSetupSuccessSubtleNotificationto use the new Notifications datastore #8981Relevant technical choices
PR Author Checklist
Do not alter or remove anything below. The following sections will be managed by moderators only.
Code Reviewer Checklist
Merge Reviewer Checklist