Onboarding: header and connect panel#7801
Draft
talissoncosta wants to merge 12 commits into
Draft
Conversation
A canonical, token-based chip primitive: variant (neutral / accent outline), size (default/sm/xs), truncate, onRemove, and clickable (keyboard-operable). Layout via Bootstrap utilities, colour via token utilities; padding, sizes, border and truncation in SCSS. Uses a distinct `ds-chip` class so it coexists with the legacy `.chip` until that migrates onto it (#6606). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Width was sized to offsetWidth * 0.95, clipping the trailing character, and measured in useEffect (post-paint) so fast typing flickered the last letters. Size to offsetWidth + 2 and measure in useLayoutEffect (committed before paint). Also moves the inline styles into GhostInput.scss (layout/spacing via Bootstrap utilities), drops the dead `width` prop, makes `maxLength` a prop, and removes the redundant role. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
OnboardingHeader: the welcome title and a sentence naming the pre-created organisation / project / flag, each inline-editable via EditableChip (a Chip shell + GhostInput that commits on blur / Enter, reverting empty values; the flag name is normalised with the create-feature rule). Prop-driven and presentational — rename handlers are owned by the page that assembles the flow. EditableChip is feature-local, not a shared inline-edit primitive. Part of #7765. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The ChipInput text field set a transparent background but no colour, so the typed text fell back to the browser default (black) and was invisible in dark mode. Use the --color-text-default token so it follows the theme. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
POST projects/ and POST environments/ as RTK Query mutations (useCreateProjectMutation / useCreateEnvironmentMutation), each invalidating its LIST tag, with the matching Req types. Used by the onboarding resource bootstrap; previously project/environment creation had no RTK create path. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…d onboarding_quickstart_flow GettingStartedGate renders the new OnboardingFlow when the onboarding_quickstart_flow flag is on, otherwise the existing GettingStartedPage (flag off = unchanged). OnboardingFlow uses useEnsureOnboardingResources to idempotently reuse-or-create org / project / Development + Production / first flag, then renders OnboardingHeader with real data behind a loader. Org creation still goes through the legacy AccountStore helper (the shell reads current-org from it); migrating that is a separate follow-up. Part of #7765. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
OnboardingConnectPanel offers two ways to connect an app to the pre-created flag: a "Connect with AI" tab (an agent-agnostic, zero-auth prompt carrying the real env key + flag) and a "Connect your code" tab with an SDK selector built on Chip plus install/wire snippets per language rendered via Highlight. Near-black brand logos fall back to currentColor so they stay legible on the chip in both themes; the code cards + prompt are theme-adaptive via semantic tokens (light editor in light mode, dark in dark). Nothing is faked — the prompt and snippets carry the user's real env key + flag. Part of #7765. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
OnboardingFlow now shows OnboardingConnectPanel below the header, fed the real environmentKey + featureName from useEnsureOnboardingResources. Part of #7765. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Unmapped hljs tokens (tags, attributes, params, punctuation) were inheriting the global hljs greys and washing out on the light code card. Floor them to --color-text-default so they read as solid body text in both themes; the semantic syntax palette (keyword/string/number/comment) still applies on top. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The header chips now persist: organisation/project via update mutations, and the flag via delete+recreate (useOnboardingFlagRename — feature names are immutable; the toggle stays in #7766). Renames are optimistic and revert on failure. Also centres the flow in a max-width reading column (it's a focused single-task flow, not a full-width data surface). Part of #7765. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
the
front-end
…arrel Groups OnboardingConnectPanel.tsx/.scss with its sdkSnippets/languageLogos data under OnboardingConnectPanel/ and adds an index barrel, matching the Chip / EditableChip layout. Import paths are unchanged (they resolve to the barrel). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Drop label/restatement comments; keep the ones that explain a non-obvious why (the ds-chip vs legacy .chip collision, the ChipInput dark-mode token fix, the flag-name sanitiser rule). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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); lift the semantic hljs palette into the global theme (#6606); migrate org-create off the legacy AccountStore.
Screenshots
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.