Onboarding: connection terminal and flags table#7856
Draft
talissoncosta wants to merge 38 commits into
Draft
Conversation
Token-based chip primitive (ds-chip) with neutral/accent variants, sizes, optional remove, and opt-in keyboard-group props (role/tabIndex/aria-checked/ onKeyDown/ref) so it can act as a radiogroup member. Also fixes the legacy chip-input text colour so it's visible in dark mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Auto-size off a measured span (useLayoutEffect, +2px for the caret) to fix text clipping and fast-typing flicker; drop forwardRef for the React 19 ref prop; move into its own folder with a barrel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The spaces-to-underscore + conditional lower-case rule was inline in the create-feature modal; extract it to common/utils so the modal and the onboarding flow share one implementation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
RTK Query mutations + request types for POST projects/ and environments/, used to bootstrap the onboarding workspace. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Welcome header naming the pre-created org / project / flag, each inline- editable via EditableChip (Chip + GhostInput, commit-on-blur, normalises the flag name on commit). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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>
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>
A prop-driven sdk console: amber LISTENING with an unchecked checklist and a blinking cursor while waiting, green LIVE with a connection receipt once connected. Always dark and reduced-motion aware, with stories for both states. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The 'Your flags' card reusing the product FeatureName / Tag / Switch, prop driven with waiting and connected states. Connected lifts it with the accent border and glow; waiting dims it. Stories cover the states and the toggle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
#7766) OnboardingFlow renders both below the connect panel. useOnboardingFlag resolves the demo flag's Development feature state and toggles it via updateFeatureState (persisted, no simulated output). Status is the pre-connection state for now; the real first-evaluation signal lands in #7767. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…e glow (#7766) Use --radius-xl / --radius-full instead of literal radii, and bring back the mock's purple accent border + glow on the connected flags card, derived from --color-border-action via oklch alpha so it still tracks the theme. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…nnection (#7766) One seam for the verify connection status so #7767 only swaps the hook body. Stubbed to the pre-connection state today, with a ?connected query-param escape hatch to exercise the connected UI in the live flow before the real signal exists. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Resolve the demo flag's tags (useGetTagsQuery) and pass them through to the flags table, so a tag attached to the flag appears in the onboarding table automatically rather than being hardcoded. The mock's 'Onboarding' tag shows once such a tag is attached to the flag (resource setup / #7767). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…rap (#7766) Best-effort find-or-create the 'Onboarding' tag and attach it to the demo flag, so the flags table shows the badge from the design out of the box. ensureFlag now returns the flag; tagging is wrapped so it never blocks the bootstrap. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ippets (#7766) The terminal is now per-step (installCopied / snippetCopied / connected) instead of a single status: copying the install or wire snippet ticks its checklist item and the active step shows amber, the first evaluation flips it to LIVE. CodeCard gains an onCopy that the connect panel threads up to the page. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…7766) The toggle cell was 56px while the ENABLED header column is 96px (the design's 40px action cell filled the gap, which we dropped), so the toggle sat right of the header. Widen the toggle cell to match, lining it up under ENABLED. 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
…#7766) The Onboarding tag's colour was an off-palette hex; switch to a green from the product tag palette (Constants.tagColors) so it's consistent with how tags are coloured everywhere else. 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.
docs/if required so people know about the feature.Changes
Contributes to #7766. Stacked on #7765 (renders into the single-page flow).
FeatureName/Tag/Switch, with a real Development toggle (updateFeatureState) and the flag's real tags. Bootstrap attaches anOnboardingtag so the badge shows out of the box.useOnboardingConnectionseam, so the real first-evaluation signal (Onboarding: flag gating, resource setup and connection signal #7767) is a one-file change. A?connectedquery param exercises the connected UI now.How did you test this code?
OnboardingTerminal(Listening / InstallCopied / SnippetsCopied / Connected) andOnboardingFlagsTable(Connected / Waiting / Off / WithTag)./getting-started— copied the install + wire snippets and watched the checklist tick; toggled the Dev flag and confirmed it persists; visited/getting-started?connectedto see the LIVE / connected state.