feat/COMPASS-9798 inline field name editing

Author: paula-stacho

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

@@ -65,6 +65,7 @@ export const DiagramWithEditInteractions: Story = {
             ...field,
             id: idFromDepthAccumulator(field.name, field.depth),
             selectable: true,
+            editable: true,
           })),
         ],
       },
@@ -75,6 +76,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,62 @@
+import { styled } from 'storybook/internal/theming';
+import { useCallback, useState } from 'react';
+
+import { ellipsisTruncation } from '@/styles/styles';
+import { DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
+
+const InnerFieldName = styled.div`
+  ${ellipsisTruncation}
+`;
+
+const InlineTextarea = styled.textarea`
+  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 handleSubmit = useCallback(() => {
+    setIsEditing(false);
+    onChange?.(value);
+  }, [value, onChange]);
+
+  return isEditing ? (
+    <InlineTextarea
+      value={value}
+      onChange={e => {
+        setValue(e.target.value);
+      }}
+      onBlur={handleSubmit}
+      onKeyDown={e => {
+        if (e.key === 'Enter') handleSubmit();
+        if (e.key === 'Escape') setIsEditing(false);
+      }}
+    />
+  ) : (
+    <InnerFieldName
+      onDoubleClick={
+        onChange && isEditable
+          ? () => {
+              setIsEditing(true);
+            }
+          : undefined
+      }
+    >
+      {value}
+    </InnerFieldName>
+  );
+};

src/components/field/field.tsx

@@ -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();
 
@@ -215,7 +214,15 @@ export const Field = ({
     <>
       <FieldName>
         <FieldDepth depth={depth} />
-        <InnerFieldName>{name}</InnerFieldName>
+        <FieldNameContent
+          name={name}
+          isEditable={editable}
+          onChange={
+            onChangeFieldName
+              ? (newName: string) => onChangeFieldName(nodeId, Array.isArray(id) ? id : [id], newName)
+              : 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,15 @@ 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] };
+  });
+  console.log('Renamed fields:', fields);
+  return fields;
+}
+
 export const DiagramEditableInteractionsDecorator: Decorator<DiagramProps> = (Story, context) => {
   const [nodes, setNodes] = useState<NodeProps[]>(context.args.nodes);
 
@@ -107,6 +116,19 @@ export const DiagramEditableInteractionsDecorator: Decorator<DiagramProps> = (St
     [],
   );
 
+  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 Story({
     ...context,
     args: {
@@ -115,6 +137,7 @@ export const DiagramEditableInteractionsDecorator: Decorator<DiagramProps> = (St
       onFieldClick,
       onAddFieldToNodeClick,
       onAddFieldToObjectFieldClick,
+      onFieldNameChange,
     },
   });
 };

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;
 }