[WIP] feat: Experiments V2 wizard + Warehouse Connection Settings UI#7195
Draft
talissoncosta wants to merge 9 commits intomainfrom
Draft
[WIP] feat: Experiments V2 wizard + Warehouse Connection Settings UI#7195talissoncosta wants to merge 9 commits intomainfrom
talissoncosta wants to merge 9 commits intomainfrom
Conversation
The docs page canvas preview, toolbar, and controls table were rendering with white backgrounds in dark mode. This was caused by Storybook's emotion-styled components overriding our theme. - Add reactive DocsContainer that switches theme on toolbar toggle - Use react-docgen-typescript for proper prop name extraction - Target .sb-anchor, .docblock-argstable, and toolbar for dark backgrounds - Improve contrast for prop table text in dark mode Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… stories Implements the Experiments V2 UI from the Pencil designs as separated, modular React components with mock data. This is the frontend scaffolding for the new experiment creation wizard and results dashboard. ## Architecture Components are organised into four layers: - `wizard/` — Reusable wizard primitives (Layout, Sidebar, StepIndicator, Header, NavButtons). Zero experiment knowledge — can be reused for any future multi-step wizard. - `shared/` — Experiment-specific building blocks (SelectableCard, VariationTable, TrafficSplitBar, StatusBadge, ExperimentStatCard, MetricsComparisonTable). - `steps/` — Five wizard step components, each a pure presentation component receiving state via props. - `flag-detail/` — LinkedExperimentSection for the feature flag detail page. ## Pages - **CreateExperimentPage** (`/experiments/create`) — 5-step wizard: 1. Experiment Details (name, hypothesis, type) 2. Select Metrics (search, primary/secondary) 3. Flag & Variations (flag dropdown, variation table) 4. Audience & Traffic (segment, traffic slider, split bar) 5. Review & Launch (summary with edit buttons) - **ExperimentResultsPage** (`/experiments/:experimentId`) — Dashboard with stat cards (users enrolled, winning variation, probability, lift) and metrics comparison table. ## Storybook 19 stories under `Experiments/` with interactive controls and light/dark mode support. Wizard components are nested under `Experiments/Wizard/`. A composed `Wizard` story demonstrates all primitives working together. ## Notes - All data is mock/fake — no API calls yet. Mock data is centralised in `types.ts` for easy replacement with RTK Query hooks later. - Routes gated behind `experimental_flags` feature flag. - Global `Select` (react-select) registered in Storybook preview for SearchableSelect compatibility. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Input.js uses window.Utils without importing it (set in web/main.js at app boot). Chromatic builds failed because this global wasn't available in the Storybook context. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace hardcoded font-size (11-28px) with semantic tokens (--font-caption-xs-size through --font-h3-size) - Replace hardcoded font-weight (400-700) with tokens (--font-weight-regular through --font-weight-bold) - Replace hardcoded JetBrains Mono with var(--font-family) - Replace hardcoded #ffffff with var(--color-surface-default) - Fix SelectableCard border-width shift (1px→2px) using inset box-shadow for unselected state and 2px transparent border always - Add box-shadow: var(--shadow-sm) to cards and tables for depth - Add flex-wrap to stat cards row for tablet responsiveness Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ck state - Pre-populate wizard with realistic mock data (name, hypothesis, type, 3 metrics, flag, segment) so the review step looks complete on first visit - Show hypothesis in a styled block instead of truncated key-value - Show experiment type with icon badge - Show metrics with name + description + role badge - Show variations with coloured dots and value badges - Show traffic split visualisation bar with labels - All using semantic tokens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…d config - Add experiment timeline progress bar (day 23 of 30) - Add recommendation callout with green success styling - Add experiment configuration grid (type, flag, audience, traffic) - All values using semantic tokens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
## Shared Animation Foundation Introduces the `motion` library (v12.38) as the standard for JS-driven animations in the frontend, alongside existing CSS motion tokens. - `common/utils/motion.ts` — 10 reusable motion presets (fadeIn, slideInRight, staggerContainer, springBounce, shakeX, badgeEntrance, pageCrossfade, etc.) - `web/styles/_animations.scss` — CSS keyframes (shake, spin, fade-in, pulse) and mixins (focus-ring, input-error-shake, spinner) - `documentation/MotionPresets.stories.tsx` — Interactive Storybook demos ## Warehouse Connection Settings New "Data Warehouse" settings page with 5 states and animated transitions: - **Empty** — CTA to connect, fade-in entrance - **Config Form** — Snowflake/BigQuery/Databricks type selector, connection form fields, slide-in-right entrance via motion - **Testing** — Spinner + staggered progress steps via motion stagger presets - **Connected** — Status card with spring-bounce icon, badge entrance, staggered stats, connection details grid - **Error** — Shake animation on error card, error message box, retry State transitions use AnimatePresence with pageCrossfade for smooth crossfades. All values use semantic design tokens. Mock data for showcase purposes. ## Storybook Fix Replace `window.Utils` import (caused circular dependency crash) with minimal mock providing only the functions Input.js actually calls. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…obals - Remove cosmetic motion animations (fadeIn, slideInRight, springBounce, shakeX, badgeEntrance, AnimatePresence crossfade) from warehouse components. Keep only the functional stagger on TestingState progress steps. - Add warehouse route at /organisation/:organisationId/warehouse - Stub common/utils/utils in Storybook webpack to fix circular dep crash - Register all legacy prop-type globals (OptionalString, RequiredFunc, etc.) in Storybook preview for Input.js compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The svg colour rule was applying to all descendant svgs, including the icon inside the CTA button, causing poor contrast on primary buttons. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
bot
added
front-end
Contributor
Docker builds report
|
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
|
Contributor
Visual Regression16 screenshots compared. See report for details. |
talissoncosta
changed the title
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
docs/if required so people know about the feature.Changes
Contributes to the Experiments V2 and Data Warehouse features
1. Storybook Dark Mode Fixes
The Storybook docs page had white backgrounds in dark mode on the canvas preview, toolbar, and controls table.
.sb-anchor,.docblock-argstable, and toolbar backgroundsreact-docgen-typescriptfor proper prop name extraction in controlsReact,propTypes,OptionalString, etc.) forInput.jscompatibilityutils → account-store → constants)2. Experiments V2 — Wizard + Results Dashboard
Full frontend scaffolding for the new experiment creation wizard and results dashboard, built from Pencil designs with mock data.
Architecture — 4 layers under
web/components/experiments-v2/:wizard/shared/steps/flag-detail/Pages:
/experiments/create) — 5-step wizard: Details → Metrics → Flags & Variations → Audience & Traffic → Review & Launch/experiments/:experimentId) — Stat cards, recommendation callout, metrics comparison table, experiment config grid, timeline progressRoutes gated behind
experimental_flagsfeature flag.3. Data Warehouse Connection Settings
New settings page with 5 states, built from Pencil designs with mock data.
SelectableCard)motionlibrary usage — functional, not cosmetic)Route:
/organisation/:organisationId/warehouse4. Shared Infrastructure
common/utils/motion.ts) — 10 reusable animation variants (fadeIn, slideInRight, staggerContainer, springBounce, shakeX, etc.). Foundation for gradual motion adoption.web/styles/_animations.scss) — Shared keyframes (shake, spin, fade-in, pulse) + mixins (focus-ring, spinner, input-error-shake)5. Design Quality
--font-body-size,--font-weight-semibold,--color-text-default, etc.box-shadow: var(--shadow-sm)on cards and tables for depthflex-wrapon stat cards for tablet responsivenessHow to demo
In the app
ENV=local npm run dev/experiments/create→ step through the 5-step wizard (pre-populated with mock data)/experiments/exp-1→ stat cards, recommendation, metrics table/organisation/{orgId}/warehouse→ click "Connect Data Warehouse" → Config Form → "Test Connection" → Testing (3s) → Connected or Error (random)In Storybook
npm run storybookAutomated
npx eslint— 0 errors on all new filesnpm run typecheck— 0 type errors in experiments-v2 and warehousenpx storybook build --test— builds successfullyNotes
types.tsfiles for easy replacement with RTK Query hooks.SelectableCardandStatusBadgeare shared across both features.🤖 Generated with Claude Code