Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add getting started components #1517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elizabetdev wants to merge 20 commits into main
base: main
Choose a base branch
Loading
from getting-started-component
Open

Conversation

@elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Dec 22, 2025
edited
Loading

Summary

Implements a new "Getting Started" onboarding wizard to guide users through initial setup, including data ingestion and source configuration.

Changes

New Components

  • GettingStarted - Main onboarding wizard with custom vertical stepper
  • CredentialsTable - Displays endpoint/API key with copy and show/hide functionality
  • DemoBanner - Optional banner to explore demo project
  • Step - Reusable step component for the vertical stepper

Refactored Components

  • SourcesList - Moved to components/Sources/ for reuse across GettingStarted and TeamPage
    • Added configurable props: variant, withCard, withBorder, showEmptyState
  • SourceForm - Moved to components/Sources/ folder with updated import paths

Theme Enhancements

  • Added custom Mantine Button/ActionIcon variants: primary, secondary, danger
  • Replaced hardcoded hex colors with semantic CSS variables

Other Improvements

  • Added ErrorBoundary Storybook stories
  • Memory leak prevention in CredentialsTable (timeout cleanup)
  • Updated agent_docs/code_style.md with custom Mantine variants documentation

Screenshots

Add screenshots of the GettingStarted component in Step 1 and Step 2

Testing

  • Storybook stories render correctly
  • GettingStarted Step 1 displays system status and credentials
  • GettingStarted Step 2 displays sources list
  • Custom button variants work as expected
  • TeamPage still uses SourcesList correctly

Getting started

image

Button

image

ActionButton

image

...tion
This commit introduces a new Getting Started component, complete with a stepper interface for guiding users through data ingestion and configuration. It includes a dedicated SCSS module for styling and a Storybook setup for showcasing various states of the component. The component supports displaying system status and allows users to copy the endpoint and API key.
...pport
This update improves the Getting Started component by adding a stepper interface for guiding users through data ingestion and configuration. It introduces new styles for completed steps and integrates mock data for sources and connections in Storybook. The component now supports callbacks for user actions, enhancing interactivity and usability.
...u and SourceForm
This commit modifies the button styles in the ConfirmDeleteMenu to use a light variant with a red color for better visibility. Additionally, it enhances the SourceForm layout by replacing the previous button structure with a more streamlined design, incorporating a Flex container for better alignment and spacing. The GettingStarted component also sees updates with new icons and improved button styles for a more cohesive user experience.
...ariants
This commit introduces a new ActionIcon component with various size and variant examples in Storybook. Additionally, it enhances the Button component stories by adding new variants (primary, secondary, danger) and sizes, improving the overall showcase of button functionalities. The GettingStarted component's SCSS has also been cleaned up for better maintainability.
Copy link

changeset-bot bot commented Dec 22, 2025
edited
Loading

🦋 Changeset detected

Latest commit: 3e51f3c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@hyperdx/app Minor
@hyperdx/api Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Dec 22, 2025
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
hyperdx-v2-oss-app Ready Ready Preview, Comment Dec 24, 2025 3:49pm

Copy link

claude bot commented Dec 22, 2025
edited
Loading

PR Review

No critical issues found.

The PR successfully implements a well-structured onboarding wizard with proper separation of concerns. The code follows project patterns and demonstrates good practices:

Highlights:

  • Memory leak prevention in CredentialsTable with proper timeout cleanup (lines 27-36)
  • Good use of custom Mantine variants (primary, secondary, danger) as documented
  • Proper refactoring of SourcesList/SourceForm into reusable components with configurable props
  • Consistent error handling and loading states in SourcesList

Minor observations (non-blocking):

  • ErrorBoundary color change from orange to red is intentional and improves consistency
  • Custom button variants properly documented in code_style.md
  • Storybook stories are comprehensive and well-organized

Nice work on the implementation! 🚀

Copy link
Contributor

github-actions bot commented Dec 22, 2025
edited
Loading

E2E Test Results

All tests passed • 51 passed • 4 skipped • 688s

Status Count
✅ Passed 51
❌ Failed 0
⚠️ Flaky 0
⏭️ Skipped 4

Tests ran across 4 shards in parallel.

View full report →

... and update Storybook preview to include fontFamily in ThemeWrapper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

AltStyle によって変換されたページ (->オリジナル) /