Add single error url page

assets/js/amp-invalid-url-post-edit-screen.js

@@ -6,7 +6,8 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse
 	component = {
 		data: {
 			l10n: {
-				unsaved_changes: ''
+				unsaved_changes: '',
+				showing_number_errors: ''
 			}
 		}
 	};
@@ -19,6 +20,7 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse
 	 */
 	component.boot = function boot( data ) {
 		Object.assign( component.data, data );
+		component.addShowingErrorsRow();
 		component.watchForUnsavedChanges();
 	};
 
@@ -56,5 +58,38 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse
 		return component.data.l10n.unsaved_changes;
 	};
 
+	/**
+	 * Add the <tr> with 'Showing x of y validation errors' at the top of the list table.
+	 */
+	component.addShowingErrorsRow = function addShowingErrorsRow() {
+		var thead, tr, th,
+			theadQuery = document.getElementsByTagName( 'thead' );
+
+		/*
+		 * If there are no validation errors, like if someone filters for 'JS Errors',
+		 * there won't be translated text in showing_number_errors.
+		 * In that case, there's no need to output this message.
+		 */
+		if ( ! theadQuery[ 0 ] || ! component.data.l10n.showing_number_errors ) {
+			return;
+		}
+
+		thead = theadQuery[ 0 ];
+		tr = document.createElement( 'tr' );
+		th = document.createElement( 'th' );
+
+		/* eslint-disable dot-notation */
+		th.style[ 'text-align' ] = 'center';
+		th.style[ 'background-color' ] = '#d3d3d3b8';
+		th.style[ 'color' ] = '#1e8cbecc';
+		/* eslint-enable dot-notation */
+
+		th.innerText = component.data.l10n.showing_number_errors;
+		th.setAttribute( 'colspan', '6' );
+
+		tr.appendChild( th );
+		thead.appendChild( tr );
+	};
+
 	return component;
 }() );