WIP: Working version of AJAX status report

10up · Feb 19, 2025 · 7d98765 · 7d98765
1 parent 63fee1b
commit 7d98765
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 88 deletions.
diff --git a/assets/js/status-report/components/reports/report.js b/assets/js/status-report/components/reports/report.js
@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies.
  */
-import { Button, Notice, Panel, PanelBody, PanelHeader } from '@wordpress/components';
-import { safeHTML } from '@wordpress/dom';
-import { RawHTML, WPElement } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
+import { Button } from '@wordpress/components';
+import { WPElement, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
  */
-import Value from './report/value';
+// import ReportHeader from './report/header';
+import ReportContent from './report/content';
+import ReportContainer from './report/container';
+import { loadGroupAjax } from '../../utilities';
 
 /**
  * Report components.
@@ -25,97 +26,44 @@ import Value from './report/value';
  * @returns {WPElement} Report component.
  */
 export default ({ actions, groups, id, messages, title, is_ajax_report }) => {
-	if (groups.length < 1) {
+	if (groups.length < 1 && !is_ajax_report) {
 		return null;
 	}
 
-	const loadAjax = () => {
-		console.log('test panel opened');
+	const [group, setGroup] = useState(false);
+
+	const loadAjax = async () => {
+		const request = await loadGroupAjax(id);
+		request.json().then((response) => {
+			setGroup(response);
+		});
 	};
 
 	if (is_ajax_report) {
+		if (!group) {
+			return (
+				<ReportContainer id={id} title={title} messages={messages}>
+					<Button variant="primary" onClick={loadAjax}>
+						Load Report
+					</Button>
+				</ReportContainer>
+			);
+		}
+
 		return (
-			<Panel id={title} className="ep-status-report">
-				<PanelHeader>
-					<h2 id={id}>{title}</h2>
-					{actions.map(({ href, label }) => (
-						<Button
-							href={decodeEntities(href)}
-							isDestructive
-							isSecondary
-							isSmall
-							key={href}
-						>
-							{label}
-						</Button>
-					))}
-				</PanelHeader>
-				{messages.map(({ message, type }) => (
-					<Notice status={type} isDismissible={false}>
-						<RawHTML>{safeHTML(message)}</RawHTML>
-					</Notice>
-				))}
-				{groups.map(({ fields, title }) => (
-					<PanelBody
-						initialOpen={false}
-						onToggle={loadAjax}
-						key={title}
-						title={decodeEntities(title)}
-					/>
+			<ReportContainer id={id} title={title} actions={actions} messages={messages}>
+				{group.map(({ fields, title }) => (
+					<ReportContent key={title} fields={fields} title={title} />
 				))}
-			</Panel>
+			</ReportContainer>
 		);
+
 	}
 	return (
-		<Panel id={title} className="ep-status-report">
-			<PanelHeader>
-				<h2 id={id}>{title}</h2>
-				{actions.map(({ href, label }) => (
-					<Button
-						href={decodeEntities(href)}
-						isDestructive
-						isSecondary
-						isSmall
-						key={href}
-					>
-						{label}
-					</Button>
-				))}
-			</PanelHeader>
-			{messages.map(({ message, type }) => (
-				<Notice status={type} isDismissible={false}>
-					<RawHTML>{safeHTML(message)}</RawHTML>
-				</Notice>
-			))}
+		<ReportContainer id={id} title={title} actions={actions} messages={messages}>
 			{groups.map(({ fields, title }) => (
-				<PanelBody key={title} title={decodeEntities(title)} initialOpen={false}>
-					<table
-						cellPadding="0"
-						cellSpacing="0"
-						className="wp-list-table widefat striped"
-					>
-						<colgroup>
-							<col />
-							<col />
-						</colgroup>
-						<tbody>
-							{Object.entries(fields).map(
-								([key, { description = '', label, value }]) => (
-									<tr key={key}>
-										<td>
-											{label}
-											{description ? <small>{description}</small> : null}
-										</td>
-										<td>
-											<Value value={value} />
-										</td>
-									</tr>
-								),
-							)}
-						</tbody>
-					</table>
-				</PanelBody>
+				<ReportContent key={title} fields={fields} title={title} />
 			))}
-		</Panel>
+		</ReportContainer>
 	);
 };
diff --git a/assets/js/status-report/components/reports/report/container.js b/assets/js/status-report/components/reports/report/container.js
@@ -0,0 +1,33 @@
+import { Panel, PanelHeader, Button, Notice } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { RawHTML } from '@wordpress/element';
+import { safeHTML } from '@wordpress/dom';
+
+export default ({ id, title, actions = [], messages = [], children }) => {
+	return (
+		<Panel id={title} className="ep-status-report">
+			<PanelHeader>
+				<h2 id={id}>{title}</h2>
+				{actions.map(({ href, label }) => (
+					<Button
+						href={decodeEntities(href)}
+						isDestructive
+						isSecondary
+						isSmall
+						key={href}
+					>
+						{label}
+					</Button>
+				))}
+			</PanelHeader>
+
+			{messages.map(({ message, type }) => (
+				<Notice status={type} isDismissible={false}>
+					<RawHTML>{safeHTML(message)}</RawHTML>
+				</Notice>
+			))}
+
+			{children}
+		</Panel>
+	);
+};
diff --git a/assets/js/status-report/components/reports/report/content.js b/assets/js/status-report/components/reports/report/content.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies.
+ */
+import { PanelBody } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import Value from './value';
+
+/**
+ * Field value component.
+ *
+ * @param {object} props Component props.
+ * @param {object} props.fields Fields to render.
+ * @param {string} props.title Title.
+ *
+ * @returns {WPElement} Value component.
+ */
+export default ({ fields, title }) => {
+	return (
+		<PanelBody key={title} title={decodeEntities(title)} initialOpen={false}>
+			<table cellPadding="0" cellSpacing="0" className="wp-list-table widefat striped">
+				<colgroup>
+					<col />
+					<col />
+				</colgroup>
+				<tbody>
+					{Object.entries(fields).map(([key, { description = '', label, value }]) => (
+						<tr key={key}>
+							<td>
+								{label}
+								{description ? <small>{description}</small> : null}
+							</td>
+							<td>
+								<Value value={value} />
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</PanelBody>
+	);
+};
diff --git a/assets/js/status-report/utilities.js b/assets/js/status-report/utilities.js
@@ -0,0 +1,16 @@
+/**
+ * Load a group report data via AJAX
+ *
+ * @param {string} id Group ID.
+ *
+ *
+ * @returns {Promise} Group data.
+ */
+export const loadGroupAjax = async (id) => {
+	const { ajaxurl } = window;
+
+	const data = new FormData();
+	data.append('action', 'ep_load_groups');
+	data.append('report', id);
+	return fetch(ajaxurl, { method: 'POST', body: data });
+};
diff --git a/includes/classes/Screen/StatusReport.php b/includes/classes/Screen/StatusReport.php
@@ -32,6 +32,7 @@ class StatusReport {
 	public function setup() {
 		add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] );
 		add_action( 'admin_head', array( $this, 'admin_menu_count' ), 11 );
+		add_action( 'wp_ajax_ep_load_groups', array( $this, 'action_wp_ajax_ep_load_groups' ) );
 	}
 
 	/**
@@ -82,6 +83,26 @@ public function admin_enqueue_scripts() {
 		);
 	}
 
+	/**
+	 * AJAX action to load an individual report group.
+	 * 
+	 * @return 
+	 */
+	public function action_wp_ajax_ep_load_groups() {
+		$post = wp_unslash( $_POST );
+		if ( empty( $this->formatted_reports ) ) {
+			$this->formatted_reports = $this->get_reports();
+		}
+
+		if ( empty( $this->formatted_reports[ $post['report'] ] ) ) {
+			wp_send_json_error( [ 'message' => 'Report not found' ] );
+		}
+
+		$report = $this->formatted_reports[ $post['report'] ];
+
+		return wp_send_json( $report->get_groups(), 200 );
+	}
+
 	/**
 	 * Return all reports available
 	 *
@@ -136,6 +157,7 @@ function ( $report_slug ) use ( $skipped_reports ) {
 
 	/**
 	 * Process and format the reports, then store them in the `formatted_reports` attribute.
+	 * Ajax based reports are not included in the initial formatted reports.
 	 *
 	 * @since 4.5.0
 	 * @return array
@@ -147,10 +169,10 @@ protected function get_formatted_reports(): array {
 			$this->formatted_reports = array_map(
 				function ( $report ) {
 					return [
-						'actions'  => $report->get_actions(),
-						'groups'   => $report->get_groups(),
-						'messages' => $report->get_messages(),
-						'title'    => $report->get_title(),
+						'actions'        => $report->get_actions(),
+						'groups'         => ! $report->is_ajax_report() ? $report->get_groups() : [],
+						'messages'       => $report->get_messages(),
+						'title'          => $report->get_title(),
 						'is_ajax_report' => $report->is_ajax_report(),
 					];
 				},

diff --git a/includes/classes/StatusReport/IndexableContent.php b/includes/classes/StatusReport/IndexableContent.php
@@ -28,6 +28,15 @@ public function get_title(): string {
 		return __( 'Indexable Content', 'elasticpress' );
 	}
 
+	/**
+	 * Return the report identifier
+	 *
+	 * @return string
+	 */
+	public function get_report_identifier(): string {
+		return 'indexable';
+	}
+
 	/**
 	 * Return the report fields
 	 *