Skip to content

feat(onboarding): connection terminal and flags table#7856

Open
talissoncosta wants to merge 17 commits into
mainfrom
feat/onboarding-terminal-flags-table-7766
Open

feat(onboarding): connection terminal and flags table#7856
talissoncosta wants to merge 17 commits into
mainfrom
feat/onboarding-terminal-flags-table-7766

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
  • 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.
  • 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

vercel Bot commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jun 25, 2026 12:16pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jun 25, 2026 12:16pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jun 25, 2026 12:16pm

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jun 23, 2026
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 @claude
feat(onboarding): add the verify terminal (#7766)
6d88a66 
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>
@talissoncosta @claude
feat(onboarding): add the flags table (#7766)
d192575 
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>
@talissoncosta @claude
feat(onboarding): render terminal + flags table with a real Dev toggle (
cdd1cb7 
#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>
@talissoncosta @claude
style(onboarding): radius tokens + restore the connected card's purpl…
35b5022 
…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>
@talissoncosta @claude
refactor(onboarding): route connection status through useOnboardingCo…
eb2725e 
…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>
@talissoncosta @claude
feat(onboarding): show the flag's real tags in the table (#7766)
202b3c5 
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>
@talissoncosta @claude
feat(onboarding): attach an Onboarding tag to the demo flag in bootst…
82e4046 
…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>
@talissoncosta @claude
feat(onboarding): tick the verify checklist as the user copies the sn…
dbd2433 
…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>
@talissoncosta @claude
style(onboarding): align the flags toggle under the ENABLED header (#…
fe9913b 
…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>
@talissoncosta @claude
refactor(onboarding): use a tag-palette colour for the Onboarding tag (…
96e125e 
…#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 talissoncosta force-pushed the feat/onboarding-terminal-flags-table-7766 branch from 523818f to 0bc5a99 Compare June 23, 2026 20:04
@talissoncosta @claude
fix(forms): disable browser autofill on GhostInput
d2474f9 
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 talissoncosta force-pushed the feat/onboarding-terminal-flags-table-7766 branch from 0bc5a99 to d2474f9 Compare June 23, 2026 20:16
talissoncosta and others added 2 commits June 23, 2026 17:32
@talissoncosta @claude
fix(onboarding): toast on flag toggle failure
63459ee 
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>
@talissoncosta @claude
docs(onboarding): note the verify checklist is session-only
815647d 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta mentioned this pull request Jun 24, 2026
Closed
4 tasks
@talissoncosta @claude
refactor(onboarding): use Bootstrap/token utilities for layout and su…
880188a 
…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>
@talissoncosta @claude
feat(onboarding): accessible names for the copy buttons and flag switch
36c1a9e 
The two "Copy Code" buttons were indistinguishable to assistive tech, the flags
table toggle had no accessible name, and the table wasn't a labelled region.
Give the copy buttons distinct aria-labels, name the switch per flag, and label
the flags region.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta changed the title Onboarding: connection terminal and flags table feat(onboarding): connection terminal and flags table Jun 25, 2026
@talissoncosta talissoncosta marked this pull request as ready for review June 25, 2026 12:12
@talissoncosta talissoncosta requested a review from a team as a code owner June 25, 2026 12:12
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team June 25, 2026 12:12
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 25, 2026
@github-actions

github-actions Bot commented Jun 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-api-test:pr-7856 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7856 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7856 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7856 Finished ✅ Results ✅

talissoncosta and others added 2 commits June 25, 2026 09:13
@talissoncosta @claude
fix(onboarding): preserve tags when renaming the flag
79ae58f 
Feature names are immutable, so the onboarding "rename" is a delete + recreate.
The recreate started a bare flag, dropping the Onboarding tag attached in
bootstrap (the badge vanished). Carry over the old flag's tags/type/description
so the rename is non-lossy for what onboarding sets.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
test(e2e): cover the single-page onboarding flow
bb88e01 
New-user happy path behind onboarding_quickstart_flow: sign up, land on the
flow, copy the install/wire snippets (checklist ticks), toggle the Development
flag, rename it (asserting the Onboarding tag survives the delete+recreate), and
exercise the connected state via ?connected. Selectors are accessibility-first
(roles / labels / text), not data-test ids.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 25, 2026
@github-actions

github-actions Bot commented Jun 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  41.7 seconds
commit  36c1a9e
info  🔄 Run: #17812 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  39 seconds
commit  36c1a9e
info  🔄 Run: #17812 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  47.2 seconds
commit  36c1a9e
info  🔄 Run: #17812 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.8 seconds
commit  bb88e01
info  🔄 Run: #17813 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  43.3 seconds
commit  36c1a9e
info  🔄 Run: #17812 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  45.8 seconds
commit  bb88e01
info  🔄 Run: #17813 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  33.1 seconds
commit  bb88e01
info  🔄 Run: #17813 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  4.2 seconds
commit  bb88e01
info  🔄 Run: #17813 (attempt 1)

@github-actions

github-actions Bot commented Jun 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

19 screenshots compared. See report for details.
View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kyle-ssg kyle-ssg Awaiting requested review from kyle-ssg kyle-ssg is a code owner automatically assigned from Flagsmith/flagsmith-front-end

At least 1 approving review is required to merge this pull request.

Assignees

@kyle-ssg kyle-ssg

Labels

feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@talissoncosta @kyle-ssg