Modernize FOSSE admin screens#149
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes FOSSE’s WordPress admin UI (Settings, Status, providers, and onboarding wizard) by introducing shared “Gutenberg-like” UI primitives (cards, fields, badges, detail lists, callouts, action bars) and updating markup/tests to match.
Changes:
- Reworks admin screen markup to use shared card/field/detail-list primitives while preserving existing actions/nonces/targets.
- Updates onboarding wizard step layouts (including completion messaging/actions) to use consistent card surfaces.
- Refreshes PHPUnit + Playwright contracts to assert the new classnames/structure and visual/layout invariants.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/php/Admin/Setup_PageTest.php | Adds/updates render assertions for guided setup callout, footer wizard link, and new card/field primitives. |
| tests/php/Admin/Onboarding_WizardTest.php | Updates wizard markup expectations (choice cards, detail list summary, completion copy). |
| tests/php/Admin/Bluesky_ProviderTest.php | Updates provider panel/status card expectations to card/detail-list primitives and new token classes. |
| tests/php/Admin/AP_ProviderTest.php | Updates ActivityPub setup/status expectations for field-stack + detail-list markup. |
| tests/e2e/status-page.spec.ts | Adjusts status page polish checks from table-based markup to detail-list markup; adds footer wizard-link placement coverage. |
| tests/e2e/onboarding-wizard.spec.ts | Updates wizard E2E assertions for card primitives and adds layout checks for actions/completion card alignment. |
| tests/e2e/bluesky-provider.spec.ts | Updates setup/status UI expectations for new primitives and adds guided-setup + footer-link checks. |
| src/Admin/templates/status-page.php | Converts Status page shell/summary/actions to admin card primitives and adds footer “Run the wizard” link. |
| src/Admin/templates/setup-page.php | Converts Settings page sections to admin card + field-stack primitives; replaces notice with guided-setup callout; adds footer wizard link. |
| src/Admin/class-onboarding-wizard.php | Refactors wizard steps to shared card header/body/footer structure; updates destination/appearance/content/bluesky/complete markup and completion messaging. |
| src/Admin/class-bluesky-provider.php | Converts Bluesky connection actions and status card to admin card + detail-list primitives; updates domain-handle panel styling hooks. |
| src/Admin/class-ap-provider.php | Converts ActivityPub setup/connection/status rendering to field-stack + detail-list primitives and adds connection badge. |
| src/Admin/assets/css/admin.css | Introduces shared admin-shell/card/field/detail-list/callout/action-bar styles and updates wizard styles to match new surfaces. |
RCowles
force-pushed
the
fosse-admin-visual-overhaul
branch
from
a6e0b09 to
918add1
Compare
RCowles
force-pushed
the
fosse-admin-visual-overhaul
branch
from
918add1 to
888a265
Compare
Remove three blocks of legacy CSS that no longer have any PHP emissions after the admin modernization: the duplicate token rule superseded by the new var-driven primitives block, the `.fosse-summary` table rules replaced by `.fosse-detail-list`, and the legacy choice/radio classes replaced by `.fosse-choice-card` / `.fosse-checkbox-grid`. Rename the Advanced ActivityPub settings link from `fosse-settings-secondary-link` (no matching rule) to the `fosse-admin-page__secondary-link` primitive so it picks up the muted underline treatment used elsewhere. Tighten unit and e2e contracts around the new primitives: PHP tests assert `fosse-status-badge` variants on the AP and Bluesky panels, the new `fosse-choice-card` / `fosse-post-type-item` markup on the wizard content step, the `fosse-domain-handle-panel fosse-callout` shape on the eligible Bluesky path, and the `fosse-wizard__form` class on step forms. Hoist `resetWizardIfComplete` into the shared e2e helper, drop the design-token color pin on the connection callout border, add a `CompletionMetrics` type alias for the geometry block, and pin the wizard-link placement check to a 1280x720 viewport.
CI fixes on commit 23d6c71: - Remove the `fosse-wizard__form` assertion from the bluesky-step test (Onboarding_WizardTest::test_render_bluesky_step_disconnected_shows_connect_form): the bluesky step's form uses `class="fosse-bluesky-form"`, not `fosse-wizard__form`. The assertion was added based on an incorrect claim during code review that the class appears on every step form; it actually appears only on the destinations, appearance, and content steps. The bluesky-form class is already asserted at the same site. - Inline `page.goto(...)` and the `resetWizardIfComplete` arrow signature in test-helpers.ts to satisfy prettier (the eslint job rejected multi-line wrapping for a single short string argument and a single parameter). Code review follow-ups (admin.css, test-helpers.ts, onboarding-wizard.spec.ts): - Delete dead `.fosse-status-card__table` block and its responsive override: the AP and Bluesky status displays were migrated to `<dl class="fosse-detail-list">` and no PHP still emits the old selectors. Same shape as the earlier cleanup commit; this catches what that pass missed. - Delete `.fosse-wizard__completion-footer { display: block; }` — the rule is a no-op on a `<div>`. - Drop the silently-overridden `.fosse-domain-handle-panel` base rule: every declaration is overridden later in the cascade by `.fosse-callout`, which the same elements always carry. The blue-tint background never rendered. The `h4` / `p` / `form` sub-element rules are preserved because no `.fosse-callout` descendant rules cover them. - Add a JSDoc block and explicit `: Promise<void>` return type to the `resetWizardIfComplete` e2e helper, matching the style of the adjacent `resetBlueskyState`. The previous signature left the precondition (page must already hold an authenticated wp-admin session) invisible to callers. - Replace the `if ( await reset.count() )` check inside the helper with a `waitFor( { state: 'attached', timeout: 2000 } )` based stabilization. Playwright's auto-wait does not apply to raw `count()`, so the previous shape sampled a single instant after `goto` resolved. - Extend the existing "Skip setup marks wizard complete and goes to Setup page" e2e test to assert the post-completion Settings page hides `.fosse-guided-setup` and still exposes the footer wizard link.
…lied Status card headers carry both the legacy `fosse-status-card__header` class (`margin-bottom: 18px`) and the new `fosse-card-header` primitive (which adds its own `border-bottom` separator). The additive 18px gap sits between the new border separator and the card body, producing an extra slug of whitespace where the parallel settings-panel header lays flush. Mirror the fix already in place for settings-panel headers a few rules above by resetting the legacy margin when both classes are present.
kraftbj
approved these changes
May 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Testing