refactor/COMPASS-9877 add editable node handlers and interactions

package.json

@@ -52,6 +52,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@leafygreen-ui/icon": "^14.3.0",
+    "@leafygreen-ui/icon-button": "^16.0.2",
     "@leafygreen-ui/leafygreen-provider": "^5.0.2",
     "@leafygreen-ui/palette": "^5.0.0",
     "@leafygreen-ui/tokens": "^3.2.1",
@@ -73,6 +74,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/d3-path": "^3",
     "@types/jest": "30.0.0",
     "@types/node": "22.15.29",

src/components/canvas/canvas.tsx

@@ -21,7 +21,7 @@ import { MarkerList } from '@/components/markers/marker-list';
 import { ConnectionLine } from '@/components/line/connection-line';
 import { convertToExternalNode, convertToExternalNodes, convertToInternalNodes } from '@/utilities/convert-nodes';
 import { convertToExternalEdge, convertToExternalEdges, convertToInternalEdges } from '@/utilities/convert-edges';
-import { FieldSelectionProvider } from '@/hooks/use-field-selection';
+import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagram-interactions';
 
 const MAX_ZOOM = 3;
 const MIN_ZOOM = 0.1;
@@ -57,6 +57,8 @@ export const Canvas = ({
   edges: externalEdges,
   onConnect,
   id,
+  onAddFieldToNodeClick,
+  onAddFieldToObjectFieldClick,
   onFieldClick,
   onNodeContextMenu,
   onNodeDrag,
@@ -141,7 +143,11 @@ export const Canvas = ({
   );
 
   return (
-    <FieldSelectionProvider onFieldClick={onFieldClick}>
+    <EditableDiagramInteractionsProvider
+      onFieldClick={onFieldClick}
+      onAddFieldToNodeClick={onAddFieldToNodeClick}
+      onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
+    >
       <ReactFlowWrapper>
         <ReactFlow
           id={id}
@@ -177,6 +183,6 @@ export const Canvas = ({
           <MiniMap />
         </ReactFlow>
       </ReactFlowWrapper>
-    </FieldSelectionProvider>
+    </EditableDiagramInteractionsProvider>
   );
 };

src/components/diagram.stories.tsx

@@ -5,7 +5,7 @@ import { EMPLOYEE_TERRITORIES_NODE, EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/
 import { EMPLOYEES_TO_EMPLOYEES_EDGE, ORDERS_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
 import { DiagramStressTestDecorator } from '@/mocks/decorators/diagram-stress-test.decorator';
 import { DiagramConnectableDecorator } from '@/mocks/decorators/diagram-connectable.decorator';
-import { DiagramSelectableFieldsDecorator } from '@/mocks/decorators/diagram-selectable-fields.decorator';
+import { DiagramEditableInteractionsDecorator } from '@/mocks/decorators/diagram-editable-interactions.decorator';
 
 const diagram: Meta<typeof Diagram> = {
   title: 'Diagram',
@@ -51,8 +51,8 @@ function idFromDepthAccumulator(name: string, depth?: number) {
   lastDepth = depth ?? 0;
   return [...idAccumulator];
 }
-export const DiagramWithSelectableFields: Story = {
-  decorators: [DiagramSelectableFieldsDecorator],
+export const DiagramWithEditInteractions: Story = {
+  decorators: [DiagramEditableInteractionsDecorator],
   args: {
     title: 'MongoDB Diagram',
     isDarkMode: true,

src/components/field/field-list.tsx

@@ -6,8 +6,8 @@ import { Field } from '@/components/field/field';
 import { NodeField, NodeType } from '@/types';
 import { DEFAULT_PREVIEW_GROUP_AREA, getPreviewGroupArea, getPreviewId } from '@/utilities/get-preview-group-area';
 import { DEFAULT_FIELD_PADDING } from '@/utilities/constants';
-import { useFieldSelection } from '@/hooks/use-field-selection';
 import { getSelectedFieldGroupHeight, getSelectedId } from '@/utilities/get-selected-field-group-height';
+import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
 
 const NodeFieldWrapper = styled.div`
   padding: ${DEFAULT_FIELD_PADDING}px ${spacing[400]}px;
@@ -22,7 +22,8 @@ interface Props {
 }
 
 export const FieldList = ({ fields, nodeId, nodeType, isHovering }: Props) => {
-  const { enabled: isFieldSelectionEnabled } = useFieldSelection();
+  const { onClickField } = useEditableDiagramInteractions();
+  const isFieldSelectionEnabled = !!onClickField;
 
   const spacing = Math.max(0, ...fields.map(field => field.glyphs?.length || 0));
   const previewGroupArea = useMemo(() => getPreviewGroupArea(fields), [fields]);

src/components/field/field-type-content.tsx

@@ -0,0 +1,123 @@
+import { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { spacing, transitionDuration } from '@leafygreen-ui/tokens';
+import { palette } from '@leafygreen-ui/palette';
+
+import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
+import { PlusWithSquare } from '@/components/icons/plus-with-square';
+
+const ObjectTypeContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  line-height: 20px;
+`;
+
+const AddNestedFieldIconButton = styled.button`
+  background: none;
+  border: none;
+  outline: none;
+  padding: ${spacing[100]}px;
+  margin: 0;
+  margin-left: ${spacing[100]}px;
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  position: relative;
+  color: ${props => props.theme.node.fieldIconButton};
+
+  &::before {
+    content: '';
+    transition: ${transitionDuration.default}ms all ease-in-out;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 100%;
+    transform: scale(0.8);
+  }
+
+  &:active::before,
+  &:hover::before,
+  &:focus::before,
+  &[data-hover='true']::before,
+  &[data-focus='true']::before {
+    transform: scale(1);
+  }
+
+  &:active,
+  &:hover,
+  &[data-hover='true'],
+  &:focus-visible,
+  &[data-focus='true'] {
+    color: ${palette.black};
+
+    &::before {
+      background-color: ${props => props.theme.node.fieldIconButtonHoverBackground};
+    }
+  }
+
+  // Focus ring styles.
+  &::after {
+    position: absolute;
+    content: '';
+    pointer-events: none;
+    top: 3px;
+    right: 3px;
+    bottom: 3px;
+    left: 3px;
+    border-radius: ${spacing[100]}px;
+    box-shadow: 0 0 0 0 transparent;
+    transition: box-shadow 0.16s ease-in;
+    z-index: 1;
+  }
+  &:focus-visible {
+    &::after {
+      box-shadow: 0 0 0 3px ${palette.blue.light1} !important;
+      transition-timing-function: ease-out;
+    }
+  }
+`;
+
+export const FieldTypeContent = ({
+  type,
+  nodeId,
+  id,
+}: {
+  id: string | string[];
+  nodeId: string;
+  type: React.ReactNode;
+}) => {
+  const { onClickAddFieldToObjectField: _onClickAddFieldToObjectField } = useEditableDiagramInteractions();
+
+  const onClickAddFieldToObject = useMemo(
+    () =>
+      _onClickAddFieldToObjectField
+        ? (event: React.MouseEvent<HTMLButtonElement>) => {
+            // Don't click on the field element.
+            event.stopPropagation();
+            _onClickAddFieldToObjectField(event, nodeId, Array.isArray(id) ? id : [id]);
+          }
+        : undefined,
+    [_onClickAddFieldToObjectField, nodeId, id],
+  );
+
+  if (type === 'object' && !!onClickAddFieldToObject) {
+    return (
+      <ObjectTypeContainer>
+        {'{}'}
+        <AddNestedFieldIconButton
+          data-testid={`object-field-type-${nodeId}-${typeof id === 'string' ? id : id.join('.')}`}
+          onClick={onClickAddFieldToObject}
+          aria-label="Add new field"
+          title="Add Field"
+        >
+          <PlusWithSquare />
+        </AddNestedFieldIconButton>
+      </ObjectTypeContainer>
+    );
+  }
+
+  return <>{type}</>;
+};

src/components/field/field.test.tsx

@@ -1,17 +1,31 @@
 import { palette } from '@leafygreen-ui/palette';
 import { ComponentProps } from 'react';
+import { userEvent } from '@testing-library/user-event';
 
 import { render, screen } from '@/mocks/testing-utils';
 import { Field as FieldComponent } from '@/components/field/field';
 import { DEFAULT_PREVIEW_GROUP_AREA } from '@/utilities/get-preview-group-area';
-import { FieldSelectionProvider } from '@/hooks/use-field-selection';
+import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagram-interactions';
 
 const Field = (props: React.ComponentProps<typeof FieldComponent>) => (
-  <FieldSelectionProvider>
+  <EditableDiagramInteractionsProvider>
     <FieldComponent {...props} />
-  </FieldSelectionProvider>
+  </EditableDiagramInteractionsProvider>
 );
 
+const FieldWithEditableInteractions = ({
+  onAddFieldToObjectFieldClick,
+  ...fieldProps
+}: React.ComponentProps<typeof FieldComponent> & {
+  onAddFieldToObjectFieldClick?: () => void;
+}) => {
+  return (
+    <EditableDiagramInteractionsProvider onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}>
+      <FieldComponent {...fieldProps} />
+    </EditableDiagramInteractionsProvider>
+  );
+};
+
 describe('field', () => {
   const DEFAULT_PROPS: ComponentProps<typeof Field> = {
     nodeType: 'collection',
@@ -30,6 +44,44 @@ describe('field', () => {
     expect(screen.getByRole('img', { name: 'Key Icon' })).toBeInTheDocument();
     expect(screen.getByRole('img', { name: 'Link Icon' })).toBeInTheDocument();
   });
+  it('Should not have a button to add a field on an object type', () => {
+    render(<Field {...DEFAULT_PROPS} type={'object'} id={['ordersId']} />);
+    expect(screen.getByText('ordersId')).toBeInTheDocument();
+    expect(screen.getByText('object')).toBeInTheDocument();
+    const button = screen.queryByRole('button');
+    expect(button).not.toBeInTheDocument();
+  });
+  describe('With editable interactions supplied', () => {
+    it('Should have a button to add a field on an object type', async () => {
+      const onAddFieldToObjectFieldClickMock = vi.fn();
+
+      render(
+        <FieldWithEditableInteractions
+          {...DEFAULT_PROPS}
+          type={'object'}
+          id={['ordersId']}
+          onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClickMock}
+        />,
+      );
+      expect(screen.getByText('ordersId')).toBeInTheDocument();
+      expect(screen.getByText('{}')).toBeInTheDocument();
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('data-testid', 'object-field-type-pineapple-ordersId');
+      expect(button).toHaveAttribute('title', 'Add Field');
+      expect(onAddFieldToObjectFieldClickMock).not.toHaveBeenCalled();
+      await userEvent.click(button);
+      expect(onAddFieldToObjectFieldClickMock).toHaveBeenCalled();
+    });
+
+    it('Should not have a button to add a field with non-object types', () => {
+      render(<FieldWithEditableInteractions {...DEFAULT_PROPS} id={['ordersId']} />);
+      expect(screen.getByText('ordersId')).toBeInTheDocument();
+      expect(screen.getByText('objectId')).toBeInTheDocument();
+      const button = screen.queryByRole('button');
+      expect(button).not.toBeInTheDocument();
+    });
+  });
   describe('With glyphs', () => {
     it('With disabled', () => {
       render(<Field {...DEFAULT_PROPS} variant={'disabled'} />);

src/components/field/field.tsx

@@ -4,14 +4,15 @@ import { palette } from '@leafygreen-ui/palette';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { useTheme } from '@emotion/react';
-import { MouseEvent as ReactMouseEvent, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { animatedBlueBorder, ellipsisTruncation } from '@/styles/styles';
 import { DEFAULT_DEPTH_SPACING, DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
 import { FieldDepth } from '@/components/field/field-depth';
+import { FieldTypeContent } from '@/components/field/field-type-content';
 import { NodeField, NodeGlyph, NodeType } from '@/types';
 import { PreviewGroupArea } from '@/utilities/get-preview-group-area';
-import { useFieldSelection } from '@/hooks/use-field-selection';
+import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
 
 const FIELD_BORDER_ANIMATED_PADDING = spacing[100];
 const FIELD_GLYPH_SPACING = spacing[400];
@@ -145,15 +146,14 @@ export const Field = ({
   selectedGroupHeight = 0,
   previewGroupArea,
   glyphSize = LGSpacing[300],
-  renderName,
   spacing = 0,
   selectable = false,
   selected = false,
   variant,
 }: Props) => {
   const { theme } = useDarkMode();
 
-  const { fieldProps } = useFieldSelection();
+  const { onClickField } = useEditableDiagramInteractions();
 
   const internalTheme = useTheme();
 
@@ -167,14 +167,14 @@ export const Field = ({
    * Create the field selection props when the field is selectable.
    */
   const fieldSelectionProps = useMemo(() => {
-    return selectable && fieldProps
+    return selectable && !!onClickField
       ? {
           'data-testid': `selectable-field-${nodeId}-${typeof id === 'string' ? id : id.join('.')}`,
           selectable: true,
-          onClick: (event: ReactMouseEvent) => fieldProps.onClick(event, { id, nodeId }),
+          onClick: (event: React.MouseEvent) => onClickField(event, { id, nodeId }),
         }
       : undefined;
-  }, [fieldProps, selectable, id, nodeId]);
+  }, [onClickField, selectable, id, nodeId]);
 
   const getTextColor = () => {
     if (isDisabled) {
@@ -215,9 +215,11 @@ export const Field = ({
     <>
       <FieldName>
         <FieldDepth depth={depth} />
-        <InnerFieldName>{renderName || name}</InnerFieldName>
+        <InnerFieldName>{name}</InnerFieldName>
       </FieldName>
-      <FieldType color={getSecondaryTextColor()}>{type}</FieldType>
+      <FieldType color={getSecondaryTextColor()}>
+        <FieldTypeContent type={type} nodeId={nodeId} id={id} />
+      </FieldType>
     </>
   );
 

src/components/icons/plus-with-square.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+export const PlusWithSquare: React.FunctionComponent = () => {
+  const theme = useTheme();
+
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 0.75H2C1.66848 0.75 1.35054 0.881696 1.11612 1.11612C0.881696 1.35054 0.75 1.66848 0.75 2V12C0.75 12.3315 0.881696 12.6495 1.11612 12.8839C1.35054 13.1183 1.66848 13.25 2 13.25H12C12.3315 13.25 12.6495 13.1183 12.8839 12.8839C13.1183 12.6495 13.25 12.3315 13.25 12V2C13.25 1.66848 13.1183 1.35054 12.8839 1.11612C12.6495 0.881696 12.3315 0.75 12 0.75ZM11.75 11.75H2.25V2.25H11.75V11.75ZM3.75 7C3.75 6.80109 3.82902 6.61032 3.96967 6.46967C4.11032 6.32902 4.30109 6.25 4.5 6.25H6.25V4.5C6.25 4.30109 6.32902 4.11032 6.46967 3.96967C6.61032 3.82902 6.80109 3.75 7 3.75C7.19891 3.75 7.38968 3.82902 7.53033 3.96967C7.67098 4.11032 7.75 4.30109 7.75 4.5V6.25H9.5C9.69891 6.25 9.88968 6.32902 10.0303 6.46967C10.171 6.61032 10.25 6.80109 10.25 7C10.25 7.19891 10.171 7.38968 10.0303 7.53033C9.88968 7.67098 9.69891 7.75 9.5 7.75H7.75V9.5C7.75 9.69891 7.67098 9.88968 7.53033 10.0303C7.38968 10.171 7.19891 10.25 7 10.25C6.80109 10.25 6.61032 10.171 6.46967 10.0303C6.32902 9.88968 6.25 9.69891 6.25 9.5V7.75H4.5C4.30109 7.75 4.11032 7.67098 3.96967 7.53033C3.82902 7.38968 3.75 7.19891 3.75 7Z"
+        fill={theme.node.headerIcon}
+      />
+    </svg>
+  );
+};