Add feature-flagged first-use onboarding experience to welcome page by dennisoelkers · Pull Request #26455 · Graylog2/graylog2-server

dennisoelkers · 2026-06-23T07:51:57Z

Description

Adds a feature-flagged first-use onboarding experience to the welcome page, gated behind the onboarding_experience feature flag. WelcomePage now asks the backend for the onboarding state (useShowOnboardingWizard) and, while the instance is still in setup, decides what to render:

Users with ingestion permissions (inputs:create / collectors:create) see a new FirstUseWelcome page: a guided landing page with two action sections — Endpoint Logging (Set up Collector, with platform icons) and Other Data Sources (Configure Input, with data-source icons) — plus a Resources section of clickable cards that open in a new tab. A Dismiss action opens a confirm dialog and, on confirmation, turns off onboarding for all users of the installation.
Users without those permissions see an OnboardingBanner on the regular welcome page telling them the instance is not yet receiving log data and to contact an administrator.
Once onboarding is dismissed (or the flag is off), the regular Welcome page is shown as before.

Supporting changes:

useOnboardingEligibility / useDismissOnboarding react-query hooks backed by the Onboarding server API.
Backend OnboardingResource: the generic PUT /onboarding/{status} endpoint is replaced with a dedicated PUT /onboarding/dismiss endpoint, and the audit event becomes ONBOARDING_DISMISSED.
usePermissions gains an isAnyPermitted helper; new REQUIRED_PERMISSIONS constant.
New DataSourceIcons component; IngestionSetupModal is included as a placeholder for the upcoming guided setup flow.

/prd https://github.com/Graylog2/graylog-plugin-enterprise/pull/14700

Motivation and Context

New operators landing on the welcome page have no guidance when no data is flowing in. This change lays the (feature-flagged) groundwork for an in-product ingestion onboarding flow — a guided page for those who can set up ingestion, and a clear "contact your administrator" prompt for those who can't.

How Has This Been Tested?

Added React Testing Library tests for FirstUseWelcome, OnboardingBanner, DataSourceIcons, and PlatformIcons covering eligibility, permission-gated rendering, dismissal (including the confirm dialog), and the action sections.
yarn tsgo, yarn lint:changes, and yarn test for the touched frontend files.

Screenshots (if appropriate):

_{Onboarding Wizard showing for new installations if user has required permissions}

_{Dismiss confirmation dialog indicating that this affects all users}

_{Indication that setup should be done/is in progress for users without required permissions}

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have requested a documentation update.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.

/nocl Onboarding experience ships disabled behind the onboarding_experience feature flag, so there is no user-visible change yet.

Behind the `onboarding_experience` feature flag, show a full-width banner on the welcome page when the system is not yet receiving log data: - Permitted users (`inputs:create` or `collectors:create`) get an actionable box linking to a stub ingestion-setup modal, dismissable via the alert's close button (dismissal invalidates the eligibility query). - Other users get a "contact an administrator" box. The eligibility query and dismiss mutation are mocked in the frontend for now, shaped like real API hooks so the backend can be wired in later. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…ding-banner

- Add FirstUseWelcome page and useShowOnboardingWizard hook that gates on the onboarding feature flag, eligibility, and required permissions - Let useOnboardingEligibility take an `enabled` flag - Add isAnyPermitted to usePermissions (and update affected test mocks) - Add `collectors:create` to the Permission type; move REQUIRED_PERMISSIONS into welcome Constants and reuse it in OnboardingBanner Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

…ding-banner

Add a static, non-interactive PlatformIcons component (each icon wrapped in a Card) reusing the collector PLATFORMS, and a 'Set up Collector' button linking to the collectors overview, in the Endpoint Logging box. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Add a static DataSourceIcons row (Google, AWS, Microsoft, Syslog-like, Palo Alto in Cards, plus an 'And more' label) and a 'Configure Input' button linking to the inputs page. Extend BrandIcon with the google/microsoft/aws/paloalto logos (monochrome, colors stripped to currentColor). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

Use the generated Onboarding.get() API (status-based) for eligibility, reduce OnboardingBanner to the contact-admin message (shown only when the user lacks permissions and status is 'setup'), add a Dismiss action on FirstUseWelcome, and update the banner tests to the new behavior. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Replace the generic onboarding status PUT with a dedicated PUT /onboarding/dismiss endpoint (setting status DISMISSED, audited as onboarding:status:dismissed), wire useDismissOnboarding to Onboarding.dismiss(), and guard the FirstUseWelcome Dismiss action with a confirmation dialog explaining it applies to every user. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

… tab Render each Resources panel as a Card wrapped in an anchor (target=_blank) so the whole panel is a link, with a hover/focus affordance, and match the section content background color. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

Switch the Kubernetes and Docker collector platforms to BrandIcon logos, and crop their viewBox padding (0 0 32 32 -> 2 2 28 28) so they render at the same size as the other brand icons. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Suppress the anchor underline on plain :focus (not just :focus-visible) so Bootstrap's a:focus underline no longer sticks after a mouse click, and set outline:none on the link, keeping the intended highlight on :focus-visible only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…ding-banner

dennisoelkers force-pushed the feat/welcome-onboarding-banner branch from 196f481 to 87c5b2d Compare June 23, 2026 08:06

Replace em dash with regular hyphen.

57bb3e9

dennisoelkers force-pushed the feat/welcome-onboarding-banner branch 2 times, most recently from ef677cc to 57bb3e9 Compare June 23, 2026 08:25

Merge branch 'master' into feat/welcome-onboarding-banner

5dff41f

dennisoelkers requested a review from janheise June 24, 2026 11:29

dennisoelkers and others added 14 commits June 29, 2026 09:58

Merge remote-tracking branch 'origin/master' into feat/welcome-onboar…

332aba6

…ding-banner

Merge remote-tracking branch 'origin/master' into feat/welcome-onboar…

354fcff

…ding-banner

Merge remote-tracking branch 'origin/master' into feat/welcome-onboar…

e8109da

…ding-banner

Adding license headers.

c801688

Give both FirstUseWelcome action sections equal width

e76495e

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

Merge remote-tracking branch 'origin/master' into feat/welcome-onboar…

7b1cf5d

…ding-banner

Emphasizing question.

0d03446

Add blank line after StyledSectionComponent in FirstUseWelcome

a442fb9

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

dennisoelkers changed the title ~~Add feature-flagged onboarding banner and wizard shell to welcome page~~ Add feature-flagged first-use onboarding experience to welcome page Jul 1, 2026

dennisoelkers and others added 4 commits July 2, 2026 08:26

Split FirstUseWelcome action sections 65/35

d9e64b1

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

Merge remote-tracking branch 'origin/master' into feat/welcome-onboar…

748422e

…ding-banner

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add feature-flagged first-use onboarding experience to welcome page#26455

Add feature-flagged first-use onboarding experience to welcome page#26455
dennisoelkers wants to merge 21 commits into
masterfrom
feat/welcome-onboarding-banner

dennisoelkers commented Jun 23, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dennisoelkers commented Jun 23, 2026 •

edited

Loading