feat(onboarding): Add new welcome UI with product selection #107175
+350
−8
Conversation
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
Add a new onboarding welcome screen that allows users to select which Sentry products they want to set up. The new UI is feature-flagged behind `organizations:onboarding-new-welcome-ui`. New UI includes: - Product selection grid with 6 options (Error monitoring, Logging, Metrics, Session replay, Tracing, Profiling) - 14-day business trial section highlighting Seer AI Debugging Agent - Responsive layout (2-column grid on desktop, single column on mobile) - Skip onboarding and Next buttons
…screen Extract background images into a shared component and create a new WelcomeBackgroundNewUi with adjusted positioning for the new welcome UI layout.
github-actions
bot
added
the
Scope: Frontend
Apply the chonky embossed button styling pattern to product cards for visual consistency with the design system. Cards now use primary style when selected and default style when unselected.
Temporarily bypass feature flag to always show the new welcome UI.
- Remove product selection, cards are now informational only - Update to 3-column grid layout for product cards - Reorder products: Error monitoring, Logging, Session replay (row 1); Metrics, Tracing, Profiling (row 2) - Add Seer section with illustration below products - Update copy with new messaging and trial info - Add footer text about free plan after trial ends
- Add bold prop (medium weight) to subtitle, trial info, and footer - Use size="lg" for subtitle and trial info line (16px) - Use default size (md/14px) for product and Seer descriptions
Move NewWelcomeUI and its related components to a dedicated file in the components folder for better code organization.
Replace custom styled components with core layout and typography primitives. Use Heading component for welcome title with 32px override, replace TrialInfoLine and PlusSeparator with Flex/Text components, and update card borders to muted variant with lg radius.
Use the Grid core component with responsive columns instead of a custom styled component. Also update IconSeer to use secondary variant and adjust welcome background breakpoint.
Add aria-label="Start" to the Next button so existing acceptance tests can locate the button using [aria-label="Start"] selector.
Replace aria-label selector with data-test-id for the welcome start button in both legacy and new UI. This provides a stable test selector that works with both UIs without requiring misleading aria-labels.
Remove margin auto and footer padding from NewWelcomeWrapper as the parent container now handles the layout spacing.
Update welcome page test to use getByTestId instead of getByLabelText for consistency with acceptance test changes.
Replace ProductTitle styled component with Text component using bold and density props. Update icon sizes to use legacySize for precise 16px sizing. Add density="comfortable" to text elements for better line height.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Adds a new onboarding welcome screen that allows users to select which Sentry products they want to set up. The new UI is feature-flagged behind
organizations:onboarding-new-welcome-ui.Changes:
GenericFooterpattern consistent with other onboarding stepsWelcomeBackgroundNewUivariant with adjusted positioning for the new layoutFeature flag:
organizations:onboarding-new-welcome-ui