Add red bubble with update count on in-app My Subscriptions tab #46088

thilinah · 2024-04-01T13:36:08Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR adds a red badge on My Subscription tab of the store if it isn't connected.

Closes # .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Start the development environment pnpm -- wp-env start
Build assets using pnpm --filter='@woocommerce/plugin-woocommerce' build
Your store shouldn't be connected to Woo.com and the Woo Update Manager plugin shouldn't be installed.
Visit WCCore My Subscriptions page, credentials can be found under wp-env documentation
Notice the red bubble on in-app, My Subscriptions tab showing 1

Connect your site. After the site is connected, if the Woo.com Update Manager isn't installed the red bubble on Extensions menu and the My Subscriptions tab should show number of updates Available for Woo.com extensions + 1.
For an example in the screenshot AW has an update available, so the update count is one, since Woo.com update manager isn't installed it should display 2.

If AutomateWoo is updated to the latest version, update count should only show 1 as Woo.com Update Manager isn't installed.

Install WUM by downloading it via : https://woo.com/product-download/woo-update-manager
If WUM is installed but not activated, still the red bubble should be displayed.

When the WUM is activated and no other Woo.com extension are needed to be updated, the red bubble should not be displayed.

When the site is disconnected, the red badge should be shown regardless of WUM installtion status.

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Displays a red badge on in-app My Subscriptions tab if Woo.com Update Manager is not installed or activated

Comment

github-actions · 2024-04-01T13:41:27Z

Hi @laurendavissmith, @anaspk, @denho,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

…mmerce

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx

plugins/woocommerce/src/Internal/Admin/Marketplace.php

…priate classes.

…erce/woocommerce into update/red-bubble-on-my-subs-tab

…llation status of WUM.

denho · 2024-04-02T09:57:24Z

plugins/woocommerce/includes/admin/helper/class-wc-helper-admin.php

