feat(onboarding): connection terminal and flags table by talissoncosta · Pull Request #7856 · Flagsmith/flagsmith

talissoncosta · 2026-06-23T13:05:03Z

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

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.

Verify terminal — a dark SDK console whose checklist ticks as you act: copy the install command, copy the wire snippet, then the first evaluation flips the badge to LIVE. The connection step is stubbed behind useOnboardingConnection (a ?connected query 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.
Flags table — the pre-created flag in a real table reusing the product FeatureName / Tag / Switch, with a real persisted Development toggle. Bootstrap attaches an "Onboarding" tag so the badge shows.
New-user redirect — after signup a new user has no organisation, so onLogin sent them to the legacy /create page before the getting-started check ran. With the flow enabled they now land on /getting-started (which creates the organisation itself).
Rename keeps tags — feature names are immutable, so the inline "rename" is a delete + recreate; it now carries over the old flag's tags/type/description so the Onboarding badge survives.
Accessibility — distinct accessible names for the two copy buttons, a per-flag name on the toggle, and the flags table as a labelled region.
Browser autofill opt-out on the shared GhostInput (the contact icon was overlapping the inline edit pencil).
SCSS → utilities — layout (flex/gap/margin) moved to Bootstrap utilities and the flags-table surface/radius to token utilities; the SCSS keeps only what has no utility equivalent (the accent glow, the waiting state, non-standard metrics, and the terminal's literal console palette).
E2E — new-user happy path behind onboarding_quickstart_flow: sign up, land on the flow, copy the install/wire snippets (checklist ticks), toggle the flag, rename it (asserting the tag survives), and the ?connected state. Accessibility-first selectors (roles / labels / text).

How did you test this code?

The new e2e spec runs in CI (run-e2e-tests). Locally with onboarding_quickstart_flow on: resources bootstrap, the checklist ticks as the snippets are copied, the Development toggle persists, rename keeps the tag, and the connected state renders. Storybook stories cover the terminal and table states.

vercel · 2026-06-23T13:05:07Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jun 26, 2026 12:40pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jun 26, 2026 12:40pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jun 26, 2026 12:40pm

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>

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>

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>

…rface Move what has a utility equivalent out of the component SCSS: flex/gap/margin to Bootstrap utilities, and the flags-table surface background + radius to token utilities. The SCSS keeps what has no utility (the accent glow, the waiting state, non-standard metrics, and the terminal's literal console palette). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Zaimwa9

A couple of comments. This looks really good already (minus of course the first evaluation signal).

Mostly fixing E2E, otherwise it would be approvable as of

Zaimwa9 · 2026-06-25T15:31:41Z

+  overflow: hidden;
+  border-radius: var(--radius-xl);
+  background: #0d1117;
+  font-family: var(--font-family-mono, monospace);


Can we double check this token exists ?

Good catch, it didn't. Fixed in 139ced3, and the same phantom token in the connect panel in 13bfa10.

Zaimwa9 · 2026-06-25T15:33:24Z

+  &__col {
+    color: var(--color-text-secondary);
+    font-size: 11px;
+    font-weight: 700;


I think we can reuse the --font-weight-bold token

Done, using --font-weight-bold here and on the terminal badge. 139ced3.

Zaimwa9 · 2026-06-25T15:36:45Z

+      // replaces the legacy /create page. Everyone else still gets /create.
+      if (
+        AccountStore.getUser()?.isGettingStarted &&
+        Utils.getFlagsmithHasFeature('onboarding_quickstart_flow')


Should we also gate L190 with the flag ?

As far as I've tested, this is the right place to gate it. A fresh signup has no org yet, so it hits this branch first and gets redirected to /getting-started straight away. Happy to dig onto it if you really think it is needed.

Zaimwa9 · 2026-06-25T15:37:46Z

+      // flow when it's enabled - it creates the organisation itself, so it
+      // replaces the legacy /create page. Everyone else still gets /create.
+      if (
+        AccountStore.getUser()?.isGettingStarted &&


I'm not sure this has been added to the User type

You are right, it wasn't. Added isGettingStarted to the User type (optional, since it's set client-side at login rather than returned by the API). 139ced3.

After signup a new user has no organisation, so onLogin redirected them to the legacy /create page before the getting-started check ran. When onboarding_quickstart_flow is on, route getting-started users to /getting-started instead - the flow creates the organisation itself. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Optimistic: the switch flips instantly via useFeatureRowState and reverts on failure, instead of looking stuck while the update + refetch round-trips. - Gated: it stays disabled until the app connects (the table is a dimmed preview until then) and until the flag's state has loaded, so an early click can't no-op against an unresolved feature state. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

New-user happy path behind onboarding_quickstart_flow: sign up and land on the flow via the natural post-signup redirect, copy the install/wire snippets (checklist ticks), force the connected state (?connected, the #7767 stub), toggle the flag, and rename it - asserting the Onboarding tag survives and the rename persists across a reload. Accessibility-first selectors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Use the --font-weight-bold token instead of a literal 700 (flags table col + terminal badge). - Drop the non-existent --font-family-mono token; use a literal mono stack for the always-dark console. - Type isGettingStarted on User (it's set client-side at login). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Same phantom --font-family-mono as the verify console (Wadii's catch); use the same literal mono stack for the AI-prompt text. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…heck The Switch disabled prop had three conditions plus a multi-line comment inline in the JSX. Lift the table-level lock (connected + state loaded) into a named togglesLocked next to `waiting`, leaving the JSX a terse `togglesLocked || togglingFlag === flag.name`. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Lean pass over the onboarding components and the e2e spec: drop prop-doc restatement, step narration, the design-tool reference, and the redundant mono-token notes; keep the non-obvious why (the #7767 stub, immutability, optimistic toggle, the e2e race/abort) in fewer lines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…flag ensureFlag reused flags.results[0], so clicking "Getting Started" as an existing user latched onto an arbitrary real flag (and the inline rename would delete + recreate it). Match the flag by its Onboarding tag instead (name as a fallback), so the flow only ever touches the flag onboarding owns, creating the demo flag when there's none. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

talissoncosta · 2026-06-26T12:08:36Z

@gemini-code-assist review

gemini-code-assist

Code Review

This pull request introduces a single-page onboarding flow at /getting-started for new users without an organization, including new UI components (OnboardingFlagsTable, OnboardingTerminal), hooks, Storybook stories, and Playwright E2E tests. Key updates include attaching an 'Onboarding' tag to the demo flag and ensuring tags survive flag renames. Feedback on the changes highlights a potential bug in useOnboardingFlag.ts where a state-mutating side-effect is used inside a conditional check, and a recommendation to maintain strict typing for the tags prop in OnboardingFlagsTable.tsx instead of using Partial<TTag> to preserve type safety.

Real callers always pass full tags (useOnboardingFlag resolves ids to Tag[]); only the story passed a partial. Keep the prop strict and cast the mock in the story instead of loosening the production type. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jun 23, 2026

vercel Bot deployed to Preview – flagsmith-frontend-preview June 23, 2026 13:06 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging June 23, 2026 13:07 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 23, 2026 13:18 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging June 23, 2026 13:19 View deployment

Base automatically changed from feat/onboarding-header-connect-7765 to main June 23, 2026 19:22

talissoncosta and others added 10 commits June 23, 2026 16:29

talissoncosta force-pushed the feat/onboarding-terminal-flags-table-7766 branch from 523818f to 0bc5a99 Compare June 23, 2026 20:04

vercel Bot deployed to Preview – flagsmith-frontend-preview June 23, 2026 20:05 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging June 23, 2026 20:05 View deployment

talissoncosta force-pushed the feat/onboarding-terminal-flags-table-7766 branch from 0bc5a99 to d2474f9 Compare June 23, 2026 20:16

vercel Bot deployed to Preview – flagsmith-frontend-preview June 23, 2026 20:16 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging June 23, 2026 20:16 View deployment

talissoncosta and others added 2 commits June 23, 2026 17:32

docs(onboarding): note the verify checklist is session-only

815647d

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging June 24, 2026 12:06 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 24, 2026 12:06 View deployment

talissoncosta mentioned this pull request Jun 24, 2026

Onboarding: e2e coverage, rename keeps tags, accessible names #7867

Closed

4 tasks

github-actions Bot added the feature New feature or request label Jun 25, 2026

Zaimwa9 reviewed Jun 25, 2026

View reviewed changes

vercel Bot deployed to Preview – flagsmith-frontend-staging June 25, 2026 17:05 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 25, 2026 17:05 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 25, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging June 25, 2026 17:10 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 25, 2026 17:10 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 25, 2026

talissoncosta and others added 3 commits June 25, 2026 14:15

talissoncosta force-pushed the feat/onboarding-terminal-flags-table-7766 branch from a87cf98 to 547a18b Compare June 25, 2026 17:15

vercel Bot deployed to Preview – flagsmith-frontend-staging June 25, 2026 17:16 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 25, 2026 17:16 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 25, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging June 25, 2026 17:56 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview June 25, 2026 17:56 View deployment

github-actions Bot removed the feature New feature or request label Jun 25, 2026

talissoncosta and others added 5 commits June 25, 2026 15:07

fix(onboarding): drop the missing mono token from the connect panel too

13bfa10

Same phantom --font-family-mono as the verify console (Wadii's catch); use the same literal mono stack for the AI-prompt text. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs(types): trim the isGettingStarted comment to the non-obvious bit

5e78567

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gemini-code-assist Bot reviewed Jun 26, 2026

View reviewed changes

Comment thread frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts

Comment thread frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx

Uh oh!

Conversation

talissoncosta commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Zaimwa9 left a comment

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta commented Jun 26, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

talissoncosta commented Jun 23, 2026 •

edited

Loading

vercel Bot commented Jun 23, 2026 •

edited

Loading

talissoncosta Jun 26, 2026 •

edited

Loading