WIP: Report panel body variations

assets/js/status-report/components/reports.js

@@ -65,16 +65,19 @@ export default ({ plainTextReport, reports }) => {
 					</FlexItem>
 				</Flex>
 			</p>
-			{Object.entries(reports).map(([key, { actions, groups, messages, title }]) => (
-				<Report
-					actions={actions}
-					groups={groups}
-					id={key}
-					key={key}
-					messages={messages}
-					title={title}
-				/>
-			))}
+			{Object.entries(reports).map(
+				([key, { actions, groups, messages, title, is_ajax_report }]) => (
+					<Report
+						actions={actions}
+						groups={groups}
+						id={key}
+						key={key}
+						is_ajax_report={is_ajax_report}
+						messages={messages}
+						title={title}
+					/>
+				),
+			)}
 		</>
 	);
 };

assets/js/status-report/components/reports/report.js

@@ -20,13 +20,52 @@ import Value from './report/value';
  * @param {string} props.id Report ID.
  * @param {string} props.messages Report messages.
  * @param {string} props.title Report title.
+ * @param {boolean} props.is_ajax_report Whether the report is loaded via AJAX.
+ *
  * @returns {WPElement} Report component.
  */
-export default ({ actions, groups, id, messages, title }) => {
+export default ({ actions, groups, id, messages, title, is_ajax_report }) => {
 	if (groups.length < 1) {
 		return null;
 	}
 
+	const loadAjax = () => {
+		console.log('test panel opened');
+	};
+
+	if (is_ajax_report) {
+		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)}
+					/>
+				))}
+			</Panel>
+		);
+	}
 	return (
 		<Panel id={title} className="ep-status-report">
 			<PanelHeader>

includes/classes/Screen/StatusReport.php

@@ -151,6 +151,7 @@ function ( $report ) {
 						'groups'   => $report->get_groups(),
 						'messages' => $report->get_messages(),
 						'title'    => $report->get_title(),
+						'is_ajax_report' => $report->is_ajax_report(),
 					];
 				},
 				$reports

includes/classes/StatusReport/IndexableContent.php

@@ -191,4 +191,13 @@ protected function get_post_meta_fields(): array {
 
 		return $fields;
 	}
+
+	/**
+	 * Return whether the report is loaded via AJAX.
+	 *
+	 * @return bool
+	 */
+	public function is_ajax_report(): bool {
+		return true;
+	}
 }

includes/classes/StatusReport/Indices.php

@@ -102,13 +102,4 @@ function ( $fields, $label ) use ( $index ) {
 
 		return $groups;
 	}
-
-	/**
-	 * Return whether the report is loaded via AJAX.
-	 *
-	 * @return bool
-	 */
-	public function is_ajax_report(): bool {
-		return true;
-	}
 }