Skip to content

feat(onboarding): "next quest" cards#7941

Open
talissoncosta wants to merge 4 commits into
mainfrom
feat/onboarding-next-quest-cards-7739
Open

feat(onboarding): "next quest" cards#7941
talissoncosta wants to merge 4 commits into
mainfrom
feat/onboarding-next-quest-cards-7739

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Jul 2, 2026

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

Closes #7739

The three "next quest" cards on the onboarding flow (gradual rollout, experiment, remote config) are now actionable. Each one deep-links to the flag's real configuration, nothing faked:

  • Gradual rollout → the flag's segment overrides tab
  • Experiment → the environment's experiments page
  • Remote config → the flag's value tab

The cards stay locked and dimmed until the app connects, matching the flags table above them.

Also folded in two small fixes for the cards: the rollout deep-link now uses the slugified tab label so it resolves to the right tab, and the cards' secondary text no longer renders gold (a Bootstrap .text-secondary collision).

How did you test this code?

Added e2e coverage in onboarding-tests.pw.ts: it asserts the cards are locked before the first evaluation, and that once connected each card deep-links to the right destination (segment overrides tab, value tab, experiments page).

Manually:

  1. Enable onboarding_quickstart_flow, sign up, land on /getting-started.
  2. Before connecting, confirm the next-quest cards are dimmed with an "Unlocks after your first evaluation" note.
  3. Force the connected state via /getting-started?connected.
  4. Click each card and confirm it lands on the flag's segment overrides tab, the flag's value tab, and the experiments page respectively.

@talissoncosta talissoncosta requested a review from a team as a code owner July 2, 2026 12:33
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team July 2, 2026 12:33
@vercel

vercel Bot commented Jul 2, 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 Jul 9, 2026 2:26pm
flagsmith-frontend-staging Ready Ready Preview, 💬 1 unresolved Jul 9, 2026 2:26pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview, Comment Jul 9, 2026 2:26pm

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 2, 2026
@github-actions github-actions Bot added the feature New feature or request label Jul 2, 2026
@github-actions

github-actions Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

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

@github-actions

github-actions Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  10.7 seconds
commit  87645ed
info  🔄 Run: #18027 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  18.5 seconds
commit  87645ed
info  🔄 Run: #18027 (attempt 1)

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

passed  7 passed

Details

stats  7 tests across 6 suites
duration  57.3 seconds
commit  87645ed
info  🔄 Run: #18027 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 4 suites
duration  1 minute, 2 seconds
commit  87645ed
info  🔄 Run: #18027 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  33.9 seconds
commit  2a96bc4
info  🔄 Run: #18029 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 4 suites
duration  45 seconds
commit  2a96bc4
info  🔄 Run: #18029 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  6.9 seconds
commit  2a96bc4
info  🔄 Run: #18029 (attempt 1)

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

passed  7 passed

Details

stats  7 tests across 6 suites
duration  42.8 seconds
commit  2a96bc4
info  🔄 Run: #18029 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  16.8 seconds
commit  eb9646f
info  🔄 Run: #18030 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  45.1 seconds
commit  eb9646f
info  🔄 Run: #18030 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  6.1 seconds
commit  eb9646f
info  🔄 Run: #18030 (attempt 1)

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

passed  2 passed

Details

stats  2 tests across 2 suites
duration  46.8 seconds
commit  eb9646f
info  🔄 Run: #18030 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  5.4 seconds
commit  f2c4e9f
info  🔄 Run: #18031 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  44.8 seconds
commit  f2c4e9f
info  🔄 Run: #18031 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 5 suites
duration  6.8 seconds
commit  f2c4e9f
info  🔄 Run: #18031 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  7.2 seconds
commit  f2c4e9f
info  🔄 Run: #18031 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  40 seconds
commit  eb9646f
info  🔄 Run: #18032 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  11.9 seconds
commit  eb9646f
info  🔄 Run: #18032 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 2 suites
duration  11.8 seconds
commit  eb9646f
info  🔄 Run: #18032 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  47.1 seconds
commit  eb9646f
info  🔄 Run: #18032 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  33.9 seconds
commit  12e69c9
info  🔄 Run: #18033 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  34.9 seconds
commit  12e69c9
info  🔄 Run: #18033 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 4 suites
duration  1 minute, 1 second
commit  12e69c9
info  🔄 Run: #18033 (attempt 1)

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

passed  2 passed

Details

