diff --git a/.gitignore b/.gitignore index 451ec5d..7161910 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ jspm_packages/ .wrangler/ .DS_Store .cursor +.idea diff --git a/src/ue/attributes.js b/src/ue/attributes.js index c8806e9..882a52e 100644 --- a/src/ue/attributes.js +++ b/src/ue/attributes.js @@ -83,7 +83,7 @@ function wrapParagraphs(section) { * @param {Object} block - The block element to process */ function addBlockFieldAttributes(ueConfig, block) { - const blockName = block.properties['data-aue-model']; + const blockName = block.properties['data-aue-component'] ?? block.properties['data-aue-model']; const modelDef = getModelDefinition(ueConfig, blockName); if (modelDef) { const fields = modelDef.fields || []; @@ -109,10 +109,8 @@ function addColumnBehaviourInstrumentation(section, sIndex, block, bIndex, block addAttributes(block, { 'data-aue-resource': `urn:ab:section-${sIndex}/columns-${bIndex}`, 'data-aue-label': blockCmpDef.title, - 'data-aue-model': blockName, - 'data-aue-filter': blockName, + 'data-aue-component': blockName, 'data-aue-type': 'container', - 'data-aue-behavior': 'component', }); const rows = selectAll(':scope>div', block); @@ -120,8 +118,7 @@ function addColumnBehaviourInstrumentation(section, sIndex, block, bIndex, block addAttributes(row, { 'data-aue-resource': `urn:ab:section-${sIndex}/columns-${bIndex}/row-${rIndex}`, 'data-aue-label': `${blockCmpDef.title} Row`, - 'data-aue-model': `${blockName}-row`, - 'data-aue-filter': `${blockName}-row`, + 'data-aue-component': `${blockName}-row`, 'data-aue-type': 'container', 'data-aue-behavior': 'component', }); @@ -131,8 +128,7 @@ function addColumnBehaviourInstrumentation(section, sIndex, block, bIndex, block addAttributes(cell, { 'data-aue-resource': `urn:ab:section-${sIndex}/columns-${bIndex}/row-${rIndex}/cell-${cIndex}`, 'data-aue-label': `${blockCmpDef.title} Cell`, - 'data-aue-model': `${blockName}-cell`, - 'data-aue-filter': `${blockName}-cell`, + 'data-aue-component': `${blockName}-cell`, 'data-aue-type': 'container', 'data-aue-behavior': 'component', }); @@ -145,10 +141,9 @@ function addColumnBehaviourInstrumentation(section, sIndex, block, bIndex, block addAttributes(picture, { 'data-aue-resource': `urn:ab:section-${sIndex}/columns-${bIndex}/row-${rIndex}/cell-${cIndex}/image-${iIndex}`, 'data-aue-label': 'Image', - 'data-aue-behavior': 'component', + 'data-aue-component': 'image', 'data-aue-prop': 'image', 'data-aue-type': 'container', - 'data-aue-model': 'image', }); }); @@ -157,6 +152,7 @@ function addColumnBehaviourInstrumentation(section, sIndex, block, bIndex, block richTextWrappers.forEach((wrapper, wIndex) => { addAttributes(wrapper, { 'data-aue-resource': `urn:ab:section-${sIndex}/columns-${bIndex}/row-${rIndex}/cell-${cIndex}/text-${wIndex}`, + 'data-aue-component': 'text', 'data-aue-type': 'richtext', 'data-aue-label': 'Text', 'data-aue-prop': 'root', @@ -210,9 +206,8 @@ export function injectUEAttributes(bodyTree, ueConfig) { 'data-aue-resource': `urn:ab:section-${sIndex}`, 'data-aue-type': 'container', 'data-aue-label': componentDef ? componentDef.title : 'Section', - 'data-aue-model': 'section', + 'data-aue-component': 'section', 'data-aue-behavior': 'component', - 'data-aue-filter': 'section', }); // handle rich text @@ -235,10 +230,9 @@ export function injectUEAttributes(bodyTree, ueConfig) { addAttributes(picture, { 'data-aue-resource': `urn:ab:section-${sIndex}/asset-${iIndex}`, 'data-aue-label': 'Image', - 'data-aue-behavior': 'component', 'data-aue-prop': 'image', 'data-aue-type': 'media', - 'data-aue-model': 'image', + 'data-aue-component': 'image', }); // TODO wait for SITES-27973 // const img = select('img', picture); @@ -270,16 +264,15 @@ export function injectUEAttributes(bodyTree, ueConfig) { 'data-aue-label': blockCmpDef ? blockCmpDef.title : `${blockName} (no definition)`, - 'data-aue-model': blockName, + 'data-aue-component': blockName, }); addBlockFieldAttributes(ueConfig, block); // apply block flter and child items if (filterDef) { addAttributes(block, { - 'data-aue-filter': blockName, + 'data-aue-component': blockName, 'data-aue-type': 'container', - 'data-aue-behavior': 'component', }); const itemId = filterDef.components[0]; @@ -291,7 +284,7 @@ export function injectUEAttributes(bodyTree, ueConfig) { 'data-aue-resource': `urn:ab:section-${sIndex}/block-${bIndex}/item-${biIndex}`, 'data-aue-type': 'component', 'data-aue-label': itemCmpDef.title, - 'data-aue-model': itemCmpDef.id, + 'data-aue-component': itemCmpDef.id, }); addBlockFieldAttributes(ueConfig, blockItem); }); diff --git a/test/ue/attributes.test.js b/test/ue/attributes.test.js index 129a7a1..6015385 100644 --- a/test/ue/attributes.test.js +++ b/test/ue/attributes.test.js @@ -77,7 +77,7 @@ describe('UE attributes', () => { assert.equal(section.properties['data-aue-resource'], 'urn:ab:section-0'); assert.equal(section.properties['data-aue-type'], 'container'); assert.equal(section.properties['data-aue-label'], 'Section'); - assert.equal(section.properties['data-aue-model'], 'section'); + assert.equal(section.properties['data-aue-component'], 'section'); }); it('adds UE attributes to blocks within sections', () => { @@ -108,7 +108,7 @@ describe('UE attributes', () => { assert.equal(block.properties['data-aue-resource'], 'urn:ab:section-0/block-0'); assert.equal(block.properties['data-aue-type'], 'component'); assert.equal(block.properties['data-aue-label'], 'Card Block'); - assert.equal(block.properties['data-aue-model'], 'card-block'); + assert.equal(block.properties['data-aue-component'], 'card-block'); }); it('adds UE attributes to block items', () => { @@ -149,11 +149,10 @@ describe('UE attributes', () => { assert.equal(blockItems[0].properties['data-aue-resource'], 'urn:ab:section-0/block-0/item-0'); assert.equal(blockItems[0].properties['data-aue-type'], 'component'); assert.equal(blockItems[0].properties['data-aue-label'], 'Card'); - assert.equal(blockItems[0].properties['data-aue-model'], 'card'); + assert.equal(blockItems[0].properties['data-aue-component'], 'card'); assert.equal(blockItems[1].properties['data-aue-resource'], 'urn:ab:section-0/block-0/item-1'); assert.equal(blockItems[1].properties['data-aue-type'], 'component'); assert.equal(blockItems[1].properties['data-aue-label'], 'Card'); - assert.equal(blockItems[1].properties['data-aue-model'], 'card'); }); it('adds UE attributes to body for page metadata', () => { @@ -208,7 +207,7 @@ describe('UE attributes', () => { assert.equal(bodyTree.properties['data-aue-resource'], undefined); assert.equal(bodyTree.properties['data-aue-label'], undefined); assert.equal(bodyTree.properties['data-aue-type'], undefined); - assert.equal(bodyTree.properties['data-aue-model'], undefined); + assert.equal(bodyTree.properties['data-aue-component'], undefined); }); it('adds UE attributes to richtext within sections', () => { @@ -274,7 +273,7 @@ describe('UE attributes', () => { assert.equal(image.properties['data-aue-resource'], 'urn:ab:section-0/asset-0'); assert.equal(image.properties['data-aue-type'], 'media'); assert.equal(image.properties['data-aue-label'], 'Image'); - assert.equal(image.properties['data-aue-model'], 'image'); + assert.equal(image.properties['data-aue-component'], 'image'); }); it('adds UE attributes to block fields based on model definition', () => { @@ -477,46 +476,36 @@ describe('UE attributes', () => { const columnBlock = select('main > div > div', bodyTree); assert.equal(columnBlock.properties['data-aue-resource'], 'urn:ab:section-0/columns-0'); assert.equal(columnBlock.properties['data-aue-label'], 'Custom Columns'); - assert.equal(columnBlock.properties['data-aue-model'], 'custom-columns'); - assert.equal(columnBlock.properties['data-aue-filter'], 'custom-columns'); + assert.equal(columnBlock.properties['data-aue-component'], 'custom-columns'); assert.equal(columnBlock.properties['data-aue-type'], 'container'); - assert.equal(columnBlock.properties['data-aue-behavior'], 'component'); // Test first row attributes const firstRow = select('main > div > div > div:first-child', bodyTree); assert.equal(firstRow.properties['data-aue-resource'], 'urn:ab:section-0/columns-0/row-0'); assert.equal(firstRow.properties['data-aue-label'], 'Custom Columns Row'); - assert.equal(firstRow.properties['data-aue-model'], 'custom-columns-row'); - assert.equal(firstRow.properties['data-aue-filter'], 'custom-columns-row'); + assert.equal(firstRow.properties['data-aue-component'], 'custom-columns-row'); assert.equal(firstRow.properties['data-aue-type'], 'container'); - assert.equal(firstRow.properties['data-aue-behavior'], 'component'); // Test first cell attributes const firstCell = select('main > div > div > div:first-child > div:first-child', bodyTree); assert.equal(firstCell.properties['data-aue-resource'], 'urn:ab:section-0/columns-0/row-0/cell-0'); assert.equal(firstCell.properties['data-aue-label'], 'Custom Columns Cell'); - assert.equal(firstCell.properties['data-aue-model'], 'custom-columns-cell'); - assert.equal(firstCell.properties['data-aue-filter'], 'custom-columns-cell'); + assert.equal(firstCell.properties['data-aue-component'], 'custom-columns-cell'); assert.equal(firstCell.properties['data-aue-type'], 'container'); - assert.equal(firstCell.properties['data-aue-behavior'], 'component'); // Test second row attributes const secondRow = select('main > div > div > div:last-child', bodyTree); assert.equal(secondRow.properties['data-aue-resource'], 'urn:ab:section-0/columns-0/row-1'); assert.equal(secondRow.properties['data-aue-label'], 'Custom Columns Row'); - assert.equal(secondRow.properties['data-aue-model'], 'custom-columns-row'); - assert.equal(secondRow.properties['data-aue-filter'], 'custom-columns-row'); + assert.equal(secondRow.properties['data-aue-component'], 'custom-columns-row'); assert.equal(secondRow.properties['data-aue-type'], 'container'); - assert.equal(secondRow.properties['data-aue-behavior'], 'component'); // Test second row first cell attributes const secondRowFirstCell = select('main > div > div > div:last-child > div:first-child', bodyTree); assert.equal(secondRowFirstCell.properties['data-aue-resource'], 'urn:ab:section-0/columns-0/row-1/cell-0'); assert.equal(secondRowFirstCell.properties['data-aue-label'], 'Custom Columns Cell'); - assert.equal(secondRowFirstCell.properties['data-aue-model'], 'custom-columns-cell'); - assert.equal(secondRowFirstCell.properties['data-aue-filter'], 'custom-columns-cell'); + assert.equal(secondRowFirstCell.properties['data-aue-component'], 'custom-columns-cell'); assert.equal(secondRowFirstCell.properties['data-aue-type'], 'container'); - assert.equal(secondRowFirstCell.properties['data-aue-behavior'], 'component'); }); it('instruments picture and richtext inside column cells', () => { @@ -570,10 +559,9 @@ describe('UE attributes', () => { assert.ok(picture, 'Picture element exists'); assert.equal(picture.properties['data-aue-resource'], 'urn:ab:section-0/columns-0/row-0/cell-0/image-0'); assert.equal(picture.properties['data-aue-label'], 'Image'); - assert.equal(picture.properties['data-aue-behavior'], 'component'); assert.equal(picture.properties['data-aue-prop'], 'image'); assert.equal(picture.properties['data-aue-type'], 'container'); - assert.equal(picture.properties['data-aue-model'], 'image'); + assert.equal(picture.properties['data-aue-component'], 'image'); // Richtext instrumentation const richtext = select('div.richtext', cell); @@ -706,7 +694,7 @@ describe('UE attributes', () => { 'data-aue-resource': 'urn:ab:section-0/block-0', 'data-aue-type': 'component', 'data-aue-label': 'Hero', - 'data-aue-model': 'hero', + 'data-aue-component': 'hero', }, [ h('div', {}, [ h('div', { diff --git a/wrangler.toml b/wrangler.toml index 2562cb7..8480fd4 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -17,4 +17,4 @@ vars = { ENVIRONMENT = "stage", UE_HOST = "stage-ue.da.live", UE_SERVICE = "http services = [{ binding = "daadmin", service = "da-admin" }] [env.stage.observability] -enabled = true \ No newline at end of file +enabled = true