fix/COMPASS-9961 make sure id is not silently swallowed on the Field component (#155)

* fix/COMPASS-9961 make sure id is not silently swallowed on the Field component

* update mock data in tests

Author: gribnoysup

src/components/field/field-list.test.tsx

@@ -0,0 +1,57 @@
+import { userEvent } from '@testing-library/user-event';
+
+import { render, screen } from '@/mocks/testing-utils';
+import { FieldList as FieldListComponent } from '@/components/field/field-list';
+import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagram-interactions';
+
+const FieldWithEditableInteractions = ({
+  onAddFieldToObjectFieldClick,
+  onFieldNameChange,
+  onFieldClick,
+  ...props
+}: Partial<React.ComponentProps<typeof FieldListComponent>> & {
+  onAddFieldToObjectFieldClick?: () => void;
+  onFieldNameChange?: (newName: string) => void;
+  onFieldClick?: () => void;
+}) => {
+  return (
+    <EditableDiagramInteractionsProvider
+      onFieldClick={onFieldClick}
+      onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
+      onFieldNameChange={onFieldNameChange}
+    >
+      <FieldListComponent nodeType="collection" nodeId="coll" fields={[]} {...props} />
+    </EditableDiagramInteractionsProvider>
+  );
+};
+
+describe('field-list', () => {
+  it('Should call field click callback with field id (and fallback to name when id missing)', async () => {
+    const onFieldClick = vi.fn();
+    render(
+      <FieldWithEditableInteractions
+        onFieldClick={onFieldClick}
+        fields={[
+          { name: 'field-with-just-name', selectable: true },
+          { id: ['field', 'with', 'id'], name: 'and-custom-name', selectable: true },
+        ]}
+      />,
+    );
+    expect(screen.getByText('field-with-just-name')).toBeInTheDocument();
+    expect(screen.getByText('and-custom-name')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByText('field-with-just-name'));
+    expect(onFieldClick).toHaveBeenCalledTimes(1);
+    expect(onFieldClick.mock.lastCall?.[1]).toEqual({
+      id: 'field-with-just-name',
+      nodeId: 'coll',
+    });
+
+    await userEvent.click(screen.getByText('and-custom-name'));
+    expect(onFieldClick).toHaveBeenCalledTimes(2);
+    expect(onFieldClick.mock.lastCall?.[1]).toEqual({
+      id: ['field', 'with', 'id'],
+      nodeId: 'coll',
+    });
+  });
+});

src/components/field/field-list.tsx

@@ -37,6 +37,7 @@ export const FieldList = ({ fields, nodeId, nodeType, isHovering }: Props) => {
         return (
           <Field
             key={key}
+            id={id ?? name}
             name={name}
             nodeId={nodeId}
             nodeType={nodeType}

src/components/field/field.test.tsx

@@ -33,6 +33,7 @@ const FieldWithEditableInteractions = ({
 
 describe('field', () => {
   const DEFAULT_PROPS: ComponentProps<typeof Field> = {
+    id: 'ordersId',
     nodeType: 'collection',
     name: 'ordersId',
     nodeId: 'pineapple',

src/components/field/field.tsx

@@ -10,7 +10,7 @@ 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 { FieldId, NodeField, NodeGlyph, NodeType } from '@/types';
 import { PreviewGroupArea } from '@/utilities/get-preview-group-area';
 import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
 
@@ -123,6 +123,7 @@ const IconWrapper = styled(Icon)`
 `;
 
 interface Props extends NodeField {
+  id: FieldId;
   nodeId: string;
   nodeType: NodeType;
   spacing: number;
@@ -136,7 +137,7 @@ export const Field = ({
   isHovering = false,
   name,
   nodeId,
-  id = name,
+  id,
   depth = 0,
   type,
   nodeType,