Update Drawers to do a proper focus trap (#1290)

Improves user reported issues that clicking outside the modal would click elements unexpectedly, also improves accessibility (keyboard focus trap & esc to exit)

Fixes HDX-2642

Author: brandon-pereira

.changeset/happy-spies-tickle.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+improve drawer a11y

packages/app/package.json

@@ -84,7 +84,6 @@
     "react-hotkeys-hook": "^4.3.7",
     "react-json-tree": "^0.17.0",
     "react-markdown": "^8.0.4",
-    "react-modern-drawer": "^1.2.0",
     "react-papaparse": "^4.4.0",
     "react-query": "^3.39.3",
     "react-select": "^5.7.0",

packages/app/src/KubernetesDashboardPage.tsx

@@ -51,8 +51,6 @@ import { parseTimeQuery, useTimeQuery } from './timeQuery';
 import { KubePhase } from './types';
 import { formatNumber, formatUptime } from './utils';
 
-import 'react-modern-drawer/dist/index.css';
-
 const makeId = () => Math.floor(100000000 * Math.random()).toString(36);
 
 const getKubePhaseNumber = (phase: string) => {

packages/app/src/NamespaceDetailsSidePanel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Link from 'next/link';
-import Drawer from 'react-modern-drawer';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
 import { TSource } from '@hyperdx/common-utils/dist/types';
@@ -9,6 +8,7 @@ import {
   Badge,
   Box,
   Card,
+  Drawer,
   Flex,
   Grid,
   ScrollArea,
@@ -334,14 +334,17 @@ export default function NamespaceDetailsSidePanel({
 
   return (
     <Drawer
-      enableOverlay
-      overlayOpacity={0.1}
-      duration={0}
-      open={!!namespaceName}
+      opened={!!namespaceName}
       onClose={handleClose}
-      direction="right"
-      size={'80vw'}
+      position="right"
+      size="80vw"
+      withCloseButton={false}
       zIndex={drawerZIndex}
+      styles={{
+        body: {
+          padding: 0,
+        },
+      }}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel}>

packages/app/src/NodeDetailsSidePanel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Link from 'next/link';
-import Drawer from 'react-modern-drawer';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
 import {
@@ -12,6 +11,7 @@ import {
   Badge,
   Box,
   Card,
+  Drawer,
   Flex,
   Grid,
   ScrollArea,
@@ -350,14 +350,17 @@ export default function NodeDetailsSidePanel({
 
   return (
     <Drawer
-      enableOverlay
-      overlayOpacity={0.1}
-      duration={0}
-      open={!!nodeName}
+      opened={!!nodeName}
       onClose={handleClose}
-      direction="right"
-      size={'80vw'}
+      position="right"
+      size="80vw"
+      withCloseButton={false}
       zIndex={drawerZIndex}
+      styles={{
+        body: {
+          padding: 0,
+        },
+      }}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel} data-testid="k8s-node-details-panel">

packages/app/src/PodDetailsSidePanel.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Link from 'next/link';
-import Drawer from 'react-modern-drawer';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
 import { TSource } from '@hyperdx/common-utils/dist/types';
 import {
   Anchor,
   Box,
   Card,
+  Drawer,
   Flex,
   Grid,
   ScrollArea,
@@ -342,14 +342,18 @@ export default function PodDetailsSidePanel({
 
   return (
     <Drawer
-      enableOverlay={rowId == null}
-      overlayOpacity={0.1}
-      duration={0}
-      open={!!podName}
+      opened={!!podName}
       onClose={handleClose}
-      direction="right"
+      position="right"
       size={isNested ? '70vw' : '80vw'}
+      withCloseButton={false}
       zIndex={drawerZIndex}
+      styles={{
+        body: {
+          padding: 0,
+          height: '100vh',
+        },
+      }}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel} data-testid="k8s-pod-details-panel">

packages/app/src/SessionSidePanel.tsx

@@ -2,22 +2,20 @@ import { useState } from 'react';
 import { Button } from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useHotkeys } from 'react-hotkeys-hook';
-import Drawer from 'react-modern-drawer';
 import {
   DateRange,
   SearchCondition,
   SearchConditionLanguage,
   TSource,
 } from '@hyperdx/common-utils/dist/types';
+import { Drawer } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
 import { Session } from './sessions';
 import SessionSubpanel from './SessionSubpanel';
 import { formatDistanceToNowStrictShort } from './utils';
 import { ZIndexContext } from './zIndex';
 
-import 'react-modern-drawer/dist/index.css';
-
 export default function SessionSidePanel({
   traceSource,
   sessionSource,
@@ -74,20 +72,24 @@ export default function SessionSidePanel({
 
   return (
     <Drawer
-      customIdSuffix={`session-side-panel-${sessionId}`}
-      duration={0}
-      overlayOpacity={0.5}
-      open={sessionId != null}
+      opened={sessionId != null}
       onClose={() => {
         if (!subDrawerOpen) {
           onClose();
         }
       }}
-      direction="right"
-      size={'82vw'}
-      style={{ background: '#0F1216' }}
-      className="border-start border-dark"
+      position="right"
+      size="82vw"
+      withCloseButton={false}
       zIndex={zIndex}
+      styles={{
+        body: {
+          padding: 0,
+          background: '#0F1216',
+          height: '100vh',
+        },
+      }}
+      className="border-start border-dark"
     >
       <ZIndexContext.Provider value={zIndex}>
         <div className="d-flex flex-column h-100">

packages/app/src/components/DBRowSidePanel.tsx

@@ -12,10 +12,9 @@ import { isString } from 'lodash';
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useHotkeys } from 'react-hotkeys-hook';
-import Drawer from 'react-modern-drawer';
 import { TSource } from '@hyperdx/common-utils/dist/types';
 import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
-import { Box, OptionalPortal, Stack } from '@mantine/core';
+import { Box, Drawer, Stack } from '@mantine/core';
 import { useClickOutside } from '@mantine/hooks';
 
 import DBRowSidePanelHeader, {
@@ -36,7 +35,6 @@ import { RowOverviewPanel } from './DBRowOverviewPanel';
 import { DBSessionPanel, useSessionId } from './DBSessionPanel';
 import DBTracePanel from './DBTracePanel';
 
-import 'react-modern-drawer/dist/index.css';
 import styles from '@/../styles/LogSidePanel.module.scss';
 
 export type RowSidePanelContextProps = {
@@ -504,52 +502,57 @@ export default function DBRowSidePanelErrorBoundary({
   }, ['mouseup', 'touchend']);
 
   return (
-    <OptionalPortal withinPortal={!isNestedPanel}>
-      <Drawer
-        data-testid="row-side-panel"
-        customIdSuffix={`log-side-panel-${rowId}`}
-        duration={300}
-        open={rowId != null}
-        onClose={() => {
-          if (!subDrawerOpen) {
-            _onClose();
-          }
-        }}
-        direction="right"
-        size={`${width}vw`}
-        zIndex={drawerZIndex}
-        enableOverlay={subDrawerOpen}
-      >
-        <ZIndexContext.Provider value={drawerZIndex}>
-          <div className={styles.panel} ref={drawerRef}>
-            <Box className={styles.panelDragBar} onMouseDown={startResize} />
-
-            <ErrorBoundary
-              fallbackRender={error => (
-                <Stack>
-                  <div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent p-4">
-                    An error occurred while rendering this event.
-                  </div>
-
-                  <div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
-                    {error?.error?.message}
-                  </div>
-                </Stack>
-              )}
-            >
-              <DBRowSidePanel
-                source={source}
-                rowId={rowId}
-                onClose={_onClose}
-                isNestedPanel={isNestedPanel}
-                breadcrumbPath={breadcrumbPath}
-                setSubDrawerOpen={setSubDrawerOpen}
-                onBreadcrumbClick={onBreadcrumbClick}
-              />
-            </ErrorBoundary>
-          </div>
-        </ZIndexContext.Provider>
-      </Drawer>
-    </OptionalPortal>
+    <Drawer
+      opened={rowId != null}
+      withCloseButton={false}
+      withinPortal={!isNestedPanel}
+      onClose={() => {
+        if (!subDrawerOpen) {
+          _onClose();
+        }
+      }}
+      position="right"
+      size={`${width}vw`}
+      styles={{
+        body: {
+          padding: '0',
+          height: '100vh',
+        },
+      }}
+      zIndex={drawerZIndex}
+    >
+      <ZIndexContext.Provider value={drawerZIndex}>
+        <div
+          className={styles.panel}
+          ref={drawerRef}
+          data-testid="row-side-panel"
+        >
+          <Box className={styles.panelDragBar} onMouseDown={startResize} />
+          <ErrorBoundary
+            fallbackRender={error => (
+              <Stack>
+                <div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent p-4">
+                  An error occurred while rendering this event.
+                </div>
+
+                <div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
+                  {error?.error?.message}
+                </div>
+              </Stack>
+            )}
+          >
+            <DBRowSidePanel
+              source={source}
+              rowId={rowId}
+              onClose={_onClose}
+              isNestedPanel={isNestedPanel}
+              breadcrumbPath={breadcrumbPath}
+              setSubDrawerOpen={setSubDrawerOpen}
+              onBreadcrumbClick={onBreadcrumbClick}
+            />
+          </ErrorBoundary>
+        </div>
+      </ZIndexContext.Provider>
+    </Drawer>
   );
 }

packages/app/src/components/DBRowTable.tsx

@@ -897,6 +897,7 @@ export const RawLogTable = memo(
                                   <DBRowTableFieldWithPopover
                                     cellValue={cellValue}
                                     wrapLinesEnabled={wrapLinesEnabled}
+                                    tableContainerRef={tableContainerRef}
                                     columnName={
                                       (cell.column.columnDef.meta as any)
                                         ?.column

packages/app/src/components/DBTable/DBRowTableFieldWithPopover.tsx

@@ -15,12 +15,14 @@ export interface DBRowTableFieldWithPopoverProps {
   cellValue: unknown;
   wrapLinesEnabled: boolean;
   columnName?: string;
+  tableContainerRef?: React.RefObject<HTMLDivElement>;
   isChart?: boolean;
 }
 
 export const DBRowTableFieldWithPopover = ({
   children,
   cellValue,
+  tableContainerRef,
   wrapLinesEnabled,
   columnName,
   isChart = false,
@@ -151,7 +153,7 @@ export const DBRowTableFieldWithPopover = ({
         position="top-start"
         offset={5}
         opened={opened}
-        zIndex={1}
+        portalProps={{ target: tableContainerRef?.current ?? undefined }}
       >
         <Popover.Target>
           <span