refactor(atomic): migrate atomic-insight-user-actions-toggle to Lit #6879
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
Co-authored-by: alexprudhomme <78121423+alexprudhomme@users.noreply.github.com>
…tions-toggle Co-authored-by: alexprudhomme <78121423+alexprudhomme@users.noreply.github.com>
Co-authored-by: alexprudhomme <78121423+alexprudhomme@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Migrate atomic insight user actions toggle component
feat(atomic): migrate atomic-insight-user-actions-toggle to Lit
Jan 2, 2026
alexprudhomme
changed the title
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR successfully migrates the atomic-insight-user-actions-toggle component from Stencil to Lit. The component displays a button that opens a modal containing user actions timeline, designed for Insight Panel interfaces.
Key Changes
- Migrated component from Stencil (
.tsx) to Lit (.ts) using modern decorators and patterns - Replaced Stencil's
IconButtonwith the Lit functionalrenderIconButtoncomponent - Added comprehensive unit tests using Vitest and E2E tests using Playwright
- Created Storybook documentation (
.mdxfile) and stories
Reviewed changes
Copilot reviewed 10 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
atomic-insight-user-actions-toggle.ts |
New Lit implementation with proper decorators, bindings, and error guards |
atomic-insight-user-actions-toggle.tsx |
Removed legacy Stencil implementation |
atomic-insight-user-actions-toggle.pcss |
Removed (no longer needed with shadow DOM component) |
atomic-insight-user-actions-toggle.spec.ts |
New comprehensive unit tests covering initialization, rendering, and modal interaction |
atomic-insight-user-actions-toggle.new.stories.tsx |
Storybook stories with MSW API mocking |
atomic-insight-user-actions-toggle.mdx |
Component documentation for Storybook |
e2e/atomic-insight-user-actions-toggle.e2e.ts |
Playwright E2E tests for button visibility and modal interaction |
e2e/page-object.ts |
Page object pattern for E2E test interactions |
e2e/fixture.ts |
E2E test fixtures and setup |
user-actions-controller.ts |
New test helper fixture for mocking UserActions controller |
lazy-index.ts |
Added lazy loading entry for the migrated component |
index.ts |
Added component export |
custom-element-tags.ts |
Registered new custom element tag |
components.d.ts |
Auto-generated type definitions updated (Stencil types removed) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
.../components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.ts
Show resolved
Hide resolved
.../components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.ts
Show resolved
Hide resolved
.../components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.ts
Show resolved
Hide resolved
developer-experience-bot
bot
temporarily deployed
to
Prerelease (CDN)
alexprudhomme
added
the
cross-team
louis-bompart
approved these changes
Jan 7, 2026
| import {errorGuard} from '@/src/decorators/error-guard'; | ||
| import type {InitializableComponent} from '@/src/decorators/types'; | ||
| import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles.js'; | ||
| import Clockicon from '@/src/images/clock.svg'; |
Collaborator
There was a problem hiding this comment.
nit;
Suggested change
| import Clockicon from '@/src/images/clock.svg'; | |
| import ClockIcon from '@/src/images/clock.svg'; |
.../components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.ts
Outdated
Show resolved
Hide resolved
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
Prerelease (CDN)
GitHub Actions
Inactive
alexprudhomme
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
alexprudhomme
added
the
high-confidence
fbeaudoincoveo
approved these changes
Jan 8, 2026
|
|
||
| private buttonRef?: HTMLButtonElement; | ||
| private modalRef?: HTMLAtomicInsightUserActionsModalElement; | ||
|
|
Contributor
There was a problem hiding this comment.
It's lacking prop validation.
Not the end of the world since the component is currently considered "internal" I suppose.
| {excludeCategories: ['methods']} | ||
| ); | ||
|
|
||
| const meta: Meta = { |
Contributor
There was a problem hiding this comment.
The modal renders outside of the insight panel in the Docs page in storybook when the toggle button is clicked. I'm not sure why.
Contributor
There was a problem hiding this comment.
Also, why are there no user actions available? Looking at the mock response it seems like it should include actions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✅ Checklist
.mdxfileindex.tsandlazy-index.tsfiles.https://coveord.atlassian.net/browse/KIT-5362