RFC: Remove subpath URLQueryParam from settings pages.

js/src/index.js

@@ -113,7 +113,7 @@ addFilter(
 					__( 'Settings', 'google-listings-and-ads' ),
 				],
 				container: Settings,
-				path: '/google/settings',
+				path: '/google/settings/:subpath?',
 				wpOpenMenu: 'toplevel_page_woocommerce-marketing',
 				navArgs: {
 					id: 'google-settings',

js/src/settings/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { getQuery, getHistory } from '@woocommerce/navigation';
+import { getHistory } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -17,8 +17,15 @@ import EditStoreAddress from './edit-store-address';
 import EditPhoneNumber from './edit-phone-number';
 import './index.scss';
 
-const Settings = () => {
-	const { subpath } = getQuery();
+/**
+ * Settings page component.
+ *
+ * @param {Object} [props] React props
+ * @param {Object} [props.params = {}] `path` params extracted by React `<Router>`.
+ * @param {string} [props.params.subpath] Sub path of a nested settings page.
+ * @return {JSX.Element} Settings page component.
+ */
+const Settings = ( { params: { subpath } = {} } ) => {
 	const { google } = useGoogleAccount();
 	const isReconnectAccountsPage = subpath === subpaths.reconnectAccounts;
 
@@ -31,7 +38,7 @@ const Settings = () => {
 	}, [ isReconnectAccountsPage, google ] );
 
 	// Navigate to subpath is any.
-	switch ( subpath ) {
+	switch ( '/' + subpath ) {
 		case subpaths.reconnectAccounts:
 			return <ReconnectAccounts />;
 		case subpaths.editPhoneNumber:

js/src/utils/urls.js

@@ -39,24 +39,12 @@ export const getSettingsUrl = () => {
 };
 
 export const getEditPhoneNumberUrl = () => {
-	return getNewPath(
-		{ subpath: subpaths.editPhoneNumber },
-		settingsPath,
-		null
-	);
+	return getNewPath( null, settingsPath + subpaths.editPhoneNumber, null );
 };
 export const getEditStoreAddressUrl = () => {
-	return getNewPath(
-		{ subpath: subpaths.editStoreAddress },
-		settingsPath,
-		null
-	);
+	return getNewPath( null, settingsPath + subpaths.editStoreAddress, null );
 };
 
 export const getReconnectAccountsUrl = () => {
-	return getNewPath(
-		{ subpath: subpaths.reconnectAccounts },
-		settingsPath,
-		null
-	);
+	return getNewPath( null, settingsPath + subpaths.reconnectAccounts, null );
 };

src/API/Site/Controllers/Google/AccountController.php

@@ -88,7 +88,7 @@ protected function get_connect_callback(): callable {
 		return function( Request $request ) {
 			try {
 				$next = $request->get_param( 'next' );
-				$path = $next === 'setup-mc' ? '/google/setup-mc' : '/google/settings&subpath=/reconnect-accounts';
+				$path = $next === 'setup-mc' ? '/google/setup-mc' : '/google/settings/reconnect-accounts';
 
 				return [
 					'url' => $this->connection->connect( admin_url( "admin.php?page=wc-admin&path={$path}" ) ),

src/Menu/Settings.php

@@ -29,9 +29,38 @@ function() {
 						'nav_args' => [
 							'order'  => 40,
 							'parent' => 'google-listings-and-ads-category',
+							// Highlight this menu item for other subpages.
+							'matchExpression' => '/google/settings(/[^/]+)?',
 						],
 					]
 				);
+				// TODO:  Check if we can make it a bit DRYier, and reduce the below, to smth like `'path' => '/google/settings/:subpage?'`
+				// So far it's hard to guess the type of register_page options,
+				// which is documented to be the type of "Options for PageController::register_page()." ➰
+				wc_admin_register_page(
+					[
+						'title'  => __( 'Settings', 'google-listings-and-ads' ),
+						'parent' => 'google-listings-and-ads-category',
+						'path'   => '/google/settings/edit-phone-number',
+						'id'     => 'google-settings-phone-number',
+					]
+				);
+				wc_admin_register_page(
+					[
+						'title'  => __( 'Settings', 'google-listings-and-ads' ),
+						'parent' => 'google-listings-and-ads-category',
+						'path'   => '/google/settings/edit-store-address',
+						'id'     => 'google-settings-store-address',
+					]
+				);
+				wc_admin_register_page(
+					[
+						'title'  => __( 'Settings', 'google-listings-and-ads' ),
+						'parent' => 'google-listings-and-ads-category',
+						'path'   => '/google/settings/reconnect-accounts',
+						'id'     => 'google-settings-reconnect-accounts',
+					]
+				);
 			}
 		);
 	}