Skip to content

fix(dashboard): Isolate PageContext in asset picker dialog#4439

Open
grolmus wants to merge 1 commit intovendurehq:masterfrom
grolmus:fix/oss-406-asset-picker-dialog-context
Open

fix(dashboard): Isolate PageContext in asset picker dialog#4439
grolmus wants to merge 1 commit intovendurehq:masterfrom
grolmus:fix/oss-406-asset-picker-dialog-context

Conversation

@grolmus
Copy link
Collaborator

@grolmus grolmus commented Feb 27, 2026

Summary

  • Wraps AssetPickerDialog content in isolated PageContext.Provider to prevent parent page context leakage
  • Fixes issue where custom action bar items registered for detail pages appeared inside the asset picker dialog

Root Cause

React Context propagates through Radix Dialog portals. When AssetPickerDialog opened on a detail page, it inherited the parent's PageContext (including pageId). Extension action bar items registered for that pageId were then incorrectly rendered inside the dialog.

Test plan

  • Open a detail page with custom action bar buttons (e.g., via dashboard extension)
  • Click an asset field to open the asset picker dialog
  • Verify only the "Upload" button appears, not the detail page's custom actions

Fixes OSS-406

Wraps AssetPickerDialog content in an isolated PageContext.Provider
to prevent parent page context (pageId, entity, form) from leaking
into the dialog. This fixes an issue where custom action bar items
registered for detail pages were incorrectly appearing inside the
asset picker dialog.

Fixes OSS-406
@vercel
Copy link

vercel bot commented Feb 27, 2026

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

Project Deployment Actions Updated (UTC)
vendure-storybook Ready Ready Preview, Comment Feb 27, 2026 1:57pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 27, 2026

📝 Walkthrough

Walkthrough

The change involves wrapping the dialog content of an asset picker component with a PageContext provider. An import for PageContext was added, and the JSX structure was reorganized to place the DialogContent, DialogHeader, AssetGallery, and DialogFooter elements inside the new PageContext.Provider wrapper. The provider is initialized with an empty value object. The component's public API and props remain unchanged. This is a structural refactoring focused on the internal rendering context.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: isolating PageContext in the asset picker dialog to fix context leakage issues.
Description check ✅ Passed The description includes a comprehensive summary with root cause analysis and test plan, covering the why and how of the fix, though the checklist items are unchecked.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/dashboard/src/lib/components/shared/asset/asset-picker-dialog.tsx (1)

82-82: Consider using a stable reference for the empty context value.

Passing value={{}} creates a new object on every render, which could cause unnecessary re-renders of any memoized context consumers inside the dialog. A stable reference would be more efficient:

♻️ Suggested improvement

Define a constant outside the component:

const EMPTY_PAGE_CONTEXT = {};

Then use it:

-            <PageContext.Provider value={{}}>
+            <PageContext.Provider value={EMPTY_PAGE_CONTEXT}>

The empty object is type-compatible with PageContextValue since all properties are optional.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/dashboard/src/lib/components/shared/asset/asset-picker-dialog.tsx`
at line 82, PageContext.Provider is being passed a new empty object literal
(value={{}}) on every render which can cause needless re-renders; define a
stable constant (e.g. EMPTY_PAGE_CONTEXT) outside the component with the same
empty-object shape and replace value={{}} with value={EMPTY_PAGE_CONTEXT} so
consumers receive a stable reference (ensure the constant is typed to
PageContextValue if needed).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/dashboard/src/lib/components/shared/asset/asset-picker-dialog.tsx`:
- Line 82: PageContext.Provider is being passed a new empty object literal
(value={{}}) on every render which can cause needless re-renders; define a
stable constant (e.g. EMPTY_PAGE_CONTEXT) outside the component with the same
empty-object shape and replace value={{}} with value={EMPTY_PAGE_CONTEXT} so
consumers receive a stable reference (ensure the constant is typed to
PageContextValue if needed).

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a055385 and d404eed.

📒 Files selected for processing (1)
  • packages/dashboard/src/lib/components/shared/asset/asset-picker-dialog.tsx

Copy link
Collaborator

@biggamesmallworld biggamesmallworld left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review — one suggestion

Clean fix for the Radix portal context propagation issue. The approach is correct and minimal.

💡 Suggestion: Add a comment explaining the PageContext.Provider isolation

The wrapper at line 82 exists purely to prevent parent page extension action bar items from leaking into the dialog via Radix portal context propagation. Without a comment, a future developer might remove it while "cleaning up" and reintroduce the bug. Something like:

{/* Isolate from parent PageContext to prevent extension action bar items
    registered for the parent page from rendering inside this dialog.
    See OSS-406. */}
<PageContext.Provider value={{}}>

Optionally, hoisting to const EMPTY_PAGE_CONTEXT = {}; at module scope would avoid a new object reference per render (minor, since this is a short-lived modal).

LGTM otherwise 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants