feat(data-modeling): show collection name / relationship label in drawer header; show item associated actions in header COMPASS-9653 (#7176)

* chore(data-modeling): show collection name / relationship label in drawer header; show item associated actions in header

* chore(data-modeling): adjust tests

* chore(components): add test for drawer portal

Author: gribnoysup

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { render, screen, waitFor } from '@mongodb-js/testing-library-compass';
+import {
+  DrawerContentProvider,
+  DrawerSection,
+  DrawerAnchor,
+} from './drawer-portal';
+import { expect } from 'chai';
+
+describe('DrawerSection', function () {
+  it('renders DrawerSection in the portal and updates the content when it updates', async function () {
+    let setCount;
+
+    function TestDrawer() {
+      const [count, _setCount] = useState(0);
+      setCount = _setCount;
+      return (
+        <DrawerContentProvider>
+          <DrawerAnchor>
+            <DrawerSection
+              id="test-section"
+              label="Test section"
+              title={`Test section: ${count}`}
+              glyph="Trash"
+              autoOpen
+            >
+              This is a test section and the count is {count}
+            </DrawerSection>
+          </DrawerAnchor>
+        </DrawerContentProvider>
+      );
+    }
+
+    render(<TestDrawer></TestDrawer>);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test section: 0')).to.be.visible;
+      expect(screen.getByText('This is a test section and the count is 0')).to
+        .be.visible;
+    });
+
+    setCount(42);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test section: 42')).to.be.visible;
+      expect(screen.getByText('This is a test section and the count is 42')).to
+        .be.visible;
+    });
+  });
+});

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

