How to properly extend MedusaJS v2 product detail page with custom drawer routes?

[radeknapora]

Issue Description

I'm trying to extend the existing MedusaJS v2 product detail page by adding a custom drawer route that overlays on top of the original product page content. However, I'm experiencing issues with the routing setup where either:

1. The drawer opens but shows a blank page instead of overlaying on the product content
2. I get 404 errors when trying to access the base product route
3. The drawer opens as a separate route instead of overlaying

Current Setup

Project Structure:

src/admin/routes/products/[id]/
└── @edites/
    └── page.tsx

Custom Drawer Component (@edites/page.tsx):

import { Heading } from "@medusajs/ui"
import { RouteDrawer } from "../../../../components/modals"

const ProductEditesDrawer = () => {
  return (
    <RouteDrawer>
      <RouteDrawer.Header>
        <RouteDrawer.Title asChild>
          <Heading>Edit Product Customization Options</Heading>
        </RouteDrawer.Title>
        <RouteDrawer.Description asChild>
          <span className="sr-only">
            Edit the customization options for this product
          </span>
        </RouteDrawer.Description>
      </RouteDrawer.Header>
      <RouteDrawer.Body className="flex flex-col gap-y-6 overflow-y-auto">
        <div className="flex flex-col gap-y-4">
          <p>Product customization options form will go here</p>
        </div>
      </RouteDrawer.Body>
    </RouteDrawer>
  )
}

export default ProductEditesDrawer

Questions

1. What's the correct way to extend an existing MedusaJS admin page while preserving the original content and functionality?

2. How should I structure the routing to have:

   • /a/products/123 → Show original MedusaJS product detail page
   • /a/products/123/edites → Show original page + drawer overlay

3. Should I be using widgets instead of route overrides for this use case? If so, how do I create a widget that can open a drawer with custom forms?

4. How do I properly import/reference the original MedusaJS product detail component if I need to wrap it with additional functionality?

Expected Behavior

When navigating to /a/products/123/edites, I expect:

• The original MedusaJS product detail page to be visible in the background
• My custom drawer to overlay on top with the form content
• When closing the drawer, return to the base product route with original content intact

Environment

• MedusaJS version: v2.x
• Admin SDK version: Latest
• Framework: React with React Router

Additional Context

I've explored the MedusaJS dashboard source code and see that the original ProductDetail component uses TwoColumnPage with hasOutlet={true}, but I'm struggling to understand the proper way to extend this functionality without breaking the original page.

Any guidance on the recommended approach for extending admin pages with custom drawer routes would be greatly appreciated!