Skip to content

feat(aci): Add onboarding banner#112737

Merged
malwilley merged 4 commits intomasterfrom
malwilley/onboarding-banner
Apr 10, 2026
Merged

feat(aci): Add onboarding banner#112737
malwilley merged 4 commits intomasterfrom
malwilley/onboarding-banner

Conversation

@malwilley
Copy link
Copy Markdown
Member

@malwilley malwilley commented Apr 10, 2026

Closes ISWF-2160

Figma designs (not perfectly matching - I changed the tour link to a Button, we don't have any design system components that make a button look just like a link, for good reason)

Note that I did find a bug with the prompts-activity endpoint. There is a PR here to fix it: #112738

CleanShot 2026-04-10 at 13 17 33@2x

Replace inline link-priority button with a proper xs button for the tour
action and an ExternalLink for the docs link. This gives better visual
hierarchy and avoids the bold-text issue with priority="link" buttons.

Also increases gap between banner text and actions for better spacing.
@linear-code
Copy link
Copy Markdown

linear-code bot commented Apr 10, 2026

@malwilley malwilley requested review from a team as code owners April 10, 2026 20:31
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 10, 2026
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I extracted the modal part of this into a separate component so I could use it in both the banner and info button

>
<AlertsRedirectNotice>
{t('Alert Rules have been moved to Monitors and Alerts.')}
</AlertsRedirectNotice>
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This old redirect notice is being replaced with the new banner

@malwilley malwilley removed the request for review from a team April 10, 2026 20:33
trackAnalytics('monitors.onboarding_modal_viewed', {organization, step: 0});
openModal(deps => <AlertsMonitorsShowcase {...deps} />, {
modalCss: (theme: Theme) => css`
width: 490px;
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.

should we use a variable for this so it works on mobile as well? (not sure if we just do a full width on the showcase for mobile or not -- seems like a reasonable deafult if we wanted it)

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Modals do have a max-width: 100% style so this should work on mobile

CleanShot 2026-04-10 at 14 55 41@2x

@malwilley malwilley merged commit 4a058cc into master Apr 10, 2026
65 checks passed
@malwilley malwilley deleted the malwilley/onboarding-banner branch April 10, 2026 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants