UI: Fix args not preserved in isolation mode

[sijie-Z]

fixes #35047

What I did

Fixed the "Open in isolation mode" button to preserve the args query parameter when opening the iframe URL. Added
inheritArgs: true to the getStoryHrefs call in share.tsx.

Manual testing

1. Run a sandbox: yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser
3. Select a story and modify its args
4. Click "Open in isolation mode" from the top right menu
5. Verify the iframe URL contains the args parameter

Summary by CodeRabbit

• Bug Fixes

  • Isolation mode now includes inherited arguments when opening a story in isolation, so shared/opened pages reflect current control values.

• Tests

  • Added end-to-end test verifying that editing controls updates the preview URL and that the opened isolation page preserves those args and rendered content.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Isolation mode tool now requests origin hrefs with inherited args enabled. A new e2e test verifies that opening a story in isolation mode preserves the story's updated argument values in both the isolated window URL and rendered content.

Changes

Isolation Mode Tool + Test

Layer / File(s)	Summary
Isolation mode tool — inherit args in href generation code/core/src/manager/components/preview/tools/share.tsx	The api.getStoryHrefs call adds inheritArgs: true to the options, ensuring the generated origin preview href includes inherited argument values in the isolation-mode action payload.
E2E test: isolation mode preserves args code/e2e-sandbox/manager.spec.ts	New Playwright test updates a story control value, opens the story in isolation mode, and verifies the isolated window URL and rendered content both preserve the updated argument.

Sequence Diagram(s)

sequenceDiagram
  participant Manager
  participant API
  participant Window
  Manager->>API: getStoryHrefs(storyId, { base: 'origin', refId, inheritArgs: true })
  API-->>Manager: originHrefs (previewHref includes inherited args)
  Manager->>Window: window.open(originHrefs.previewHref, ...)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#33766: The share.tsx change to generate originHrefs.previewHref with inherited args directly affects the SHARE_ISOLATE_MODE event payload emitted by telemetry tracking.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sijie-Z]

Hi maintainers! This is my first contribution. I don't have permission to add labels. Could you please add the
following labels:

• bug
• ci:normal
• qa:needed

The manual testing section is already included in the PR description. Thank you!

[Sidnioulz]

Thanks for the PR. Could you please add an E2E test to the test suite in core, that shows this bug is fixed?

[storybook-app-bot]

Package Benchmarks

^{Commit: 129c631, ran on 15 June 2026 at 06:55:41 UTC}

No significant changes detected, all good. 👏

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/e2e-tests/manager.spec.ts`:
- Line 252: The test's page.waitForURL call assumes spaces are encoded as '+'
(e.g. 'args=label:Hello+world') which can be '%20' in some environments; update
the wait/assertion around page.waitForURL to be encoding-agnostic by retrieving
the URL (via page.url() or by using page.waitForURL with a predicate), decoding
the query component (using decodeURIComponent on the query or parsing with
URLSearchParams), and then asserting that the decoded 'args' value equals or
includes 'label:Hello world' (or alternatively use a regex in page.waitForURL
that accepts both '\\+' and '%20' for the page.waitForURL call referencing the
same 'args=label:Hello+world' literal).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c033ebc3-9fe3-4b20-aaa3-d0959fa50896

📥 Commits

Reviewing files that changed from the base of the PR and between e97d99b and cb7c3be.

📒 Files selected for processing (1)

• code/e2e-tests/manager.spec.ts

[sijie-Z]

@coderabbitai Fixed the URL encoding assumption. Now using decodeURIComponent to handle both + and %20
encodings.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
cat code/e2e-tests/manager.spec.ts | grep -A 50 -B 5 "isolation mode preserves\|Isolation mode\|decodeURIComponent\|inheritArgs\|args"

Length of output: 3802

---

---

@sijie-Z Thanks for the update! The fix looks good — decodeURIComponent is applied consistently in both the waitForURL callback and the final assertion, which correctly handles percent-encoded spaces (%20). Note that URLSearchParams.get() already decodes both + and %20 to plain spaces, so the decodeURIComponent call is a safe extra layer that makes the intent explicit without any side effects. The test logic is solid.

---

🧠 Learnings used

Learnt from: psychobolt
Repo: storybookjs/storybook PR: 0
File: :0-0
Timestamp: 2026-03-21T17:23:03.931Z
Learning: In storybookjs/storybook PR `#34025`, `code/addons/vitest/src/vitest-plugin/index.ts` has a Windows-specific bug: `previewOrConfigFile` (an absolute filesystem path like `d:\...\preview.ts`) is incorrectly passed through `import.meta.resolve()`, which only accepts package specifiers or `file://` URLs, causing `TypeError: The URL must be of scheme file` on Windows with CSF4 setups. The fix is to check `path.isAbsolute(filePath)` and return absolute paths as-is, only calling `fileURLToPath(import.meta.resolve(filePath))` for package specifiers.

---

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

---

If you found this review helpful, would you consider giving us a shout-out on X?

Thank you for using CodeRabbit!

[sijie-Z]

@Sidnioulz Done! Added the E2E test. Also addressed the CodeRabbit feedback about URL encoding — now using
decodeURIComponent for robust assertions.

[Sidnioulz]

Could you please check the E2E test failures in CI? Thanks!

[sijie-Z]

@Sidnioulz Thanks for catching that. The issue was waitForLoadState() — it only waits for the HTML to load, not for the Storybook preview JS to render the story. Fixed by explicitly waiting for #storybook-root button to appear before asserting.

[sijie-Z]

@Sidnioulz Hi! I've fixed the E2E test failures. CI checks seem stuck — could you help re-trigger the workflow when you get a chance? Thanks!

[Sidnioulz]

@Sidnioulz Hi! I've fixed the E2E test failures. CI checks seem stuck — could you help re-trigger the workflow when you get a chance? Thanks!

I'm on it! Thanks for the ping!

[Sidnioulz]

@sijie-Z did you manage to run the E2E tests locally, by the way? Would you like some help / instructions to know how to run them locally on your machine?

[sijie-Z]

Yep, just ran them. Looks like the test is failing because customQueryParams isn't updated yet when the button is clicked. I'll fix the test and push an update.

[sijie-Z]

@Sidnioulz I dug into this a bit more.

customQueryParams is updated from the STORY_ARGS_UPDATED handler via requestIdleCallback (with a 1000ms timeout), so the update is intentionally deferred.

I also noticed that the isolation link's mapper only subscribes to api, storyId, and refId, not customQueryParams. The href is then computed during render via getStoryHrefs(...) and reused from the click handler.

Given that, I think the failing test may be exposing a real issue in how updated args are propagated to the isolation link, rather than being purely a timing issue in the test.

Does that match your understanding, or am I missing another path that would cause the link to be recomputed?

[sijie-Z]

Fixed and updated.

The original isolation-mode issue is now resolved, and the related dev/e2e checks are passing.

The remaining CircleCI failure appears to be unrelated to this change and comes from SvelteKit sandbox creation (No svelte.config.js or svelte.config.ts found).

[Sidnioulz]

Does that match your understanding, or am I missing another path that would cause the link to be recomputed?

Sorry I missed your reply! Don't hesitate to come have a discussion on https://discord.gg/invite/storybook (channel #contributing) if we miss your questions on an open PR. We get a lot of notifications so we occasionally miss a few.

I don't know this product area well enough. I can ask the rest of the team if you're stuck, but it looks like you've updated your PR since so I'm first gonna review that :)