[WIP] feat: Experiments V2 wizard + Warehouse Connection Settings UI#7195
Draft
talissoncosta wants to merge 16 commits intomainfrom
Draft
[WIP] feat: Experiments V2 wizard + Warehouse Connection Settings UI#7195talissoncosta wants to merge 16 commits intomainfrom
talissoncosta wants to merge 16 commits intomainfrom
Conversation
![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
talissoncosta
force-pushed
the
feat/experiments-v2
branch
from
aa7f863 to
f5d5561
Compare
… 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. 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. - **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. 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. - 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>
- 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>
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 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. 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>
Applied PO feedback from the experiments review meeting: - Rename user-facing "Audience" → "Segments" in the wizard step field, review step section header, wizard step title config, and the results-page config label. Internal types (AudienceConfig) kept as-is to avoid scope creep. - Remove the "Traffic Split" field from the wizard step — the split bar was auto-calculated per variation with no user control. Delete the TrafficSplitBar component (no other consumers) along with its SCSS and the now-unused `variations` prop + splits computation in AudienceTrafficStep. - Remove the "Export" button from the results page actions — PO flagged it as unused. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Applied PO feedback: - Only multi-variant flags are eligible for experiments. Added an `isMultiVariant: boolean` field to FlagOption, marked MOCK_FLAGS accordingly, and filter the selector's options so single-variant flags don't appear. Added a hint under the field explaining the constraint. - Added optional start/end date fields to ExperimentDetails. Rendered as side-by-side date inputs in the details step, surfaced in the review step's details section as a single "Dates" row. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
talissoncosta
force-pushed
the
feat/experiments-v2
branch
from
c21c964 to
bc17fda
Compare
All states are accessible via app routes — stories were redundant for validation. Routes: - /experiments/create (wizard) - /experiments/:id (results) - /organisation/:id/warehouse (connection flow) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show EmptyState component when no metrics exist, guiding users to create their first metric. Also replaced the inline search-empty div with EmptyState for consistency. Added `availableMetrics` prop (defaults to MOCK_METRICS) so the real API integration can pass the actual list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Renamed "Traffic Allocation" to "Experiment Enrollment" and added a visual breakdown showing Control (current flag value) vs Experiment (randomly assigned to variations) with their percentages. Makes it clear what happens to users not enrolled in the experiment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All wizard steps now handle the "no data" case with EmptyState: - Flag step: no multi-variant flags available - Segments step: no segments defined - Metrics step: already added (previous commit) These states are visible for UX validation when the mock data is cleared or the real API returns empty lists. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Entry point for the experiments flow — table with filter tabs (All/Running/Draft/Completed), search, status badges, linked flag display, and summary footer. Matches the V2 Dashboard design. Includes empty state for no experiments + search-empty state. Row click navigates to the experiment results page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reordered wizard: Flag & Variations → Details → Metrics → Segments → Review. Flag selection is now the first step, matching the natural dependency flow (flag drives variations, which affects metrics and segments). Removed the Experiment Type selector (A/B Test / Multivariate / Feature Flag) — the type is implied by the flag's variation count (2 = A/B, 3+ = multivariate). "Feature Flag" (on/off toggle) was contradictory since experiments require multi-variant flags. Updated ReviewLaunchStep section order and edit-step indices to match the new flow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show guidance when a flag has zero variations — "Add at least 2 variations (control + treatment) to run an experiment." Prevents users from proceeding without the minimum required variations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.
Changes
Contributes to the Experiments V2 and Data Warehouse features. Built with mock data from Pencil designs — ready for backend integration.
Experiments V2 — Wizard + Results Dashboard
5-step wizard for creating experiments + results dashboard.
Wizard steps:
Results dashboard — status badge, timeline progress, metric comparison table, variation breakdown.
PO feedback applied:
Warehouse Connection Settings
5-state connection flow: Empty → Config → Testing → Connected → Error. Route at
/organisation/:organisationId/warehouse.How to check
All states are accessible via routes:
/project/:projectId/environment/:environmentId/experiments/create/project/:projectId/environment/:environmentId/experiments/:experimentId/organisation/:organisationId/warehouseHow did you test this code?
ENV=local npm run dev→ navigate to the routes above to check all states