Show check results on admin page

.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',
 	},

assets/js/plugin-check-admin.js

@@ -1,30 +1,61 @@
 ( function ( pluginCheck ) {
 	const checkItButton = document.getElementById( 'plugin-check__submit' );
+	const resultsContainer = document.getElementById( 'plugin-check__results' );
+	const spinner = document.getElementById( 'plugin-check__spinner' );
 	const pluginsList = document.getElementById(
 		'plugin-check__plugins-dropdown'
 	);
+	const templates = {};
 
 	// Return early if the elements cannot be found on the page.
-	if ( ! checkItButton || ! pluginsList ) {
+	if ( ! checkItButton || ! pluginsList || ! resultsContainer || ! spinner ) {
 		console.error( 'Missing form elements on page' );
 		return;
 	}
 
 	checkItButton.addEventListener( 'click', ( e ) => {
 		e.preventDefault();
 
+		resetResults();
+		checkItButton.disabled = true;
+		spinner.classList.add( 'is-active' );
+
 		getChecksToRun()
 			.then( setUpEnvironment )
 			.then( runChecks )
 			.then( cleanUpEnvironment )
 			.then( ( data ) => {
 				console.log( data.message );
+
+				resetForm();
 			} )
 			.catch( ( error ) => {
 				console.error( error );
+
+				resetForm();
 			} );
 	} );
 
+	/**
+	 * Reset the results container.
+	 *
+	 * @since n.e.x.t
+	 */
+	function resetResults() {
+		// Empty the results container.
+		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.
 	 *
@@ -88,8 +119,6 @@
 					throw new Error( 'Response contains no data.' );
 				}
 
-				console.log( responseData.data.message );
-
 				return responseData.data;
 			} );
 	}
@@ -139,8 +168,8 @@
 	async function runChecks( data ) {
 		for ( let i = 0; i < data.checks.length; i++ ) {
 			try {
-				const result = await runCheck( data.plugin, data.checks[ i ] );
-				console.log( result );
+				const results = await runCheck( data.plugin, data.checks[ i ] );
+				renderResults( results );
 			} catch ( e ) {
 				// Ignore for now.
 			}
@@ -207,4 +236,109 @@
 
 		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 ] );
+		}
+
+		resultsContainer.innerHTML += renderTemplate(
+			'plugin-check-results-complete'
+		);
+	}
+
+	/**
+	 * 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 index = Date.now();
+
+		// Render the file table.
+		resultsContainer.innerHTML += renderTemplate(
+			'plugin-check-results-table',
+			{ file, index }
+		);
+		const resultsTable = document.getElementById(
+			'plugin-check__results-body-' + index
+		);
+
+		// Render results to the table.
+		renderResultRows( 'ERROR', errors, resultsTable );
+		renderResultRows( 'WARNING', warnings, resultsTable );
+	}
+
+	/**
+	 * 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 ) {
+		// Loop over each result by the line, column and messages.
+		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;
+
+					table.innerHTML += renderTemplate(
+						'plugin-check-results-row',
+						{
+							line,
+							column,
+							type,
+							message,
+							code,
+						}
+					);
+				}
+			}
+		}
+	}
+
+	/**
+	 * Renders the template with data.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {string} templateSlug The template slug
+	 * @param {Object} data         Template data.
+	 * @return {string} Template HTML.
+	 */
+	function renderTemplate( templateSlug, data ) {
+		if ( ! templates[ templateSlug ] ) {
+			templates[ templateSlug ] = wp.template( templateSlug );
+		}
+		const template = templates[ templateSlug ];
+		return template( data );
+	}
 } )( PLUGIN_CHECK ); /* global PLUGIN_CHECK */

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,44 @@ 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() {
+		ob_start();
+		require WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-table.php';
+		$results_table_template = ob_get_clean();
+		wp_print_inline_script_tag(
+			$results_table_template,
+			array(
+				'id'   => 'tmpl-plugin-check-results-table',
+				'type' => 'text/template',
+			)
+		);
+
+		ob_start();
+		require WP_PLUGIN_CHECK_PLUGIN_DIR_PATH . '/templates/results-row.php';
+		$results_row_template = ob_get_clean();
+		wp_print_inline_script_tag(
+			$results_row_template,
+			array(
+				'id'   => 'tmpl-plugin-check-results-row',
+				'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',
+			)
+		);
+	}
 }

templates/admin-page.php

@@ -32,6 +32,7 @@
 				</select>
 
 				<input type="submit" value="<?php esc_attr_e( 'Check it!', 'plugin-check' ); ?>" id="plugin-check__submit" class="button button-primary" />
+				<span id="plugin-check__spinner" class="spinner" style="float: none;"></span>
 			</form>
 
 		<?php } else { ?>
@@ -41,4 +42,6 @@
 		<?php } ?>
 	</div>
 
+	<div id="plugin-check__results"></div>
+
 </div>

templates/results-complete.php

@@ -0,0 +1 @@
+<p><?php esc_html_e( 'Checks complete', 'plugin-check' ); ?></p>

templates/results-row.php

@@ -0,0 +1,18 @@
+<tr class="plugin-check__results-row">
+	<td>
+		{{data.line}}
+	</td>
+	<td>
+		{{data.column}}
+	</td>
+	<td>
+		{{data.type}}
+	</td>
+	<td>
+		{{data.code}}
+	</td>
+	<td>
+		{{data.message}}
+	</td>
+</tr>
+

templates/results-table.php

@@ -0,0 +1,24 @@
+<h4><?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}</h4>
+<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
+	<thead>
+		<tr>
+			<td>
+				<?php esc_html_e( 'Line', 'plugin-check' ); ?>
+			</td>
+			<td>
+				<?php esc_html_e( 'Column', 'plugin-check' ); ?>
+			</td>
+			<td>
+				<?php esc_html_e( 'Type', 'plugin-check' ); ?>
+			</td>
+			<td>
+				<?php esc_html_e( 'Code', 'plugin-check' ); ?>
+			</td>
+			<td>
+				<?php esc_html_e( 'Message', 'plugin-check' ); ?>
+			</td>
+		</tr>
+	</thead>
+	<tbody id="plugin-check__results-body-{{data.index}}"></tbody>
+</table>
+<br>