feat(checks): add Collapse All and Expand All controls to results page by faisalahammad · Pull Request #1347 · WordPress/plugin-check

faisalahammad · 2026-06-05T10:09:58Z

Summary

Add Collapse All and Expand All buttons above the results list. Hide the buttons until the scan finishes, and switch the per file sections to a custom card layout with a file icon, brand colored title, and rotating chevron arrow.

Fixes #1334

Changes

templates/admin-page.php

Before:

<div id="plugin-check__collapse-expand-controls" class="plugin-check__collapse-expand-controls">
    <button type="button" id="plugin-check__collapse-all" class="button">...</button>
    <button type="button" id="plugin-check__expand-all" class="button">...</button>
</div>

After:

<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="...">
        <span class="dashicons dashicons-arrow-up-alt2" aria-hidden="true"></span>
        Collapse All
    </button>
    <button type="button" id="plugin-check__expand-all" class="button button-secondary" aria-label="...">
        <span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
        Expand All
    </button>
</div>

Why: Buttons must stay hidden until results load. button-secondary matches the export button style.

templates/results-table.php

Before: native <details> + <summary> per file.

After: custom card with header button, file icon, FILE label, filename, and chevron. All cards start collapsed via --collapsed class.

<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="...">
        <span class="plugin-check__file-section-title">
            <span class="plugin-check__file-section-icon dashicons dashicons-media-document" aria-hidden="true"></span>
            FILE: {{ 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="...">
        <table ...>...</table>
    </div>
</div>

Why: Matches the reference UI in the issue. Native details/summary does not give the custom card look with brand color and file icon.

assets/js/plugin-check-admin.js

Why: Replaced details.open toggle with a class based toggle. Added a delegated click handler on each card header to flip --collapsed and aria-expanded. Hide the controls container on result reset, and show it only after checksCompleted is true.

assets/css/plugin-check-admin.css

Why: New card style with border, white background, header button reset, chevron rotation on aria-expanded="true", brand color on the section title, file icon spacing, and .is-hidden on the controls container.

Testing

Test 1: Initial page load

Open Tools -> Plugin Check
Do not run a check

Result: Collapse All and Expand All buttons not visible. Results area empty.

Test 2: Run a check

Select a plugin with many issues
Click Check it

Result: Results load. Collapse All and Expand All buttons appear above results. Each file is a collapsed card with file icon, FILE label, filename, and a right side chevron.

Test 3: Toggle cards

Click Expand All -> all cards open, chevrons rotate 180deg
Click Collapse All -> all cards close, chevrons reset
Click a single card header -> that card toggles, chevron rotates

Result: All three toggle paths work and stay in sync with aria-expanded.

Test 4: Re run a check

After results load, click Check it again

Result: Controls hide during the new scan, then reappear when results finish.

Test 5: False positives section

Check a plugin that triggers false positive analysis

Result: The existing false positives details element still works as before.

Screenshots

Plugin-check-preview.mov

Add Collapse All and Expand All buttons above results. Hide buttons until scan completes via is-hidden class. Use custom card UI with rotating chevron, file icon, and brand color. All cards start collapsed by default. Fixes WordPress#1334

github-actions · 2026-06-05T10:10:09Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: faisalahammad <faisalahammad@git.wordpress.org>
Co-authored-by: ernilambar <nilambar@git.wordpress.org>
Co-authored-by: mahdialikhanusiya <mahdiali@git.wordpress.org>
Co-authored-by: davidperezgar <davidperez@git.wordpress.org>
Co-authored-by: Tsjippy <tsjippy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copilot

Pull request overview

Adds global expand/collapse controls and updates the results UI to use a custom “file card” layout for each file’s results on the Plugin Check admin page, improving navigation for large reports.

Changes:

Add “Collapse All” / “Expand All” controls (hidden until checks complete) to the admin page.
Replace per-file <details>/<summary> results sections with custom collapsible card sections (icon, branded title, rotating chevron).
Implement class-based collapse/expand behavior in JS and add corresponding CSS styles.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
templates/admin-page.php	Adds the Collapse All / Expand All buttons container (initially hidden).
templates/results-table.php	Reworks per-file results markup into a collapsible “card” section with header button + content region.
assets/js/plugin-check-admin.js	Adds delegated per-card toggle behavior and wiring for Collapse All / Expand All; hides/shows controls based on scan completion.
assets/css/plugin-check-admin.css	Introduces styling for the new controls container and file-section card UI (including chevron rotation).
.gitignore	Ignores `/build-temp`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

mahdialikhanusiya · 2026-06-07T12:41:40Z

Thank you, @faisalahammad, for the quick action. It looks very good.

I’m still working on gathering more feedback and exploring additional UI/UX enhancements.

I’m not a developer, but I’m very curious to learn how things work. I’d love to understand more about how to contribute to an existing PR like yours, make improvements, and submit updates. Any guidance would be greatly appreciated.

Thanks again for your contribution and support!

@SInCE

- Remove /build-temp from .gitignore - Remove trailing <br> after file section (double spacing with card margin) - Update @SInCE tags to 2.1.0 for new toggleFileSection and setAllFileSectionsOpen Refs WordPress#1347

faisalahammad · 2026-06-07T19:08:14Z

Addressed all 3 review comments in commit 9ca7abf:

.gitignore — removed /build-temp (not relevant to this PR)
templates/results-table.php — removed trailing
(was causing double spacing with new card margin)
assets/js/plugin-check-admin.js — updated @SInCE 1.6.0 to @SInCE 2.1.0 on toggleFileSection() and setAllFileSectionsOpen() (next minor version, since 1.6.0 predates these functions)

Tests: PHPCS passed, JS lint passed, CodeRabbit review passed (no findings). Ready for re-review.

The Codecov CLI v11.x GPG signature verification fails in GitHub Actions runners because the signing public key is missing from the default GPG keyring. Import it from keyserver.ubuntu.com (with a Keybase fallback) before the codecov-action runs. Add the import step to both behat-test.yml and php-test.yml since both use the same pinned codecov-action and hit the same issue. Refs WordPress#1347

faisalahammad · 2026-06-07T19:31:20Z

Pushed a fix for the failing PHP 8.4 - WP latest CI job.

Problem: Codecov CLI v11.x checks GPG signature of its binary before uploading, but the signing public key was missing from GitHub Actions runner keyring. This caused gpg: Can't check signature: No public key error.

Fix: Added a step to import the Codecov signing key before the codecov-action runs in both behat-test.yml and php-test.yml. It tries keyserver first, then falls back to Keybase. Used || true so it does not break the build if key import fails.

All 27 checks now pass including the coverage upload on PHP 8.4.

Debian bullseye security repo (deb.debian.org) occasionally times out during Docker build for PHP 7.4 + WP 6.3 matrix job. Add retry loop around wp-env start step (3 attempts, 30s delay). Docker build cache preserves already-built layers between retries. Refs WordPress#1347

Previous 3-attempt 30s backoff insufficient for transient Docker Hub registry timeouts. Bump to 5 attempts with 60s backoff to give the network time to recover. Refs WordPress#1347

davidperezgar · 2026-06-13T07:02:10Z

I'm thinking about the main purpose of this PR. Does it help plugin authors? Should it be grouped by files?

ernilambar reviewed Jun 7, 2026

View reviewed changes

Comment thread .gitignore Outdated

ernilambar requested a review from Copilot June 7, 2026 06:17

Copilot started reviewing on behalf of ernilambar June 7, 2026 06:17 View session

Copilot AI reviewed Jun 7, 2026

View reviewed changes

Comment thread templates/results-table.php Outdated

Comment thread assets/js/plugin-check-admin.js

Comment thread assets/js/plugin-check-admin.js

fix: address PR review feedback

9ca7abf

- Remove /build-temp from .gitignore - Remove trailing <br> after file section (double spacing with card margin) - Update @SInCE tags to 2.1.0 for new toggleFileSection and setAllFileSectionsOpen Refs WordPress#1347

faisalahammad added 2 commits June 8, 2026 01:34

ci: increase wp-env retry to 5 attempts with 60s backoff

5a503ec

Previous 3-attempt 30s backoff insufficient for transient Docker Hub registry timeouts. Bump to 5 attempts with 60s backoff to give the network time to recover. Refs WordPress#1347

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(checks): add Collapse All and Expand All controls to results page#1347
faisalahammad wants to merge 5 commits into
WordPress:trunkfrom
faisalahammad:feature/1334-collapse-expand-controls

faisalahammad commented Jun 5, 2026 •

edited by github-actions Bot

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahdialikhanusiya commented Jun 7, 2026 •

edited

Loading

Uh oh!

faisalahammad commented Jun 7, 2026

Uh oh!

faisalahammad commented Jun 7, 2026

Uh oh!

davidperezgar commented Jun 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

faisalahammad commented Jun 5, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

templates/admin-page.php

templates/results-table.php

assets/js/plugin-check-admin.js

assets/css/plugin-check-admin.css

Testing

Screenshots

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahdialikhanusiya commented Jun 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

faisalahammad commented Jun 7, 2026

Uh oh!

faisalahammad commented Jun 7, 2026

Uh oh!

davidperezgar commented Jun 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

faisalahammad commented Jun 5, 2026 •

edited by github-actions Bot

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

mahdialikhanusiya commented Jun 7, 2026 •

edited

Loading