Dashboard: Implement React Routing and Page Navigation

build/content-helper/dashboard-page.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-dom-ready', 'wp-element'), 'version' => '12fe4372400030ba8741');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-dom-ready', 'wp-element'), 'version' => '18278c930ac085311870');

package.json

@@ -37,9 +37,11 @@
 	],
 	"dependencies": {
 		"@types/js-cookie": "^3.0.6",
+		"@types/react-router-dom": "^5.3.3",
 		"@wordpress/dom-ready": "^4.11.0",
 		"js-cookie": "^3.0.5",
-		"lodash.debounce": "^4.0.8"
+		"lodash.debounce": "^4.0.8",
+		"react-router-dom": "^6.28.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.48.2",

src/UI/class-dashboard-page.php

@@ -29,6 +29,7 @@ final class Dashboard_Page {
 	public function run(): void {
 		add_action( 'admin_menu', array( $this, 'add_dashboard_page_to_menu' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_dashboard_page_scripts' ) );
+		add_filter( 'parent_file', array( $this, 'fix_submenu_highlighting' ) );
 	}
 
 	/**
@@ -50,6 +51,34 @@ public function add_dashboard_page_to_menu(): void {
 			$icon,
 			30
 		);
+
+		// Register the subpages.
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Dashboard Page',
+			'Dashboard',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page',
+			'__return_null'
+		);
+
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Traffic Boost',
+			'Traffic Boost',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page#/traffic-boost',
+			'__return_null'
+		);
+
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Settings',
+			'Settings',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page#/settings',
+			'__return_null'
+		);
 	}
 
 	/**
@@ -61,6 +90,28 @@ public function add_dashboard_page_placeholder(): void {
 		echo '<div id="parsely-dashboard-page"></div>';
 	}
 
+	/**
+	 * Fixes the highlighting of the submenu items.
+	 *
+	 * This removes the highlighting from the submenu items when the dashboard page is active, so it can
+	 * later be added by the React app.
+	 *
+	 * @since 3.18.0
+	 *
+	 * @param string $parent_file The parent file.
+	 * @return string The parent file.
+	 */
+	public function fix_submenu_highlighting( string $parent_file ): string {
+		global $submenu_file, $current_screen;
+
+		if ( 'toplevel_page_parsely-dashboard-page' === $current_screen->base ) {
+			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+			$submenu_file = 'non-existent-slug';
+		}
+
+		return $parent_file;
+	}
+
 	/**
 	 * Enqueues all needed scripts and styles for the dashboard page.
 	 *

src/content-helper/dashboard-page/dashboard-page.tsx

@@ -2,17 +2,84 @@
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { createRoot } from '@wordpress/element';
+import { createRoot, useEffect } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { HashRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import { DashboardPage, SettingsPage, TrafficBoostPage } from './pages';
 
 domReady( () => {
 	const root = createRoot(
 		document.getElementById( 'parsely-dashboard-page' ) as Element
 	);
 
 	root.render(
-		<>
-			<h1>Parse.ly</h1>
-			<p>Welcome to the Parse.ly Dashboard page!</p>
-		</>
+		<Router
+			future={ {
+				v7_relativeSplatPath: true,
+				v7_startTransition: true,
+			} }
+		>
+			<ParselyDashboard />
+		</Router>
 	);
 } );
+
+/**
+ * Main component for the Parse.ly dashboard.
+ *
+ * @since 3.18.0
+ *
+ * @class
+ */
+const ParselyDashboard = () => {
+	const location = useLocation();
+
+	/**
+	 * Replaces the first link to have the hash router link.
+	 *
+	 * @since 3.18.0
+	 */
+	useEffect( () => {
+		const firstLink = document.querySelector( '#toplevel_page_parsely-dashboard-page .wp-submenu li a.wp-first-item' );
+		if ( firstLink ) {
+			firstLink.setAttribute( 'href', window.location.pathname + window.location.search + '#/' );
+		}
+	}, [] );
+
+	/**
+	 * Changes the submenus highlight based on the current page.
+	 *
+	 * @since 3.18.0
+	 */
+	useEffect( () => {
+		const submenuItems = document.querySelectorAll( '#toplevel_page_parsely-dashboard-page .wp-submenu li' );
+
+		submenuItems.forEach( ( item ) => {
+			const link = item.querySelector( 'a' );
+			const hashPath = link?.getAttribute( 'href' )?.split( '#' )[ 1 ];
+
+			if ( hashPath === location.pathname ) {
+				item.classList.add( 'current' );
+				link?.blur();
+			} else {
+				item.classList.remove( 'current' );
+			}
+		} );
+	}, [ location ] );
+
+	return (
+		<Routes>
+			<Route path="/" element={ <DashboardPage /> } />
+			<Route path="/traffic-boost" element={ <TrafficBoostPage /> } />
+			<Route path="/settings" element={ <SettingsPage /> } />
+		</Routes>
+	);
+};
+

src/content-helper/dashboard-page/pages/dashboard/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * The main dashboard page component.
+ *
+ * @since 3.18.0
+ */
+export const DashboardPage = () => {
+	return (
+		<>
+			<h1>Parse.ly Dashboard</h1>
+			<p>Welcome to the main Parse.ly dashboard page.</p>
+		</>
+	);
+};

src/content-helper/dashboard-page/pages/index.tsx

@@ -0,0 +1,3 @@
+export { DashboardPage } from './dashboard/page-component';
+export { TrafficBoostPage } from './traffic-boost/page-component';
+export { SettingsPage } from './settings/page-component';

src/content-helper/dashboard-page/pages/settings/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * Settings page component.
+ *
+ * @since 3.18.0
+ */
+export const SettingsPage = () => {
+	return (
+		<>
+			<h1>Parse.ly Settings</h1>
+			<p>This is a page for settings.</p>
+		</>
+	);
+};

src/content-helper/dashboard-page/pages/traffic-boost/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * Traffic Boost page component.
+ *
+ * @since 3.18.0
+ */
+export const TrafficBoostPage = () => {
+	return (
+		<>
+			<h1>Traffic Boost</h1>
+			<p>This is where the amazing Traffic Boost implementation will live.</p>
+		</>
+	);
+};