feat(onboarding): Add Copy as Markdown button to product empty states #107860
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
…Markdown Adds utility functions to convert OnboardingStep[]/ContentBlock[] arrays into clean Markdown and plain text. Uses renderToStaticMarkup + a custom lightweight HTML-to-Markdown converter (no external deps like Turndown). Handles all ContentBlock types: text, code (single + tabbed), alert, subheader, list, conditional, and custom blocks.
Adds CopyAsDropdown to Logs, Metrics, Profiling, Performance/Traces, and Agent Monitoring empty states. Users can copy all onboarding steps (install + configure + verify) as Markdown or plain text for pasting into LLMs. Analytics events track copy usage per source.
… states Extend the CopyAsDropdown button to MCP monitoring, Issues (UpdatedEmptyState), Feedback sidebar, Session Replay sidebar, Releases, and Cron Monitoring onboarding surfaces. Also adds <pre><code> fenced code block handling to simpleHtmlToMarkdown for the Crons renderToStaticMarkup approach.
…ng surfaces Copy as Markdown/Text was including all tab variants (npm/yarn/pnpm) instead of only the user's selected tab. This adds a SelectedCodeTabContext that syncs tab selection from TabbedCodeSnippet to stepsToMarkdown, so copied output respects the active tab. Tabbed blocks now default to the first tab when no selection has been made. Also extracts a reusable OnboardingCopyAsDropdown component to reduce boilerplate across 11 call sites, and adds CopyAsDropdown to 3 surfaces that were missing it: performance sidebar, profiling sidebar, and feature flag onboarding.
github-actions
bot
added
the
Scope: Frontend
jaydgoss
commented
Feb 9, 2026
static/app/components/feedback/feedbackOnboarding/feedbackOnboardingLayout.tsx
Show resolved
Hide resolved
jaydgoss
commented
Feb 9, 2026
jaydgoss
commented
Feb 9, 2026
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
static/app/components/onboarding/gettingStartedDoc/utils/stepsToMarkdown.tsx
Fixed
Show fixed
Hide fixed
jaydgoss
commented
Feb 9, 2026
static/app/components/onboarding/gettingStartedDoc/utils/stepsToMarkdown.tsx
Show resolved
Hide resolved
jaydgoss
commented
Feb 9, 2026
static/app/components/onboarding/gettingStartedDoc/selectedCodeTabContext.tsx
Show resolved
Hide resolved
…im releases copy - Loop HTML tag stripping to prevent nested tag reassembly (security bot feedback) - Remove hardcoded preface from releases promo copy output
The Copy as Markdown/Text feature was copying the raw ___ORG_AUTH_TOKEN___ placeholder instead of the actual generated token. Now reads the token from AuthTokenGeneratorContext and substitutes it in code blocks.
… Markdown When text blocks use tct() with components like <Link> or <ExternalLink> that require router context, renderToStaticMarkup throws. The catch block was returning '' — silently dropping the text. Now falls back to walking the React element tree directly, preserving text and links.
Use React.PropsWithChildren for component prop types so children is optional (passed via third arg to React.createElement).
… button
Simplify the copy UI from a dropdown with Markdown/Text options to a single
"Copy as Markdown" button with a tooltip ("Let an LLM do all the work instead").
Users overwhelmingly want Markdown for LLM use, so a single-click button is
better UX than a dropdown.
The stepsToText function and its helper stripMarkdownFormatting had no production consumers, causing the knip --production check to fail.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 Copy as Markdown / Text button to all product onboarding empty states, allowing users to copy SDK setup instructions for use with AI coding agents or documentation.
stepsToMarkdownutility that convertsOnboardingStep[]to clean Markdown (with fenced code blocks, links, lists, alerts)CopyAsDropdownto 14 onboarding surfaces across Issues, Performance, Profiling, Metrics, Logs, Agents, MCP, Feedback, Replay, Feature Flags, and sidebar drawersSelectedCodeTabContextto sync tab selection betweenTabbedCodeSnippetand the copy functionOnboardingCopyAsDropdowncomponent to reduce boilerplate across all call sitesSurfaces with Copy as button
Product empty state pages: Issues, Performance/Tracing, Profiling, Metrics, Logs, Agent Monitoring, MCP
Sidebar drawers: Performance sidebar, Profiling sidebar
Onboarding layouts (rendered in sidebars): Feedback, Replay, Feature Flags
Other: Releases promo, Cron monitor quick start guide
Test plan
CI=true pnpm test stepsToMarkdown.spec.tsx— 48 tests passingpnpm run lint:js— clean on all modified filespnpm run typecheck— passes/insights/backend/#performance-sidequest→ verify CopyAsDropdown appears in sidebar