From 2ad06d1eb3c70741b25338063466ec7c091404fe Mon Sep 17 00:00:00 2001
From: mohamedsalem401 <salemmohamed780@gmail.com>
Date: Thu, 16 Jan 2025 13:28:19 +0200
Subject: [PATCH] Change collection definition properties

---
 .../ComponentDataCollection.ts                | 54 +++++++-----
 .../ComponentDataCollectionVariable.ts        |  6 +-
 .../data_collection/DataCollectionVariable.ts | 20 ++---
 .../model/data_collection/constants.ts        |  2 +-
 .../model/data_collection/types.ts            | 12 +--
 .../ComponentDataCollection.ts                | 68 +++++++-------
 .../ComponentDataCollectionVariable.ts        |  6 +-
 .../ComponentDataCollection.ts.snap           | 88 +++++++++----------
 8 files changed, 133 insertions(+), 123 deletions(-)

diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
index 0d6a925c9..eaea887cb 100644
--- a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
+++ b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
@@ -35,8 +35,8 @@ export default class ComponentDataCollection extends Component {
       opt,
     );
 
-    const collectionDefinition = props[keyCollectionDefinition];
-    if (!collectionDefinition) {
+    const collectionDef = props[keyCollectionDefinition];
+    if (!collectionDef) {
       em.logError('missing collection definition');
 
       return cmp;
@@ -44,10 +44,10 @@ export default class ComponentDataCollection extends Component {
 
     const parentCollectionStateMap = (props[keyCollectionsStateMap] || {}) as DataCollectionStateMap;
 
-    const components: Component[] = getCollectionItems(em, collectionDefinition, parentCollectionStateMap, opt);
+    const components: Component[] = getCollectionItems(em, collectionDef, parentCollectionStateMap, opt);
 
     if (this.hasDynamicDataSource()) {
-      this.watchDataSource(em, collectionDefinition, parentCollectionStateMap, opt);
+      this.watchDataSource(em, collectionDef, parentCollectionStateMap, opt);
     }
     cmp.components(components);
 
@@ -59,7 +59,7 @@ export default class ComponentDataCollection extends Component {
   }
 
   hasDynamicDataSource() {
-    const dataSource = this.get(keyCollectionDefinition).config.dataSource;
+    const dataSource = this.get(keyCollectionDefinition).collectionConfig.dataSource;
     return typeof dataSource === 'object' && dataSource.type === DataVariableType;
   }
 
@@ -67,7 +67,7 @@ export default class ComponentDataCollection extends Component {
     const json = super.toJSON(opts) as ComponentDataCollectionDefinition;
 
     const firstChild = this.getBlockDefinition();
-    json[keyCollectionDefinition].block = firstChild;
+    json[keyCollectionDefinition].componentDef = firstChild;
 
     delete json.components;
     delete json.droppable;
@@ -83,11 +83,11 @@ export default class ComponentDataCollection extends Component {
 
   private watchDataSource(
     em: EditorModel,
-    collectionDefinition: DataCollectionDefinition,
+    collectionDef: DataCollectionDefinition,
     parentCollectionStateMap: DataCollectionStateMap,
     opt: ComponentOptions,
   ) {
-    const path = this.get(keyCollectionDefinition).config.dataSource?.path;
+    const path = this.get(keyCollectionDefinition).collectionConfig.dataSource?.path;
     const dataVariable = new DataVariable(
       {
         type: DataVariableType,
@@ -100,7 +100,7 @@ export default class ComponentDataCollection extends Component {
       em: em,
       dataVariable,
       updateValueFromDataVariable: () => {
-        const collectionItems = getCollectionItems(em, collectionDefinition, parentCollectionStateMap, opt);
+        const collectionItems = getCollectionItems(em, collectionDef, parentCollectionStateMap, opt);
         this.components(collectionItems);
       },
     });
@@ -109,33 +109,43 @@ export default class ComponentDataCollection extends Component {
 
 function getCollectionItems(
   em: EditorModel,
-  collectionDefinition: DataCollectionDefinition,
+  collectionDef: DataCollectionDefinition,
   parentCollectionStateMap: DataCollectionStateMap,
   opt: ComponentOptions,
 ) {
-  const { collectionName, block, config } = collectionDefinition;
-  if (!block) {
-    em.logError('The "block" property is required in the collection definition.');
+  const { componentDef, collectionConfig } = collectionDef;
+  if (!collectionConfig) {
+    em.logError('The "collectionConfig" property is required in the collection definition.');
     return [];
   }
 
-  if (!config?.dataSource) {
-    em.logError('The "config.dataSource" property is required in the collection definition.');
+  if (!componentDef) {
+    em.logError('The "componentDef" property is required in the collection definition.');
     return [];
   }
 
+  if (!collectionConfig?.dataSource) {
+    em.logError('The "collectionConfig.dataSource" property is required in the collection definition.');
+    return [];
+  }
+
+  const collectionId = collectionConfig.collectionId;
+
   const components: Component[] = [];
 
-  let items: any[] = getDataSourceItems(config.dataSource, em);
-  const startIndex = Math.max(0, config.startIndex || 0);
-  const endIndex = Math.min(items.length - 1, config.endIndex !== undefined ? config.endIndex : Number.MAX_VALUE);
+  let items: any[] = getDataSourceItems(collectionConfig.dataSource, em);
+  const startIndex = Math.max(0, collectionConfig.startIndex || 0);
+  const endIndex = Math.min(
+    items.length - 1,
+    collectionConfig.endIndex !== undefined ? collectionConfig.endIndex : Number.MAX_VALUE,
+  );
 
   const totalItems = endIndex - startIndex + 1;
   let blockSymbolMain: Component;
   for (let index = startIndex; index <= endIndex; index++) {
     const item = items[index];
     const collectionState: DataCollectionState = {
-      collectionName,
+      collectionId,
       currentIndex: index,
       currentItem: item,
       startIndex: startIndex,
@@ -146,18 +156,18 @@ function getCollectionItems(
 
     const collectionsStateMap: DataCollectionStateMap = {
       ...parentCollectionStateMap,
-      ...(collectionName && { [collectionName]: collectionState }),
+      ...(collectionId && { [collectionId]: collectionState }),
       [keyInnerCollectionState]: collectionState,
     };
 
     if (index === startIndex) {
       // @ts-ignore
-      const type = em.Components.getType(block?.type || 'default');
+      const type = em.Components.getType(componentDef?.type || 'default');
       const model = type.model;
 
       blockSymbolMain = new model(
         {
-          ...block,
+          ...componentDef,
           [keyCollectionsStateMap]: collectionsStateMap,
           [keyIsCollectionItem]: true,
           draggable: false,
diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariable.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
index 15a55a191..14e2e6a43 100644
--- a/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
+++ b/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
@@ -13,7 +13,7 @@ export default class ComponentDataCollectionVariable extends Component {
       // @ts-ignore
       ...super.defaults,
       type: CollectionVariableType,
-      collectionName: undefined,
+      collectionId: undefined,
       variableType: undefined,
       path: undefined,
     };
@@ -22,10 +22,10 @@ export default class ComponentDataCollectionVariable extends Component {
   constructor(props: DataCollectionVariableDefinition & ComponentProperties, opt: ComponentOptions) {
     super(props, opt);
     const em = opt.em;
-    const { type, variableType, path, collectionName } = props;
+    const { type, variableType, path, collectionId } = props;
 
     this.datacollectionVariable = new DataCollectionVariable(
-      { type, variableType, path, collectionName },
+      { type, variableType, path, collectionId },
       {
         em,
         collectionsStateMap: this.get(keyCollectionsStateMap),
diff --git a/packages/core/src/data_sources/model/data_collection/DataCollectionVariable.ts b/packages/core/src/data_sources/model/data_collection/DataCollectionVariable.ts
index 223264584..6a9a64d8f 100644
--- a/packages/core/src/data_sources/model/data_collection/DataCollectionVariable.ts
+++ b/packages/core/src/data_sources/model/data_collection/DataCollectionVariable.ts
@@ -18,7 +18,7 @@ export default class DataCollectionVariable extends Model<ResolvedDataCollection
   defaults(): Partial<ResolvedDataCollectionVariable> {
     return {
       type: CollectionVariableType,
-      collectionName: undefined,
+      collectionId: undefined,
       variableType: undefined,
       path: undefined,
       value: undefined,
@@ -95,7 +95,7 @@ export default class DataCollectionVariable extends Model<ResolvedDataCollection
   toJSON(options?: any) {
     const json = super.toJSON(options);
     delete json.value;
-    !json.collectionName && delete json.collectionName;
+    !json.collectionId && delete json.collectionId;
 
     return json;
   }
@@ -106,23 +106,23 @@ function resolveCollectionVariable(
   collectionsStateMap: DataCollectionStateMap,
   em: EditorModel,
 ) {
-  const { collectionName = keyInnerCollectionState, variableType, path } = collectionVariableDefinition;
+  const { collectionId = keyInnerCollectionState, variableType, path } = collectionVariableDefinition;
   if (!collectionsStateMap) return;
 
-  const collectionItem = collectionsStateMap[collectionName];
+  const collectionItem = collectionsStateMap[collectionId];
 
   if (!collectionItem) {
-    em.logError(`Collection not found: ${collectionName}`);
+    em.logError(`Collection not found: ${collectionId}`);
     return '';
   }
 
   if (!variableType) {
-    em.logError(`Missing collection variable type for collection: ${collectionName}`);
+    em.logError(`Missing collection variable type for collection: ${collectionId}`);
     return '';
   }
 
   if (variableType === 'currentItem') {
-    return resolveCurrentItem(collectionItem, path, collectionName, em);
+    return resolveCurrentItem(collectionItem, path, collectionId, em);
   }
 
   return collectionItem[variableType];
@@ -131,13 +131,13 @@ function resolveCollectionVariable(
 function resolveCurrentItem(
   collectionItem: DataCollectionState,
   path: string | undefined,
-  collectionName: string,
+  collectionId: string,
   em: EditorModel,
 ) {
   const currentItem = collectionItem.currentItem;
 
   if (!currentItem) {
-    em.logError(`Current item is missing for collection: ${collectionName}`);
+    em.logError(`Current item is missing for collection: ${collectionId}`);
     return '';
   }
 
@@ -150,7 +150,7 @@ function resolveCurrentItem(
   }
 
   if (path && !currentItem[path]) {
-    em.logError(`Path not found in current item: ${path} for collection: ${collectionName}`);
+    em.logError(`Path not found in current item: ${path} for collection: ${collectionId}`);
     return '';
   }
 
diff --git a/packages/core/src/data_sources/model/data_collection/constants.ts b/packages/core/src/data_sources/model/data_collection/constants.ts
index c4db44134..590635f5d 100644
--- a/packages/core/src/data_sources/model/data_collection/constants.ts
+++ b/packages/core/src/data_sources/model/data_collection/constants.ts
@@ -1,5 +1,5 @@
 export const CollectionComponentType = 'collection-component';
-export const keyCollectionDefinition = 'collectionDefinition';
+export const keyCollectionDefinition = 'collectionDef';
 export const keyInnerCollectionState = 'innerCollectionState';
 export const keyIsCollectionItem = '__is_collection_item';
 export const CollectionVariableType = 'parent-collection-variable';
diff --git a/packages/core/src/data_sources/model/data_collection/types.ts b/packages/core/src/data_sources/model/data_collection/types.ts
index 50d118618..6246aeddd 100644
--- a/packages/core/src/data_sources/model/data_collection/types.ts
+++ b/packages/core/src/data_sources/model/data_collection/types.ts
@@ -5,6 +5,7 @@ import { DataVariableDefinition } from '../DataVariable';
 export type DataCollectionDataSource = any[] | DataVariableDefinition | DataCollectionVariableDefinition;
 
 export interface DataCollectionConfig {
+  collectionId?: string;
   startIndex?: number;
   endIndex?: number;
   dataSource: DataCollectionDataSource;
@@ -15,7 +16,7 @@ export enum DataCollectionStateVariableType {
   startIndex = 'startIndex',
   currentItem = 'currentItem',
   endIndex = 'endIndex',
-  collectionName = 'collectionName',
+  collectionId = 'collectionId',
   totalItems = 'totalItems',
   remainingItems = 'remainingItems',
 }
@@ -25,7 +26,7 @@ export interface DataCollectionState {
   [DataCollectionStateVariableType.startIndex]: number;
   [DataCollectionStateVariableType.currentItem]: any;
   [DataCollectionStateVariableType.endIndex]: number;
-  [DataCollectionStateVariableType.collectionName]?: string;
+  [DataCollectionStateVariableType.collectionId]?: string;
   [DataCollectionStateVariableType.totalItems]: number;
   [DataCollectionStateVariableType.remainingItems]: number;
 }
@@ -40,14 +41,13 @@ export interface ComponentDataCollectionDefinition extends ComponentDefinition {
 
 export interface DataCollectionDefinition {
   type: typeof CollectionComponentType;
-  collectionName?: string;
-  config: DataCollectionConfig;
-  block: ComponentDefinition;
+  collectionConfig: DataCollectionConfig;
+  componentDef: ComponentDefinition;
 }
 
 export type DataCollectionVariableDefinition = {
   type: typeof CollectionVariableType;
   variableType: DataCollectionStateVariableType;
-  collectionName?: string;
+  collectionId?: string;
   path?: string;
 };
diff --git a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts
index cf944bef3..3506399d4 100644
--- a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts
+++ b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts
@@ -42,11 +42,11 @@ describe('Collection component', () => {
   test('Collection component should be undroppable', () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
-      collectionDefinition: {
-        block: {
+      collectionDef: {
+        componentDef: {
           type: 'default',
         },
-        config: {
+        collectionConfig: {
           dataSource: {
             type: DataVariableType,
             path: 'my_data_source_id',
@@ -61,11 +61,11 @@ describe('Collection component', () => {
   test('Collection items should be undraggable', () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
-      collectionDefinition: {
-        block: {
+      collectionDef: {
+        componentDef: {
           type: 'default',
         },
-        config: {
+        collectionConfig: {
           dataSource: {
             type: DataVariableType,
             path: 'my_data_source_id',
@@ -82,8 +82,8 @@ describe('Collection component', () => {
   test('Collection items should be symbols', () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
-      collectionDefinition: {
-        block: {
+      collectionDef: {
+        componentDef: {
           type: 'default',
           components: [
             {
@@ -91,7 +91,7 @@ describe('Collection component', () => {
             },
           ],
         },
-        config: {
+        collectionConfig: {
           dataSource: {
             type: DataVariableType,
             path: 'my_data_source_id',
@@ -122,8 +122,8 @@ describe('Collection component', () => {
       beforeEach(() => {
         cmp = wrapper.components({
           type: CollectionComponentType,
-          collectionDefinition: {
-            block: {
+          collectionDef: {
+            componentDef: {
               type: 'default',
               components: [
                 {
@@ -146,7 +146,7 @@ describe('Collection component', () => {
                 path: 'user',
               },
             },
-            config: {
+            collectionConfig: {
               dataSource: {
                 type: DataVariableType,
                 path: 'my_data_source_id',
@@ -277,8 +277,8 @@ describe('Collection component', () => {
       beforeEach(() => {
         cmp = wrapper.components({
           type: CollectionComponentType,
-          collectionDefinition: {
-            block: {
+          collectionDef: {
+            componentDef: {
               type: 'default',
               components: [
                 {
@@ -300,7 +300,7 @@ describe('Collection component', () => {
                 },
               },
             },
-            config: {
+            collectionConfig: {
               dataSource: {
                 type: DataVariableType,
                 path: 'my_data_source_id',
@@ -427,8 +427,8 @@ describe('Collection component', () => {
     test('Traits', () => {
       const cmp = wrapper.components({
         type: CollectionComponentType,
-        collectionDefinition: {
-          block: {
+        collectionDef: {
+          componentDef: {
             type: 'default',
             traits: [
               {
@@ -450,7 +450,7 @@ describe('Collection component', () => {
               },
             ],
           },
-          config: {
+          collectionConfig: {
             dataSource: {
               type: DataVariableType,
               path: 'my_data_source_id',
@@ -524,13 +524,13 @@ describe('Collection component', () => {
 
       const collectionComponentDefinition = {
         type: CollectionComponentType,
-        collectionDefinition: {
-          collectionName: 'my_collection',
-          block: {
+        collectionDef: {
+          componentDef: {
             ...cmpDefinition,
             components: [cmpDefinition, cmpDefinition],
           },
-          config: {
+          collectionConfig: {
+            collectionId: 'my_collection',
             startIndex: 0,
             endIndex: 1,
             dataSource: {
@@ -591,8 +591,8 @@ describe('Collection component', () => {
                 component: {
                   components: [
                     {
-                      collectionDefinition: {
-                        block: {
+                      collectionDef: {
+                        componentDef: {
                           attributes: {
                             attribute_trait: {
                               path: 'user',
@@ -684,8 +684,8 @@ describe('Collection component', () => {
                           },
                           type: 'default',
                         },
-                        collectionName: 'my_collection',
-                        config: {
+                        collectionConfig: {
+                          collectionId: 'my_collection',
                           dataSource: {
                             path: 'my_data_source_id',
                             type: DataVariableType,
@@ -761,8 +761,8 @@ describe('Collection component', () => {
     test('Collection with start and end indexes', () => {
       const cmp = wrapper.components({
         type: CollectionComponentType,
-        collectionDefinition: {
-          block: {
+        collectionDef: {
+          componentDef: {
             type: 'default',
             name: {
               type: CollectionVariableType,
@@ -770,7 +770,7 @@ describe('Collection component', () => {
               path: 'user',
             },
           },
-          config: {
+          collectionConfig: {
             startIndex: 1,
             endIndex: 2,
             dataSource: {
@@ -796,7 +796,7 @@ describe('Collection component', () => {
       { variableType: DataCollectionStateVariableType.startIndex, expectedValues: [0, 0, 0] },
       { variableType: DataCollectionStateVariableType.endIndex, expectedValues: [2, 2, 2] },
       {
-        variableType: DataCollectionStateVariableType.collectionName,
+        variableType: DataCollectionStateVariableType.collectionId,
         expectedValues: ['my_collection', 'my_collection', 'my_collection'],
       },
       { variableType: DataCollectionStateVariableType.totalItems, expectedValues: [3, 3, 3] },
@@ -807,9 +807,8 @@ describe('Collection component', () => {
       test(`Variable type: ${variableType}`, () => {
         const cmp = wrapper.components({
           type: CollectionComponentType,
-          collectionDefinition: {
-            collectionName: 'my_collection',
-            block: {
+          collectionDef: {
+            componentDef: {
               type: 'default',
               name: {
                 type: CollectionVariableType,
@@ -839,7 +838,8 @@ describe('Collection component', () => {
                 },
               ],
             },
-            config: {
+            collectionConfig: {
+              collectionId: 'my_collection',
               dataSource: {
                 type: DataVariableType,
                 path: 'my_data_source_id',
diff --git a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
index 7c3bc161c..e032416cd 100644
--- a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
+++ b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
@@ -40,8 +40,8 @@ describe('Collection component', () => {
   test('Collection variable components', async () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
-      collectionDefinition: {
-        block: {
+      collectionDef: {
+        componentDef: {
           type: 'default',
           components: [
             {
@@ -51,7 +51,7 @@ describe('Collection component', () => {
             },
           ],
         },
-        config: {
+        collectionConfig: {
           dataSource: {
             type: DataVariableType,
             path: 'my_data_source_id',
diff --git a/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap
index 39905c556..7fc6d5d71 100644
--- a/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap
+++ b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap
@@ -2,8 +2,17 @@
 
 exports[`Collection component Serialization Saving: Collection with grandchildren 1`] = `
 {
-  "collectionDefinition": {
-    "block": {
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 1,
+      "startIndex": 0,
+    },
+    "componentDef": {
       "attributes": {
         "attribute_trait": {
           "path": "user",
@@ -105,15 +114,6 @@ exports[`Collection component Serialization Saving: Collection with grandchildre
       },
       "type": "default",
     },
-    "collectionName": "my_collection",
-    "config": {
-      "dataSource": {
-        "path": "my_data_source_id",
-        "type": "data-variable",
-      },
-      "endIndex": 1,
-      "startIndex": 0,
-    },
   },
   "type": "collection-component",
 }
@@ -121,8 +121,17 @@ exports[`Collection component Serialization Saving: Collection with grandchildre
 
 exports[`Collection component Serialization Saving: Collection with no grandchildren 1`] = `
 {
-  "collectionDefinition": {
-    "block": {
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 1,
+      "startIndex": 0,
+    },
+    "componentDef": {
       "attributes": {
         "attribute_trait": {
           "path": "user",
@@ -214,15 +223,6 @@ exports[`Collection component Serialization Saving: Collection with no grandchil
       },
       "type": "default",
     },
-    "collectionName": "my_collection",
-    "config": {
-      "dataSource": {
-        "path": "my_data_source_id",
-        "type": "data-variable",
-      },
-      "endIndex": 1,
-      "startIndex": 0,
-    },
   },
   "type": "collection-component",
 }
@@ -230,8 +230,17 @@ exports[`Collection component Serialization Saving: Collection with no grandchil
 
 exports[`Collection component Serialization Serializion with Collection Variables to JSON: Collection with grandchildren 1`] = `
 {
-  "collectionDefinition": {
-    "block": {
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 1,
+      "startIndex": 0,
+    },
+    "componentDef": {
       "attributes": {
         "attribute_trait": {
           "path": "user",
@@ -333,15 +342,6 @@ exports[`Collection component Serialization Serializion with Collection Variable
       },
       "type": "default",
     },
-    "collectionName": "my_collection",
-    "config": {
-      "dataSource": {
-        "path": "my_data_source_id",
-        "type": "data-variable",
-      },
-      "endIndex": 1,
-      "startIndex": 0,
-    },
   },
   "type": "collection-component",
 }
@@ -349,8 +349,17 @@ exports[`Collection component Serialization Serializion with Collection Variable
 
 exports[`Collection component Serialization Serializion with Collection Variables to JSON: Collection with no grandchildren 1`] = `
 {
-  "collectionDefinition": {
-    "block": {
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 1,
+      "startIndex": 0,
+    },
+    "componentDef": {
       "attributes": {
         "attribute_trait": {
           "path": "user",
@@ -442,15 +451,6 @@ exports[`Collection component Serialization Serializion with Collection Variable
       },
       "type": "default",
     },
-    "collectionName": "my_collection",
-    "config": {
-      "dataSource": {
-        "path": "my_data_source_id",
-        "type": "data-variable",
-      },
-      "endIndex": 1,
-      "startIndex": 0,
-    },
   },
   "type": "collection-component",
 }