@@ -60,6 +62,7 @@ function ( $product ) {
 			'wooUpdateManagerActive'     => WC_Woo_Update_Manager_Plugin::is_plugin_active(),
 			'wooUpdateManagerInstallUrl' => WC_Woo_Update_Manager_Plugin::generate_install_url(),
 			'wooUpdateManagerPluginSlug' => WC_Woo_Update_Manager_Plugin::WOO_UPDATE_MANAGER_SLUG,
+			'wooUpdateCount'             => WC_Woo_Update_Manager_Plugin::increment_update_count_for_woo_update_manager( WC_Helper_Updater::get_updates_count() ?? 0 ),


The logic of getting the count here duplicates the logic in get_updates_count_html. Would it be possible to standardize and have just one function that returns the final count?

Fixed here: f09891b

plugins/woocommerce/includes/admin/helper/class-wc-woo-update-manager-plugin.php

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx

anaspk

Thank you @thilinah , LGTM and works as described. Just posted a minor comment.

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx

denho

LGTM!

denho · 2024-04-02T12:46:41Z

plugins/woocommerce/includes/admin/helper/class-wc-helper-updater.php

 		$count_html = sprintf( '<span class="update-plugins count-%d"><span class="update-count">%d</span></span>', $count, number_format_i18n( $count ) );
+


The bubble HTML is still present in the DOM when the number is count is 0. It's not seen, as there is CSS that hides the element. Guess it's fine to leave as is, but just wanted to bring it to your attention in case it's not intended.

* Extract update count function. * Pass wooUpdateCount to be used by admin components. * Show update count bubble on in-app my subscriptions tab. * Add changefile(s) from automation for the following project(s): woocommerce * Refactor how update count HTML is generated and move logic into appropriate classes. * Show red badge when the site is disconnected, regardless of the installation status of WUM. * Always display as 1 update is available when site is disconnected. * Skip using dangerouslySetInnerHTML. * Remove unused dependency. * Move updateCount to a tab property. * Prevent calling get_update_count if the site is not connected. * Raw url encode the product key before signing the URL --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Muhammad Anas <muhammad.anas@automattic.com>

* Add red bubble with update count on in-app My Subscriptions tab (#46088) * Extract update count function. * Pass wooUpdateCount to be used by admin components. * Show update count bubble on in-app my subscriptions tab. * Add changefile(s) from automation for the following project(s): woocommerce * Refactor how update count HTML is generated and move logic into appropriate classes. * Show red badge when the site is disconnected, regardless of the installation status of WUM. * Always display as 1 update is available when site is disconnected. * Skip using dangerouslySetInnerHTML. * Remove unused dependency. * Move updateCount to a tab property. * Prevent calling get_update_count if the site is not connected. * Raw url encode the product key before signing the URL --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Muhammad Anas <muhammad.anas@automattic.com> * Prep for cherry pick 46088 --------- Co-authored-by: Thilina Pituwala <thilina.hasantha@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Muhammad Anas <muhammad.anas@automattic.com> Co-authored-by: WooCommerce Bot <no-reply@woo.com>

* Extract update count function. * Pass wooUpdateCount to be used by admin components. * Show update count bubble on in-app my subscriptions tab. * Add changefile(s) from automation for the following project(s): woocommerce * Refactor how update count HTML is generated and move logic into appropriate classes. * Show red badge when the site is disconnected, regardless of the installation status of WUM. * Always display as 1 update is available when site is disconnected. * Skip using dangerouslySetInnerHTML. * Remove unused dependency. * Move updateCount to a tab property. * Prevent calling get_update_count if the site is not connected. * Raw url encode the product key before signing the URL --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Muhammad Anas <muhammad.anas@automattic.com>

thilinah added 3 commits April 1, 2024 15:02

Extract update count function.

69b2156

Pass wooUpdateCount to be used by admin components.

44f2760

Show update count bubble on in-app my subscriptions tab.

6f586b8

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Apr 1, 2024

thilinah requested review from denho and anaspk April 1, 2024 13:41

Add changefile(s) from automation for the following project(s): wooco…

64c08fd

…mmerce

denho reviewed Apr 1, 2024

View reviewed changes

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx Outdated Show resolved Hide resolved

laurendavissmith reviewed Apr 1, 2024

View reviewed changes

plugins/woocommerce/src/Internal/Admin/Marketplace.php Outdated Show resolved Hide resolved

thilinah added 2 commits April 1, 2024 18:17

Refactor how update count HTML is generated and move logic into appro…

95f53bc

…priate classes.

Merge branch 'update/red-bubble-on-my-subs-tab' of github.com:woocomm…

6c2ca60

…erce/woocommerce into update/red-bubble-on-my-subs-tab

thilinah requested review from denho and laurendavissmith April 1, 2024 16:22

thilinah added 4 commits April 1, 2024 18:49

Show red badge when the site is disconnected, regardless of the insta…

acc77b1

…llation status of WUM.

Always display as 1 update is available when site is disconnected.

8ee5c00

Skip using dangerouslySetInnerHTML.

28ebf86

Remove unused dependency.

8c8d56d

denho reviewed Apr 2, 2024

View reviewed changes

plugins/woocommerce/includes/admin/helper/class-wc-woo-update-manager-plugin.php Outdated Show resolved Hide resolved

denho reviewed Apr 2, 2024

View reviewed changes

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx Outdated Show resolved Hide resolved

anaspk approved these changes Apr 2, 2024

View reviewed changes

plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx Outdated Show resolved Hide resolved

thilinah added 2 commits April 2, 2024 13:53

Move updateCount to a tab property.

f09891b

Prevent calling get_update_count if the site is not connected.

7e8270e

denho approved these changes Apr 2, 2024

View reviewed changes

Raw url encode the product key before signing the URL

1e76368

nigeljamesstevenson merged commit 561a3d1 into trunk Apr 2, 2024
27 checks passed

nigeljamesstevenson deleted the update/red-bubble-on-my-subs-tab branch April 2, 2024 15:04

github-actions bot added this to the 8.9.0 milestone Apr 2, 2024

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Apr 2, 2024

Stojdza modified the milestones: 8.9.0, 8.8.0 Apr 2, 2024

This was referenced Apr 2, 2024

Cherry pick 46088 into release/8.8 #46131

Merged

Delete changelog files based on PR 46088 #46132

Merged

manzurahammed mentioned this pull request Apr 3, 2024

Add a red alert badge in my-subscription tab for disconnected stores #46034

Closed

thilinah self-assigned this Apr 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add red bubble with update count on in-app My Subscriptions tab #46088

Add red bubble with update count on in-app My Subscriptions tab #46088

thilinah commented Apr 1, 2024 •

edited

github-actions bot commented Apr 1, 2024 •

edited

denho Apr 2, 2024

thilinah Apr 2, 2024

anaspk left a comment

denho left a comment

denho Apr 2, 2024

		$count_html = sprintf( '<span class="update-plugins count-%d"><span class="update-count">%d</span></span>', $count, number_format_i18n( $count ) );

Add red bubble with update count on in-app My Subscriptions tab #46088

Add red bubble with update count on in-app My Subscriptions tab #46088

Conversation

thilinah commented Apr 1, 2024 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Apr 1, 2024 • edited

denho Apr 2, 2024

Choose a reason for hiding this comment

thilinah Apr 2, 2024

Choose a reason for hiding this comment

anaspk left a comment

Choose a reason for hiding this comment

denho left a comment

Choose a reason for hiding this comment

denho Apr 2, 2024

Choose a reason for hiding this comment

thilinah commented Apr 1, 2024 •

edited

github-actions bot commented Apr 1, 2024 •

edited