Onboarding: connection terminal and flags table#7856
Draft
talissoncosta wants to merge 13 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
the
front-end
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>
…#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>
talissoncosta
force-pushed
the
feat/onboarding-terminal-flags-table-7766
branch
from
523818f to
0bc5a99
Compare
Chrome offered contact autofill on the ghost inline-edit field, dropping a person/chevron icon that overlapped the trailing edit pencil. A ghost field is never a contact or credential input, so opt out of autofill and the password-manager overlays (1Password, LastPass). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
talissoncosta
force-pushed
the
feat/onboarding-terminal-flags-table-7766
branch
from
0bc5a99 to
d2474f9
Compare
The flags-table toggle fired updateFeatureState fire-and-forget, so a failed toggle just snapped back silently on the next refetch. Await + unwrap and toast on failure, matching the header rename UX. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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. Builds on the single-page onboarding flow (#7765, now merged): adds the verify console and the flags table below the connect panel.
useOnboardingConnection(a?connectedquery param exercises the connected UI) pending the real first-evaluation signal in Onboarding: flag gating, resource setup and connection signal #7767, so it won't go LIVE on its own yet.FeatureName/Tag/Switch, with a real persisted Development toggle. Bootstrap attaches an "Onboarding" tag so the badge shows.GhostInput(the contact icon was overlapping the inline edit pencil).How did you test this code?
Manually in the running flow against the staging API with
onboarding_quickstart_flowon: resources bootstrap, the checklist ticks as the snippets are copied, the Development toggle persists, and the tag renders. Storybook stories cover the terminal and table states. Automated E2E coverage of the flow is the immediate follow-up.