DO NOT MERGE: Click UI test #1639

elizabetdev · 2026-01-22T14:48:36Z

⚠️ This is a test PR - Do not merge to main. This PR is for testing Click UI integration with the HyperDX/ClickStack codebase.

🔗 Preview

View Vercel Preview →

Summary

This PR tests replacing Mantine UI components with Click UI components to evaluate compatibility and identify migration issues.

- Add @punkbit/cui and styled-components dependencies - Integrate ClickUIProvider alongside MantineProvider in ThemeWrapper - Both providers share the same colorScheme for consistent theming

…mproved styling and functionality - Replace Textarea with TextAreaField from @punkbit/cui in AutocompleteInput - Refactor Popover component usage for better accessibility and styling - Simplify SearchInputV2 by removing unnecessary Group component for the Docs link - Introduce ClickUIThemeVars component to inject Click UI theme values as CSS variables - Update semantic colors to utilize Click UI CSS variables for dynamic theming

…ility - Introduced a new document detailing issues and limitations when migrating from Mantine UI to Click UI components. - Updated `DBSearchPage.tsx` to replace Mantine components with Click UI equivalents, addressing known issues such as icon prop types and button behavior. - Added a new `ClickStackLogo` component to replace the deprecated `Icon` component across various files. - Adjusted styles in `AppNav` and other components to align with Click UI standards.

- Added new versions of `@punkbit/cui`, `styled-components`, and other related packages in `yarn.lock` and `package.json`. - Updated import paths in various components to directly use `@punkbit/cui` instead of the deprecated `/bundled` path. - Enhanced `AutocompleteInput` to address `Popover.Trigger` width issues and ensure proper styling in flex layouts. - Documented known issues and workarounds in migration notes for Click UI components.

- Prevent Popover.Trigger from toggling on click to manage open state via focus. - Add event handlers to prevent default actions on auto-focus and mouse down events for better control. - Improve user experience by ensuring suggestions and history selections do not trigger unintended actions.

…sues - Added a note indicating that the Click UI Select component is not migrated due to dropdown functionality issues. - Documented the current workaround using Mantine Select and outlined attempted approaches to resolve the issue. - Updated `SelectControlled.tsx` to reflect the decision to retain Mantine Select until Click UI Select is functional. - Adjusted migration notes to include a new search tag for the Select component issue.

- Updated @punkbit/cui to version 0.0.251-rc.16 in package.json. - Adjusted various package versions in yarn.lock, including @babel/runtime, styled-components, react-syntax-highlighter, and others for improved compatibility and performance.

…ect and TextField - Replaced the Mantine Select component with CUISelect in DBSearchPage for live tail refresh frequency selection. - Updated TimePicker component to use TextField instead of TextInput, enhancing the input handling and styling. - Improved event handling for the TextField to support Enter and Escape key actions.

changeset-bot · 2026-01-22T14:48:40Z

⚠️ No Changeset found

Latest commit: 86a8697

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2026-01-22T14:48:41Z

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview, Comment	Jan 30, 2026 0:19am

claude · 2026-01-22T14:51:42Z

PR Review - Click UI Migration Test

Critical Issues

❌ Multiple as any type casts (DBSearchPage.tsx:285, 507, 1693, TimePicker.tsx) → Violates project's strict TypeScript policy. Create typed wrapper components instead.
⚠️ Dead code: isFormStateDirty prop in SearchSubmitButton is unused → Remove unused prop and parameter.
⚠️ Incomplete migration: Multiple // TODO: CLICK-UI size="xs" comments → Complete sizing implementation or document deferral reason.
⚠️ Missing validation: TextAreaField.onChange in AutocompleteInput.tsx:154 assumes string without validation → Add type guard.
🎨 Direct style manipulation in TimePicker.tsx:250-253 bypasses Click UI theme system → Use proper theme integration.

Observations

✅ Migration documentation is thorough and transparent about Click UI limitations
✅ ClickUIThemeVars.tsx shows good theme bridging pattern
✅ ClickStackLogo.tsx is well-structured (though unused in this PR)

Recommendation

The as any casts eliminate TypeScript safety benefits that are critical to this project. Before merging, either:

Create properly-typed wrapper components around Click UI
Contribute type improvements to Click UI library
Document these as acceptable technical debt with team consensus

Note: This appears to be marked as a test PR - if this is exploratory work not intended for production, some issues may be acceptable for evaluation purposes.

github-actions · 2026-01-22T14:52:04Z

E2E Test Results

❌ 2 tests failed • 58 passed • 4 skipped • 999s

Status	Count
✅ Passed	58
❌ Failed	2
⚠️ Flaky	1
⏭️ Skipped	4

Tests ran across 4 shards in parallel.

View full report →

- Changed import statements for ClickStackLogo in Logo, OnboardingChecklist, and Spotlights components to use named exports. - This improves consistency and aligns with the updated module structure.

