Skip to content

Replace the pending-approval error page with a dedicated screen - #801

Closed
heisbrot wants to merge 2 commits into
mainfrom
feat/friendly-pending-approval-page
Closed

heisbrot wants to merge 2 commits into
mainfrom
feat/friendly-pending-approval-page

Conversation

@heisbrot

@heisbrot heisbrot commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Issue ticket number and link

Documentation

Select exactly one:

  • I added/updated documentation for this change
  • Documentation is not needed for this change (explain why)

Docs PR URL (required if "docs added" is checked)

Paste the PR link from https://github.com/netbirdio/docs here:

https://github.com/netbirdio/docs/pull/__

E2E tests

Optional: override the image tags used by the Playwright e2e workflow.
Defaults to main when omitted.

management-cloud-tag: main
reverse-proxy-tag: main

Summary by CodeRabbit

  • New Features
    • Added a dedicated waiting-for-approval screen with personalized guidance when the account owner’s email is available.
    • Added a three-step progress indicator: Account Created, Waiting for Approval, and Join Account.
    • Added Refresh, Log Out, and support contact options.
    • Enhanced step indicators with completion status and configurable sizing for clearer progress visualization.

A user waiting for an administrator to approve their account was shown
the generic /error page: an error icon, a raw response_message dump and
"if you believe this is an error, please contact your administrator".
Waiting for approval is an expected part of signing up, so it now gets a
screen of its own, following the onboarding layout of logo, centered card
and a stepper placing the user between "Account Created" and
"Join Account".

The owner to contact is read out of the refusal management sends, which
names a masked address, and the copy asks for the owner without naming
one when the address is absent.

Steps.Step gains an optional status and size, so a step can render as
complete, current or upcoming at a larger scale. Steps that pass neither
keep the look used by the instruction-list steppers.
@coderabbitai

coderabbitai Bot commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: d913b549-768e-4fd5-9ad0-7e2f7da95cb7

📥 Commits

Reviewing files that changed from the base of the PR and between 8625e41 and ac9d76a.

📒 Files selected for processing (3)
  • e2e/helpers/auth.ts
  • e2e/tests/login.spec.ts
  • e2e/tests/team-users-approval-and-billing.spec.ts

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.


📝 Walkthrough

Walkthrough

The error page now routes pending-approval errors to a dedicated screen. The screen parses owner details, displays a three-step account flow, and provides refresh, logout, and support actions. The shared Step component now supports status and size styling. End-to-end tests use a test ID for this screen.

Changes

Pending approval flow

Layer / File(s) Summary
Status-aware step visuals
src/components/Steps.tsx
Step now accepts React nodes, complete, current, and upcoming statuses, plus default and large sizes. Statuses control circle and rail styling.
Pending approval screen
src/modules/users/PendingApproval.tsx, src/modules/users/PendingApproval.test.tsx
The new component parses an owner email, renders account progress steps, shows conditional approval text, and provides refresh, logout, and support actions. Tests cover owner and fallback messages, approval copy, and step labels.
Error page routing
src/app/error/page.tsx
Pending-approval errors now return PendingApproval with the error and action callbacks. The inline error screen no longer handles that state separately.
Pending approval test locators
e2e/helpers/auth.ts, e2e/tests/login.spec.ts, e2e/tests/team-users-approval-and-billing.spec.ts
Pending-approval checks now target the pending-approval test ID instead of visible text.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ErrorPage
  participant PendingApproval
  participant Steps
  participant AccountUser
  ErrorPage->>PendingApproval: render pending-approval error and callbacks
  PendingApproval->>PendingApproval: parse approver email
  PendingApproval->>Steps: render three account steps with statuses
  Steps-->>AccountUser: display account progress
  AccountUser->>PendingApproval: select Refresh or Log Out
  PendingApproval-->>ErrorPage: invoke callback
Loading

Suggested reviewers: mlsmaycon

Merge Risk: ⚪ Minimal · up to ac9d7

The pending-approval screen and its E2E detection remain aligned, with no concrete merge-blocking regression identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 7 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: replacing the pending-approval error page with a dedicated screen.
Description check ✅ Passed The description follows the required template, marks documentation as not needed, and retains the default E2E image tags. The issue ticket field and the explanation for why documentation is not needed…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/friendly-pending-approval-page

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

A rabbit sees the approval light,
Three steps now guide the path just right.
The owner’s note appears with care,
Refresh and logout wait there.
Test IDs mark the screen in sight.

Comment @coderabbitai help to get the list of available commands.

The three places that recognise a pending user matched on "User Approval
Pending", the heading the old error page rendered. The screen that
replaced it has no heading, so the approval branch of the login races
could never resolve and every leg timed out instead: both fixtures treat
approval as a legitimate outcome, not a failure.

They now key off the data-testid on the screen's root, which does not
move when the copy does.
@heisbrot heisbrot closed this Sep 14, 2026
@heisbrot
heisbrot deleted the feat/friendly-pending-approval-page branch September 14, 2026 12:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant