diff --git a/assets/js/status-report/components/reports/report.js b/assets/js/status-report/components/reports/report.js index 66e14d2096..6a27772939 100644 --- 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 ( + + + + ); + } + return ( - - -

{title}

- {actions.map(({ href, label }) => ( - - ))} -
- {messages.map(({ message, type }) => ( - - {safeHTML(message)} - - ))} - {groups.map(({ fields, title }) => ( - + + {group.map(({ fields, title }) => ( + ))} -
+ ); + } return ( - - -

{title}

- {actions.map(({ href, label }) => ( - - ))} -
- {messages.map(({ message, type }) => ( - - {safeHTML(message)} - - ))} + {groups.map(({ fields, title }) => ( - - - - - - - - {Object.entries(fields).map( - ([key, { description = '', label, value }]) => ( - - - - - ), - )} - -
- {label} - {description ? {description} : null} - - -
-
+ ))} -
+ ); }; diff --git a/assets/js/status-report/components/reports/report/container.js b/assets/js/status-report/components/reports/report/container.js new file mode 100644 index 0000000000..c9b1a1ba93 --- /dev/null +++ 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 ( + + +

{title}

+ {actions.map(({ href, label }) => ( + + ))} +
+ + {messages.map(({ message, type }) => ( + + {safeHTML(message)} + + ))} + + {children} +
+ ); +}; diff --git a/assets/js/status-report/components/reports/report/content.js b/assets/js/status-report/components/reports/report/content.js new file mode 100644 index 0000000000..1b8cbffdcd --- /dev/null +++ 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 ( + + + + + + + + {Object.entries(fields).map(([key, { description = '', label, value }]) => ( + + + + + ))} + +
+ {label} + {description ? {description} : null} + + +
+
+ ); +}; diff --git a/assets/js/status-report/utilities.js b/assets/js/status-report/utilities.js new file mode 100644 index 0000000000..ee66932cf6 --- /dev/null +++ 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 index e5d86cbb44..0ddf4c358a 100644 --- 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 index 5e4d02ed22..c0698caafd 100644 --- 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 *