feat(components, data-modeling): add portal version of the Drawer component; use new DrawerSection in data-modeling COMPASS-9610 (#7138)

* feat(components, data-modeling): add portal version of the Drawer component; use new DrawerSection in data-modeling

* chore(components): add order prop

* chore(data-modeling): remove extra padding; adjust tests

* chore(data-modeling): temporarily skip unit tests in electron runtime

Author: gribnoysup

package-lock.json

@@ -91,6 +91,7 @@
     "mongodb-query-util": "^2.5.3",
     "polished": "^4.2.2",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hotkeys-hook": "^4.3.7",
     "react-intersection-observer": "^8.34.0",
     "react-virtualized-auto-sizer": "^1.0.6",
@@ -110,7 +111,6 @@
     "chai": "^4.3.4",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
-    "react-dom": "^17.0.2",
     "sinon": "^9.0.0",
     "typescript": "^5.8.3"
   },

packages/compass-components/package.json

@@ -7,6 +7,7 @@ import { SignalHooksProvider } from './signal-popover';
 import { RequiredURLSearchParamsProvider } from './links/link';
 import { StackedComponentProvider } from '../hooks/use-stacked-component';
 import { ContextMenuProvider } from './context-menu';
+import { DrawerContentProvider } from './drawer-portal';
 
 type GuideCueProviderProps = React.ComponentProps<typeof GuideCueProvider>;
 
@@ -131,33 +132,35 @@ export const CompassComponentsProvider = ({
       darkMode={darkMode}
       popoverPortalContainer={popoverPortalContainer}
     >
-      <StackedComponentProvider zIndex={stackedElementsZIndex}>
-        <RequiredURLSearchParamsProvider
-          utmSource={utmSource}
-          utmMedium={utmMedium}
-        >
-          <GuideCueProvider
-            onNext={onNextGuideGue}
-            onNextGroup={onNextGuideCueGroup}
+      <DrawerContentProvider>
+        <StackedComponentProvider zIndex={stackedElementsZIndex}>
+          <RequiredURLSearchParamsProvider
+            utmSource={utmSource}
+            utmMedium={utmMedium}
           >
-            <SignalHooksProvider {...signalHooksProviderProps}>
-              <ConfirmationModalArea>
-                <ContextMenuProvider disabled={disableContextMenus}>
-                  <ToastArea>
-                    {typeof children === 'function'
-                      ? children({
-                          darkMode,
-                          portalContainerRef: setPortalContainer,
-                          scrollContainerRef: setScrollContainer,
-                        })
-                      : children}
-                  </ToastArea>
-                </ContextMenuProvider>
-              </ConfirmationModalArea>
-            </SignalHooksProvider>
-          </GuideCueProvider>
-        </RequiredURLSearchParamsProvider>
-      </StackedComponentProvider>
+            <GuideCueProvider
+              onNext={onNextGuideGue}
+              onNextGroup={onNextGuideCueGroup}
+            >
+              <SignalHooksProvider {...signalHooksProviderProps}>
+                <ConfirmationModalArea>
+                  <ContextMenuProvider disabled={disableContextMenus}>
+                    <ToastArea>
+                      {typeof children === 'function'
+                        ? children({
+                            darkMode,
+                            portalContainerRef: setPortalContainer,
+                            scrollContainerRef: setScrollContainer,
+                          })
+                        : children}
+                    </ToastArea>
+                  </ContextMenuProvider>
+                </ConfirmationModalArea>
+              </SignalHooksProvider>
+            </GuideCueProvider>
+          </RequiredURLSearchParamsProvider>
+        </StackedComponentProvider>
+      </DrawerContentProvider>
     </LeafyGreenProvider>
   );
 };