Improved readability and better UX for GitHub bug reports, by optimiz…

…ing the format of the SSR (woocommerce#47088)

* Improved readability and better UX for GitHub bug reports, by optimising the format of the SSR

* Added changelog

plugins/woocommerce/changelog/imp-46153-report-readibility

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Improved readability and better UX for GitHub bug reports, by optimizing the format of the SSR

plugins/woocommerce/client/legacy/js/admin/system-status.js

@@ -13,8 +13,9 @@ jQuery( function ( $ ) {
 				)
 				.on( 'click', 'a.debug-report', this.generateReport )
 				.on( 'click', '#copy-for-support', this.copyReport )
-				.on( 'aftercopy', '#copy-for-support', this.copySuccess )
-				.on( 'aftercopyfailure', '#copy-for-support', this.copyFail )
+				.on( 'click', '#copy-for-github', this.copyGithubReport )
+				.on( 'aftercopy', '#copy-for-support, #copy-for-github', this.copySuccess )
+				.on( 'aftercopyfailure', '#copy-for-support, #copy-for-github', this.copyFail )
 				.on( 'click', '#download-for-support', this.downloadReport );
 		},
 
@@ -94,11 +95,24 @@ jQuery( function ( $ ) {
 			evt.preventDefault();
 		},
 
+		/**
+		 * Copy for GitHub report.
+		 *
+		 * @param {Object} event Copy event.
+		 */
+		copyGithubReport: function( event ) {
+			wcClearClipboard();
+			var reportValue = $( '#debug-report' ).find( 'textarea' ).val();
+			var reportForGithub = '<details><summary>System Status Report</summary>\n\n``' + reportValue + '``\n</details>';
+			wcSetClipboard( reportForGithub, $( this ) );
+			event.preventDefault();
+		},
+
 		/**
 		 * Display a "Copied!" tip when success copying
 		 */
-		copySuccess: function() {
-			$( '#copy-for-support' ).tipTip({
+		copySuccess: function( event ) {
+			$( event.target ).tipTip({
 				'attribute':  'data-tip',
 				'activation': 'focus',
 				'fadeIn':     50,

plugins/woocommerce/includes/admin/views/html-admin-page-status-report.php

@@ -49,6 +49,9 @@
 			<button id="copy-for-support" class="button" href="#" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>">
 				<?php esc_html_e( 'Copy for support', 'woocommerce' ); ?>
 			</button>
+			<button id="copy-for-github" class="button" href="#" data-tip="<?php esc_attr_e( 'Copied!', 'woocommerce' ); ?>">
+				<?php esc_html_e( 'Copy for GitHub', 'woocommerce' ); ?>
+			</button>
 		</p>
 		<p class="copy-error hidden">
 			<?php esc_html_e( 'Copying to clipboard failed. Please press Ctrl/Cmd+C to copy.', 'woocommerce' ); ?>