Migrate Status Report to SettingsScreenProvider.

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

@@ -1,29 +1,80 @@
 /**
  * WordPress dependencies.
  */
+import { Button, Flex, FlexItem } from '@wordpress/components';
+import { useCopyToClipboard } from '@wordpress/compose';
 import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
  */
 import Report from './reports/report';
+import { useSettingsScreen } from '../../settings-screen';
+
+/**
+ * Styles.
+ */
+import '../style.css';
 
 /**
  * Reports component.
  *
  * @param {object} props Component props.
+ * @param {string} props.plainTextReport Plain text report.
  * @param {object} props.reports Status reports.
  * @returns {WPElement} Reports component.
  */
-export default ({ reports }) => {
-	return Object.entries(reports).map(([key, { actions, groups, messages, title }]) => (
-		<Report
-			actions={actions}
-			groups={groups}
-			id={key}
-			key={key}
-			messages={messages}
-			title={title}
-		/>
-	));
+export default ({ plainTextReport, reports }) => {
+	const { createNotice } = useSettingsScreen();
+
+	const downloadUrl = `data:text/plain;charset=utf-8,${encodeURIComponent(plainTextReport)}`;
+
+	/**
+	 * Copy to clipboard button ref.
+	 *
+	 * @type {object}
+	 */
+	const ref = useCopyToClipboard(plainTextReport, () => {
+		createNotice('info', __('Copied status report to clipboard.', 'elasticpress'));
+	});
+
+	return (
+		<>
+			<p>
+				{__(
+					'This screen provides a list of information related to ElasticPress and synced content that can be helpful during troubleshooting. This list can also be copy/pasted and shared as needed.',
+					'elasticpress',
+				)}
+			</p>
+			<p>
+				<Flex justify="start">
+					<FlexItem>
+						<Button
+							download="elasticpress-report.txt"
+							href={downloadUrl}
+							variant="primary"
+						>
+							{__('Download status report', 'elasticpress')}
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button ref={ref} variant="secondary">
+							{__('Copy status report to clipboard', 'elasticpress')}
+						</Button>
+					</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}
+				/>
+			))}
+		</>
+	);
 };

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

