fix: fix empty background under Drawer

Author: dziraf

src/frontend/components/app/drawer-portal.tsx

@@ -20,10 +20,14 @@ export type DrawerPortalProps = {
   width?: number | string | Array<number | string>;
 }
 
+export type DrawerWrapperProps = {
+  onMount: () => void;
+}
+
 const DRAWER_PORTAL_ID = 'drawerPortal'
 const DRAWER_PORTAL_WRAPPER_ID = 'drawerPortalWrapper'
 
-const DrawerWrapper = ({ onMount }) => {
+const DrawerWrapper: React.FC<DrawerWrapperProps> = ({ onMount }) => {
   useEffect(() => {
     onMount()
   }, [])
@@ -34,7 +38,7 @@ const DrawerWrapper = ({ onMount }) => {
   )
 }
 
-const createPortalContainer = (id: string) => {
+const getOrCreatePortalContainer = (id: string) => {
   let container = document.getElementById(id)
 
   if (!container) {
@@ -68,7 +72,7 @@ export const DrawerPortal: React.FC<DrawerPortalProps> = ({ children, width }) =
   }
 
   useEffect(() => {
-    const innerWrapperElement = createPortalContainer(DRAWER_PORTAL_WRAPPER_ID)
+    const innerWrapperElement = getOrCreatePortalContainer(DRAWER_PORTAL_WRAPPER_ID)
     if (!drawerElement && window) {
       const drawerRoot = createRoot(innerWrapperElement)
       drawerRoot.render(<DrawerWrapper onMount={handleDrawerMount} />)

src/frontend/components/application.tsx

@@ -42,12 +42,29 @@ const App: React.FC = () => {
   const recordId = ':recordId'
   const pageName = ':pageName'
 
+  const dashboardUrl = h.dashboardUrl()
   const recordActionUrl = h.recordActionUrl({ resourceId, recordId, actionName })
   const resourceActionUrl = h.resourceActionUrl({ resourceId, actionName })
   const bulkActionUrl = h.bulkActionUrl({ resourceId, actionName })
   const resourceUrl = h.resourceUrl({ resourceId })
   const pageUrl = h.pageUrl(pageName)
 
+  /**
+   * When defining AdminJS routes, we use Routes component twice.
+   * This results in warnings appearing in console, for example about not being able to locate
+   * "/admin" route. They can be safely ignored though and should appear only
+   * in development environment. The warnings originate from the difference between
+   * "Switch" component that AdminJS had used in "react-router" v5 which was later replaced
+   * with "Routes" in "react-router" v6. "Switch" would use the first "Route" component
+   * that matched the provided path, while "Routes" searches for the best matching pattern.
+   * In AdminJS we use "DrawerPortal" to display actions in a drawer when
+   * "showInDrawer" option is set to true. The drawer should appear above the currently viewed
+   * page, but "Routes" broke this behavior because it instead showed a record action route with
+   * an empty background.
+   * The current flow is that first "Routes" component includes "Resource" route component
+   * for drawer-placed actions and the second "Routes" is entered for record actions
+   * on a separate page.
+   */
   return (
     <>
       <Reset />
@@ -60,17 +77,19 @@ const App: React.FC = () => {
         ) : null}
         <Sidebar isVisible={sidebarVisible} />
         <Box flex flexGrow={1} flexDirection="column" overflowY="auto" bg="bg">
-          <TopBar toggleSidebar={(): void => toggleSidebar(!sidebarVisible)} />
+          <TopBar toggleSidebar={() => toggleSidebar(!sidebarVisible)} />
           <Box position="absolute" top={0} zIndex={2000}>
             <Notice />
           </Box>
           <Routes>
-            <Route path={h.dashboardUrl()} element={<Dashboard />} />
             <Route path={`${resourceUrl}/*`} element={<Resource />} />
             <Route path={pageUrl} element={<Page />} />
-            <Route path={`${recordActionUrl}/*`} element={<RecordAction />} />
+            <Route path={dashboardUrl} element={<Dashboard />} />
+          </Routes>
+          <Routes>
             <Route path={`${resourceActionUrl}/*`} element={<ResourceAction />} />
             <Route path={`${bulkActionUrl}/*`} element={<BulkAction />} />
+            <Route path={`${recordActionUrl}/*`} element={<RecordAction />} />
           </Routes>
         </Box>
       </Box>

yarn.lock

@@ -3611,9 +3611,9 @@ camelize@^1.0.0:
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
 caniuse-lite@^1.0.30001280:
-  version "1.0.30001283"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001283.tgz#8573685bdae4d733ef18f78d44ba0ca5fe9e896b"
-  integrity sha512-9RoKo841j1GQFSJz/nCXOj0sD7tHBtlowjYlrqIUS812x9/emfBLBt6IyMz1zIaYc/eRL8Cs6HPUVi2Hzq4sIg==
+  version "1.0.30001393"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz"
+  integrity sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==
 
 capture-stack-trace@^1.0.0:
   version "1.0.1"