Skip to content

Commit

Permalink
Merge pull request #23 from newfold-labs/add/app-nav-notifications
Browse files Browse the repository at this point in the history 
Add messages context in the app side nav
  • Loading branch information
@wpalani
wpalani authored Apr 30, 2024
2 parents 3c8a64c + ec0e7dc commit 2e0474d
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 20 deletions.
1 change: 1 addition & 0 deletions .github/workflows/brand-plugin-test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ jobs:
module-repo: ${{ github.repository }}
module-branch: ${{ needs.setup.outputs.branch }}
plugin-repo: 'bluehost/bluehost-wordpress-plugin'
plugin-branch: 'add/app-nav-notifications'
secrets: inherit

hostgator:
Expand Down
40 changes: 27 additions & 13 deletions assets/js/components/notifications/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ const Notifications = ({methods, constants, ...props}) => {
)
}).then( ( response ) => {
setAllNotifications(response);
});
}, [] );
});
}, [] );

// on update notifications, context or page calculate active notifications
methods.useEffect(() => {
setActiveNotifications(
filterNotifications(allNotifications)
);
}, [allNotifications, constants.page]);
}, [allNotifications, constants.page]);

/**
* Wrapper method to filter notifications
Expand Down Expand Up @@ -73,7 +73,7 @@ const Notifications = ({methods, constants, ...props}) => {
* @returns Array of filtered notifications - removes expired notifications
*/
const filterByExpiry = (notifications) => {
const now = Date.now();
const now = Math.round(Date.now() / 1000);
// console.log( 'Now: ' + now );
// filter out expired notifications
return methods.filter(notifications,
Expand Down Expand Up @@ -150,19 +150,33 @@ const Notifications = ({methods, constants, ...props}) => {
);
}

return (
<div className={methods.classnames('newfold-notifications-wrapper')}>
{activeNotifications.map(notification => (
if (`${window.NewfoldRuntime.plugin.brand}-app-nav` === constants.context && activeNotifications.length > 0) {
return (
<div className={methods.classnames('newfold-nav-notifications-wrapper nfd-mt-4')}>
<Notification
id={notification.id}
key={notification.id}
content={notification.content}
id={activeNotifications[0].id}
key={activeNotifications[0].id}
content={activeNotifications[0].content}
constants={constants}
methods={methods}
/>
))}
</div>
)
</div>
);
} else {
return (
<div className={methods.classnames('newfold-notifications-wrapper')}>
{activeNotifications.map(notification => (
<Notification
id={notification.id}
key={notification.id}
content={notification.content}
constants={constants}
methods={methods}
/>
))}
</div>
);
}

};

Expand Down
1 change: 1 addition & 0 deletions includes/Notification.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ public function shouldShow( $context, array $contextData ) {
}

case container()->plugin()->id . '-plugin':
case container()->plugin()->id . '-app-nav':
// The current page
$current_page = Arr::get( $contextData, 'page' );

Expand Down
3 changes: 2 additions & 1 deletion includes/NotificationsApi.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function ( Notification $notification ) {
'validate_callback' => function ( $value ) {
return is_string( $value ) && in_array( $value, array(
container()->plugin()->id . '-plugin',
container()->plugin()->id . '-app-nav',
'wp-admin-notice',
'wp-admin-prime'
), true );
Expand All @@ -61,7 +62,7 @@ function ( Notification $notification ) {
'required' => false,
'validate_callback' => function ( $value, \WP_REST_Request $request ) {
$context = $request->get_param( 'context' );
if ( container()->plugin()->id . '-plugin' === $context || 'wp-admin-notice' === $context ) {
if ( container()->plugin()->id . '-plugin' === $context || container()->plugin()->id . '-app-nav' === $context || 'wp-admin-notice' === $context ) {
return is_string( $value );
}

Expand Down
36 changes: 30 additions & 6 deletions tests/cypress/integration/notifications.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const notifications = [
pages: '#/settings',
},
],
expiration: 2748863456503,
expiration: 2748820256,
content:
'<div class="newfold-notice notice notice-success" style="position:relative;"><p>Notice should only display on plugin app settings page<button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
Expand All @@ -20,7 +20,7 @@ const notifications = [
pages: [ '#/home/onboarding', '#/home' ],
},
],
expiration: 2749860279240,
expiration: 2749860279,
content:
'<div class="newfold-notice notice notice-error" style="position:relative;"><p>Here is a plugin notice it should display on home and onboarding screens only! <button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
Expand All @@ -32,7 +32,7 @@ const notifications = [
pages: [ '#/marketplace' ],
},
],
expiration: 2749860279240,
expiration: 2749860279,
content:
'<div class="newfold-notice notice notice-info" style="position:relative;"><p>Here is a plugin notice it should display on marketplace themes screen only! <button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
Expand All @@ -48,10 +48,22 @@ const notifications = [
pages: 'all',
},
],
expiration: 2749860279240,
expiration: 2749860279,
content:
'<div class="newfold-notice notice notice-warning" style="position:relative;"><p>Here is a notice it should display everywhere in the app and in wp-admin! <button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
{
id: 'test-5',
locations: [
{
context: Cypress.env( 'pluginId' ) + '-app-nav',
pages: 'all',
},
],
expiration: 2749860279,
content:
'<div class="newfold-notice notice" style="position:relative; display: block;"><p>Notice should display in the app side nav<button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
{
id: 'test-expired',
locations: [
Expand All @@ -60,7 +72,7 @@ const notifications = [
pages: 'all',
},
],
expiration: 1649860279240,
expiration: 1649817079,
content:
'<div class="newfold-notice notice notice-error" style="position:relative;"><p>Here is an expired notice it should never display anywhere even though it has location `all` <button type="button" data-action="close" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></p></div>',
},
Expand All @@ -70,7 +82,7 @@ describe( 'Notifications', () => {
const appClass = '.' + Cypress.env( 'appId' );

before( () => {
cy.exec( 'npx wp-env run cli wp transient delete newfold_notifications' );
cy.exec( 'npx wp-env run cli wp transient delete newfold_notifications', {failOnNonZeroExit: false} );
cy.visit( '/wp-admin/index.php' );
cy.intercept(
{
Expand Down Expand Up @@ -131,6 +143,18 @@ describe( 'Notifications', () => {
).contains( 'display on plugin app settings page' );
} );

// notification renders on the side nav
it( 'Test notification displays in app side nav', () => {
cy.get( '.newfold-nav-notifications-wrapper #notification-test-5' )
.should( 'be.visible' )
.should( 'have.attr', 'data-id' )
.and( 'equal', 'test-5' );

cy.get(
'.newfold-nav-notifications-wrapper #notification-test-5'
).contains( 'display in the app side nav' );
} );

// expired notification should not show
it( 'Test expired notification does not display in plugin app', () => {
cy.get(
Expand Down

0 comments on commit 2e0474d

Please sign in to comment.