Improve URL Listing view #1397

miina · 2018-09-04T14:38:07Z

Updates the Error by URLs view according to this sketch.

…listing_view

miina · 2018-09-04T14:51:03Z

includes/validation/class-amp-validation-error-taxonomy.php


-				if ( isset( $source['type'], $source['name'] ) ) {
-					$invalid_sources[ $source['type'] ][] = $source['name'];
+				foreach ( $sources['sources'] as $source ) {


^ Changed this since the sources were not properly displaying in the table -- the type and name were never set since the actual structure of $validation_error seems to be like this:

Meaning that the type and name would be set in $validation_error['sources']['sources'][0], not in $validation_error['sources'].

However, this change broke the tests since the input data of test is assuming that a validation error looks like this instead:

Is the structure of validation error incorrect for some reason and it should be as assumed in the tests? Maybe the fix should be removing the second nested sources instead, or is it like this for some reason? Thoughts?

cc @kienstra @westonruter

Hi @miina,
That's interesting. I couldn't reproduce that issue.

It looks like there aren't double-nested 'sources' arrays, like in your first screenshot when I run the develop branch:

Maybe the validation error data model changed.

It might help to delete all validation error posts and terms, and regenerate them (thanks to Weston, though I might not have copied it right):

wp post delete $(wp post list --post_type='amp_invalid_url' --format=ids) wp term list amp_validation_error --field=term_id | xargs wp term delete amp_validation_error

You might already have some logic to output validation errors, but here's a simple plugin I've used (also partially copied from Weston)

And the WP-CLI script can then regenerate errors:

wp amp validate-site --limit=5

miina · 2018-09-04T14:57:48Z

@kienstra Created this WIP PR as a start for resolving #1362, however, I'm going to offline from Wed-Fri (5-7th of September) so if you'd like to pick this up meanwhile or implement together with #1361 (there are a few matching tasks) then feel free to do so.

It look like there aren't double-nested 'source' arrays. So remove the nested foreach loop.

In the develop branch, filter_views_edit() is removed entirely, while it was simply edited in this branch: 1362-improved_url_listing_view So favor the develop branch, where it's removed.

For example, change 'To Fix Later' to 'Rejected'. Also, update the labels. I don't think all of them need to have 'Errors by URL', like 'No errors by URL found'.

Updates the unit tests to the latest changes They now pass locally.

The build failed, with: Equals sign not aligned with surrounding assignments. So address this by aligning the =

kienstra · 2018-09-13T19:34:27Z

Request For Review

Hi @westonruter,
Could you please review this, now that the Travis build passes?

Thanks, Weston!

westonruter · 2018-09-13T20:18:19Z

includes/validation/class-amp-invalid-url-post-type.php

+					}
+					if ( isset( $sources['theme'] ) ) {
+						$output[] = '<div class="source">';
+						$output[] = sprintf( '<span class="dashicons dashicons-admin-appearance"></span><strong>%s</strong>', esc_html( $sources['theme']['name'] ) );


I'm getting a PHP notice here:

The name isn't stored in the validation error (no should it be). The $sources['theme'] variable contains an array like [ 'twentyseventeen' ]. So this should be looping over each $theme and get wp_get_theme( $theme )->get('Name'). If the theme does not exist, then the slug should be shown instead (and obviously the result is stale in this case).

westonruter · 2018-09-13T20:20:04Z

includes/validation/class-amp-invalid-url-post-type.php

 						}
+						$output[] = '<div class="' . $sources_container_classes . '">';
+						$output[] = implode( '<br/>', array_unique( $sources['plugin'] ) );


This should obtain the actual names of the plugins using get_plugin_data() and getting the Name returned. If the plugin doesn't exist then show the slug (and this result is obviously stale).

westonruter · 2018-09-13T20:22:04Z

includes/validation/class-amp-invalid-url-post-type.php

+	/**
+	 * Enqueue style.
+	 */
+	public static function enqueue_admin_assets() {


Can this name be made more specific? There is enqueue_edit_post_screen_scripts. So should it be enqueue_post_list_screen_scripts?

westonruter · 2018-09-13T20:24:08Z

assets/js/amp-admin-tables.js

+		},
+
+		addViewErrorsByTypeLinkButton: function() {
+			$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' );


This shouldn't be using string concatenation for constructing HTML. It would be preferable to do var link = $( '<a>...</a>' ); And then do link.prop('href', ampAdminTables.errorsByTypeLink).

westonruter · 2018-09-13T20:25:58Z

assets/js/amp-admin-tables.js

+		},
+
+		addViewErrorsByTypeLinkButton: function() {
+			$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' );


The text here is not translatable. I suggest doing this: at the admin footer action whenever you are printing scripts, output right to the page the entire link tag with esc_url() and esc_html_e() and such. Give that link an ID and include a hidden attribute. Then in this addViewErrorsByTypeLinkButton function, just move the element in the DOM and remove the hidden attribute.

westonruter · 2018-09-13T20:26:31Z

assets/js/amp-admin-tables.js

+			$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' );
+		},
+
+		boldURLInPageTitle: function() {


We can remove this if we go with “Invalid URL” per Slack convo.

westonruter · 2018-09-13T20:27:43Z

assets/js/amp-admin-tables.js

+( function( $ ) {
+	'use strict';
+
+	var adminTables = {


Some of the code here might be duplicated with https://github.com/Automattic/amp-wp/blob/develop/assets/src/amp-validation-error-detail-toggle.js

Can we unify them?

@westonruter I started working on this but realized a dependency of the script you mentioned is wp-dom-ready which is a part of Gutenberg. So this script doesn't load for me since on my test site Gutenberg is not activated. Are we assuming that everyone will have Gutenberg as well or why is this a dependency? Or did I miss something in the build process?

Hi @westonruter and @jacobschweitzer,
Do you think we should add dom-ready to package.json, like how i18n is included there:

"@wordpress/dom-ready": "^2.0.0", "@wordpress/i18n": "^1.1.0",

Still, npm run dev seemed to build amp-validation-error-detail-toggle.js fine in my local, and that script ran without error on the 'AMP Validation Error Index' page.

@kienstra I've added that line to package.json and ran npm run build / npm run dev but the script still won't load on the Error Index page. Am I missing something here? I did have to install webpack and wp-cli but I have those now so I'm not sure if there is another dependency I'm missing since there aren't any errors in the build process now.

westonruter · 2018-09-13T20:31:56Z

includes/validation/class-amp-invalid-url-post-type.php

@@ -286,25 +318,34 @@ public static function display_invalid_url_validation_error_counts_summary( $pos

 		$result = array();
 		if ( $counts['new'] ) {
-			$result[] = esc_html( sprintf(
+			if ( current_theme_supports( 'amp' ) && AMP_Validation_Manager::is_sanitization_forcibly_accepted() ) {


We can probably remove current_theme_supports( 'amp' ) &&

westonruter · 2018-09-13T20:33:08Z

includes/validation/class-amp-invalid-url-post-type.php

-				AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS => esc_html__( 'Removed Elements', 'amp' ),
-				AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES => esc_html__( 'Removed Attributes', 'amp' ),
-				AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT => esc_html__( 'Incompatible Sources', 'amp' ),
+				'error_status' => sprintf( '%s<span class="dashicons dashicons-editor-help"></span>', esc_html__( 'Status', 'amp' ) ),  // @todo Create actual tooltip.


The 'error_status' here can be replaced with the AMP_Validation_Error_Taxonomy::ERROR_STATUS constant I believe.

westonruter · 2018-09-13T20:33:37Z

includes/validation/class-amp-invalid-url-post-type.php

 				/* translators: %s is count */
-				__( '&#x274C; Rejected: %s', 'amp' ),
+				__( '<span class="dashicons dashicons-warning rejected"></span><span class="error-status rejected">%1$s: %2$s</span>', 'amp' ),


I don't think the span shouldn't be included in the translation string.

westonruter · 2018-09-13T20:33:42Z

includes/validation/class-amp-invalid-url-post-type.php

-				__( '&#x2705; Accepted: %s', 'amp' ),
+			$result[] = sprintf(
+				/* translators: 1. Title, 2. %s is count */
+				__( '<span class="amp-logo-icon"></span><span class="error-status accepted">%1$s: %2$s</span>', 'amp' ),


I don't think the span shouldn't be included in the translation string.

westonruter · 2018-09-13T20:33:47Z

includes/validation/class-amp-invalid-url-post-type.php

 				/* translators: %s is count */
-				__( '&#x2753; New: %s', 'amp' ),
+				__( '<span class="dashicons dashicons-%1$s identified"></span><span class="error-status identified">%2$s: %3$s</span>', 'amp' ),


I don't think the span shouldn't be included in the translation string.

jacobschweitzer · 2018-09-14T23:59:14Z

@westonruter , @kienstra found that if you remove the domReady from the webpack config, remove it as a dependency of the script loading, and do npm run dev again we can get the script to run successfully. It is included here: 56915da but it is a workaround, so if you can come up with a fix or have another idea that'd be awesome.

Otherwise these changes are ready for review. Thanks @westonruter !

* Output theme name if available instead of theme slug. * Fix logic for obtaining plugin name when plugin is not in directory or plugin file doesn't use slug. * Use innerText instead of innerHTML for security hardening. * Better encapsulate logic in \AMP_Validation_Error_Taxonomy::render_link_to_errors_by_url(). * Add missing @wordpress/dom-ready dependency to fix workaround 56915da described in #1397 (comment) * Update button from "View errors by URL" to "View Invalid URLs".

westonruter

@westonruter , @kienstra found that if you remove the domReady from the webpack config, remove it as a dependency of the script loading, and do npm run dev again we can get the script to run successfully. It is included here: 56915da but it is a workaround, so if you can come up with a fix or have another idea that'd be awesome.

I think the problem is just that @wordpress/dom-ready hasn't been saved as a dependency in package.json. If I add it as a dependency then it builds and works. Your change in 56915da is mostly right anyway as wp-dom-ready is not a registered script, but rather it is an internal dependency that is added to the built script. Fix applied in 716a869.

westonruter · 2018-09-16T05:07:56Z

assets/src/amp-validation-error-detail-toggle.js

+	}
+	const heading = document.querySelector( '.wp-heading-inline' );
+	const link = document.createElement( 'a' );
+	link.innerHTML = errorIndexAnchor;


innerText should be used instead of innerHTML because the latter is susceptible to an injection attack, if errorIndexAnchor is coming from an untrusted source.

westonruter · 2018-09-16T05:08:39Z

assets/src/amp-validation-error-detail-toggle.js

+	link.setAttribute( 'href', errorIndexLink );
+	link.setAttribute( 'class', 'page-title-action' );
+	heading.after( link );
+}


Either this function or AMP_Validation_Error_Taxonomy::render_link_to_errors_by_url() should be refactored to be taking the same approach.

westonruter · 2018-09-16T05:11:04Z

includes/validation/class-amp-invalid-url-post-type.php

+						$plugin_names = array();
+						$plugin_slugs = array_unique( $sources['plugin'] );
+						foreach ( $plugin_slugs as $plugin_slug ) {
+							$plugin_data = get_plugin_data( WP_PLUGIN_DIR . '/' . $plugin_slug . '/' . $plugin_slug . '.php' );


This won't work for plugins that don't have directories or which don't use the slug as the plugin's main PHP file.

westonruter · 2018-09-16T05:14:22Z

includes/validation/class-amp-invalid-url-post-type.php

+						$output[] = '<span class="dashicons dashicons-admin-appearance"></span>';
+						$themes   = array_unique( $sources['theme'] );
+						foreach ( $themes as $theme_slug ) {
+							$output[] = sprintf( '<strong>%s</strong><br/>', esc_html( $theme_slug ) );


Still needing to get wp_get_theme( $theme_slug )->get( 'Name' ) here.

miina added 3 commits August 30, 2018 17:33

Start with listing view design improvements.

0131c71

Merge remote-tracking branch 'origin/develop' into 1362-improved_url_…

1e2dccf

…listing_view

Add icons. Add tooltip skeleton. Fix sources.

fd51be5

miina commented Sep 4, 2018

View reviewed changes

kienstra added 3 commits September 6, 2018 12:35

Conform to validation error data model.

8ab7166

It look like there aren't double-nested 'source' arrays. So remove the nested foreach loop.

Merge in develop, resolve conflict.

b31d123

In the develop branch, filter_views_edit() is removed entirely, while it was simply edited in this branch: 1362-improved_url_listing_view So favor the develop branch, where it's removed.

Update status names to latest design

99a35b8

For example, change 'To Fix Later' to 'Rejected'. Also, update the labels. I don't think all of them need to have 'Errors by URL', like 'No errors by URL found'.

This was referenced Sep 6, 2018

Implement improved error listing view #1361

Closed

Implement improved URL listing view #1362

Closed

jacobschweitzer added 20 commits September 6, 2018 17:07

Use dashicons for tooltip icon

e263b55

Add admin-tables.css file

9e99f1a

Hide tooltip

273cccf

Target class instead of id and add color to icon

df68ed8

Change Plug-In to Plugin

54ae458

Fix variable typo

4075cb0

Add plugin icon with color from design

9094366

Add theme icon with color

604c4b9

Remove extra linebreaks

90b4920

Add containers around sources for styling

0be3a56

Add margins around sources containers

1cb3da7

Add color to WP icon

49ca0d8

Change wording - found to removed

6d7f35b

Add icons to status column

f6a0878

Add amp logo icon class

c71addb

Add error-status class

ca2e7d2

Style error statuses

36564fd

Add closing span tag

736b2f2

Add color to removed elements column text

7af56d6

Add class to warning icons for styling

25ab2b3

Bolder font weight for page title action link keyword

52babee

jacobschweitzer requested a review from westonruter September 11, 2018 23:50

jacobschweitzer and others added 7 commits September 11, 2018 20:53

ESLint fixes

8f88d0c

Fix PHP 5.3 compatibility issues

1d95cae

Update tests to reflect changes

a4bdee9

Update to tests and add an error check

fe7e4de

Address unit test errors

6936f05

Updates the unit tests to the latest changes They now pass locally.

Merge branch 'develop' into 1362-improved_url_listing_view

4cbee48

Addres PHPCS warning by aligning =

2ce2e5e

The build failed, with: Equals sign not aligned with surrounding assignments. So address this by aligning the =

westonruter reviewed Sep 13, 2018

View reviewed changes

westonruter requested changes Sep 13, 2018

View reviewed changes

jacobschweitzer added 4 commits September 13, 2018 19:10

Get full plugin names and fix theme source output

74feb85

Code review changes and text changes

5baae3f

Unify JS for text expansion and update styles

6911305

Implement workaround to fix JS not loading issue

56915da

jacobschweitzer and others added 5 commits September 15, 2018 15:57

Update unit tests based on latest changes

6488c05

Merge branch 'develop' into 1362-improved_url_listing_view

88e7b7e

Fix test listing amp plugin

145a9ef

Fix unit tests

6624e68

westonruter approved these changes Sep 16, 2018

View reviewed changes

westonruter changed the title ~~[WIP] Improve URL Listing view~~ Improve URL Listing view Sep 16, 2018

westonruter added this to the v1.0 milestone Sep 16, 2018

westonruter merged commit ec4642d into develop Sep 16, 2018

westonruter deleted the 1362-improved_url_listing_view branch September 16, 2018 05:37

This was referenced Sep 16, 2018

Add single error url page #1418

Merged

Update admin screen access #1437

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve URL Listing view #1397

Improve URL Listing view #1397

miina commented Sep 4, 2018

miina Sep 4, 2018

kienstra Sep 6, 2018 •

edited

Loading

miina commented Sep 4, 2018

kienstra commented Sep 13, 2018 •

edited

Loading

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

jacobschweitzer Sep 14, 2018

kienstra Sep 14, 2018 •

edited

Loading

jacobschweitzer Sep 14, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

westonruter Sep 13, 2018

jacobschweitzer commented Sep 14, 2018

westonruter left a comment

westonruter Sep 16, 2018

westonruter Sep 16, 2018

westonruter Sep 16, 2018

westonruter Sep 16, 2018

Improve URL Listing view #1397

Improve URL Listing view #1397

Conversation

miina commented Sep 4, 2018

Choose a reason for hiding this comment

kienstra Sep 6, 2018 • edited Loading

Choose a reason for hiding this comment

miina commented Sep 4, 2018

kienstra commented Sep 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Sep 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacobschweitzer commented Sep 14, 2018

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Sep 6, 2018 •

edited

Loading

kienstra commented Sep 13, 2018 •

edited

Loading

kienstra Sep 14, 2018 •

edited

Loading