feat(data-modeling): add collection COMPASS-9655 (#7195)

Author: paula-stacho

configs/webpack-config-compass/src/index.ts

@@ -276,10 +276,10 @@ export function createElectronRendererConfig(
               writeToDisk: true,
             },
             client: {
-              overlay: {
-                errors: true,
-                warnings: false,
-              },
+              overlay:
+                process.env.DISABLE_DEVSERVER_OVERLAY === 'true'
+                  ? false
+                  : { warnings: false, errors: true, runtimeErrors: true },
             },
             https: false,
             hot: opts.hot,

package-lock.json

@@ -9,6 +9,8 @@ import {
   DrawerContentProvider,
   DrawerSection,
   DrawerAnchor,
+  useDrawerState,
+  useDrawerActions,
 } from './drawer-portal';
 import { expect } from 'chai';
 
@@ -162,4 +164,68 @@ describe('DrawerSection', function () {
       screen.getByTestId('lg-drawer')
     ).to.have.attribute('aria-hidden', 'true');
   });
+
+  it('can control drawer state via the hooks', async function () {
+    const ControlElement = () => {
+      const { isDrawerOpen } = useDrawerState();
+      const { openDrawer, closeDrawer } = useDrawerActions();
+      return (
+        <div>
+          <span data-testid="drawer-state">
+            {isDrawerOpen ? 'open' : 'closed'}
+          </span>
+          <button
+            data-testid="toggle-drawer"
+            onClick={
+              isDrawerOpen
+                ? () => closeDrawer()
+                : () => openDrawer('controlled-section')
+            }
+          >
+            {isDrawerOpen ? 'Hook Close drawer' : 'Hook Open drawer'}
+          </button>
+        </div>
+      );
+    };
+    render(
+      <DrawerContentProvider>
+        <ControlElement />
+        <DrawerAnchor>
+          <DrawerSection
+            id="unrelated-section"
+            label="Test section 1"
+            title="Test section 1"
+            glyph="Trash"
+          >
+            This is an unrelated section
+          </DrawerSection>
+          <DrawerSection
+            id="controlled-section"
+            label="Test section 2"
+            title="Test section 2"
+            glyph="Bell"
+          >
+            This is the controlled section
+          </DrawerSection>
+        </DrawerAnchor>
+      </DrawerContentProvider>
+    );
+
+    // Drawer is closed by default
+    expect(screen.getByTestId('drawer-state')).to.have.text('closed');
+
+    // Open the drawer
+    userEvent.click(screen.getByRole('button', { name: 'Hook Open drawer' }));
+    await waitFor(() => {
+      expect(screen.getByTestId('drawer-state')).to.have.text('open');
+      expect(screen.getByText('This is the controlled section')).to.be.visible;
+    });
+
+    // Close the drawer
+    userEvent.click(screen.getByRole('button', { name: 'Hook Close drawer' }));
+    await waitFor(() => {
+      expect(screen.getByTestId('drawer-state')).to.have.text('closed');
+      expect(screen.queryByText('This is the controlled section')).not.to.exist;
+    });
+  });
 });

packages/compass-components/src/components/drawer-portal.spec.tsx

@@ -32,6 +32,10 @@ type DrawerSectionProps = Omit<SectionData, 'content' | 'onClick'> & {
   order?: number;
 };
 
+type DrawerOpenStateContextValue = boolean;
+
+type DrawerSetOpenStateContextValue = (isOpen: boolean) => void;
+
 type DrawerActionsContextValue = {
   current: {
     openDrawer: (id: string) => void;
@@ -43,6 +47,12 @@ type DrawerActionsContextValue = {
 
 const DrawerStateContext = React.createContext<DrawerSectionProps[]>([]);
 
+const DrawerOpenStateContext =
+  React.createContext<DrawerOpenStateContextValue>(false);
+
+const DrawerSetOpenStateContext =
+  React.createContext<DrawerSetOpenStateContextValue>(() => {});
+
 const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
   current: {
     openDrawer: () => undefined,
@@ -89,6 +99,8 @@ export const DrawerContentProvider: React.FunctionComponent = ({
   children,
 }) => {
   const [drawerState, setDrawerState] = useState<DrawerSectionProps[]>([]);
+  const [drawerOpenState, setDrawerOpenState] =
+    useState<DrawerOpenStateContextValue>(false);
   const drawerActions = useRef({
     openDrawer: () => undefined,
     closeDrawer: () => undefined,
@@ -116,18 +128,26 @@ export const DrawerContentProvider: React.FunctionComponent = ({
 
   return (
     <DrawerStateContext.Provider value={drawerState}>
-      <DrawerActionsContext.Provider value={drawerActions}>
-        {children}
-      </DrawerActionsContext.Provider>
+      <DrawerOpenStateContext.Provider value={drawerOpenState}>
+        <DrawerSetOpenStateContext.Provider value={setDrawerOpenState}>
+          <DrawerActionsContext.Provider value={drawerActions}>
+            {children}
+          </DrawerActionsContext.Provider>
+        </DrawerSetOpenStateContext.Provider>
+      </DrawerOpenStateContext.Provider>
     </DrawerStateContext.Provider>
   );
 };
 
 const DrawerContextGrabber: React.FunctionComponent = ({ children }) => {
   const drawerToolbarContext = useDrawerToolbarContext();
   const actions = useContext(DrawerActionsContext);
+  const openStateSetter = useContext(DrawerSetOpenStateContext);
   actions.current.openDrawer = drawerToolbarContext.openDrawer;
   actions.current.closeDrawer = drawerToolbarContext.closeDrawer;
+  useEffect(() => {
+    openStateSetter(drawerToolbarContext.isDrawerOpen);
+  }, [drawerToolbarContext.isDrawerOpen, openStateSetter]);
   return <>{children}</>;
 };
 
@@ -321,3 +341,14 @@ export function useDrawerActions() {
   });
   return stableActions.current;
 }
+
+export const useDrawerState = () => {
+  const drawerOpenStateContext = useContext(DrawerOpenStateContext);
+  const drawerState = useContext(DrawerStateContext);
+  return {
+    isDrawerOpen:
+      drawerOpenStateContext &&
+      // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
+      drawerState.length > 0,
+  };
+};

packages/compass-components/src/components/drawer-portal.tsx

@@ -63,7 +63,7 @@
     "@mongodb-js/compass-user-data": "^0.9.0",
     "@mongodb-js/compass-utils": "^0.9.10",
     "@mongodb-js/compass-workspaces": "^0.51.0",
-    "@mongodb-js/diagramming": "^1.3.3",
+    "@mongodb-js/diagramming": "^1.3.5",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.50.0",
     "html-to-image": "1.11.11",

packages/compass-data-modeling/package.json

@@ -17,6 +17,7 @@ function renderDiagramEditorToolbar(
       onRedoClick={() => {}}
       onExportClick={() => {}}
       onRelationshipDrawingToggle={() => {}}
+      onAddCollectionClick={() => {}}
       {...props}
     />
   );
@@ -65,6 +66,16 @@ describe('DiagramEditorToolbar', function () {
     });
   });
 
+  context('add collection button', function () {
+    it('starts adding collection', function () {
+      const addCollectionSpy = sinon.spy();
+      renderDiagramEditorToolbar({ onAddCollectionClick: addCollectionSpy });
+      const addButton = screen.getByRole('button', { name: 'Add Collection' });
+      userEvent.click(addButton);
+      expect(addCollectionSpy).to.have.been.calledOnce;
+    });
+  });
+
   context('add relationship button', function () {
     it('renders it active if isInRelationshipDrawingMode is true', function () {
       renderDiagramEditorToolbar({ isInRelationshipDrawingMode: true });

packages/compass-data-modeling/src/components/diagram-editor-toolbar.spec.tsx

@@ -15,7 +15,7 @@ import {
   transparentize,
   Tooltip,
 } from '@mongodb-js/compass-components';
-
+import AddCollection from './icons/add-collection';
 const containerStyles = css({
   display: 'flex',
   justifyContent: 'space-between',
@@ -50,6 +50,7 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
   onRedoClick: () => void;
   onExportClick: () => void;
   onRelationshipDrawingToggle: () => void;
+  onAddCollectionClick: () => void;
 }> = ({
   step,
   hasUndo,
@@ -58,6 +59,7 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
   onRedoClick,
   onExportClick,
   onRelationshipDrawingToggle,
+  onAddCollectionClick,
   isInRelationshipDrawingMode,
 }) => {
   const darkmode = useDarkMode();
@@ -70,6 +72,15 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
       data-testid="diagram-editor-toolbar"
     >
       <div className={toolbarGroupStyles}>
+        <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
+          <Icon glyph="Undo"></Icon>
+        </IconButton>
+        <IconButton aria-label="Redo" disabled={!hasRedo} onClick={onRedoClick}>
+          <Icon glyph="Redo"></Icon>
+        </IconButton>
+        <IconButton aria-label="Add Collection" onClick={onAddCollectionClick}>
+          <AddCollection />
+        </IconButton>
         <Tooltip
           trigger={
             <IconButton
@@ -88,12 +99,6 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
         >
           Drag from one collection to another to create a relationship.
         </Tooltip>
-        <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
-          <Icon glyph="Undo"></Icon>
-        </IconButton>
-        <IconButton aria-label="Redo" disabled={!hasRedo} onClick={onRedoClick}>
-          <Icon glyph="Redo"></Icon>
-        </IconButton>
       </div>
       <div className={toolbarGroupStyles}>
         <Button size="xsmall" aria-label="Export" onClick={onExportClick}>

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

@@ -16,6 +16,7 @@ import sinon from 'sinon';
 import { DiagramProvider } from '@mongodb-js/diagramming';
 import { DataModelingWorkspaceTab } from '..';
 import { openDiagram } from '../store/diagram';
+import { DrawerAnchor } from '@mongodb-js/compass-components';
 
 const storageItems: MongoDBDataModelDescription[] = [
   {
@@ -143,9 +144,11 @@ const renderDiagramEditor = ({
   const {
     plugin: { store },
   } = renderWithConnections(
-    <DiagramProvider fitView>
-      <DiagramEditor />
-    </DiagramProvider>
+    <DrawerAnchor>
+      <DiagramProvider fitView>
+        <DiagramEditor />
+      </DiagramProvider>
+    </DrawerAnchor>
   );
   store.dispatch(openDiagram(renderedItem));