feat/COMPASS-9798 inline field name editing

src/components/canvas/canvas.tsx

@@ -59,6 +59,7 @@ export const Canvas = ({
   id,
   onAddFieldToNodeClick,
   onAddFieldToObjectFieldClick,
+  onFieldNameChange,
   onFieldClick,
   onNodeContextMenu,
   onNodeDrag,
@@ -147,6 +148,7 @@ export const Canvas = ({
       onFieldClick={onFieldClick}
       onAddFieldToNodeClick={onAddFieldToNodeClick}
       onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
+      onFieldNameChange={onFieldNameChange}
     >
       <ReactFlowWrapper>
         <ReactFlow

src/components/diagram.stories.tsx

@@ -66,6 +66,7 @@ export const DiagramWithEditInteractions: Story = {
             ...field,
             id: idFromDepthAccumulator(field.name, field.depth),
             selectable: true,
+            editable: true,
           })),
         ],
       },
@@ -76,6 +77,7 @@ export const DiagramWithEditInteractions: Story = {
             ...field,
             id: idFromDepthAccumulator(field.name, field.depth),
             selectable: true,
+            editable: true,
           })),
         ],
       },

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

@@ -0,0 +1,81 @@
+import { styled } from 'storybook/internal/theming';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ellipsisTruncation } from '@/styles/styles';
+import { DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
+
+const InnerFieldName = styled.div`
+  width: 100%;
+  min-height: ${DEFAULT_FIELD_HEIGHT}px;
+  ${ellipsisTruncation}
+`;
+
+const InlineInput = styled.input`
+  border: none;
+  background: none;
+  height: ${DEFAULT_FIELD_HEIGHT}px;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  font-style: inherit;
+`;
+
+interface FieldNameProps {
+  name: string;
+  isEditable?: boolean;
+  onChange?: (newName: string) => void;
+  onBlur?: () => void;
+}
+
+export const FieldNameContent = ({ name, isEditable, onChange }: FieldNameProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState(name);
+  const textInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = useCallback(() => {
+    setIsEditing(false);
+    onChange?.(value);
+  }, [value, onChange]);
+
+  const handleKeyboardEvent = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') handleSubmit();
+      if (e.key === 'Escape') {
+        setValue(name);
+        setIsEditing(false);
+      }
+    },
+    [handleSubmit, name],
+  );
+
+  const handleNameDoubleClick = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    if (isEditing) {
+      setTimeout(() => {
+        textInputRef.current?.focus();
+        textInputRef.current?.select();
+      });
+    }
+  }, [isEditing]);
+
+  return isEditing ? (
+    <InlineInput
+      type="text"
+      ref={textInputRef}
+      value={value}
+      onChange={handleChange}
+      onBlur={handleSubmit}
+      onKeyDown={handleKeyboardEvent}
+      title="Edit field name"
+    />
+  ) : (
+    <InnerFieldName onDoubleClick={onChange && isEditable ? handleNameDoubleClick : undefined}>{value}</InnerFieldName>
+  );
+};

src/components/field/field.test.tsx

@@ -15,12 +15,17 @@ const Field = (props: React.ComponentProps<typeof FieldComponent>) => (
 
 const FieldWithEditableInteractions = ({
   onAddFieldToObjectFieldClick,
+  onFieldNameChange,
   ...fieldProps
 }: React.ComponentProps<typeof FieldComponent> & {
   onAddFieldToObjectFieldClick?: () => void;
+  onFieldNameChange?: (newName: string) => void;
 }) => {
   return (
-    <EditableDiagramInteractionsProvider onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}>
+    <EditableDiagramInteractionsProvider
+      onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
+      onFieldNameChange={onFieldNameChange}
+    >
       <FieldComponent {...fieldProps} />
     </EditableDiagramInteractionsProvider>
   );
@@ -81,7 +86,63 @@ describe('field', () => {
       const button = screen.queryByRole('button');
       expect(button).not.toBeInTheDocument();
     });
+
+    it('Should allow field name editing an editable field', async () => {
+      const onFieldNameChangeMock = vi.fn();
+
+      const fieldId = ['ordersId'];
+      const newFieldName = 'newFieldName';
+      render(
+        <FieldWithEditableInteractions
+          {...DEFAULT_PROPS}
+          id={fieldId}
+          editable={true}
+          onFieldNameChange={onFieldNameChangeMock}
+        />,
+      );
+      const fieldName = screen.getByText('ordersId');
+      expect(fieldName).toBeInTheDocument();
+      await userEvent.dblClick(fieldName);
+      const input = screen.getByDisplayValue('ordersId');
+      expect(input).toBeInTheDocument();
+      await userEvent.clear(input);
+      await userEvent.type(input, newFieldName);
+      expect(input).toHaveValue(newFieldName);
+      expect(onFieldNameChangeMock).not.toHaveBeenCalled();
+      await userEvent.type(input, '{enter}');
+      expect(onFieldNameChangeMock).toHaveBeenCalledWith(DEFAULT_PROPS.nodeId, fieldId, newFieldName);
+    });
+
+    it('Should not allow field name editing if a field is not editable', async () => {
+      const onFieldNameChangeMock = vi.fn();
+
+      const fieldId = ['ordersId'];
+      render(
+        <FieldWithEditableInteractions
+          {...DEFAULT_PROPS}
+          id={fieldId}
+          editable={false}
+          onFieldNameChange={onFieldNameChangeMock}
+        />,
+      );
+      const fieldName = screen.getByText('ordersId');
+      expect(fieldName).toBeInTheDocument();
+      await userEvent.dblClick(fieldName);
+      expect(screen.queryByDisplayValue('ordersId')).not.toBeUndefined();
+    });
+
+    it('Should not allow editing if there is no callback', async () => {
+      const fieldId = ['ordersId'];
+      render(
+        <FieldWithEditableInteractions {...DEFAULT_PROPS} id={fieldId} editable={true} onFieldNameChange={undefined} />,
+      );
+      const fieldName = screen.getByText('ordersId');
+      expect(fieldName).toBeInTheDocument();
+      await userEvent.dblClick(fieldName);
+      expect(screen.queryByDisplayValue('ordersId')).not.toBeUndefined();
+    });
   });
