Skip to content

Add getting started components#1517

Closed
elizabetdev wants to merge 22 commits intomainfrom
getting-started-component
Closed

Add getting started components#1517
elizabetdev wants to merge 22 commits intomainfrom
getting-started-component

Conversation

@elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Dec 22, 2025

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.
@changeset-bot
Copy link

changeset-bot bot commented Dec 22, 2025

🦋 Changeset detected

Latest commit: 40709c5

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

@vercel
Copy link

vercel bot commented Dec 22, 2025

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 Jan 5, 2026 0:10am

@claude
Copy link

claude bot commented Dec 22, 2025

PR Review

No critical issues found.

The implementation is well-structured with good attention to detail:

Highlights:

  • Memory leak prevention in CredentialsTable with timeout cleanup (lines 27-36)
  • Proper TypeScript typing throughout
  • Custom Mantine variants documented in code_style.md
  • Good component reusability (SourcesList refactored for multiple use cases)
  • ErrorBoundary improvements with better UX

Minor notes (non-blocking):

  • SourcesList.tsx:244 - "Add source" button always shows even when empty state is hidden (showEmptyState=false). Consider making button visibility configurable if needed.
  • GettingStarted.tsx:152 - Button uses variant="light" instead of custom variants, which is fine but inconsistent with other buttons using custom variants.

Overall: Clean implementation following project patterns. Ready to merge.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 22, 2025

E2E Test Results

All tests passed • 54 passed • 4 skipped • 734s

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

Tests ran across 4 shards in parallel.

View full report →

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant