Skip to content

feat(checks): add Collapse All and Expand All controls to results page #1347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
faisalahammad wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

feat(checks): add Collapse All and Expand All controls to results page #1347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d434d0d
feat(checks): add Collapse All and Expand All controls to results page
faisalahammad Jun 5, 2026
9ca7abf
fix: address PR review feedback
faisalahammad Jun 7, 2026
225b837
ci: import Codecov GPG key before coverage upload
faisalahammad Jun 7, 2026
b054ae2
ci: retry wp-env start on transient docker network failure
faisalahammad Jun 7, 2026
5a503ec
ci: increase wp-env retry to 5 attempts with 60s backoff
faisalahammad Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/workflows/behat-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,12 @@ jobs:
echo "Coverage files: $FILES"
echo "files=$FILES" >> $GITHUB_OUTPUT

- name: Import Codecov GPG key
if: ${{ matrix.coverage }}
run: |
gpg --keyserver keyserver.ubuntu.com --recv-keys 27034E7FDB850E0BBC2C62FF806BB28AED779869 2>/dev/null || \
curl -fsSL https://keybase.io/codecovsecurity/pgp_keys.asc | gpg --import --no-default-keyring --keyring trustedkeys.gpg 2>/dev/null || true

- name: Upload code coverage report
if: ${{ matrix.coverage }}
uses: codecov/codecov-action@e79a6962e0d4c0c17b229090214935d2e33f8354
Expand Down
25 changes: 20 additions & 5 deletions .github/workflows/php-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,20 @@ jobs:

- name: Start WordPress
run: |
if [[ ${{ matrix.coverage == true }} == true ]]; then
npm run wp-env:start:tests -- --xdebug=coverage
else
npm run wp-env:start:tests
fi
set +e
for i in 1 2 3 4 5; do
if [[ ${{ matrix.coverage == true }} == true ]]; then
npm run wp-env:start:tests -- --xdebug=coverage
else
npm run wp-env:start:tests
fi
if [ $? -eq 0 ]; then
exit 0
fi
echo "wp-env start failed (attempt $i), retrying in 60s..."
sleep 60
done
exit 1

- name: Run tests
run: |
Expand All @@ -108,6 +117,12 @@ jobs:
npm run test-php-multisite
fi

- name: Import Codecov GPG key
if: ${{ matrix.coverage }}
run: |
gpg --keyserver keyserver.ubuntu.com --recv-keys 27034E7FDB850E0BBC2C62FF806BB28AED779869 2>/dev/null || \
curl -fsSL https://keybase.io/codecovsecurity/pgp_keys.asc | gpg --import --no-default-keyring --keyring trustedkeys.gpg 2>/dev/null || true

- name: Upload code coverage report
if: ${{ matrix.coverage }}
uses: codecov/codecov-action@e79a6962e0d4c0c17b229090214935d2e33f8354
Expand Down
68 changes: 68 additions & 0 deletions assets/css/plugin-check-admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,74 @@
cursor: pointer;
}

.plugin-check__collapse-expand-controls {
margin: 16px 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.plugin-check__collapse-expand-controls.is-hidden {
display: none;
}

.plugin-check__file-section {
margin: 1em 0;
border: 1px solid #dcdcde;
background: #fff;
}

.plugin-check__file-section-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
background: transparent;
border: 0;
text-align: left;
color: inherit;
font-size: inherit;
}

.plugin-check__file-section-header:focus {
outline: 2px solid #2271b1;
outline-offset: -2px;
}

.plugin-check__file-section-chevron {
transition: transform 0.15s ease-in-out;
font-size: 18px;
line-height: 1;
}

.plugin-check__file-section-title {
color: var(--wp-admin-theme-color);
display: inline-flex;
align-items: center;
gap: 6px;
}

.plugin-check__file-section-icon {
font-size: 18px;
line-height: 1;
}

.plugin-check__file-section-header[aria-expanded="true"] .plugin-check__file-section-chevron {
transform: rotate(180deg);
}

.plugin-check__file-section-content {
padding: 0 14px 14px;
}

.plugin-check__file-section--collapsed .plugin-check__file-section-content {
display: none;
}

.plugin-check__false-positive-results {
padding: 0 14px 14px;
}
Expand Down
104 changes: 104 additions & 0 deletions assets/js/plugin-check-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
const exportContainer = document.getElementById(
'plugin-check__export-controls'
);
const collapseExpandContainer = document.getElementById(
'plugin-check__collapse-expand-controls'
);
const spinner = document.getElementById( 'plugin-check__spinner' );
const pluginsList = document.getElementById(
'plugin-check__plugins-dropdown'
Expand All @@ -20,6 +23,7 @@
! pluginsList ||
! resultsContainer ||
! exportContainer ||
! collapseExpandContainer ||
! spinner ||
! categoriesList.length ||
! typesList.length
Expand All @@ -33,6 +37,7 @@
let checksCompleted = false;
exportContainer.classList.add( 'is-hidden' );
exportContainer.addEventListener( 'click', onExportContainerClick );
collapseExpandContainer.classList.add( 'is-hidden' );

const includeExperimental = document.getElementById(
'plugin-check__include-experimental'
Expand Down Expand Up @@ -122,6 +127,7 @@
resultsContainer.innerText = '';
exportContainer.innerHTML = '';
exportContainer.classList.add( 'is-hidden' );
collapseExpandContainer.classList.add( 'is-hidden' );
resetAggregatedResults();
checksCompleted = false;
}
Expand Down Expand Up @@ -424,10 +430,12 @@
exportContainer.innerHTML = '';
if ( ! checksCompleted ) {
exportContainer.classList.add( 'is-hidden' );
collapseExpandContainer.classList.add( 'is-hidden' );
return;
}

exportContainer.classList.remove( 'is-hidden' );
collapseExpandContainer.classList.remove( 'is-hidden' );

const exportButtonConfigs = [
{
Expand Down Expand Up @@ -1389,4 +1397,100 @@
const template = templates[ templateSlug ];
return template( data );
}

/**
* Toggles the open/collapsed state of a single file section.
*
* @since 2.1.0
*
Comment thread
faisalahammad marked this conversation as resolved.
* @param {HTMLElement} section The file section element.
*/
function toggleFileSection( section ) {
if ( ! section ) {
return;
}
const header = section.querySelector(
'.plugin-check__file-section-header'
);
const isCollapsed = section.classList.contains(
'plugin-check__file-section--collapsed'
);
if ( isCollapsed ) {
section.classList.remove( 'plugin-check__file-section--collapsed' );
if ( header ) {
header.setAttribute( 'aria-expanded', 'true' );
}
} else {
section.classList.add( 'plugin-check__file-section--collapsed' );
if ( header ) {
header.setAttribute( 'aria-expanded', 'false' );
}
}
}

/**
* Sets the open state of every file section in the results container.
*
* @since 2.1.0
*
Comment thread
faisalahammad marked this conversation as resolved.
* @param {boolean} open Open state to apply.
*/
function setAllFileSectionsOpen( open ) {
const sections = resultsContainer.querySelectorAll(
'.plugin-check__file-section'
);
sections.forEach( function ( section ) {
const header = section.querySelector(
'.plugin-check__file-section-header'
);
if ( open ) {
section.classList.remove(
'plugin-check__file-section--collapsed'
);
if ( header ) {
header.setAttribute( 'aria-expanded', 'true' );
}
} else {
section.classList.add(
'plugin-check__file-section--collapsed'
);
if ( header ) {
header.setAttribute( 'aria-expanded', 'false' );
}
}
} );
}

// Delegated click handler for individual file section headers.
resultsContainer.addEventListener( 'click', function ( event ) {
const header = event.target.closest(
'.plugin-check__file-section-header'
);
if ( ! header ) {
return;
}
event.preventDefault();
const section = header.closest( '.plugin-check__file-section' );
toggleFileSection( section );
} );

// Wire up the Collapse All / Expand All buttons.
const expandAllButton = document.getElementById(
'plugin-check__expand-all'
);
const collapseAllButton = document.getElementById(
'plugin-check__collapse-all'
);

if ( expandAllButton ) {
expandAllButton.addEventListener( 'click', function () {
setAllFileSectionsOpen( true );
} );
}

if ( collapseAllButton ) {
collapseAllButton.addEventListener( 'click', function () {
setAllFileSectionsOpen( false );
} );
}
} )( PLUGIN_CHECK );
10 changes: 10 additions & 0 deletions templates/admin-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@
</div>

<div id="plugin-check__export-controls" class="plugin-check__export-controls"></div>
<div id="plugin-check__collapse-expand-controls" class="plugin-check__collapse-expand-controls is-hidden">
<button type="button" id="plugin-check__collapse-all" class="button button-secondary" aria-label="<?php esc_attr_e( 'Collapse all file sections', 'plugin-check' ); ?>">
<span class="dashicons dashicons-arrow-up-alt2" aria-hidden="true"></span>
<?php esc_html_e( 'Collapse All', 'plugin-check' ); ?>
</button>
<button type="button" id="plugin-check__expand-all" class="button button-secondary" aria-label="<?php esc_attr_e( 'Expand all file sections', 'plugin-check' ); ?>">
<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
<?php esc_html_e( 'Expand All', 'plugin-check' ); ?>
</button>
</div>
<div id="plugin-check__results"></div>

</div>
68 changes: 39 additions & 29 deletions templates/results-table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,39 @@
<h4><?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}</h4>
<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
<thead>
<tr>
<td>
<?php esc_html_e( 'Line', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Column', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Type', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Code', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Message', 'plugin-check' ); ?>
</td>
<# if ( data.hasLinks ) { #>
<td>
<?php esc_html_e( 'Edit Link', 'plugin-check' ); ?>
</td>
<# } #>
</tr>
</thead>
<tbody id="plugin-check__results-body-{{data.index}}"></tbody>
</table>
<br>
<div class="plugin-check__file-section plugin-check__file-section--collapsed" id="plugin-check__file-section-{{data.index}}">
<button type="button" class="plugin-check__file-section-header" aria-expanded="false" aria-controls="plugin-check__file-section-content-{{data.index}}">
<span class="plugin-check__file-section-title">
<span class="plugin-check__file-section-icon dashicons dashicons-media-document" aria-hidden="true"></span>
<?php esc_html_e( 'FILE:', 'plugin-check' ); ?> {{ data.file }}
</span>
<span class="plugin-check__file-section-chevron dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
</button>
<div class="plugin-check__file-section-content" id="plugin-check__file-section-content-{{data.index}}">
<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
<thead>
<tr>
<td>
<?php esc_html_e( 'Line', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Column', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Type', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Code', 'plugin-check' ); ?>
</td>
<td>
<?php esc_html_e( 'Message', 'plugin-check' ); ?>
</td>
<# if ( data.hasLinks ) { #>
<td>
<?php esc_html_e( 'Edit Link', 'plugin-check' ); ?>
</td>
<# } #>
</tr>
</thead>
<tbody id="plugin-check__results-body-{{data.index}}"></tbody>
</table>
</div>
</div>

Loading