Onboarding: header and connect panel#7801
Open
talissoncosta wants to merge 28 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
the
front-end
talissoncosta
force-pushed
the
feat/onboarding-header-connect-7765
branch
from
16a6282 to
8af3fac
Compare
Local tablist following the WAI-ARIA tabs pattern (roving tabindex, Arrow/Home/End, aria-selected) with a right-alignable tab — deliberately not the shared nav Tabs. Split into list, button and panel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Two tabs: an agent-agnostic 'Connect with AI' prompt and a 'Connect your code' SDK selector. The SDK picker is an arrow-navigable radiogroup; logos are per-file tree-shakeable components; code cards are theme-adaptive and copy via a shared useCopyFeedback hook. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Gate /getting-started behind onboarding_quickstart_flow, idempotently bootstrap org/project/envs/flag, persist inline renames, and render the flow chromeless (App bypasses the Nav shell) with its own skip exit. Handles the bootstrap error state and guards renames before the flag loads. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Cover sanitizeFeatureName and orgNameFromEmail — the repo's Jest setup is pure-function only, so hook-render tests are out of scope here. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add the folder + barrel convention (frontend/CLAUDE.md rule 8) and Storybook stories for the onboarding components. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Copy button icon was fill='white' to show on the purple primary button (Icon defaults to a dark fill). currentColor inherits the button's text colour instead — no hardcoded colour, and it tracks the theme. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Icon defaults to fill='currentColor', so the copy icon inherits the button's text colour on its own — no explicit fill needed (the earlier 'white' was also unnecessary). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rename the SdkLang / SdkSnippet / CodeCard props from hljs/hljsClass to
language, so the component API describes intent (a syntax language) rather
than leaking highlight.js as the implementation. Values ('bash',
'javascript', ...) are unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move 'More' to the end of the first chip row and open the long tail as a second row beneath it, so the toggle never moves — open/close happens under the cursor, with a grid-rows transition (reduced-motion aware). The overflow row stays mounted but inert while collapsed, so arrow-key nav and screen readers skip it. Chip gains an aria-expanded prop for the disclosure. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Convey hierarchy with surface + elevation instead of borders: the panel lifts off the canvas (surface-subtle + shadow-md, no border), and the code cards / AI prompt sit as insets (surface-muted). Shadow tokens are mode-aware, so it reads as a raised card in both light and dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The welcome-sentence values were built on the Chip pill, so they read as form fields dropped into prose. Render them as inline text (GhostInput inherits the sentence type) with a dashed-underline hint and a pencil that surfaces on hover/focus. Renamed EditableChip -> InlineInput to match. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The flow is chromeless (no app nav to reach the theme setting), so add a sun/moon toggle in a row above the header. Reuses project/darkMode (flips live + persists) and the existing Button theme='icon'. Drops the flow's now-redundant top padding so the toggle row sits flush. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
text-end only shifts inline content; use d-flex justify-content-end so the skip button is reliably bottom-right, matching the theme-toggle row. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per review feedback: replace em/en dashes with hyphens across the onboarding code, comments and stories. Skip CTA copy becomes 'Skip onboarding, I'm a pro' with a trailing arrow, and the AI 'what happens next' line uses a colon instead of a dash. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per review: the resting underline was a faint grey. Use the action/purple colour (matching the accent chip variant) so it clearly reads as editable, and go solid while editing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Node.js wire snippet came back empty: getSdkSnippet looked up INIT by
the display label ('Node.js'), but codeHelp keys it 'Node JS' (same for
Next.js: 'Next.js' vs 'Next.js (app router)'). Rename installKey ->
codeHelpKey and use it for both INIT and INSTALL lookups.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…oarding
Addresses the redundant-flag-creation blocker. The bootstrap always
assumed the default flag name and recreated it, so a renamed flag was
duplicated on revisit (and re-typing the shown default tripped the rename
error). ensureFlag now reads the project's flags and reuses the first
(returning its real name), creating the demo flag only when there are
none; the header shows the actual name, so the same-value rename is a
no-op. Persisting the flag id across a session is a follow-up.
Also splits the overloaded hook per review: the imperative reuse-or-create
orchestration moves into bootstrapOnboarding(store, {defaults, existingOrg})
with ensureOrganisation/ensureProject/ensureEnvironments/ensureFlag, and
useEnsureOnboardingResources just owns the React state + run-once guard.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ate-feature modal Give the inline header edits the variant-key editor's visual language: a solid action underline and purple pencil, with the flag name as a soft-purple accent pill so it reads as the hero value. Sanitise the flag name as you type (spaces to underscores, lower-cased when the project enforces it) and cap it at FEATURE_ID length, matching the create-feature modal rather than only normalising on commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Each inline rename now shows the new name optimistically, toasts on success, and reverts with an error toast if the persist fails. Previously org and project renames were silent fire-and-forget, and a failed flag rename had no success counterpart. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A 4px top pad so the theme-toggle row isn't flush to the very edge. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Drop section-label comments that just restate self-describing selectors and field names (the numbered-step badge, the npm/yarn pills, the SdkLang label). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The environment names were written on create and matched by name on reuse, so a single source stops them drifting and silently breaking reuse. The org/project fallback names move alongside. Kept local to the file - onboarding-internal defaults, not global app constants. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
talissoncosta
force-pushed
the
feat/onboarding-header-connect-7765
branch
from
975eee9 to
b90829f
Compare
The new single-page onboarding flow replaces the legacy getting-started page that the Signup test drives, so the legacy create-org to integration to project path doesn't exist when the flag is on (it's enabled in CI's Flagsmith env). Skip the test in that case so it stops failing CI; the new flow needs its own e2e coverage as a follow-up. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Zaimwa9
requested changes
Jun 23, 2026
Zaimwa9
left a comment
Zaimwa9
left a comment
Contributor
There was a problem hiding this comment.
let's fix the codehelp for nextJs and address the feature renaming in a different PR
Then I also notice that:
- The feature creation/update is kind of fragile (also my fault from navigating in and out so it's not blocking)
- In the same vibe, once you have skipped and created the project, if you navigate back and update the name, it needs a refresh to be updated. Minor.
Also the single page onboarding E2E tests are skipped but we could have the follow up implementing basic coverage on this one quite soon. And it would help fixing the feature state management at the same time
| popular: false, | ||
| }, | ||
| { | ||
| codeHelpKey: 'Next.js', |
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
4 participants
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #7765 (Onboarding: header and connect panel).
Adds the single-page onboarding header + connect panel, gated behind the
onboarding_quickstart_flowflag at/getting-started(flag off → today's Getting Started page, unchanged).Chip(used by the SDK selector), plusGhostInputclip/flicker fixes and aChipInputdark-mode fix.Follow-ups (not here): verify console + flags table (#7766);
How did you test this code?
Pages/Onboarding/*,Components/Forms/*,Components/Data Display/Chip) in light + dark./getting-startedwithonboarding_quickstart_flowforced on: resources bootstrap, header chips rename, snippets/prompt carry the real env key + flag.npm run lint+npm run typecheckclean on the changed files.