diff --git a/src/components/Welcome/Welcome.test.tsx b/src/components/Welcome/Welcome.test.tsx index c6f223c1..4e1511c6 100644 --- a/src/components/Welcome/Welcome.test.tsx +++ b/src/components/Welcome/Welcome.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, render } from '@testing-library/react' import { describe, expect, it, vi } from 'vitest' +import { ConfigProvider } from '../../hooks/useConfig.js' import Welcome from './Welcome.js' describe('Welcome Component', () => { @@ -64,4 +65,18 @@ describe('Welcome Component', () => { fireEvent.keyDown(window, { key: 'Enter' }) expect(onClose).not.toHaveBeenCalled() }) + + it('renders custom content and button text', () => { + const onClose = vi.fn() + const customContent =

Custom welcome message

+ const customButtonText = 'Custom Got it' + const { getByText } = render( + + + + ) + + expect(getByText('Custom welcome message')).toBeDefined() + expect(getByText('Custom Got it')).toBeDefined() + }) }) diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx index b7db76e7..659fdcb3 100644 --- a/src/components/Welcome/Welcome.tsx +++ b/src/components/Welcome/Welcome.tsx @@ -12,7 +12,7 @@ interface WelcomePopupProps { * Clicking outside the popup or pressing Escape will dismiss it. */ export default function Welcome({ onClose }: WelcomePopupProps) { - const { customClass } = useConfig() + const { customClass, welcome } = useConfig() // Close popup when clicking outside function handleBackdropClick(e: MouseEvent) { if (e.target === e.currentTarget) { @@ -35,18 +35,20 @@ export default function Welcome({ onClose }: WelcomePopupProps) { return (
-

npx hyperparam

-

+ {welcome?.content ?? <> +

npx hyperparam

+

This is the Hyperparam cli for local data viewing. -

-

+

+

This tool lets you browse and explore large datasets particularly in parquet format. -

-

+

+

Supported file types include Parquet, CSV, JSON, Markdown, and Text. -

+

+ }
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts index bca51bc2..6cb6d4c2 100644 --- a/src/hooks/useConfig.ts +++ b/src/hooks/useConfig.ts @@ -1,4 +1,4 @@ -import { createContext, useContext } from 'react' +import { ReactNode, createContext, useContext } from 'react' /** * Config is a flat object of key-value pairs. @@ -37,6 +37,10 @@ export interface Config { minWidth?: number defaultWidth?: number } + welcome?: { + content?: ReactNode + buttonText?: string + } } const ConfigContext = createContext({})