chore/MIG-6900 Fix preview border when there exists duplicate field names (#46)

* chore/MIG-6900 Fix preview when there exists a field with the same name

* chore/MIG-6900 Swap parameters

Author: lchans

src/components/field/field-list.tsx

@@ -3,7 +3,7 @@ import { spacing } from '@leafygreen-ui/tokens';
 
 import { Field } from '@/components/field/field';
 import { NodeField, NodeType } from '@/types';
-import { DEFAULT_PREVIEW_GROUP_AREA, getPreviewGroupArea } from '@/utilities/get-preview-group-area';
+import { DEFAULT_PREVIEW_GROUP_AREA, getPreviewGroupArea, getPreviewId } from '@/utilities/get-preview-group-area';
 import { DEFAULT_FIELD_PADDING } from '@/utilities/constants';
 
 const NodeFieldWrapper = styled.div`
@@ -28,7 +28,7 @@ export const FieldList = ({ fields, nodeType, isHovering }: Props) => {
           name={name}
           nodeType={nodeType}
           isHovering={isHovering}
-          previewGroupArea={previewGroupArea[name] || DEFAULT_PREVIEW_GROUP_AREA}
+          previewGroupArea={previewGroupArea[getPreviewId(i, name)] || DEFAULT_PREVIEW_GROUP_AREA}
           type={fieldType}
           spacing={spacing}
           {...rest}

src/components/node/node.stories.tsx

@@ -355,6 +355,12 @@ export const NodeWithNestedPreviewFields: Story = {
           depth: 1,
           variant: 'preview',
         },
+        {
+          name: 'addresses',
+          type: 'string',
+          depth: 2,
+          variant: 'preview',
+        },
         {
           name: 'streetName',
           type: 'string',

src/utilities/get-preview-group-area.test.ts

@@ -1,36 +1,48 @@
-import { getPreviewGroupArea } from '@/utilities/get-preview-group-area';
+import { getPreviewGroupArea, getPreviewId } from '@/utilities/get-preview-group-area';
 
 describe('get-preview-group-lengths', () => {
+  it('Should get preview id', () => {
+    const previewId = getPreviewId(40, 'orders');
+    expect(previewId).toEqual('40.orders');
+  });
   it('With empty list', () => {
     const result = getPreviewGroupArea([]);
     expect(result).toEqual({});
   });
   it('With single field with preview variant', () => {
     const result = getPreviewGroupArea([{ variant: 'preview', name: 'orderId' }]);
-    expect(result).toEqual({ orderId: { height: 1, width: 0 } });
+    expect(result).toEqual({ ['0.orderId']: { height: 1, width: 0 } });
   });
   it('With all fields with preview variant', () => {
     const result = getPreviewGroupArea([
       { variant: 'preview', name: 'orderId' },
       { variant: 'preview', name: 'shippingAddress' },
       { variant: 'preview', name: 'transactionId' },
     ]);
-    expect(result).toEqual({ orderId: { height: 3, width: 0 } });
+    expect(result).toEqual({ ['0.orderId']: { height: 3, width: 0 } });
+  });
+  it('With all fields with preview variant, with duplicate names', () => {
+    const result = getPreviewGroupArea([
+      { variant: 'preview', name: 'orderId' },
+      { variant: 'preview', name: 'orderId' },
+      { variant: 'preview', name: 'orderId' },
+    ]);
+    expect(result).toEqual({ ['0.orderId']: { height: 3, width: 0 } });
   });
   it('With variable number of glyphs', () => {
     const result = getPreviewGroupArea([
       { variant: 'preview', name: 'orderId', glyphs: ['key', 'key'] },
       { variant: 'preview', name: 'shippingAddress', glyphs: ['key', 'key', 'key', 'key'] },
       { variant: 'preview', name: 'transactionId' },
     ]);
-    expect(result).toEqual({ orderId: { height: 3, width: 4 } });
+    expect(result).toEqual({ ['0.orderId']: { height: 3, width: 4 } });
   });
   it('With some fields with preview variant', () => {
     const result = getPreviewGroupArea([
       { variant: 'preview', name: 'orderId', glyphs: ['key'] },
       { name: 'shippingAddress' },
       { variant: 'preview', name: 'transactionId' },
     ]);
-    expect(result).toEqual({ orderId: { height: 1, width: 1 }, transactionId: { height: 1, width: 0 } });
+    expect(result).toEqual({ ['0.orderId']: { height: 1, width: 1 }, ['2.transactionId']: { height: 1, width: 0 } });
   });
 });

src/utilities/get-preview-group-area.ts

@@ -10,6 +10,10 @@ export const DEFAULT_PREVIEW_GROUP_AREA = {
   width: 0,
 };
 
+export const getPreviewId = (id: number, name: string) => {
+  return `${id}.${name}`;
+};
+
 /**
  * Computes the area of consecutive groups of fields with the variant "preview".
  * Height is a unit that is denoted by the number of consecutive fields.
@@ -26,7 +30,7 @@ export const getPreviewGroupArea = (fields: Array<NodeField>) => {
 
     if (field.variant === 'preview') {
       if (!name) {
-        name = field.name;
+        name = getPreviewId(i, field.name);
       }
       currentArea = {
         height: currentArea.height + 1,