Allow registered React-powered page to specify 'parent path' (#39116)

* Allow registered React-powered page to specify 'parent path', so the right menu item can be highlighted.

* Fix linting issue.

* Changelog.

* Add changefile(s) from automation for the following project(s): woocommerce

* Changelog.

* Add changefile(s) from automation for the following project(s): woocommerce

* Changelog.

* Update plugins/woocommerce/changelog/add-override-menu-item-highlight

Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>

plugins/woocommerce-admin/client/layout/controller.js

@@ -485,10 +485,21 @@ window.wpNavMenuClassChange = function ( page, url ) {
 		url === '/'
 			? 'admin.php?page=wc-admin'
 			: 'admin.php?page=wc-admin&path=' + encodeURIComponent( url );
-	const currentItemsSelector =
+	let currentItemsSelector =
 		url === '/'
 			? `li > a[href$="${ pageUrl }"], li > a[href*="${ pageUrl }?"]`
 			: `li > a[href*="${ pageUrl }"]`;
+
+	const parentPath = page.navArgs?.parentPath;
+	if ( parentPath ) {
+		const parentPageUrl =
+			parentPath === '/'
+				? 'admin.php?page=wc-admin'
+				: 'admin.php?page=wc-admin&path=' +
+				  encodeURIComponent( parentPath );
+		currentItemsSelector += `, li > a[href*="${ parentPageUrl }"]`;
+	}
+
 	const currentItems = wpNavMenu.querySelectorAll( currentItemsSelector );
 
 	Array.from( currentItems ).forEach( function ( item ) {

plugins/woocommerce/changelog/add-override-menu-item-highlight

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Allow registered React-powered pages to specify a parent navigation menu item to highlight when active.