- Changed the import statement in the Logo component to use ClickStackIcon instead of ClickStackLogo, aligning with the updated module structure.

elizabetdev · 2026-01-22T17:36:30Z

@copilot can you replace the package @punkbit/cui@0.0.251-rc.16 with @clickhouse/click-ui@0.0.251-rc.16

Copilot · 2026-01-22T17:36:39Z

@elizabetdev I've opened a new pull request, #1642, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elizabetdev <2750668+elizabetdev@users.noreply.github.com>

elizabetdev · 2026-01-29T17:48:39Z

@copilot can you replace the package @clickhouse/click-ui@0.0.251-rc.16 with @clickhouse/click-ui@0.0.251-rc.17

Copilot · 2026-01-29T17:48:48Z

@elizabetdev I've opened a new pull request, #1679, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elizabetdev <2750668+elizabetdev@users.noreply.github.com>

…ker component - Removed duplicate import of TextField from @clickhouse/click-ui. - Added type safety comments for onChange and onKeyDown handlers to address TypeScript errors.

- Eliminated outdated TypeScript error comments for onChange and onKeyDown handlers in the TimePicker component to improve code clarity and maintainability.

elizabetdev added 11 commits January 11, 2026 11:48

feat(app): add Click UI library with provider integration

f1dda42

- Add @punkbit/cui and styled-components dependencies - Integrate ClickUIProvider alongside MantineProvider in ThemeWrapper - Both providers share the same colorScheme for consistent theming

fix: correct prop name in SourceSelect component

a6b9a83

Merge branch 'main' into add-cui-test

905e576

Merge branch 'main' into add-cui-test

fad2d58

refactor: Update imports for ClickStackLogo in multiple components

e2df9c6

- Changed import statements for ClickStackLogo in Logo, OnboardingChecklist, and Spotlights components to use named exports. - This improves consistency and aligns with the updated module structure.

vercel bot had a problem deploying to Preview January 22, 2026 15:01 Failure

refactor: Update Logo component to use ClickStackIcon

d9e76b5

- Changed the import statement in the Logo component to use ClickStackIcon instead of ClickStackLogo, aligning with the updated module structure.

vercel bot deployed to Preview January 22, 2026 15:24 View deployment

Copilot AI mentioned this pull request Jan 22, 2026

Replace @punkbit/cui with @clickhouse/click-ui package #1642

Merged

Replace @punkbit/cui with @clickhouse/click-ui package (#1642)

da5620d

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elizabetdev <2750668+elizabetdev@users.noreply.github.com>

vercel bot deployed to Preview January 22, 2026 17:56 View deployment

Copilot AI mentioned this pull request Jan 29, 2026

Update @clickhouse/click-ui to 0.0.251-rc.17 #1679

Merged

Update @clickhouse/click-ui to 0.0.251-rc.17 (#1679)

06b7ba5

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elizabetdev <2750668+elizabetdev@users.noreply.github.com>

vercel bot deployed to Preview January 29, 2026 18:00 View deployment

Merge branch 'main' into add-cui-test

2505993

vercel bot deployed to Preview January 30, 2026 11:54 View deployment

fix: Correct TextField import and add type safety comments in TimePic…

fe9334b

…ker component - Removed duplicate import of TextField from @clickhouse/click-ui. - Added type safety comments for onChange and onKeyDown handlers to address TypeScript errors.

vercel bot had a problem deploying to Preview January 30, 2026 12:06 Failure

fix: Remove TypeScript error comments in TimePicker component

86a8697

- Eliminated outdated TypeScript error comments for onChange and onKeyDown handlers in the TimePicker component to improve code clarity and maintainability.

vercel bot deployed to Preview January 30, 2026 12:19 View deployment

elizabetdev mentioned this pull request Jan 30, 2026

fix: 🐛 minimal react 19 and rsc support ClickHouse/click-ui#756

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DO NOT MERGE: Click UI test #1639

DO NOT MERGE: Click UI test #1639

Uh oh!

elizabetdev commented Jan 22, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

claude bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

elizabetdev commented Jan 22, 2026

Uh oh!

Copilot AI commented Jan 22, 2026

Uh oh!

elizabetdev commented Jan 29, 2026

Uh oh!

Copilot AI commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DO NOT MERGE: Click UI test #1639

Are you sure you want to change the base?

DO NOT MERGE: Click UI test #1639

Uh oh!

Conversation

elizabetdev commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Preview

Summary

Uh oh!

changeset-bot bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review - Click UI Migration Test

Critical Issues

Observations

Recommendation

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

elizabetdev commented Jan 22, 2026

Uh oh!

Copilot AI commented Jan 22, 2026

Uh oh!

elizabetdev commented Jan 29, 2026

Uh oh!

Copilot AI commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

elizabetdev commented Jan 22, 2026 •

edited

Loading

changeset-bot bot commented Jan 22, 2026 •

edited

Loading

vercel bot commented Jan 22, 2026 •

edited

Loading

claude bot commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading