use drawer

Author: paula-stacho

packages/compass-components/src/components/drawer/DrawerLayout/DrawerLayout.types.ts

@@ -44,5 +44,7 @@ export type DrawerLayoutPropsWithToolbar = Omit<
 } & BaseDrawerLayoutProps;
 
 export type DrawerLayoutProps =
-  | DrawerLayoutPropsWithToolbar
-  | DrawerLayoutPropsWithoutToolbar;
+  | ({
+      toolbarData: DrawerLayoutPropsWithToolbar['toolbarData'];
+    } & DrawerLayoutPropsWithToolbar)
+  | ({ toolbarData?: never } & DrawerLayoutPropsWithoutToolbar);

packages/compass-components/src/components/leafygreen.tsx

@@ -141,6 +141,7 @@ export {
   DrawerStackProvider,
   useDrawerStackContext,
   useDrawerToolbarContext,
+  type DrawerLayoutProps,
 } from './drawer';
 
 // 3. Export the leafygreen components.

packages/compass-data-modeling/src/components/data-modeling.tsx

@@ -1,35 +1,68 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import DiagramEditor from './diagram-editor';
 import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
 import { DiagramProvider } from '@mongodb-js/diagramming';
 import DiagramEditorSidePanel from './diagram-editor-side-panel';
+import {
+  DrawerDisplayMode,
+  DrawerLayout,
+  type DrawerLayoutProps,
+} from '@mongodb-js/compass-components';
+import { closeSidePanel } from '../store/side-panel';
 type DataModelingPluginInitialProps = {
   showList: boolean;
+  isSidePanelOpen: boolean;
+  onSidePanelClose: () => void;
 };
 
 const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
   showList,
+  onSidePanelClose,
 }) => {
+  const drawerToolbarData = useMemo<DrawerLayoutProps['toolbarData']>(
+    () => [
+      {
+        id: 'DiagramEditor',
+        label: 'Data Model',
+        content: <DiagramEditorSidePanel />,
+        title: 'Data Model',
+        glyph: 'Diagram',
+        onClose: onSidePanelClose,
+      },
+    ],
+    [onSidePanelClose]
+  );
+
   return (
     <>
       {showList ? (
         <SavedDiagramsList></SavedDiagramsList>
       ) : (
-        <DiagramProvider fitView>
-          <DiagramEditor />
-          <DiagramEditorSidePanel />
-        </DiagramProvider>
+        <DrawerLayout
+          displayMode={DrawerDisplayMode.Overlay}
+          toolbarData={drawerToolbarData}
+        >
+          <DiagramProvider fitView>
+            <DiagramEditor />
+          </DiagramProvider>
+        </DrawerLayout>
       )}
       <NewDiagramFormModal></NewDiagramFormModal>
     </>
   );
 };
 
-export default connect((state: DataModelingState) => {
-  return {
-    showList: state.step === 'NO_DIAGRAM_SELECTED',
-  };
-})(DataModeling);
+export default connect(
+  (state: DataModelingState) => {
+    return {
+      showList: state.step === 'NO_DIAGRAM_SELECTED',
+      isSidePanelOpen: state.sidePanel.isOpen,
+    };
+  },
+  {
+    onSidePanelClose: closeSidePanel,
+  }
+)(DataModeling);

packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx

@@ -1,19 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { closeSidePanel } from '../store/side-panel';
 import {
-  Button,
   css,
   cx,
-  Body,
   spacing,
   palette,
   useDarkMode,
-  DrawerLayout,
-  DrawerDisplayMode,
-  useDrawerToolbarContext,
-  Drawer,
 } from '@mongodb-js/compass-components';
 
 const containerStyles = css({
@@ -25,63 +18,27 @@ const containerStyles = css({
   alignItems: 'center',
   justifyContent: 'center',
   gap: spacing[400],
-  borderLeft: `1px solid ${palette.gray.light2}`,
 });
 
 const darkModeContainerStyles = css({
   borderLeftColor: palette.gray.dark2,
 });
 
-type DiagramEditorSidePanelProps = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const DRAWER_TOOLBAR_DATA: DrawerLayoutProps['toolbarData'] = [
-  {
-    id: 'Code',
-    label: 'Code',
-    content: <DrawerContent />,
-    title: 'Code Title',
-    glyph: 'Code',
-    onClick: () => {
-      console.log('Code clicked');
-    },
-  },
-];
-
-function DiagmramEditorSidePanel({
-  isOpen,
-  onClose,
-}: DiagramEditorSidePanelProps) {
+function DiagramEditorSidePanel() {
   const isDarkMode = useDarkMode();
-  // const { openDrawer } = useDrawerToolbarContext();
 
-  // useEffect(() => {
-  //   if (isOpen) {
-  //     console.log('OPENING SIDE PANEL');
-  //     openDrawer("DiagramEditorSidePanel");
-  //   }
-  // }, [isOpen, openDrawer]);
+  // TODO: this is a placeholder for the side panel content.
 
   return (
     <div className={cx(containerStyles, isDarkMode && darkModeContainerStyles)}>
-      <Drawer title="Diagram Editor" open={isOpen} onClose={onClose}>
-        <Body>Under development...</Body>
-        <Button onClick={onClose}>Close</Button>
-      </Drawer>
+      This feature is under development.
     </div>
   );
 }
 
-export default connect(
-  (state: DataModelingState) => {
-    const { sidePanel } = state;
-    return {
-      isOpen: sidePanel.isOpen,
-    };
-  },
-  {
-    onClose: closeSidePanel,
-  }
-)(DiagmramEditorSidePanel);
+export default connect((state: DataModelingState) => {
+  const { sidePanel } = state;
+  return {
+    isOpen: sidePanel.isOpen,
+  };
+})(DiagramEditorSidePanel);