Skip to content

feat(onboarding): strip app chrome during onboarding#3402

Open
baktun14 wants to merge 3 commits into
mainfrom
feat/onboarding-strip-app-chrome
Open

feat(onboarding): strip app chrome during onboarding#3402
baktun14 wants to merge 3 commits into
mainfrom
feat/onboarding-strip-app-chrome

Conversation

@baktun14

@baktun14 baktun14 commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Why

During onboarding (before a user's first deployment), the full sidebar nav and complete profile dropdown invite the user off the onboarding path, and the /onboarding picker has no way to sign out. This presents a focused, distraction-free experience during onboarding and restores full chrome once the user is past it.

Closes CON-637

Screenshot 2026-07-09 at 1 11 11 PM Screenshot 2026-07-09 at 1 11 26 PM Screenshot 2026-07-09 at 2 00 09 PM

What

Ships fully dark behind the existing console_onboarding_redesign flag; zero behavior change when off and only affects the redesign trial cohort.

  • New useOnboardingChrome hook: single source of truth, tri-state { isStripped, isResolving }, gated on the redesign flag AND isOnboarding (trial) AND route startsWith /new-deployment/configure.
  • AccountMenu gets a minimal prop that reduces the signed-in menu to Logout only.
  • Nav in minimal mode drops WalletStatus and the hamburger, and shows the reduced menu at all breakpoints so mobile users keep a logout path (previously only reachable via the sidebar drawer, which is now hidden).
  • Layout holds with a neutral centered spinner while onboarding state is resolving (covers the wallet-query load and the brief trial-provisioning window), avoiding a chrome flash in either direction; omits the sidebar and its left offset when stripped.
  • /onboarding picker header gets the same reduced dropdown (hardcoded minimal).

Unit specs cover the hook (tri-state across flag/route/onboarding/resolving), the AccountMenu minimal variant, and the picker menu. Layout/Nav wiring verified via tsc + lint (no existing specs; MUI/media-query heavy).

Summary by CodeRabbit

  • New Features
    • Added onboarding-aware “stripped” layout that can hide standard navigation until onboarding state is resolved.
    • Introduced a compact account menu mode (minimal) to show a reduced set of actions.
    • Added a dedicated “Back” button to the deployment configuration flow.
  • Bug Fixes
    • Prevents navigation from briefly rendering before onboarding mode is determined.
    • Ensures minimal account menu shows only Logout and that Logout performs correctly.
  • Tests
    • Added/updated unit tests for minimal account menu, onboarding chrome state, and configure back-button navigation.

@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a8a877b4-37b0-4ddd-bd1d-5db2a014f04d

📥 Commits

Reviewing files that changed from the base of the PR and between 97431d1 and eec3eb4.

📒 Files selected for processing (2)
  • apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts
  • apps/deploy-web/src/hooks/useOnboardingChrome.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/deploy-web/src/hooks/useOnboardingChrome.ts

📝 Walkthrough

Walkthrough

Adds onboarding chrome state handling and minimal account-menu rendering, then wires onboarding picker and configure-deployment navigation around that state.

Changes

Onboarding chrome and navigation

Layer / File(s) Summary
useOnboardingChrome hook and tests
apps/deploy-web/src/hooks/useOnboardingChrome.ts, apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts
New hook computes isStripped and isResolving from the onboarding flag, pathname matching, and wallet state; tests cover route and wallet scenarios.
AccountMenu minimal variant
apps/deploy-web/src/components/layout/AccountMenu.tsx, apps/deploy-web/src/components/layout/AccountMenu.spec.tsx
AccountMenu accepts a minimal prop that hides authenticated menu items except Logout, with tests verifying the reduced menu and logout behavior.
Nav minimal integration
apps/deploy-web/src/components/layout/Nav.tsx
Nav accepts a minimal prop that hides the mobile drawer toggle and switches the account area between minimal and full rendering.
Layout wiring with onboarding chrome state
apps/deploy-web/src/components/layout/Layout.tsx
LayoutApp reads onboarding chrome state, shows a resolving spinner, passes minimal to Nav, hides Sidebar when stripped, and adjusts content margins.
OnboardingPickerPage minimal AccountMenu wiring
apps/deploy-web/src/components/onboarding-picker/OnboardingPickerPage.tsx, apps/deploy-web/src/components/onboarding-picker/OnboardingPickerPage.spec.tsx
OnboardingPickerPage adds AccountMenu to its dependencies and renders it minimal in the header, with a test asserting the injected prop.
ConfigureDeployment back button
apps/deploy-web/src/utils/urlUtils.ts, apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentBackButton/ConfigureDeploymentBackButton.tsx, apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsx, apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentBackButton/ConfigureDeploymentBackButton.spec.tsx, apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.spec.tsx
Adds a back button that uses the previous route when present or redirects to the onboarding picker URL, and wires it into the configure-deployment form with tests for both navigation paths and dependency injection.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

Suggested reviewers: ygrishajev

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/onboarding-strip-app-chrome

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts (1)

59-65: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Add a regression test for the non-onboarding + no-managed-wallet case.

None of the current cases cover isOnboarding: false combined with a hasManagedWallet that never becomes true (i.e., a regular, non-trial user). Per the current implementation this yields isResolving: true indefinitely — worth locking in the intended behavior (or catching the bug) with an explicit test once the logic in useOnboardingChrome.ts is resolved.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts` around lines 59 - 65,
Add a regression test in useOnboardingChrome.spec for the non-onboarding flow
where isOnboarding is false and hasManagedWallet stays false, using
useOnboardingChrome and setup to assert the intended result for a regular user.
Cover the case where the hook should not remain in a perpetual resolving state,
or explicitly lock in the current behavior if that is the intended contract, so
this combination is exercised alongside the existing onboarding/trial-wallet
cases.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts`:
- Around line 59-65: Add a regression test in useOnboardingChrome.spec for the
non-onboarding flow where isOnboarding is false and hasManagedWallet stays
false, using useOnboardingChrome and setup to assert the intended result for a
regular user. Cover the case where the hook should not remain in a perpetual
resolving state, or explicitly lock in the current behavior if that is the
intended contract, so this combination is exercised alongside the existing
onboarding/trial-wallet cases.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 95ff3c25-9a22-46a6-8023-24720dff3396

📥 Commits

Reviewing files that changed from the base of the PR and between a8f1c67 and a5bc9ca.

📒 Files selected for processing (8)
  • apps/deploy-web/src/components/layout/AccountMenu.spec.tsx
  • apps/deploy-web/src/components/layout/AccountMenu.tsx
  • apps/deploy-web/src/components/layout/Layout.tsx
  • apps/deploy-web/src/components/layout/Nav.tsx
  • apps/deploy-web/src/components/onboarding-picker/OnboardingPickerPage.spec.tsx
  • apps/deploy-web/src/components/onboarding-picker/OnboardingPickerPage.tsx
  • apps/deploy-web/src/hooks/useOnboardingChrome.spec.ts
  • apps/deploy-web/src/hooks/useOnboardingChrome.ts

@codecov

codecov Bot commented Jul 9, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 67.85714% with 18 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.80%. Comparing base (d5809c1) to head (eec3eb4).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
apps/deploy-web/src/components/layout/Layout.tsx 0.00% 6 Missing and 1 partial ⚠️
apps/deploy-web/src/components/layout/Nav.tsx 0.00% 6 Missing ⚠️
...s/deploy-web/src/components/layout/AccountMenu.tsx 71.42% 4 Missing ⚠️
...onfigureDeploymentForm/ConfigureDeploymentForm.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3402      +/-   ##
==========================================
- Coverage   71.88%   70.80%   -1.08%     
==========================================
  Files        1150     1062      -88     
  Lines       29098    26807    -2291     
  Branches     7155     6727     -428     
==========================================
- Hits        20916    18982    -1934     
+ Misses       7185     6859     -326     
+ Partials      997      966      -31     
Flag Coverage Δ *Carryforward flag
api 85.57% <ø> (ø) Carriedforward from 97431d1
deploy-web 60.35% <67.85%> (+0.02%) ⬆️
log-collector ?
notifications 91.44% <ø> (ø) Carriedforward from 97431d1
provider-console 81.38% <ø> (ø) Carriedforward from 97431d1
provider-inventory ?
provider-proxy 86.42% <ø> (ø) Carriedforward from 97431d1
tx-signer ?

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines Coverage Δ
...oymentBackButton/ConfigureDeploymentBackButton.tsx 100.00% <100.00%> (ø)
...ponents/onboarding-picker/OnboardingPickerPage.tsx 93.93% <ø> (ø)
apps/deploy-web/src/hooks/useOnboardingChrome.ts 100.00% <100.00%> (ø)
apps/deploy-web/src/utils/urlUtils.ts 45.67% <100.00%> (+0.67%) ⬆️
...onfigureDeploymentForm/ConfigureDeploymentForm.tsx 83.55% <0.00%> (ø)
...s/deploy-web/src/components/layout/AccountMenu.tsx 80.64% <71.42%> (+1.33%) ⬆️
apps/deploy-web/src/components/layout/Nav.tsx 15.38% <0.00%> (-9.62%) ⬇️
apps/deploy-web/src/components/layout/Layout.tsx 10.86% <0.00%> (-1.96%) ⬇️

... and 90 files with indirect coverage changes

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

During onboarding (trialing users on /new-deployment/configure with the
onboarding_redesign_v1 flag on), hide the sidebar, drop WalletStatus, and
reduce the profile dropdown to Logout only. The same reduced dropdown is added
to the /onboarding picker header so mobile users retain a logout path.

A new useOnboardingChrome hook is the single source of truth (tri-state:
stripped / resolving / full) and holds Layout with a neutral spinner until the
onboarding state resolves, avoiding a chrome flash in either direction. Ships
fully dark behind the existing redesign flag.
@baktun14 baktun14 force-pushed the feat/onboarding-strip-app-chrome branch from a5bc9ca to 1472637 Compare July 9, 2026 16:25
baktun14 added 2 commits July 9, 2026 13:27
Chrome stripping keyed off isOnboarding (user + isTrialing), so it stayed
on for every trial user creating any deployment, not just their first.
Use the lease-based onboarded signal (same as RequireOnboarding) so the
chrome returns once a user has deployed, even while still on a trial.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant