Add buttons to copy error details to clipboard

assets/src/amp-validation/amp-validated-url-post-edit-screen.js

@@ -8,6 +8,8 @@ import { __, _n, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import setValidationErrorRowsSeenClass from './set-validation-error-rows-seen-class';
+import { handleCopyToClipboardButtons } from './copy-to-clipboard-buttons';
+import { getURLValidationTableRows } from './get-url-validation-table-rows';
 
 /**
  * The id for the 'Showing x of y errors' notice.
@@ -32,6 +34,7 @@ domReady( () => {
 	handleBulkActions();
 	watchForUnsavedChanges();
 	setupStylesheetsMetabox();
+	handleCopyToClipboardButtons();
 } );
 
 let beforeUnloadPromptAdded = false;
@@ -389,13 +392,10 @@ const handleBulkActions = () => {
 
 		const markingAsReviewed = target.classList.contains( 'reviewed' );
 
-		[ ...document.querySelectorAll( 'select.amp-validation-error-status' ) ].forEach( ( select ) => {
-			const row = select.closest( 'tr' );
-			if ( row.querySelector( '.check-column input[type=checkbox]' ).checked ) {
-				row.querySelector( 'input[type=checkbox].amp-validation-error-status-review' ).checked = markingAsReviewed;
-				row.classList.toggle( 'new', ! markingAsReviewed );
-				addBeforeUnloadPrompt();
-			}
+		getURLValidationTableRows( { checkedOnly: true } ).forEach( ( row ) => {
+			row.querySelector( 'input[type=checkbox].amp-validation-error-status-review' ).checked = markingAsReviewed;
+			row.classList.toggle( 'new', ! markingAsReviewed );
+			addBeforeUnloadPrompt();
 		} );
 	} );
 };

assets/src/amp-validation/copy-to-clipboard-buttons.js

@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { getURLValidationTableRows } from './get-url-validation-table-rows';
+
+/**
+ * Copies any string to the clipboard.
+ *
+ * Note: This only works within a callback responding to a user action.
+ *
+ * @param {string} value Any string value.
+ */
+function copyToClipboard( value ) {
+	const textareaElement = document.createElement( 'textarea' );
+	textareaElement.value = value;
+	textareaElement.style.position = 'absolute';
+	textareaElement.style.left = '-1000%';
+	document.body.appendChild( textareaElement );
+	textareaElement.select();
+	document.execCommand( 'copy' );
+	document.body.removeChild( textareaElement );
+}
+
+/**
+ * Callback when a user clicks a button to copy error details to a clipboard.
+ *
+ * @param {Event} event Click event.
+ */
+function handleCopyToClipboardClick( event ) {
+	// Handle a single error detail button.
+	if ( event.target.classList.contains( 'single-url-detail-copy' ) ) {
+		copyToClipboard( event.target.getAttribute( 'data-error-json' ) );
+		return;
+	}
+
+	// Handle a click on the bulk action button.
+	if ( ! event.target.classList.contains( 'copy-all' ) ) {
+		return;
+	}
+
+	const value = getURLValidationTableRows( { checkedOnly: true } ).map( ( row ) => {
+		const copyButton = row.querySelector( '.single-url-detail-copy' );
+		if ( ! copyButton ) {
+			return null;
+		}
+
+		const data = JSON.parse( copyButton.getAttribute( 'data-error-json' ) );
+
+		return data;
+	} )
+		.filter( ( item ) => item );
+
+	copyToClipboard( JSON.stringify( value, null, '\t' ) );
+}
+
+/**
+ * Sets up the "Copy to clipboard" buttons on the URL validation screen.
+ */
+export function handleCopyToClipboardButtons() {
+	global.addEventListener( 'click', handleCopyToClipboardClick );
+}

assets/src/amp-validation/get-url-validation-table-rows.js

@@ -0,0 +1,16 @@
+/**
+ * Gets the table rows on a single URL validation screen.
+ *
+ * @param {Object} options
+ * @param {boolean} options.checkedOnly Whether to return only checked rows.
+ */
+export function getURLValidationTableRows( options = {} ) {
+	const rows = [ ...document.querySelectorAll( 'select.amp-validation-error-status' ) ]
+		.map( ( select ) => select.closest( 'tr' ) );
+
+	if ( true !== options.checkedOnly ) {
+		return rows;
+	}
+
+	return rows.filter( ( row ) => row.querySelector( '.check-column input[type=checkbox]' ).checked );
+}

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

@@ -2796,6 +2796,7 @@ public static function render_single_url_list_table( $post ) {
 			<button type="button" class="button action keep"><?php esc_html_e( 'Keep', 'amp' ); ?></button>
 			<button type="button" class="button action reviewed-toggle reviewed"><?php esc_html_e( 'Mark reviewed', 'amp' ); ?></button>
 			<button type="button" class="button action reviewed-toggle unreviewed"><?php esc_html_e( 'Mark unreviewed', 'amp' ); ?></button>
+			<button type="button" class="button action copy-all"><?php esc_html_e( 'Copy error details to clipboard', 'amp' ); ?></button>
 			<div id="vertical-divider"></div>
 		</div>
 		<div id="url-post-filter" class="alignleft actions">

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

@@ -1619,6 +1619,16 @@ public static function filter_tag_row_actions( $actions, WP_Term $tag ) {
 				esc_attr__( 'Toggle error details', 'amp' ),
 				esc_html__( 'Details', 'amp' )
 			);
+
+			$json           = json_decode( $term->description, true );
+			$json['status'] = (bool) ( (int) $term->term_group & self::ACCEPTED_VALIDATION_ERROR_BIT_MASK ) ? __( 'Removed', 'amp' ) : __( 'Kept', 'amp' );
+
+			$actions['copy'] = sprintf(
+				'<button type="button" aria-label="%s" class="single-url-detail-copy button-link" data-error-json="%s">%s</button>',
+				esc_attr__( 'Copy to clipboard', 'amp' ),
+				esc_attr( wp_json_encode( $json, JSON_PRETTY_PRINT ) ),
+				esc_html__( 'Copy to clipboard', 'amp' )
+			);
 		} elseif ( 'edit-tags.php' === $pagenow ) {
 			$actions['details'] = sprintf(
 				'<a href="%s">%s</a>',
@@ -1646,7 +1656,7 @@ public static function filter_tag_row_actions( $actions, WP_Term $tag ) {
 			}
 		}
 
-		$actions = wp_array_slice_assoc( $actions, [ 'details', 'delete' ] );
+		$actions = wp_array_slice_assoc( $actions, [ 'details', 'delete', 'copy' ] );
 
 		return $actions;
 	}
@@ -2251,7 +2261,6 @@ public static function render_single_url_error_details( $validation_error, $term
 				</dd>
 			<?php endforeach; ?>
 		</dl>
-
 		<?php
 
 		$output = ob_get_clean();

tests/php/validation/test-class-amp-validation-error-taxonomy.php

@@ -986,6 +986,12 @@ function ( $actions ) {
 			[ 'details', 'delete' ],
 			array_keys( $filtered_actions )
 		);
+
+		$pagenow = 'post.php';
+		$actions = AMP_Validation_Error_Taxonomy::filter_tag_row_actions( $initial_actions, get_term( $term_this_taxonomy ) );
+		$this->assertTrue( array_key_exists( 'copy', $actions ) );
+		$this->assertStringContains( 'Copy to clipboard', $actions['copy'] );
+
 	}
 
 	/**