Sync page refactor.

[JakePT]

Description of the Change

Rewrites the sync page JavaScript as a @wordpress/element (React) application to address #2704 and #2706.

Closes #2704, #2706.

Alternate Designs

I’ve taken the approach of building it as a React app, so I’ve basically also redone the markup and CSS. As part of that I’ve used a few standard WordPress components and also taken some liberties with the styling, to do things like making spacing more consistent. So basically in its current state there’s a bunch of visual changes compared to the current page that should be reviewed. Let me know if there’s things we’d prefer were more consistent with the existing page.

Note that with things like the stop button I’ve used the default ‘secondary’ style for buttons, because by sticking with the default styles for the standard button they can reflect the users’ admin color scheme (3rd and 4th pics). But let me know if we don’t care about that. I've similarly set the progress bar to match the admin color scheme.

Current page

New page

An idea I tried on a lark was setting the color scheme to ‘ElasticPress red’ as a way of branding the core components. Note this hasn't been implemented.

Verification Process

From the new version testing user stories:

• In any page, if user hovers the sync and settings button, it should show a description related to the button
• If user clicks the sync button, it should redirect to the Sync page.
• If user clicks the “Sync Now” button it should index everything without sending mappings.
• If users click the sync button in multisite, network activated mode, all published posts across all sites should sync.
• If user leaves page during sync, sync will stop. If user returns to sync page, user should be able to resume the sync.
• If user tries to activate/deactivate features during a sync, they will be prevented.
• If a user tries to WP-CLI sync during dashboard sync, they will be prevented .
• If a user tries to sync during WP-CLI sync, they will be informed about the WP-CLI sync status and can stop it.
• If a user tries to activate a feature that requires a reindex, a confirmation message will pop up.
• If user clicks on “Delete all Data…” it will send mappings and reindex everything
• If multiple indexables are enabled, they should not be affected when an indexable is being worked. Example: while indexing users, posts search should go through EP (pausing the sync may help to test this)

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Changelog Entry

Changed - Refactored Sync page JavaScript.
Fixed - Issues where the Sync page would not show the correct status of a sync.

Credits

Props @JakePT