Admin Portal: add stable CSS hooks for Participation Summary rows by Copilot · Pull Request #2608 · sequentech/step

Copilot · 2026-05-01T15:22:00Z

Parent issue: https://github.com/sequentech/meta/issues/11968

The Admin Portal tally view did not expose row-level selectors for the Participation Summary table, making custom CSS overrides brittle and cell-specific. This updates the summary table to publish stable row classes for each metric, documents the available hooks in a dedicated Tally Results developer page, and adds automated coverage that is exercised in GitHub Actions.

UI hooks
- Add a shared .participation-summary-row class to Participation Summary rows.
- Add metric-specific row classes so custom CSS can target the full row:
  - .eligible-voters
  - .total-auditable-votes
  - .total-votes-counted
  - .total-valid-votes
  - .total-invalid-votes
  - .explicitly-invalid-votes
  - .implicitly-invalid-votes
  - .blank-votes
  - .weight (when rendered)
Developer docs
- Document the new selectors in a dedicated Admin Portal Tally Results developer page.
- Add a Participation Summary subsection explaining where the widget appears.
- Include a screenshot of the widget in the Tally Results screen.
Regression coverage
- Add focused automated coverage to ensure the Participation Summary markup continues to expose the expected row classes.
- Validate each data point’s expected label, total, and percentage/value.
- Run the admin-portal Jest test in GitHub Actions.

Example selector usage:

.total-valid-votes td,
.total-valid-votes th {
  font-weight: 700;
}

> [!WARNING]
>
>

Agent-Logs-Url: https://github.com/sequentech/step/sessions/79bacc54-9154-4f05-8ef8-dbe739c04b6f Co-authored-by: edulix <81968+edulix@users.noreply.github.com>

edulix · 2026-05-01T16:53:24Z

are you serious? create a new page to explains this properly, with a section for Tally Results, a subsection for this widget and an image explaining where it will appear etc.

Done in 04d8929. I moved this into a dedicated Tally Results developer page with a Tally Results section, a Participation Summary widget subsection, and the screenshot here: https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f

edulix · 2026-05-01T16:59:32Z

+// SPDX-FileCopyrightText: 2025 Sequent Tech Inc <legal@sequentech.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+module.exports = {


ensure this is tested by github actions and it works

Addressed in 04d8929. The admin-portal Jest test is now wired into GitHub Actions via .github/workflows/lint_prettify.yml, and it passes locally with yarn --cwd ./admin-portal test. Screenshot: https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f

edulix · 2026-05-01T16:59:41Z

+            "blank-votes",
+            "weight",
+        ]) {
+            expect(markup).toMatch(new RegExp(`participation-summary-row[^"]*${rowClassName}`))


ensure each data point matches the expected value

Done in 04d8929. The test now checks each Participation Summary row for the expected class, label, total, and percentage/value. Screenshot: https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f

edulix · 2026-05-01T16:59:44Z

@@ -0,0 +1,15 @@
+---


remove this markdown page, we are not using this anymore

Removed in 04d8929. Screenshot reference used in the dedicated docs page instead: https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f

Copilot · 2026-05-01T17:00:00Z

@edulix I've opened a new pull request, #2609, to work on those changes. Once the pull request is ready, I'll request review from you.

github-actions · 2026-05-01T18:51:25Z

Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

Thank you for your contribution! Before we can merge this PR, we need you to sign our Contributor License Agreement (CLA).

To sign the CLA, please comment on this PR with:
I have read the CLA Document and I hereby sign the CLA

This is a one-time requirement. Once you have signed, all future contributions will be covered.

You can read the full CLA document here: https://github.com/sequentech/step/blob/main/.github/cla/CLA.md

_{You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.}

github-actions · 2026-05-01T18:59:26Z

PR Preview Action v1.8.1
🚀 View preview at https://docs.sequentech.io/docusaurus/pr-preview/pr-2608/
Built to branch `doc-previews` at 2026-05-03 13:45 UTC. Preview will be ready when the GitHub Pages deployment is complete.

edulix · 2026-05-03T10:52:05Z

@copilot why did you create a new PR? just work in the old PR

Agent-Logs-Url: https://github.com/sequentech/step/sessions/31b0d341-4d69-4232-9cbf-ba2a6481ae9d Co-authored-by: edulix <81968+edulix@users.noreply.github.com>

Copilot · 2026-05-03T11:05:35Z

@copilot why did you create a new PR? just work in the old PR

Continuing on the existing PR. The follow-up changes are in 04d8929. Screenshot: https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f

Copilot

Pull request overview

This PR adds stable CSS hooks to the Admin Portal tally participation summary so integrators can target whole metric rows, documents those hooks in the developer docs, and wires a new regression test into frontend CI.

Changes:

Add shared and metric-specific CSS classes to Participation Summary table rows, plus a table-level class.
Add a focused Jest test for the summary markup and run admin-portal tests in the frontend CI workflow.
Replace the Admin Portal developer placeholder page with navigation to a new Tally Results developer doc page.

Reviewed changes

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

Show a summary per file

File	Description
`packages/admin-portal/src/resources/Tally/TallyResultsSummary.tsx`	Adds stable row and table CSS classes to the participation summary markup.
`packages/admin-portal/src/resources/Tally/TallyResultsSummary.test.js`	Adds regression coverage for rendered summary rows and their CSS hooks.
`packages/admin-portal/package.json`	Introduces an admin-portal `test` script for Jest.
`packages/admin-portal/jest.config.cjs`	Adds Jest configuration for running admin-portal unit tests.
`docs/docusaurus/docs/07-developers/04-admin-portal/developers_admin-portal.md`	Replaces the section placeholder with an overview and page links.
`docs/docusaurus/docs/07-developers/04-admin-portal/01-tally-results.md`	Documents the Tally Results view, Participation Summary widget, and available selectors.
`.github/workflows/lint_prettify.yml`	Runs the new admin-portal test step in frontend CI after shared package builds.

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

+            expect(markup).toMatch(
+                new RegExp(
+                    `<tr[^>]*class="[^"]*participation-summary-row[^"]*${escapeRegExp(rowClassName)}[^"]*"[^>]*>[\\s\\S]*?${escapeRegExp(label)}[\\s\\S]*?${escapeRegExp(total)}[\\s\\S]*?${escapeRegExp(percent)}[\\s\\S]*?<\\/tr>`
+                )
+            )


+The results screen is organized into widgets. In the example below, the **Participation Summary**
+widget appears above **Candidate Results** and next to the participation chart.
+
+![Participation Summary widget inside the Admin Portal Tally Results screen](https://github.com/user-attachments/assets/86e5d174-be07-435b-9169-2c237af54b1f)


+        for (const {rowClassName, label, total, percent} of expectedRows) {
+            expect(markup).toMatch(
+                new RegExp(
+                    `<tr[^>]*class="[^"]*participation-summary-row[^"]*${escapeRegExp(rowClassName)}[^"]*"[^>]*>[\\s\\S]*?${escapeRegExp(label)}[\\s\\S]*?${escapeRegExp(total)}[\\s\\S]*?${escapeRegExp(percent)}[\\s\\S]*?<\\/tr>`


+        "^.+\\.[jt]sx?$": [
+            "babel-jest",
+            {
+                presets: [
+                    "@babel/preset-env",
+                    ["@babel/preset-react", {runtime: "automatic"}],
+                    "@babel/preset-typescript",
+                ],
+            },
+        ],


Initial plan

4389f75

Copilot AI assigned Copilot and edulix May 1, 2026

Copilot started work on behalf of edulix May 1, 2026 15:22 View session

Copilot AI and others added 2 commits May 1, 2026 15:38

feat: add participation summary row classes

6c7d8ed

Agent-Logs-Url: https://github.com/sequentech/step/sessions/79bacc54-9154-4f05-8ef8-dbe739c04b6f Co-authored-by: edulix <81968+edulix@users.noreply.github.com>

chore: address validation feedback

573ef15

Agent-Logs-Url: https://github.com/sequentech/step/sessions/79bacc54-9154-4f05-8ef8-dbe739c04b6f Co-authored-by: edulix <81968+edulix@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add CSS class to Participation Summary table rows for targeting~~ Admin Portal: add stable CSS hooks for Participation Summary rows May 1, 2026

Copilot finished work on behalf of edulix May 1, 2026 15:43

Copilot AI requested a review from edulix May 1, 2026 15:43

edulix requested changes May 1, 2026

View reviewed changes

Copilot AI mentioned this pull request May 1, 2026

Add stable CSS class hooks to Participation Summary table rows #2609

Closed

Copilot started work on behalf of edulix May 3, 2026 10:52 View session

fix: address participation summary review feedback

04d8929

Agent-Logs-Url: https://github.com/sequentech/step/sessions/31b0d341-4d69-4232-9cbf-ba2a6481ae9d Co-authored-by: edulix <81968+edulix@users.noreply.github.com>

Copilot finished work on behalf of edulix May 3, 2026 11:06

Copilot AI requested a review from edulix May 3, 2026 11:06

Merge branch 'main' into copilot/add-css-class-to-participation-summary

14fb2e8

edulix marked this pull request as ready for review May 3, 2026 22:12

Copilot AI review requested due to automatic review settings May 3, 2026 22:12

Copilot started reviewing on behalf of edulix May 3, 2026 22:12 View session

Copilot AI reviewed May 3, 2026

View reviewed changes

Conversation

Copilot AI commented May 1, 2026 • edited by edulix Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edulix May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 3, 2026

Choose a reason for hiding this comment

Uh oh!

edulix May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 3, 2026

Choose a reason for hiding this comment

Uh oh!

edulix May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 3, 2026

Choose a reason for hiding this comment

Uh oh!

edulix May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 1, 2026

Uh oh!

github-actions Bot commented May 1, 2026

Uh oh!

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

Uh oh!

Built to branch doc-previews at 2026-05-03 13:45 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

edulix commented May 3, 2026

Uh oh!

Copilot AI commented May 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 1, 2026 •

edited by edulix

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading

Built to branch `doc-previews` at 2026-05-03 13:45 UTC.
Preview will be ready when the GitHub Pages deployment is complete.