Plugin Dependencies: Make modals persistent for Install Now, Activate and Update Now.

[costdev]

Note: Reviewing each commit separately is strongly encouraged.

What used to happen?

The plugin information modal (also known as "More details modal" or "View details modal") would close when "Install Now", "Activate" or "Update Now" buttons were clicked.

Why is that a problem?

This created a less than ideal UX when installing dependencies, as the user would not be able to see when a dependency installed or updated. Activation would perform a redirect, which isn't desirable when installing and activating multiple dependencies in the same flow.

What does this PR do?

This PR makes the modal persist through button clicks. The buttons update as the status of the plugin changes.

For consistency, the "Install Now", "Activate" and "Update Now" buttons in plugin cards with plugin-install.php use the same behaviour, but the states of modal buttons and plugin card buttons are not yet now synchronised.

Can I see?

Pull down the PR, build, then test away.

Or if that's not possible for you at the moment, here's part of the functionality with some different flows:

Modal-Mania.mp4

Note: The plugin card buttons are now synchronised with the modal's buttons and will update behind the modal.

What's new?

• wp.updates has several new methods.

  • checkPluginDependencies()
    Sends an Ajax request to the server to check a plugin's dependencies.

  • checkPluginDependenciesSuccess()
    Updates the UI appropriately after a successful plugin dependencies check.

  • checkPluginDependenciesError()
    Updates the UI appropriately after a failed plugin dependencies check.

  • activatePlugin()
    Sends an Ajax request to the server to activate a plugin.

  • activatePluginSuccess()
    Updates the UI appropriately after a successful plugin activation.

  • activatePluginError()
    Updates the UI appropriately after a failed plugin activation.

  • setCardButtonStatus()
    Sends a message from a modal to the main screen to update buttons in plugin cards.

What's changed?

• The buttons in the modal will no longer send the requested action back to the main plugins/plugin-install screen via postMessage. Instead, the action is performed within the modal.
  • This has the side effect of plugin card buttons not changing state during installation/activation/update, but is critical for now so that the modal is aware of the action's result to update its buttons, and that the requested action isn't also sent back to the main screen, producing a duplicate action and guaranteed errors.
  • It's likely that we can just change the 'message' event handler for the main screen to update a button's state rather than perform an action. A postMessage will then need to be added to every success/error callback for the actions.
  • While unfortunate that this is currently missing and I want to add it as soon as possible, I don't consider it a critical issue.
  • The plugin card buttons are now synchronised with the modal's buttons and will update behind the modal.

What about security?

• AJAX referrers are verified.
• A nonce is created for the Activate Plugin AJAX action.
• activate-plugin has been added to the protected actions.
• Capability checks are performed at each step.

What about filesystem permissions inside the modal?

The filesystem credentials modal previously wasn't printed inside the plugin information modal. Now it is.

This will add an overlay across the plugin information modal and main plugins/plugin-install screen, with the filesystem credentials modal at the forefront. Completing the filesystem credentials form will close the filesystem credentials modal, and the plugin information modal will continue to install or update the plugin.

What about errors?

Error notices are appended to the plugin information modal's footer. While a notice will cover the modal's buttons, the notice is dismissible, and the modal's button will usually be disabled anyway.

For plugin cards, error notices will continue to appear at the bottom of the plugin card.

What's missing?

• Updating the buttons outside of the modal to match the current status of the plugin being installed/activated/updated.
  • This would be great to get done, but I don't believe it's urgent as there will be visual feedback in the modal that the action has completed.
  • This is now done.

When can we merge?

Review it, test it (remember to build since this includes JS and CSS), and when you're happy, merge it.

If you have a multisite setup available, please test it on that too.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @me@colin-stewart.co.uk.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core SVN

If you're a Core Committer, use this list when committing to wordpress-develop in SVN:

Props: afragen.

GitHub Merge commits

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: me@colin-stewart.co.uk.

Co-authored-by: afragen <afragen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.