stats  2 tests across 2 suites
duration  47.2 seconds
commit  12e69c9
info  🔄 Run: #18033 (attempt 1)

@github-actions

github-actions Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

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

@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 2, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 2, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 2, 2026
@talissoncosta talissoncosta force-pushed the feat/onboarding-next-quest-cards-7739 branch from f2c4e9f to eb9646f Compare July 2, 2026 13:42
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 2, 2026
talissoncosta and others added 3 commits July 2, 2026 10:53
@talissoncosta @claude
feat(base): let SelectableCard host arbitrary content
c1a079e 
Add an optional content slot (children), make selected optional, and pass
through className, so SelectableCard can back a navigational card and not just
a selection tile. Additive: existing consumers are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
feat(onboarding): make the "next quest" cards actionable
4581b15 
The three next-quest cards (gradual rollout, experiment, remote config) are
built on SelectableCard and each deep-links to the flag's real config: rollout
to the segment overrides tab, remote config to the value tab, experiment to
the experiments page. The tab param is the slugified tab label. Locked and
dimmed (inert) until the app connects.

Closes #7739

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
feat(onboarding): lock hint on the flags table
a553b1f 
Add the "Flip it once your app connects" lock affordance beside the Your
flags heading while the toggle is waiting to connect.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
test(onboarding): e2e for the next-quest cards
12e69c9 
Assert the cards are locked before the first evaluation, and that once
connected each one deep-links to the right destination.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the feat/onboarding-next-quest-cards-7739 branch from eb9646f to 12e69c9 Compare July 2, 2026 13:54
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 2, 2026
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for kyle-ssg July 2, 2026 14:57
@talissoncosta talissoncosta changed the title feat(onboarding): make the "next quest" cards actionable Onboarding: "next quest" cards Jul 7, 2026
@talissoncosta talissoncosta changed the title Onboarding: "next quest" cards feat(onboarding): "next quest" cards Jul 7, 2026
@kyle-ssg

kyle-ssg commented Jul 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

[WIP Feedback] Some of this might just be generic onboarding feedback, I think it looks so good!

Minor: I think this means it's incorrectly always overflow scroll?

image

Let's just replace this with the selected badges, they look really good, though maybe make them fw-semibold

image image

The code here doesnt use useFlagsmith or flagsmith imports

image

i.e.

// App root
import flagsmith from "@flagsmith/flagsmith";
import { FlagsmithProvider, useFlags } from '@flagsmith/flagsmith/react';

export function HomePage() {
  const flags = useFlags(['show_demo_button','banner_size']); // only causes re-render if specified flag values / traits change
  const show_demo_button = flags.show_demo_button.enabled
  const banner_size = flags.banner_size.value
  return (
      <>
        {`show_demo_button: ${show_demo_button}`}
        {`banner_size: ${banner_size}`}
      </>
  );
}
export default function App() {
  return (
      <FlagsmithProvider
          options={{
            environmentID: '2ULH8Sq9WxofQsJQc2Cbeg',
          }}
          flagsmith={flagsmith}>
          <HomePage/>
      </FlagsmithProvider>
  );
}

I think we should reuse what you had and remove codehelp language select

image

@kyle-ssg kyle-ssg self-requested a review July 8, 2026 14:35
Zaimwa9
Zaimwa9 reviewed Jul 9, 2026
View reviewed changes

@Zaimwa9 Zaimwa9 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have some nits, but I think Kyle's comments are worth addressing, although the last one would be a NIT to me that I let you decide what do with 👍

Comment thread frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
)

// A value chip: "serve a value, not just on/off".
const RemoteConfigPreview: FC = () => (

@Zaimwa9 Zaimwa9 Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure that's where it belongs but i'd add some more margin/padding top here

Image

@Zaimwa9 Zaimwa9 Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed it's not here :D

Comment thread frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
@@ -0,0 +1,120 @@
import React, { FC, ReactNode } from 'react'
import classNames from 'classnames'

@Zaimwa9 Zaimwa9 Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: it's imported as cn in SelectableCard

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

Reviewers

@Zaimwa9 Zaimwa9 Zaimwa9 left review comments
@kyle-ssg kyle-ssg Awaiting requested review from kyle-ssg

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

Assignees

@kyle-ssg kyle-ssg

@Zaimwa9 Zaimwa9

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.

Onboarding: make the "next quest" cards actionable

3 participants

@talissoncosta @kyle-ssg @Zaimwa9