amp-wp icon indicating copy to clipboard operation
amp-wp copied to clipboard

Use React-based component for Stylesheets box on Validated URL screen

Open delawski opened this issue 4 years ago • 3 comments

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 a amp_validated_url post 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_url custom post type in the ValidatedUrlDataProvider class.
  • [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).

delawski avatar Jul 02 '21 16:07 delawski

Codecov Report

Merging #6442 (b9de4d5) into develop (24923a4) will increase coverage by 0.51%. The diff coverage is 56.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 Impacted file tree graph

@@              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

codecov[bot] avatar Jul 29 '21 16:07 codecov[bot]

Plugin builds for 26525f8c91fedaaee4833d89c07f6cc210f2dc06 are ready :bellhop_bell:!

github-actions[bot] avatar Jul 29 '21 17:07 github-actions[bot]

The PR is now rebased onto develop and the conflicts have been resolved. Also, I've removed some bugs related to the Sources component.

delawski avatar Aug 17 '21 12:08 delawski