@@ -146,6 +146,20 @@ const drawerLayoutFixesStyles = css({
   '& > div:nth-child(2)': {
     marginTop: -1, // hiding the top border as we already have one in the place where the Anchor is currently rendered
   },
+
+  // We're stretching the title container to all available width so that we can
+  // layout the controls there better. Doing our best to target the section
+  // title here, leafygreen really doesn't give us anything else to try.
+  //
+  // TODO(ticket): This is obviously a horrible selector and we should make sure
+  // that LG team provides a better one for us to achieve this behavior when
+  // we're removing the vendored version of the drawer
+  '& > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child':
+    {
+      flex: 'none',
+      width: 'calc(100% - 28px)', // disallow going over the title size (100 - close button width)
+      overflow: 'hidden',
+    },
 });
 
 const emptyDrawerLayoutFixesStyles = css({

packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx

@@ -39,9 +39,13 @@ export const DrawerToolbarLayoutContainer = forwardRef<
   ) => {
     const { openDrawer, closeDrawer, getActiveDrawerContent, isDrawerOpen } =
       useDrawerToolbarContext();
-    const { id, title, content } = getActiveDrawerContent() || {};
+    const { id } = getActiveDrawerContent() || {};
     const lgIds = getLgIds(dataLgId);
     const hasData = toolbarData && toolbarData.length > 0;
+    const { title, content } =
+      toolbarData.find((data) => {
+        return data.id === id;
+      }) ?? {};
 
     const handleOnClose = (event: React.MouseEvent<HTMLButtonElement>) => {
       onClose?.(event);

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

@@ -73,11 +73,13 @@ describe('DiagramEditorSidePanel', function () {
     result.plugin.store.dispatch(selectCollection('flights.airlines'));
 
     await waitFor(() => {
-      const nameInput = screen.getByLabelText('Name');
-      expect(nameInput).to.be.visible;
-      expect(nameInput).to.have.value('flights.airlines');
+      expect(screen.getByTitle('flights.airlines')).to.exist;
     });
 
+    const nameInput = screen.getByLabelText('Name');
+    expect(nameInput).to.be.visible;
+    expect(nameInput).to.have.value('flights.airlines');
+
     userEvent.click(screen.getByRole('textbox', { name: 'Notes' }));
     userEvent.type(
       screen.getByRole('textbox', { name: 'Notes' }),
@@ -104,8 +106,8 @@ describe('DiagramEditorSidePanel', function () {
     );
 
     await waitFor(() => {
-      const section = screen.getByText('Relationship properties');
-      expect(section).to.be.visible;
+      expect(screen.getByTitle('countries.name → airports.Country')).to.be
+        .visible;
     });
 
     const localCollectionInput = screen.getByLabelText('Local collection');

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

@@ -1,61 +1,162 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../../store/reducer';
-import { DrawerSection } from '@mongodb-js/compass-components';
+import {
+  css,
+  DrawerSection,
+  ItemActionControls,
+} from '@mongodb-js/compass-components';
 import CollectionDrawerContent from './collection-drawer-content';
 import RelationshipDrawerContent from './relationship-drawer-content';
+import {
+  deleteRelationship,
+  selectCurrentModelFromState,
+} from '../../store/diagram';
+import { getDefaultRelationshipName } from '../../utils';
+
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
+const drawerTitleStyles = css({
+  display: 'flex',
+  width: '100%',
+});
+
+const drawerTitleTextStyles = css({
+  flex: 1,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+const drawerTitleActionGroupStyles = css({});
+
 type DiagramEditorSidePanelProps = {
-  selectedItems: { type: 'relationship' | 'collection'; id: string } | null;
+  selectedItems: {
+    id: string;
+    type: 'relationship' | 'collection';
+    label: string;
+  } | null;
+  onDeleteRelationship: (rId: string) => void;
 };
 
 function DiagramEditorSidePanel({
   selectedItems,
+  onDeleteRelationship,
 }: DiagramEditorSidePanelProps) {
-  if (!selectedItems) {
-    return null;
-  }
+  const { content, label, actions, handleAction } = useMemo(() => {
+    if (selectedItems?.type === 'collection') {
+      return {
+        label: selectedItems.label,
+        content: (
+          <CollectionDrawerContent
+            key={selectedItems.id}
+            namespace={selectedItems.id}
+          ></CollectionDrawerContent>
+        ),
+        actions: [],
+        handleAction: () => {},
+      };
+    }
+
+    if (selectedItems?.type === 'relationship') {
+      return {
+        label: selectedItems.label,
+        content: (
+          <RelationshipDrawerContent
+            key={selectedItems.id}
+            relationshipId={selectedItems.id}
+          ></RelationshipDrawerContent>
+        ),
+        actions: [
+          { action: 'delete', label: 'Delete', icon: 'Trash' as const },
+        ],
+        handleAction: (actionName: string) => {
+          if (actionName === 'delete') {
+            onDeleteRelationship(selectedItems.id);
+          }
+        },
+      };
+    }
+
+    return { content: null };
+  }, [selectedItems, onDeleteRelationship]);
 
-  let content;
-
-  if (selectedItems.type === 'collection') {
-    content = (
-      <CollectionDrawerContent
-        key={selectedItems.id}
-        namespace={selectedItems.id}
-      ></CollectionDrawerContent>
-    );
-  } else if (selectedItems.type === 'relationship') {
-    content = (
-      <RelationshipDrawerContent
-        key={selectedItems.id}
-        relationshipId={selectedItems.id}
-      ></RelationshipDrawerContent>
-    );
+  if (!content) {
+    return null;
   }
 
   return (
     <DrawerSection
       id={DATA_MODELING_DRAWER_ID}
-      title="Details"
-      label="Details"
-      glyph="InfoWithCircle"
+      title={
+        <div className={drawerTitleStyles}>
+          <span className={drawerTitleTextStyles} title={label}>
+            {label}
+          </span>
+
+          <ItemActionControls
+            actions={actions}
+            iconSize="small"
+            onAction={handleAction}
+            className={drawerTitleActionGroupStyles}
+            // Because the close button here is out of our control, we have do
+            // adjust the actions rendering in a bit of an unconventional way:
+            // if there's more than one action available, collapse it to "...",
+            // if it's just one, make sure button is not collapsed by setting
+            // collapseAfter to >0
+            collapseAfter={actions.length > 1 ? 0 : 1}
+          ></ItemActionControls>
+        </div>
+      }
+      label={label}
+      glyph="Wrench"
       autoOpen
-      // TODO: Leafygreen doesn't allow us to tie close event to a particular
-      // action. We can add this functionality ourselves, but I'm not sure that
-      // adding even more logic on top of the drawer is a good idea. Maybe we're
-      // okay with the drawer close button click just staying there until you
-      // explicitly click something else?
-      // onClose={onClose}
     >
       {content}
     </DrawerSection>
   );
 }
 
-export default connect((state: DataModelingState) => {
-  return {
-    selectedItems: state.diagram?.selectedItems ?? null,
-  };
-})(DiagramEditorSidePanel);
+export default connect(
+  (state: DataModelingState) => {
+    const selected = state.diagram?.selectedItems;
+
+    if (!selected) {
+      return {
+        selectedItems: null,
+      };
+    }
+
+    if (selected.type === 'collection') {
+      return {
+        selectedItems: {
+          ...selected,
+          label: selected.id,
+        },
+      };
+    }
+
+    if (selected.type === 'relationship') {
+      const model = selectCurrentModelFromState(state);
+      const relationship = model.relationships.find((relationship) => {
+        return relationship.id === selected.id;
+      });
+
+      if (!relationship) {
+        throw new Error(
+          'Can not find corresponding relationship when rendering DiagramEditorSidePanel'
+        );
+      }
+
+      return {
+        selectedItems: {
+          ...selected,
+          label: getDefaultRelationshipName(relationship.relationship),
+        },
+      };
+    }
+  },
+  {
+    onDeleteRelationship: deleteRelationship,
+  }
+)(DiagramEditorSidePanel);

packages/compass-data-modeling/src/components/drawer/relationship-drawer-content.tsx

@@ -9,8 +9,6 @@ import {
   spacing,
   css,
   palette,
-  Button,
-  Icon,
   TextArea,
 } from '@mongodb-js/compass-components';
 import {
@@ -34,7 +32,6 @@ type RelationshipDrawerContentProps = {
   relationship: Relationship;
   fields: Record<string, string[][]>;
   onRelationshipUpdate: (relationship: Relationship) => void;
-  onDeleteRelationshipClick: (rId: string) => void;
 };
 
 type RelationshipFormFields = {
@@ -47,11 +44,6 @@ type RelationshipFormFields = {
   note: string;
 };
 
-const titleBtnStyles = css({
-  marginLeft: 'auto',
-  maxHeight: 20, // to make sure we're matching accordion line height
-});
-
 const FIELD_DIVIDER = '~~##$$##~~';
 
 function useRelationshipFormFields(
@@ -156,13 +148,7 @@ const configurationForeignFieldStyles = css({
 
 const RelationshipDrawerContent: React.FunctionComponent<
   RelationshipDrawerContentProps
-> = ({
-  relationshipId,
-  relationship,
-  fields,
-  onRelationshipUpdate,
-  onDeleteRelationshipClick,
-}) => {
+> = ({ relationshipId, relationship, fields, onRelationshipUpdate }) => {
   const collections = useMemo(() => {
     return Object.keys(fields);
   }, [fields]);
@@ -192,25 +178,7 @@ const RelationshipDrawerContent: React.FunctionComponent<
 
   return (
     <div data-relationship-id={relationshipId}>
-      <DMDrawerSection
-        label={
-          <>
-            <span>Relationship properties</span>
-
-            <Button
-              variant="dangerOutline"
-              leftGlyph={<Icon glyph="Trash" />}
-              className={titleBtnStyles}
-              size="xsmall"
-              onClick={() => {
-                onDeleteRelationshipClick(relationshipId);
-              }}
-            >
-              Delete
-            </Button>
-          </>
-        }
-      >
+      <DMDrawerSection label="Relationship properties">
         <div className={configurationContainerStyles}>
           <div className={configurationLocalFieldStyles}>
             <DMFormFieldContainer>