From 28b8592a59c32846726ec09294b3057e61212f70 Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Thu, 30 Mar 2023 17:59:20 +0100 Subject: [PATCH 01/12] create results table templates --- includes/Admin/Admin_Page.php | 15 ++++++++++++++- templates/admin-page.php | 2 ++ templates/results-row.php | 19 +++++++++++++++++++ templates/results-table.php | 24 ++++++++++++++++++++++++ 4 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 templates/results-row.php create mode 100644 templates/results-table.php diff --git a/includes/Admin/Admin_Page.php b/includes/Admin/Admin_Page.php index c16a3e6cc..d3299392f 100644 --- a/includes/Admin/Admin_Page.php +++ b/includes/Admin/Admin_Page.php @@ -71,6 +71,7 @@ public function add_page() { */ public function initialize_page() { add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); + add_action( 'admin_footer', array( $this, 'admin_footer' ) ); } /** @@ -82,7 +83,9 @@ public function enqueue_scripts() { wp_enqueue_script( 'plugin-check-admin', WP_PLUGIN_CHECK_PLUGIN_DIR_URL . 'assets/js/plugin-check-admin.js', - array(), + array( + 'wp-util', + ), WP_PLUGIN_CHECK_VERSION, true ); @@ -154,4 +157,14 @@ public function filter_plugin_action_links( $actions, $plugin_file ) { return $actions; } + + /** + * Render the results table templates in the footer. + * + * @since n.e.x.t + */ + public function admin_footer() { + include_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-table.php'; + include_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-row.php'; + } } diff --git a/templates/admin-page.php b/templates/admin-page.php index c35098ee3..0ddf6e13f 100644 --- a/templates/admin-page.php +++ b/templates/admin-page.php @@ -41,4 +41,6 @@ +
+ diff --git a/templates/results-row.php b/templates/results-row.php new file mode 100644 index 000000000..d23215ec5 --- /dev/null +++ b/templates/results-row.php @@ -0,0 +1,19 @@ + diff --git a/templates/results-table.php b/templates/results-table.php new file mode 100644 index 000000000..89e477163 --- /dev/null +++ b/templates/results-table.php @@ -0,0 +1,24 @@ + From 338865edf7198ddc1b5fcf67b2d7cee06c25bc03 Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Thu, 30 Mar 2023 17:59:38 +0100 Subject: [PATCH 02/12] add results to page --- .eslintrc.js | 2 +- assets/js/plugin-check-admin.js | 95 +++++++++++++++++++++++++++++++-- templates/results-table.php | 12 ++++- 3 files changed, 103 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b6b435aee..e72b01f76 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,7 +3,7 @@ module.exports = { extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ], plugins: [ 'import' ], globals: { - wp: 'off', + wp: 'readonly', ajaxurl: 'readonly', FormData: 'readonly', }, diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index 4f4d0fcd3..de0a9c54c 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -1,11 +1,12 @@ ( function ( pluginCheck ) { const checkItButton = document.getElementById( 'plugin-check__submit' ); + const resultsContainer = document.getElementById( 'plugin-check__results' ); const pluginsList = document.getElementById( 'plugin-check__plugins-dropdown' ); // Return early if the elements cannot be found on the page. - if ( ! checkItButton || ! pluginsList ) { + if ( ! checkItButton || ! pluginsList || ! resultsContainer ) { console.error( 'Missing form elements on page' ); return; } @@ -13,6 +14,9 @@ checkItButton.addEventListener( 'click', ( e ) => { e.preventDefault(); + // Empty the results container. + resultsContainer.innerText = ''; + getChecksToRun() .then( setUpEnvironment ) .then( runChecks ) @@ -138,8 +142,8 @@ */ async function runChecks( data ) { for ( let i = 0; i < data.checks.length; i++ ) { - const result = await runCheck( data.plugin, data.checks[ i ] ); - console.log( result ); + const results = await runCheck( data.plugin, data.checks[ i ] ); + renderResults( results ); } } @@ -203,4 +207,89 @@ return data; } + + /** + * Renders results for each check on the page. + * + * @since n.e.x.t + * + * @param {Object} results The results object. + */ + function renderResults( results ) { + const { errors, warnings } = results; + + // Render errors and warnings for files. + for ( const file in errors ) { + if ( warnings[ file ] ) { + renderFileResults( file, errors[ file ], warnings[ file ] ); + delete warnings[ file ]; + } else { + renderFileResults( file, errors[ file ], [] ); + } + } + + // Render remaining files with only warnings. + for ( const file in warnings ) { + renderFileResults( file, [], warnings[ file ] ); + } + } + + /** + * Renders the file results table. + * + * @since n.e.x.t + * + * @param {string} file The file name for the results. + * @param {Object} errors The file errors. + * @param {Object} warnings The file warnings. + */ + function renderFileResults( file, errors, warnings ) { + const tableTemplate = wp.template( 'plugin-check-results-table' ); + const rowTemplate = wp.template( 'plugin-check-results-row' ); + const index = Date.now(); + + // Render the file table. + resultsContainer.innerHTML += tableTemplate( { file, index } ); + const resultsTable = document.getElementById( + 'plugin-check__results-body-' + index + ); + + // Loop over each result by the line, column and messages. + for ( const line in errors ) { + for ( const column in errors[ line ] ) { + for ( let i = 0; i < errors[ line ][ column ].length; i++ ) { + const message = errors[ line ][ column ][ i ].message; + const code = errors[ line ][ column ][ i ].code; + + resultsTable.innerHTML += rowTemplate( { + line, + column, + file, + type: 'ERROR', + message, + code, + } ); + } + } + } + + // Loop over each result by the line, column and messages. + for ( const line in warnings ) { + for ( const column in warnings[ line ] ) { + for ( let i = 0; i < warnings[ line ][ column ].length; i++ ) { + const message = warnings[ line ][ column ][ i ].message; + const code = warnings[ line ][ column ][ i ].code; + + resultsTable.innerHTML += rowTemplate( { + line, + column, + file, + type: 'WARNING', + message, + code, + } ); + } + } + } + } } )( PLUGIN_CHECK ); /* global PLUGIN_CHECK */ diff --git a/templates/results-table.php b/templates/results-table.php index 89e477163..c5e7fbf34 100644 --- a/templates/results-table.php +++ b/templates/results-table.php @@ -1,6 +1,14 @@ From 4429f0ac30c9aba586dac6372bdd8b5b21a72d5a Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Fri, 31 Mar 2023 16:25:45 +0100 Subject: [PATCH 03/12] update table layout and style --- templates/results-table.php | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/templates/results-table.php b/templates/results-table.php index c5e7fbf34..13f55619e 100644 --- a/templates/results-table.php +++ b/templates/results-table.php @@ -1,32 +1,26 @@ From bdee4a76bbebdc08b15640d00bed1c6558fcf619 Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Fri, 31 Mar 2023 16:26:05 +0100 Subject: [PATCH 04/12] create renderResultRows function --- assets/js/plugin-check-admin.js | 48 +++++++++++++++------------------ 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index 4ae857a91..bf33a4e40 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -249,7 +249,6 @@ */ function renderFileResults( file, errors, warnings ) { const tableTemplate = wp.template( 'plugin-check-results-table' ); - const rowTemplate = wp.template( 'plugin-check-results-row' ); const index = Date.now(); // Render the file table. @@ -258,37 +257,34 @@ 'plugin-check__results-body-' + index ); - // Loop over each result by the line, column and messages. - for ( const line in errors ) { - for ( const column in errors[ line ] ) { - for ( let i = 0; i < errors[ line ][ column ].length; i++ ) { - const message = errors[ line ][ column ][ i ].message; - const code = errors[ line ][ column ][ i ].code; + // Render results to the table. + renderResultRows( 'ERROR', errors, resultsTable ); + renderResultRows( 'WARNING', warnings, resultsTable ); + } - resultsTable.innerHTML += rowTemplate( { - line, - column, - file, - type: 'ERROR', - message, - code, - } ); - } - } - } + /** + * Renders a result row onto the file table. + * + * @since n.e.x.t + * + * @param {string} type The result type. Either ERROR or WARNING. + * @param {Object} results The results object. + * @param {Object} table The HTML table to append a result row to. + */ + function renderResultRows( type, results, table ) { + const rowTemplate = wp.template( 'plugin-check-results-row' ); // Loop over each result by the line, column and messages. - for ( const line in warnings ) { - for ( const column in warnings[ line ] ) { - for ( let i = 0; i < warnings[ line ][ column ].length; i++ ) { - const message = warnings[ line ][ column ][ i ].message; - const code = warnings[ line ][ column ][ i ].code; + for ( const line in results ) { + for ( const column in results[ line ] ) { + for ( let i = 0; i < results[ line ][ column ].length; i++ ) { + const message = results[ line ][ column ][ i ].message; + const code = results[ line ][ column ][ i ].code; - resultsTable.innerHTML += rowTemplate( { + table.innerHTML += rowTemplate( { line, column, - file, - type: 'WARNING', + type, message, code, } ); From 5870aed22ea85bc306146a97e8d2bb7606932036 Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Fri, 31 Mar 2023 16:31:37 +0100 Subject: [PATCH 05/12] add message once plugin check process is complete --- assets/js/plugin-check-admin.js | 2 ++ includes/Admin/Admin_Page.php | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index bf33a4e40..e9ac3a72e 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -23,6 +23,8 @@ .then( cleanUpEnvironment ) .then( ( data ) => { console.log( data.message ); + + resultsContainer.innerHTML += 'Checks complete'; } ) .catch( ( error ) => { console.error( error ); diff --git a/includes/Admin/Admin_Page.php b/includes/Admin/Admin_Page.php index d3299392f..089b0afe1 100644 --- a/includes/Admin/Admin_Page.php +++ b/includes/Admin/Admin_Page.php @@ -164,7 +164,7 @@ public function filter_plugin_action_links( $actions, $plugin_file ) { * @since n.e.x.t */ public function admin_footer() { - include_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-table.php'; - include_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-row.php'; + require_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-table.php'; + require_once WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-row.php'; } } From aa392f8889f944f197f4d43a700521cc0d208182 Mon Sep 17 00:00:00 2001 From: Jonny Harris Date: Fri, 31 Mar 2023 18:23:03 +0100 Subject: [PATCH 06/12] Apply suggestions from code review --- templates/results-table.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/results-table.php b/templates/results-table.php index 13f55619e..1eab6a1ea 100644 --- a/templates/results-table.php +++ b/templates/results-table.php @@ -1,6 +1,6 @@ + + + {{data.line}} + + + {{data.column}} + + + {{data.type}} + + + {{data.code}} + + + {{data.message}} + + + diff --git a/templates/results-table.php b/templates/results-table.php index 1eab6a1ea..7af4860af 100644 --- a/templates/results-table.php +++ b/templates/results-table.php @@ -1,26 +1,24 @@ - +

{{ data.file }}

+ + + + + + + + + + + +
+ + + + + + + + + +
+
From 159134736c5401ee9e51b9bacfb4df84514eadcc Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Mon, 3 Apr 2023 17:12:45 +0100 Subject: [PATCH 11/12] move complete message to template --- assets/js/plugin-check-admin.js | 5 +++-- includes/Admin/Admin_Page.php | 11 +++++++++++ templates/results-complete.php | 1 + 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 templates/results-complete.php diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index f5db7b82a..8e9b5e2aa 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -248,8 +248,9 @@ renderFileResults( file, [], warnings[ file ] ); } - resultsContainer.innerHTML += - '

' + wp.i18n.__( 'Checks complete', 'plugin-check' ) + '

'; + resultsContainer.innerHTML += renderTemplate( + 'plugin-check-results-complete' + ); } /** diff --git a/includes/Admin/Admin_Page.php b/includes/Admin/Admin_Page.php index 9500a4f01..5e77751c9 100644 --- a/includes/Admin/Admin_Page.php +++ b/includes/Admin/Admin_Page.php @@ -185,5 +185,16 @@ public function admin_footer() { 'type' => 'text/template', ) ); + + ob_start(); + require WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-complete.php'; + $results_row_template = ob_get_clean(); + wp_print_inline_script_tag( + $results_row_template, + array( + 'id' => 'tmpl-plugin-check-results-complete', + 'type' => 'text/template', + ) + ); } } diff --git a/templates/results-complete.php b/templates/results-complete.php new file mode 100644 index 000000000..3fd88c8f2 --- /dev/null +++ b/templates/results-complete.php @@ -0,0 +1 @@ +

