fix/COMPASS-9956 use more stable key for field component rendering (#154)

* fix/COMPASS-9956 use more stable key for field component rendering

* better key and add tests

* Add comment in test

Author: gribnoysup

src/components/diagram.test.tsx

@@ -4,6 +4,7 @@ import { ReactFlowProvider } from '@xyflow/react';
 import { Diagram } from '@/components/diagram';
 import { EMPLOYEES_NODE } from '@/mocks/datasets/nodes';
 import { EMPLOYEES_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
+import { NodeProps } from '@/types';
 
 describe('Diagram', () => {
   it('Should render diagram', () => {
@@ -19,4 +20,59 @@ describe('Diagram', () => {
     expect(screen.getByTestId('rf__minimap')).toBeInTheDocument();
     expect(screen.getByTestId('rf__node-employees')).toBeInTheDocument();
   });
+
+  it('Should correctly add / remove fields in the node on update', () => {
+    const nodeWithFields: NodeProps = {
+      id: 'node-1',
+      title: 'Node 1',
+      position: { x: 0, y: 0 },
+      type: 'collection',
+      fields: [{ name: 'field-a' }, { name: 'field-b' }, { name: 'field-c' }],
+    };
+
+    // Render all fields first
+    const { rerender } = render(
+      <ReactFlowProvider>
+        <Diagram nodes={[nodeWithFields]} edges={[]} />
+      </ReactFlowProvider>,
+    );
+
+    expect(screen.getByText('field-a')).toBeInTheDocument();
+    expect(screen.getByText('field-b')).toBeInTheDocument();
+    expect(screen.getByText('field-c')).toBeInTheDocument();
+
+    // Add a field in the middle of the list
+    const nodeWithFieldAdded = {
+      ...nodeWithFields,
+      fields: [nodeWithFields.fields[0], { name: 'field-after-a' }, nodeWithFields.fields[1], nodeWithFields.fields[2]],
+    };
+
+    rerender(
+      <ReactFlowProvider>
+        <Diagram nodes={[nodeWithFieldAdded]} edges={[]} />
+      </ReactFlowProvider>,
+    );
+
+    expect(screen.getByText('field-a')).toBeInTheDocument();
+    expect(screen.getByText('field-after-a')).toBeInTheDocument();
+    expect(screen.getByText('field-b')).toBeInTheDocument();
+    expect(screen.getByText('field-c')).toBeInTheDocument();
+
+    // Remove the field from the middle of the list
+    const nodeWithFieldRemoved = {
+      ...nodeWithFields,
+      fields: [nodeWithFields.fields[0], nodeWithFields.fields[2]],
+    };
+
+    rerender(
+      <ReactFlowProvider>
+        <Diagram nodes={[nodeWithFieldRemoved]} edges={[]} />
+      </ReactFlowProvider>,
+    );
+
+    expect(screen.getByText('field-a')).toBeInTheDocument();
+    expect(screen.getByText('field-c')).toBeInTheDocument();
+    expect(() => screen.getByText('field-after-a')).toThrow();
+    expect(() => screen.getByText('field-b')).toThrow();
+  });
 });

src/components/field/field-list.tsx

@@ -32,20 +32,23 @@ export const FieldList = ({ fields, nodeId, nodeType, isHovering }: Props) => {
   }, [fields, isFieldSelectionEnabled]);
   return (
     <NodeFieldWrapper>
-      {fields.map(({ name, type: fieldType, ...rest }, i) => (
-        <Field
-          key={i}
-          name={name}
-          nodeId={nodeId}
-          nodeType={nodeType}
-          isHovering={isHovering}
-          previewGroupArea={previewGroupArea[getPreviewId(i, name)] || DEFAULT_PREVIEW_GROUP_AREA}
-          selectedGroupHeight={selectedGroupHeight?.[getSelectedId(i, name)]}
-          type={fieldType}
-          spacing={spacing}
-          {...rest}
-        />
-      ))}
+      {fields.map(({ id, name, type: fieldType, ...rest }, i) => {
+        const key = id ? (Array.isArray(id) ? id.join('#') : id) : `${name}-${i}`;
+        return (
+          <Field
+            key={key}
+            name={name}
+            nodeId={nodeId}
+            nodeType={nodeType}
+            isHovering={isHovering}
+            previewGroupArea={previewGroupArea[getPreviewId(i, name)] || DEFAULT_PREVIEW_GROUP_AREA}
+            selectedGroupHeight={selectedGroupHeight?.[getSelectedId(i, name)]}
+            type={fieldType}
+            spacing={spacing}
+            {...rest}
+          />
+        );
+      })}
     </NodeFieldWrapper>
   );
 };