Create AJAX function and triggers and handling of progress indicator for the user

[mehulkaklotar]

When the user triggers the checks by clicking on the “Check it” button, an admin AJAX request should be triggered to initiate the checks, and each check will run sequentially with each request in limited parameters. The response to the AJAX request will be to output checks with their respective results into the table format below the page options.

The AJAX callback function should always check for the nonces to verify the requests and should go ahead according to the verification.

There should be a visible indication of requests being made on the page for the user to see that the checks are in progress. After the successful completion of all checks, there should be an indication for the user that checks are complete and results are populated into the table. When the request has an error when running checks, it should indicate to the user that there has been some error while running the checks.

Acceptance Criteria

• Class Admin_AJAX file should exist at includes/Admin
• Take output of the add_management_page() function available in the add_page() method of the Admin_Page class in to $hook variable. (Admin_Page class introduced in Create Tools page #32)
• Add hook on load-{$hook} and attach the initialize_page method to it in the Admin_Page class.
• initialize_page() method will have the admin_enqueue_scripts hook and callback method will be enqueue_scripts.
• Register new protected variable called $admin_ajax in the Admin_Page class.
• Add constructor() method in the Admin_Page class, and instantiate Admin_AJAX class in that.
• Add the get_nonce() method in the Admin_AJAX class. It will return the nonce, which can be used in the Admin_Page class.
• Admin_Page class should have the enqueue_scripts() method, which will register a new custom JS with the name plugin-check-admin.js, and this JS file will be placed at the top level of the plugin's directory at plugin-check/assets.
• The plugin-check-admin.js script should expose two PHP variables: the admin-ajax URL and nonce (which we get from Admin_AJAX->get_nonce()).
• Admin_AJAX will have add_hooks() method.
• Admin_AJAX will have run_check() method.
• Admin_AJAX->add_hooks() method will hook the ajax call with the run_check() method for only logged-in users.
• When the admin clicks on the Check it! button (button details available at Create Tools page #32), the below process should start:
  1. JS sends an AJAX POST request to admin-ajax.php with the plugin_check_run_check action.
  2. plugin_check_run_check action will call the run_check() method.
     • The run_check() method gets the variables as below:
       • nonce - Basically, it is nonce to verify it with the check_ajax_referer() function.
     • The run_check() method will now respond to the success message if the nonce is valid else, return an error message in the JSON format.
  3. JS will get the details of the success or error messages and display them in the console.

Test Coverage

Admin_AJAX class

• Add a test for the Admin_Page->initialize_page() method to check JS script only loads on the plugin-check.php only.
• Add a test for the Admin_AJAX->add_hooks() method.
• Add a test case for the Admin_AJAX->get_nonce() method.
• Add a test for the Admin_AJAX->run_check() method.

Admin_Page class

• Verified that the plugin-check-admin.js script is enqueued only on the plugin-check page.

[vishalkakadiya]

@jjgrainger Updated information in this epic. Can you review the details here, thank you!

[jjgrainger]

Thanks @vishalkakadiya

I think we need to update this to include much more detail as to how this would work. I've included some points to consider:

• We will need to use JavaScript here to handle sending the AJAX request to the admin-ajax.php endpoint. This JS will be responsible for sending across the plugin and the checks we want to run based on the form submission on the tools page.
• Something to consider is that due to the limitations we will need to run each check individually. So the JS on this page will likely send multiple requests, one after another, for example:
  • User hits the 'Check it' button.
  • JS sends an AJAX request to admin-ajax.php with the plugin to check.
  • The server-side admin AJAX hook will run preparations, run the first check and return the results. It will also return the state of the checks, so the JS will no the next request to send to run the next check.
  • This process continues until the last check is run and the final results returned.
  • Then the results are displayed on the page (Show check results on the page #35)
• The above is important and will be something we need to add a lot more detail on how this would work.
• The AJAX_Runner class wouldn't be extended but may contain some methods to handle running checks and potentially the current state.
• The other important element to this is how we indicate the current progress to the user.

Let me know if you have any questions, happy to jump on a call to go over this.

[vishalkakadiya]

@jjgrainger Updated the description now with more details. Let me know if still need to add anything. Thank you!