From 28d72dce525600d5acdeb13bdb370dcc46364a10 Mon Sep 17 00:00:00 2001 From: jjgrainger Date: Mon, 3 Apr 2023 18:00:10 +0100 Subject: [PATCH 12/12] disable submit button on click --- assets/js/plugin-check-admin.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/assets/js/plugin-check-admin.js b/assets/js/plugin-check-admin.js index 8e9b5e2aa..4e4191cc4 100644 --- a/assets/js/plugin-check-admin.js +++ b/assets/js/plugin-check-admin.js @@ -17,6 +17,7 @@ e.preventDefault(); resetResults(); + checkItButton.disabled = true; spinner.classList.add( 'is-active' ); getChecksToRun() @@ -25,10 +26,13 @@ .then( cleanUpEnvironment ) .then( ( data ) => { console.log( data.message ); - spinner.classList.remove( 'is-active' ); + + resetForm(); } ) .catch( ( error ) => { console.error( error ); + + resetForm(); } ); } ); @@ -42,6 +46,16 @@ resultsContainer.innerText = ''; } + /** + * Resets the form controls once checks have completed or failed. + * + * @since n.e.x.t + */ + function resetForm() { + spinner.classList.remove( 'is-active' ); + checkItButton.disabled = false; + } + /** * Setup the runtime environment if needed. *