diff --git a/assets/js/status-report/components/reports.js b/assets/js/status-report/components/reports.js index 9a24c4ae4c..73662027de 100644 --- a/assets/js/status-report/components/reports.js +++ b/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 }]) => ( - - )); +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 ( + <> +

+ {__( + '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', + )} +

+

+ + + + + + + + +

+ {Object.entries(reports).map(([key, { actions, groups, messages, title }]) => ( + + ))} + + ); }; diff --git a/assets/js/status-report/components/reports/report.js b/assets/js/status-report/components/reports/report.js index 53414a330c..e33a572102 100644 --- a/assets/js/status-report/components/reports/report.js +++ b/assets/js/status-report/components/reports/report.js @@ -28,7 +28,7 @@ export default ({ actions, groups, id, messages, title }) => { } return ( - +

{title}

{actions.map(({ href, label }) => ( diff --git a/assets/js/status-report/config.js b/assets/js/status-report/config.js index 3200388f1e..bfa52be499 100644 --- a/assets/js/status-report/config.js +++ b/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 }; diff --git a/assets/js/status-report/index.js b/assets/js/status-report/index.js index 31a4ca6767..fa9b14f0ff 100644 --- a/assets/js/status-report/index.js +++ b/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(); - } else { - render(, report); - } +const App = () => { + return ( + + + + ); }; -domReady(init); +if (typeof createRoot === 'function') { + const root = createRoot(document.getElementById('ep-status-reports')); + + root.render(); +} else { + render(, document.getElementById('ep-status-reports')); +} diff --git a/assets/css/status-report.css b/assets/js/status-report/style.css similarity index 57% rename from assets/css/status-report.css rename to assets/js/status-report/style.css index f71edfc9d8..2fb8a9faec 100644 --- a/assets/css/status-report.css +++ b/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; -} diff --git a/includes/classes/Screen/StatusReport.php b/includes/classes/Screen/StatusReport.php index 312e5834ae..ea76e0c843 100644 --- a/includes/classes/Screen/StatusReport.php +++ b/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 ); - } - - ?> -

-

- " class="button button-primary" id="ep-download-report"> - - - - - - -

- - -
-

-
- render_reports(); ?> -
-
-
+
diff --git a/package.json b/package.json index a0ecccd8f2..c7813a3d05 100644 --- a/package.json +++ b/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" },