revert data modeling changes

paula-stacho · paula-stacho · commit e1fa9017e486 · 2025-07-18T11:47:56.000+02:00
diff --git a/packages/compass-data-modeling/src/components/data-modeling.tsx b/packages/compass-data-modeling/src/components/data-modeling.tsx
@@ -1,68 +1,35 @@
-import React, { useMemo } from 'react';
+import React 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>
       ) : (
-        <DrawerLayout
-          displayMode={DrawerDisplayMode.Overlay}
-          toolbarData={drawerToolbarData}
-        >
-          <DiagramProvider fitView>
-            <DiagramEditor />
-          </DiagramProvider>
-        </DrawerLayout>
+        <DiagramProvider fitView>
+          <DiagramEditor />
+          <DiagramEditorSidePanel />
+        </DiagramProvider>
       )}
       <NewDiagramFormModal></NewDiagramFormModal>
     </>
   );
 };
 
-export default connect(
-  (state: DataModelingState) => {
-    return {
-      showList: state.step === 'NO_DIAGRAM_SELECTED',
-      isSidePanelOpen: state.sidePanel.isOpen,
-    };
-  },
-  {
-    onSidePanelClose: closeSidePanel,
-  }
-)(DataModeling);
+export default connect((state: DataModelingState) => {
+  return {
+    showList: state.step === 'NO_DIAGRAM_SELECTED',
+  };
+})(DataModeling);
diff --git a/packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx b/packages/compass-data-modeling/src/components/diagram-editor-side-panel.tsx
@@ -1,9 +1,12 @@
 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,
@@ -18,27 +21,44 @@ const containerStyles = css({
   alignItems: 'center',
   justifyContent: 'center',
   gap: spacing[400],
+  borderLeft: `1px solid ${palette.gray.light2}`,
 });
 
 const darkModeContainerStyles = css({
   borderLeftColor: palette.gray.dark2,
 });
 
-function DiagramEditorSidePanel() {
-  const isDarkMode = useDarkMode();
-
-  // TODO: this is a placeholder for the side panel content.
+type DiagramEditorSidePanelProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
 
+function DiagmramEditorSidePanel({
+  isOpen,
+  onClose,
+}: DiagramEditorSidePanelProps) {
+  const isDarkMode = useDarkMode();
+  if (!isOpen) {
+    return null;
+  }
   return (
     <div className={cx(containerStyles, isDarkMode && darkModeContainerStyles)}>
-      This feature is under development.
+      <Body>This feature is under development.</Body>
+      <Button onClick={onClose} variant="primary" size="small">
+        Close Side Panel
+      </Button>
     </div>
   );
 }
 
-export default connect((state: DataModelingState) => {
-  const { sidePanel } = state;
-  return {
-    isOpen: sidePanel.isOpen,
-  };
-})(DiagramEditorSidePanel);
+export default connect(
+  (state: DataModelingState) => {
+    const { sidePanel } = state;
+    return {
+      isOpen: sidePanel.isOpen,
+    };
+  },
+  {
+    onClose: closeSidePanel,
+  }
+)(DiagmramEditorSidePanel);
