Merge pull request #1397 from Automattic/1362-improved_url_listing_view

Improve URL Listing view

assets/css/admin-tables.css

@@ -0,0 +1,52 @@
+.column-error_status .dashicons-editor-help {
+	color: #767676;
+}
+.column-sources_with_invalid_output .dashicons {
+	margin-right: 5px;
+}
+.column-sources_with_invalid_output .dashicons-admin-plugins {
+	color: #64a2e9;
+}
+.column-sources_with_invalid_output .dashicons-admin-appearance {
+	color: #ebb04f;
+}
+.column-sources_with_invalid_output .dashicons-wordpress-alt {
+	color: #92b371;
+}
+.amp-logo-icon {
+	background-image: url( '../images/amp-logo-icon.svg' );
+	background-color: transparent;
+	background-size: 20px 20px;
+	height: 20px;
+	width: 20px;
+	display: inline-block;
+}
+.column-error_status .error-status {
+	line-height: 20px;
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
+	margin-left: 10px;
+}
+td.column-found_elements_and_attributes {
+	color: #c06e60;
+}
+.column-error_status .dashicons-flag.new {
+	color: #d98501;
+}
+.column-error_status .dashicons-yes.new {
+	color: #ff0000;
+}
+.column-error_status .dashicons-warning.rejected {
+	color: #68c6ff;
+}
+.column-sources_with_invalid_output .source {
+	margin-bottom: 10px;
+}
+.column-sources_with_invalid_output .source {
+	margin-bottom: 10px;
+	display: block;
+}
+.wrap .wp-heading-inline + .page-title-action {
+	margin-left: 1rem;
+}

assets/css/amp-validation-error-taxonomy.css

@@ -74,17 +74,27 @@ details[open] .details-attributes__summary::after {
 	color: #00a0d2;
 }
 
+.column-sources_with_invalid_output details[open] .details-attributes__summary {
+	margin-bottom: 5px;
+}
+.column-sources_with_invalid_output details > div {
+	padding-left: 25px;
+}
+
 /* Error details toggle button */
-.manage-column.column-details {
+.manage-column.column-details, .manage-column.column-sources_with_invalid_output {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
+.manage-column.column-sources_with_invalid_output .error-details-toggle {
+	margin: 0;
+}
 
 .error-details-toggle {
 	display: flex;
 	flex-direction: column;
-	height: 12px;
+	height: 14px;
 	margin-right: 10px;
 	padding: 0;
 	background: none;

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

@@ -6,7 +6,7 @@ import domReady from '@wordpress/dom-ready';
 /**
  * Localized data
  */
-import { btnAriaLabel } from 'amp-validation-i18n';
+import { btnAriaLabel, errorIndexLink, errorIndexAnchor } from 'amp-validation-i18n';
 
 const OPEN_CLASS = 'is-open';
 
@@ -16,12 +16,19 @@ const OPEN_CLASS = 'is-open';
  * table column via backend code.
  */
 function addToggleButtons() {
-	[ ...document.querySelectorAll( 'th.column-details.manage-column' ) ].forEach( th => {
+	const addButtons = ( th ) => {
 		const button = document.createElement( 'button' );
 		button.setAttribute( 'aria-label', btnAriaLabel );
 		button.setAttribute( 'type', 'button' );
 		button.setAttribute( 'class', 'error-details-toggle' );
 		th.appendChild( button );
+	};
+
+	[ ...document.querySelectorAll( 'th.column-details.manage-column' ) ].forEach( th => {
+		addButtons( th );
+	} );
+	[ ...document.querySelectorAll( 'th.manage-column.column-sources_with_invalid_output' ) ].forEach( th => {
+		addButtons( th );
 	} );
 }
 
@@ -31,7 +38,7 @@ function addToggleButtons() {
 function addToggleListener() {
 	let open = false;
 
-	const details = [ ...document.querySelectorAll( '.column-details details' ) ];
+	const details = [ ...document.querySelectorAll( '.column-details details, .column-sources_with_invalid_output details' ) ];
 	const toggleButtons = [ ...document.querySelectorAll( 'button.error-details-toggle' ) ];
 	const onButtonClick = () => {
 		open = ! open;
@@ -54,7 +61,21 @@ function addToggleListener() {
 	} );
 }
 
+// @todo This should be harmonized with the approach in PHP via AMP_Validation_Error_Taxonomy::render_link_to_errors_by_url().
+function addViewErrorsByTypeLinkButton() {
+	if ( 'undefined' === typeof errorIndexAnchor || 'undefined' === typeof errorIndexLink ) {
+		return;
+	}
+	const heading = document.querySelector( '.wp-heading-inline' );
+	const link = document.createElement( 'a' );
+	link.innerText = errorIndexAnchor;
+	link.setAttribute( 'href', errorIndexLink );
+	link.setAttribute( 'class', 'page-title-action' );
+	heading.after( link );
+}
+
 domReady( () => {
 	addToggleButtons();
 	addToggleListener();
+	addViewErrorsByTypeLinkButton();
 } );