+
   describe('With specific types', () => {
     it('shows [] with "array"', () => {
       render(<Field {...DEFAULT_PROPS} type="array" />);

src/components/field/field.tsx

@@ -4,7 +4,7 @@ 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 { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { animatedBlueBorder, ellipsisTruncation } from '@/styles/styles';
 import { DEFAULT_DEPTH_SPACING, DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
@@ -14,6 +14,8 @@ import { NodeField, NodeGlyph, NodeType } from '@/types';
 import { PreviewGroupArea } from '@/utilities/get-preview-group-area';
 import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
 
+import { FieldNameContent } from './field-name-content';
+
 const FIELD_BORDER_ANIMATED_PADDING = spacing[100];
 const FIELD_GLYPH_SPACING = spacing[400];
 
@@ -105,10 +107,6 @@ const FieldName = styled.div`
   ${ellipsisTruncation}
 `;
 
-const InnerFieldName = styled.div`
-  ${ellipsisTruncation}
-`;
-
 const FieldType = styled.div`
   color: ${props => props.color};
   flex: 0 0 ${LGSpacing[200] * 10}px;
@@ -149,11 +147,12 @@ export const Field = ({
   spacing = 0,
   selectable = false,
   selected = false,
+  editable = false,
   variant,
 }: Props) => {
   const { theme } = useDarkMode();
 
-  const { onClickField } = useEditableDiagramInteractions();
+  const { onClickField, onChangeFieldName } = useEditableDiagramInteractions();
 
   const internalTheme = useTheme();
 
@@ -211,11 +210,20 @@ export const Field = ({
     return internalTheme.node.mongoDBAccent;
   };
 
+  const handleNameChange = useCallback(
+    (newName: string) => onChangeFieldName?.(nodeId, Array.isArray(id) ? id : [id], newName),
+    [onChangeFieldName, id, nodeId],
+  );
+
   const content = (
     <>
       <FieldName>
         <FieldDepth depth={depth} />
-        <InnerFieldName>{name}</InnerFieldName>
+        <FieldNameContent
+          name={name}
+          isEditable={editable}
+          onChange={onChangeFieldName ? handleNameChange : undefined}
+        />
       </FieldName>
       <FieldType color={getSecondaryTextColor()}>
         <FieldTypeContent type={type} nodeId={nodeId} id={id} />

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

@@ -1,11 +1,17 @@
 import React, { createContext, useContext, useMemo, ReactNode } from 'react';
 
-import { OnFieldClickHandler, OnAddFieldToNodeClickHandler, OnAddFieldToObjectFieldClickHandler } from '@/types';
+import {
+  OnFieldClickHandler,
+  OnAddFieldToNodeClickHandler,
+  OnAddFieldToObjectFieldClickHandler,
+  OnFieldNameChangeHandler,
+} from '@/types';
 
 interface EditableDiagramInteractionsContextType {
   onClickField?: OnFieldClickHandler;
   onClickAddFieldToNode?: OnAddFieldToNodeClickHandler;
   onClickAddFieldToObjectField?: OnAddFieldToObjectFieldClickHandler;
+  onChangeFieldName?: OnFieldNameChangeHandler;
 }
 
 const EditableDiagramInteractionsContext = createContext<EditableDiagramInteractionsContextType | undefined>(undefined);
@@ -15,13 +21,15 @@ interface EditableDiagramInteractionsProviderProps {
   onFieldClick?: OnFieldClickHandler;
   onAddFieldToNodeClick?: OnAddFieldToNodeClickHandler;
   onAddFieldToObjectFieldClick?: OnAddFieldToObjectFieldClickHandler;
+  onFieldNameChange?: OnFieldNameChangeHandler;
 }
 
 export const EditableDiagramInteractionsProvider: React.FC<EditableDiagramInteractionsProviderProps> = ({
   children,
   onFieldClick,
   onAddFieldToNodeClick,
   onAddFieldToObjectFieldClick,
+  onFieldNameChange,
 }) => {
   const value: EditableDiagramInteractionsContextType = useMemo(() => {
     return {
@@ -40,8 +48,13 @@ export const EditableDiagramInteractionsProvider: React.FC<EditableDiagramIntera
             onClickAddFieldToObjectField: onAddFieldToObjectFieldClick,
           }
         : undefined),
+      ...(onFieldNameChange
+        ? {
+            onChangeFieldName: onFieldNameChange,
+          }
+        : undefined),
     };
-  }, [onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick]);
+  }, [onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick, onFieldNameChange]);
 
   return (
     <EditableDiagramInteractionsContext.Provider value={value}>{children}</EditableDiagramInteractionsContext.Provider>

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

@@ -49,6 +49,14 @@ function addFieldToNode(existingFields: NodeField[], parentFieldPath: string[])
   return fields;
 }
 
+function renameField(existingFields: NodeField[], fieldPath: string[], newName: string) {
+  const fields = existingFields.map(field => {
+    if (JSON.stringify(field.id) !== JSON.stringify(fieldPath)) return field;
+    return { ...field, name: newName, id: [...fieldPath.slice(0, -1), newName] };
+  });
+  return fields;
+}
+
 let idAccumulator: string[];
 let lastDepth = 0;
 // Used to build a string array id based on field depth.
@@ -164,7 +172,20 @@ export const useEditableNodes = (initialNodes: NodeProps[]) => {
     [],
   );
 
-  return { nodes, onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick };
+  const onFieldNameChange = useCallback((nodeId: string, fieldPath: string[], newName: string) => {
+    setNodes(nodes =>
+      nodes.map(node =>
+        node.id === nodeId
+          ? {
+              ...node,
+              fields: renameField(node.fields, fieldPath, newName),
+            }
+          : node,
+      ),
+    );
+  }, []);
+
+  return { nodes, onFieldClick, onAddFieldToNodeClick, onAddFieldToObjectFieldClick, onFieldNameChange };
 };
 
 export const DiagramEditableInteractionsDecorator: Decorator<DiagramProps> = (Story, context) => {

src/types/component-props.ts

@@ -30,6 +30,11 @@ export type OnAddFieldToNodeClickHandler = (event: ReactMouseEvent, nodeId: stri
  */
 export type OnAddFieldToObjectFieldClickHandler = (event: ReactMouseEvent, nodeId: string, fieldPath: string[]) => void;
 
+/**
+ * Called when a field's name is edited.
+ */
+export type OnFieldNameChangeHandler = (nodeId: string, fieldPath: string[], newName: string) => void;
+
 /**
  * Called when the canvas (pane) is clicked.
  */
@@ -184,6 +189,11 @@ export interface DiagramProps {
    */
   onAddFieldToObjectFieldClick?: OnAddFieldToObjectFieldClickHandler;
 
+  /**
+   * Callback when a field's name is changed.
+   */
+  onFieldNameChange?: OnFieldNameChangeHandler;
+
   /**
    * Whether the diagram should pan when dragging elements.
    */

src/types/node.ts

@@ -188,4 +188,9 @@ export interface NodeField {
    * Indicates if the field is currently selected.
    */
   selected?: boolean;
+
+  /**
+   * Indicates if the field is editable (name and type can be changed).
+   */
+  editable?: boolean;
 }