Use React-based component for Stylesheets box on Validated URL screen
Summary
This PR replaces the server-side rendered "Stylesheet" meta box on the Validated URL screen with a React-based component fed via the REST API.
Tasks list (subject to change):
- [x] Create a new REST endpoint,
GET /wp-json/amp/v1/validated-urls/:id/, that returns the validation data stored in aamp_validated_urlpost type. See #5552. The response data structure consists of the following fields:-
id -
url -
date -
author -
stylesheets -
environment
-
- [x] Ensure the REST endpoint is secure so that only authorized users are receiving the validation data.
- [x] Introduce an abstraction layer for the
amp_validated_urlcustom post type in theValidatedUrlDataProviderclass. - [x] Update the REST endpoint schema.
- [x] Implement a new React component that will look similar to the existing "Stylesheets" meta box:
- [x] Add stylesheets summary table
- [x] Add stylesheets details table
- [x] Add CSS code diff component
- [x] Add Sources component
- [x] Remove the legacy "Stylesheets" meta box along with code dependencies.
- [x] Preload validated URL, themes, and plugins data.
- [ ] Incorporate any applicable usability improvements from #5191.
Fixes #6441
Checklist
- [ ] My code is tested and passes existing tests.
- [x] My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).
Codecov Report
Merging #6442 (b9de4d5) into develop (24923a4) will increase coverage by
0.51%. The diff coverage is56.80%.
:exclamation: Current head b9de4d5 differs from pull request most recent head 26525f8. Consider uploading reports for the commit 26525f8 to get more accurate results
@@ Coverage Diff @@
## develop #6442 +/- ##
=============================================
+ Coverage 75.52% 76.04% +0.51%
- Complexity 5987 5999 +12
=============================================
Files 190 266 +76
Lines 18037 19242 +1205
=============================================
+ Hits 13623 14633 +1010
- Misses 4414 4609 +195
| Flag | Coverage Δ | |
|---|---|---|
| javascript | 71.99% <58.88%> (?) |
|
| php | 76.30% <53.62%> (+0.78%) |
:arrow_up: |
| unit | 76.30% <53.62%> (+0.78%) |
:arrow_up: |
Flags with carried forward coverage won't be shown. Click here to find out more.
| Impacted Files | Coverage Δ | |
|---|---|---|
| ...validation/components/amp-document-status/index.js | 100.00% <ø> (ø) |
|
| ...nents/amp-validation-status/status-notification.js | 100.00% <ø> (ø) |
|
| src/AmpWpPlugin.php | 100.00% <ø> (ø) |
|
| src/Validation/URLValidationRESTController.php | 86.13% <0.00%> (-6.42%) |
:arrow_down: |
| ...s/src/components/plugins-context-provider/index.js | 7.40% <7.40%> (ø) |
|
| ...ts/src/components/themes-context-provider/index.js | 7.40% <7.40%> (ø) |
|
| assets/src/components/source-details/title.js | 11.53% <11.53%> (ø) |
|
| assets/src/components/source-details/value.js | 11.53% <11.53%> (ø) |
|
| ...components/validated-url-context-provider/index.js | 14.28% <14.28%> (ø) |
|
| src/Validation/ValidatedUrlData.php | 18.89% <18.89%> (ø) |
|
| ... and 103 more |
Plugin builds for 26525f8c91fedaaee4833d89c07f6cc210f2dc06 are ready :bellhop_bell:!
- Download development build
- Download production build
The PR is now rebased onto develop and the conflicts have been resolved. Also, I've removed some bugs related to the Sources component.