Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add messages context in the app side nav #23

Merged
merged 4 commits into from
Apr 30, 2024
Merged

Add messages context in the app side nav #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80a0e02
Add 'bluehost-app-nav' context to notification api and component
wpalani Apr 25, 2024
5d04eb1
Cypress test step
wpalani Apr 25, 2024
08adc10
Point bluehost test branch in workflow
wpalani Apr 26, 2024
ec0e7dc
Fix context check to be dynamic
wpalani Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/brand-plugin-test.yml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading