Plugin check UX improvement for results

assets/js/plugin-check-admin.js

@@ -108,6 +108,13 @@
 		for ( let i = 0; i < categoriesList.length; i++ ) {
 			categoriesList[ i ].disabled = false;
 		}
+
+		//Adding Open All/Collapse All button
+		if ( resultsContainer.innerHTML !== '' ) {
+			resultsContainer.innerHTML =
+				'<div><button style="margin-top:1.33em;" class="button button-primary clollaps-all" data-state="open">Clollaps All</button></div>' +
+				resultsContainer.innerHTML;
+		}
 	}
 
 	/**
@@ -469,4 +476,59 @@
 		const template = templates[ templateSlug ];
 		return template( data );
 	}
+
+	/**
+	 * Manage collapse/open tables click event
+	 */
+	document.addEventListener( 'click', function ( e ) {
+		const button = e.target;
+		//Manage Collapse/Open All tables separately
+		if ( button.classList.contains( 'collapse-btn' ) ) {
+			const dataIndex = button
+				.closest( '.plugin-check__results-heading' )
+				.getAttribute( 'data-index' );
+			const tableContainer = document.querySelector(
+				'#plugin-check__results-table-' + dataIndex
+			);
+
+			// Toggle the visibility of the table container
+			if ( tableContainer.style.display === 'none' ) {
+				tableContainer.style.display = 'table';
+				button.innerHTML = 'Collapse';
+			} else {
+				tableContainer.style.display = 'none';
+				button.innerHTML = 'Open';
+			}
+		}
+
+		//Manage Collapse/Open All tables together
+		if ( button.classList.contains( 'clollaps-all' ) ) {
+			const tableContainers = document.querySelectorAll(
+				'.plugin-check__results-table'
+			);
+			const buttons = document.querySelectorAll( '.collapse-btn' );
+			const state = button.getAttribute( 'data-state' );
+			const isVisible = state && state === 'open';
+
+			//Collapase/Open All tables
+			tableContainers.forEach( function ( tableContainer ) {
+				tableContainer.style.display = isVisible ? 'none' : 'table';
+			} );
+
+			//Change All buttons text
+			buttons.forEach( function ( _button ) {
+				_button.innerHTML = isVisible ? 'Open' : 'Collapse';
+				_button.setAttribute(
+					'data-state',
+					isVisible ? 'closed' : 'open'
+				);
+			} );
+
+			//Change Collapse All/Open All Button text
+			button.innerHTML = isVisible ? 'Open All' : 'Collapse All';
+
+			//Change Collapse All/Open All Button attribute
+			button.setAttribute( 'data-state', isVisible ? 'closed' : 'open' );
+		}
+	} );
 } )( PLUGIN_CHECK ); /* global PLUGIN_CHECK */

templates/results-table.php

@@ -1,4 +1,7 @@
-<h4><?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}</h4>
+<h4 id="plugin-check__results-heading-{{data.index}}" class="plugin-check__results-heading" data-index="{{data.index}}">
+	<?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }} 
+	<button class="collapse-btn" data-state="collapse"><?php esc_html_e( 'Collapse' ); ?></button>
+</h4>
 <table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
 	<thead>
 		<tr>