@@ -28,7 +28,7 @@ export default ({ actions, groups, id, messages, title }) => {
 	}
 
 	return (
-		<Panel id={title}>
+		<Panel id={title} className="ep-status-report">
 			<PanelHeader>
 				<h2 id={id}>{title}</h2>
 				{actions.map(({ href, label }) => (

assets/js/status-report/config.js

@@ -1,6 +1,6 @@
 /**
  * Window dependencies.
  */
-const reports = window.epStatusReport;
+const { plainTextReport, reports } = window.epStatusReport;
 
-export { reports };
+export { plainTextReport, reports };

assets/js/status-report/index.js

@@ -1,57 +1,33 @@
-/* global ClipboardJS */
-
 /**
  * WordPress dependencies.
  */
-import domReady from '@wordpress/dom-ready';
-import { createRoot, render } from '@wordpress/element';
+import { createRoot, render, WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
  */
-import { reports } from './config';
+import { SettingsScreenProvider } from '../settings-screen';
+import { plainTextReport, reports } from './config';
 import Reports from './components/reports';
 
 /**
- * Status report copy button.
+ * App component
  *
- * @returns {void}
+ * @returns {WPElement} App component.
  */
-const init = () => {
-	const clipboard = new ClipboardJS('#ep-copy-report');
-
-	/**
-	 * Handle successful copy.
-	 *
-	 * @param {Event} event Copy event.
-	 * @returns {void}
-	 */
-	const onSuccess = (event) => {
-		event.trigger.nextElementSibling.style.display = 'initial';
-
-		setTimeout(() => {
-			event.trigger.nextElementSibling.style.display = 'none';
-		}, 3000);
-
-		event.clearSelection();
-	};
-
-	/**
-	 * Bind copy button events.
-	 */
-	clipboard.on('success', onSuccess);
-
-	/**
-	 * Render reports.
-	 */
-	const report = document.getElementById('ep-status-reports');
-
-	if (typeof createRoot === 'function') {
-		const root = createRoot(report);
-		root.render(<Reports reports={reports} />);
-	} else {
-		render(<Reports reports={reports} />, report);
-	}
+const App = () => {
+	return (
+		<SettingsScreenProvider title={__('Status Report', 'elasticpress')}>
+			<Reports plainTextReport={plainTextReport} reports={reports} />
+		</SettingsScreenProvider>
+	);
 };
 
-domReady(init);
+if (typeof createRoot === 'function') {
+	const root = createRoot(document.getElementById('ep-status-reports'));
+
+	root.render(<App />);
+} else {
+	render(<App />, document.getElementById('ep-status-reports'));
+}

assets/css/status-report.css → assets/js/status-report/style.css

@@ -1,8 +1,8 @@
 .ep-status-report {
-	max-width: 800px;
+	margin-bottom: 16px;
 
-	& .components-panel {
-		margin-bottom: 1rem;
+	& .components-panel__header h2 {
+		font-size: 14px;
 	}
 
 	& .components-notice {
@@ -31,13 +31,3 @@
 		}
 	}
 }
-
-.ep-copy-button-wrapper {
-	margin: 0.5rem 0 1rem;
-}
-
-.ep-copy-button-wrapper__success {
-	color: #008a20;
-	display: none;
-	margin-left: 0.5rem;
-}

includes/classes/Screen/StatusReport.php

@@ -44,29 +44,41 @@ public function admin_enqueue_scripts() {
 			return;
 		}
 
-		$script_deps = Utils\get_asset_info( 'status-report-script', 'dependencies' );
-
 		wp_enqueue_script(
 			'ep_admin_status_report_scripts',
 			EP_URL . 'dist/js/status-report-script.js',
-			array_merge( $script_deps, [ 'clipboard' ] ),
+			Utils\get_asset_info( 'status-report-script', 'dependencies' ),
 			Utils\get_asset_info( 'status-report-script', 'version' ),
 			true
 		);
 
+		$reports = $this->get_formatted_reports();
+
+		$plain_text_reports = [];
+
+		foreach ( $reports as $report ) {
+			$title  = $report['title'];
+			$groups = $report['groups'];
+
+			$plain_text_reports[] = $this->render_copy_paste_report( $title, $groups );
+		}
+
+		$plain_text_report = implode( "\n\n", $plain_text_reports );
+
 		wp_localize_script(
 			'ep_admin_status_report_scripts',
 			'epStatusReport',
-			$this->get_formatted_reports()
+			[
+				'plainTextReport' => $plain_text_report,
+				'reports'         => $reports,
+			]
 		);
 
-		$style_deps = Utils\get_asset_info( 'status-report-styles', 'dependencies' );
-
 		wp_enqueue_style(
 			'ep_status_report_styles',
-			EP_URL . 'dist/css/status-report-styles.css',
-			array_merge( $style_deps, [ 'wp-edit-post' ] ),
-			Utils\get_asset_info( 'status-report-styles', 'version' )
+			EP_URL . 'dist/css/status-report-script.css',
+			[ 'wp-components', 'wp-edit-post' ],
+			Utils\get_asset_info( 'status-report-script', 'version' )
 		);
 	}
 
@@ -122,37 +134,6 @@ function( $report_slug ) use ( $skipped_reports ) {
 		return $filtered_reports;
 	}
 
-	/**
-	 * Render all reports (HTML and Copy & Paste button)
-	 */
-	public function render_reports() {
-		$reports = $this->get_formatted_reports();
-
-		$copy_paste_output = [];
-
-		foreach ( $reports as $report ) {
-			$title  = $report['title'];
-			$groups = $report['groups'];
-
-			$copy_paste_output[] = $this->render_copy_paste_report( $title, $groups );
-		}
-
-		?>
-		<p><?php esc_html_e( 'This screen provides a list of information related to ElasticPress and synced content that can be helpful during troubleshooting. This list can also be copy/pasted and shared as needed.', 'elasticpress' ); ?></p>
-		<p class="ep-copy-button-wrapper">
-			<a download="elasticpress-report.txt" href="data:text/plain;charset=utf-8,<?php echo rawurlencode( implode( "\n\n", $copy_paste_output ) ); ?>" class="button button-primary" id="ep-download-report">
-				<?php esc_html_e( 'Download report', 'elasticpress' ); ?>
-			</a>
-			<button class="button" data-clipboard-text="<?php echo esc_attr( implode( "\n\n", $copy_paste_output ) ); ?>" id="ep-copy-report" type="button">
-				<?php esc_html_e( 'Copy status report to clipboard', 'elasticpress' ); ?>
-			</button>
-			<span class="ep-copy-button-wrapper__success">
-				<?php esc_html_e( 'Copied!', 'elasticpress' ); ?>
-			</span>
-		</p>
-		<?php
-	}
-
 	/**
 	 * Process and format the reports, then store them in the `formatted_reports` attribute.
 	 *

includes/partials/status-report-page.php

@@ -12,11 +12,4 @@
 
 require_once __DIR__ . '/header.php';
 ?>
-
-<div class="wrap">
-	<h1><?php esc_html_e( 'Status Report', 'elasticpress' ); ?></h1>
-	<div class="ep-status-report">
-		<?php $status_report->render_reports(); ?>
-		<div id="ep-status-reports"></div>
-	</div>
-</div>
+<div id="ep-status-reports" class="wrap"></div>

package.json

@@ -87,7 +87,6 @@
       "ordering-styles": "./assets/css/ordering.css",
       "facets-block-styles": "./assets/css/facets-block.css",
       "related-posts-block-styles": "./assets/css/related-posts-block.css",
-      "status-report-styles": "./assets/css/status-report.css",
       "synonyms-styles": "./assets/css/synonyms.css",
       "woocommerce-order-search-styles": "./assets/css/woocommerce/admin/orders.css"
     },