feat/COMPASS-9504 add expand collapse toggle to the node title (#152)

* feat/COMPASS-9504 add expand collapse toggle to the node title

* Pass nodeId in the callback

* add storybook story

Author: gribnoysup

src/components/buttons/diagram-icon-button.tsx

@@ -9,7 +9,6 @@ const StyledDiagramIconButton = styled.button`
   outline: none;
   padding: ${spacing[100]}px;
   margin: 0;
-  margin-left: ${spacing[100]}px;
   cursor: pointer;
   color: inherit;
   display: flex;

src/components/canvas/canvas.tsx

@@ -58,6 +58,7 @@ export const Canvas = ({
   onConnect,
   id,
   onAddFieldToNodeClick,
+  onNodeExpandToggle,
   onAddFieldToObjectFieldClick,
   onFieldNameChange,
   onFieldClick,
@@ -147,6 +148,7 @@ export const Canvas = ({
     <EditableDiagramInteractionsProvider
       onFieldClick={onFieldClick}
       onAddFieldToNodeClick={onAddFieldToNodeClick}
+      onNodeExpandToggle={onNodeExpandToggle}
       onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
       onFieldNameChange={onFieldNameChange}
     >

src/components/icons/chevron-collapse.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from '@emotion/react';
+
+export const ChevronCollapse = ({ size = 14 }: { size?: number }) => {
+  const theme = useTheme();
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.25 3.25L8 6.5L11.75 3.25M4.25 12.75L8 9.5L11.75 12.75"
+        stroke={theme.node.headerIcon}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/components/node/node.test.tsx

@@ -10,11 +10,16 @@ import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagra
 
 const Node = ({
   onAddFieldToNodeClick,
+  onNodeExpandToggle,
   ...props
 }: React.ComponentProps<typeof NodeComponent> & {
   onAddFieldToNodeClick?: () => void;
+  onNodeExpandToggle?: () => void;
 }) => (
-  <EditableDiagramInteractionsProvider onAddFieldToNodeClick={onAddFieldToNodeClick}>
+  <EditableDiagramInteractionsProvider
+    onAddFieldToNodeClick={onAddFieldToNodeClick}
+    onNodeExpandToggle={onNodeExpandToggle}
+  >
     <NodeComponent {...props} />
   </EditableDiagramInteractionsProvider>
 );
@@ -106,6 +111,18 @@ describe('node', () => {
     expect(onAddFieldToNodeClickMock).toHaveBeenCalled();
   });
 
+  it('Should show a clickable button to toggle expand collapse when onNodeExpandToggle is supplied', async () => {
+    const onNodeExpandToggleMock = vi.fn();
+
+    render(<Node {...DEFAULT_PROPS} onNodeExpandToggle={onNodeExpandToggleMock} />);
+    const button = screen.getByRole('button', { name: 'Toggle Expand / Collapse Fields' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('title', 'Toggle Expand / Collapse Fields');
+    expect(onNodeExpandToggleMock).not.toHaveBeenCalled();
+    await userEvent.click(button);
+    expect(onNodeExpandToggleMock).toHaveBeenCalled();
+  });
+
   it('Should prioritise borderVariant over selected prop when setting the border', () => {
     render(
       <Node {...DEFAULT_PROPS} selected type="collection" data={{ ...DEFAULT_PROPS.data, borderVariant: 'subtle' }} />,

src/components/node/node.tsx

@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react';
 import { DEFAULT_NODE_HEADER_HEIGHT, ZOOM_THRESHOLD } from '@/utilities/constants';
 import { InternalNode } from '@/types/internal';
 import { PlusWithSquare } from '@/components/icons/plus-with-square';
+import { ChevronCollapse } from '@/components/icons/chevron-collapse';
 import { NodeBorder } from '@/components/node/node-border';
 import { FieldList } from '@/components/field/field-list';
 import { NodeType } from '@/types';
@@ -102,9 +103,14 @@ const NodeWithFields = styled.div<{ visibility: string }>`
   visibility: ${props => props.visibility};
 `;
 
-const AddNewFieldIconButtonButton = styled(DiagramIconButton)`
+const TitleControlsContainer = styled.div`
   margin-left: auto;
   margin-right: ${spacing[200]}px;
+  display: flex;
+  gap: ${spacing[50]}px;
+  & > * {
+    flex: 0 0 auto;
+  }
 `;
 
 export const Node = ({
@@ -119,7 +125,7 @@ export const Node = ({
 
   const [isHovering, setHovering] = useState(false);
 
-  const { onClickAddFieldToNode: addFieldToNodeClickHandler } = useEditableDiagramInteractions();
+  const { onClickAddFieldToNode: addFieldToNodeClickHandler, onNodeExpandToggle } = useEditableDiagramInteractions();
 
   const onClickAddFieldToNode = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -129,6 +135,13 @@ export const Node = ({
     [addFieldToNodeClickHandler, id],
   );
 
+  const handleNodeExpandToggle = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onNodeExpandToggle?.(event, id);
+    },
+    [onNodeExpandToggle, id],
+  );
+
   const getAccent = () => {
     if (disabled && !isHovering) {
       return theme.node.disabledAccent;
@@ -210,11 +223,22 @@ export const Node = ({
                 <Icon fill={theme.node.headerIcon} glyph="Drag" />
               </NodeHeaderIcon>
               <NodeHeaderTitle>{title}</NodeHeaderTitle>
-              {addFieldToNodeClickHandler && (
-                <AddNewFieldIconButtonButton aria-label="Add Field" onClick={onClickAddFieldToNode} title="Add Field">
-                  <PlusWithSquare />
-                </AddNewFieldIconButtonButton>
-              )}
+              <TitleControlsContainer>
+                {addFieldToNodeClickHandler && (
+                  <DiagramIconButton aria-label="Add Field" onClick={onClickAddFieldToNode} title="Add Field">
+                    <PlusWithSquare />
+                  </DiagramIconButton>
+                )}
+                {onNodeExpandToggle && (
+                  <DiagramIconButton
+                    aria-label="Toggle Expand / Collapse Fields"
+                    onClick={handleNodeExpandToggle}
+                    title="Toggle Expand / Collapse Fields"
+                  >
+                    <ChevronCollapse />
+                  </DiagramIconButton>
+                )}
+              </TitleControlsContainer>
             </NodeHeader>
             <FieldList nodeId={id} nodeType={type as NodeType} isHovering={isHovering} fields={fields} />
           </NodeWithFields>

src/hooks/use-editable-diagram-interactions.tsx

@@ -3,13 +3,15 @@ import React, { createContext, useContext, useMemo, ReactNode } from 'react';
 import {
   OnFieldClickHandler,
   OnAddFieldToNodeClickHandler,
+  OnNodeExpandHandler,
   OnAddFieldToObjectFieldClickHandler,
   OnFieldNameChangeHandler,
 } from '@/types';
 
 interface EditableDiagramInteractionsContextType {
   onClickField?: OnFieldClickHandler;
   onClickAddFieldToNode?: OnAddFieldToNodeClickHandler;
+  onNodeExpandToggle?: OnNodeExpandHandler;
   onClickAddFieldToObjectField?: OnAddFieldToObjectFieldClickHandler;
   onChangeFieldName?: OnFieldNameChangeHandler;
 }
@@ -20,6 +22,7 @@ interface EditableDiagramInteractionsProviderProps {
   children: ReactNode;
   onFieldClick?: OnFieldClickHandler;
   onAddFieldToNodeClick?: OnAddFieldToNodeClickHandler;
+  onNodeExpandToggle?: OnNodeExpandHandler;
   onAddFieldToObjectFieldClick?: OnAddFieldToObjectFieldClickHandler;
   onFieldNameChange?: OnFieldNameChangeHandler;
 }
@@ -28,6 +31,7 @@ export const EditableDiagramInteractionsProvider: React.FC<EditableDiagramIntera
   children,
   onFieldClick,
   onAddFieldToNodeClick,
+  onNodeExpandToggle,
   onAddFieldToObjectFieldClick,
   onFieldNameChange,
 }) => {
@@ -43,6 +47,11 @@ export const EditableDiagramInteractionsProvider: React.FC<EditableDiagramIntera
             onClickAddFieldToNode: onAddFieldToNodeClick,
           }
         : undefined),
+      ...(onNodeExpandToggle
+        ? {
+            onNodeExpandToggle: onNodeExpandToggle,
+          }
+        : undefined),
       ...(onAddFieldToObjectFieldClick
         ? {
             onClickAddFieldToObjectField: onAddFieldToObjectFieldClick,
@@ -54,7 +63,7 @@ export const EditableDiagramInteractionsProvider: React.FC<EditableDiagramIntera
           }
         : undefined),
     };
-  }, [onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick, onFieldNameChange]);
+  }, [onFieldClick, onAddFieldToNodeClick, onNodeExpandToggle, onAddFieldToObjectFieldClick, onFieldNameChange]);
 
   return (
     <EditableDiagramInteractionsContext.Provider value={value}>{children}</EditableDiagramInteractionsContext.Provider>

src/mocks/decorators/diagram-editable-interactions.decorator.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from 'react';
+import { useCallback, useEffect, useRef, useState, MouseEvent as ReactMouseEvent, useMemo } from 'react';
 import { Decorator } from '@storybook/react';
 
 import { DiagramProps, FieldId, NodeField, NodeProps } from '@/types';
@@ -88,6 +88,13 @@ function editableNodesFromNodes(nodes: NodeProps[]): NodeProps[] {
 
 export const useEditableNodes = (initialNodes: NodeProps[]) => {
   const [nodes, setNodes] = useState<NodeProps[]>([]);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>(() => {
+    return Object.fromEntries(
+      nodes.map(node => {
+        return [node.id, true];
+      }),
+    );
+  });
 
   const hasInitialized = useRef(false);
   useEffect(() => {
@@ -185,7 +192,37 @@ export const useEditableNodes = (initialNodes: NodeProps[]) => {
     );
   }, []);
 
-  return { nodes, onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick, onFieldNameChange };
+  const onNodeExpandToggle = useCallback((_evt: ReactMouseEvent, nodeId: string) => {
+    setExpanded(state => {
+      return {
+        ...state,
+        [nodeId]: !state[nodeId],
+      };
+    });
+  }, []);
+
+  const _nodes = useMemo(() => {
+    return nodes.map(node => {
+      if (expanded[node.id]) {
+        return node;
+      }
+      return {
+        ...node,
+        fields: node.fields.filter(field => {
+          return !field.depth || field.depth === 0;
+        }),
+      };
+    });
+  }, [nodes, expanded]);
+
+  return {
+    nodes: _nodes,
+    onFieldClick,
+    onAddFieldToNodeClick,
+    onNodeExpandToggle,
+    onAddFieldToObjectFieldClick,
+    onFieldNameChange,
+  };
 };
 
 export const DiagramEditableInteractionsDecorator: Decorator<DiagramProps> = (Story, context) => {

src/types/component-props.ts

@@ -25,6 +25,11 @@ export type OnFieldClickHandler = (
  */
 export type OnAddFieldToNodeClickHandler = (event: ReactMouseEvent, nodeId: string) => void;
 
+/**
+ * Called when the button to expand / collapse all field is clicked in the node header.
+ */
+export type OnNodeExpandHandler = (event: ReactMouseEvent, nodeId: string) => void;
+
 /**
  * Called when the button to add a new field is clicked on an object type field in a node.
  */
@@ -184,6 +189,11 @@ export interface DiagramProps {
    */
   onAddFieldToNodeClick?: OnAddFieldToNodeClickHandler;
 
+  /**
+   * Callback when the user clicks the button to expand / collapse all fields in the node.
+   */
+  onNodeExpandToggle?: OnNodeExpandHandler;
+
   /**
    * Callback when the user clicks to add a new field to an object type field in a node.
    */