Skip to content

WIP: Issue/99 Update UE instrumentation to use data-aue-component #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hydralien merged 4 commits into from
Nov 11, 2025
Merged

WIP: Issue/99 Update UE instrumentation to use data-aue-component #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa65039
Flying blind
Oct 28, 2025
8735f74
Ignore idea
Oct 28, 2025
9f683be
Address feedback
Oct 30, 2025
3ba7e31
loclhosting
Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,4 @@ jspm_packages/
.wrangler/
.DS_Store
.cursor
.idea
29 changes: 11 additions & 18 deletions src/ue/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || [];
Expand All @@ -109,19 +109,16 @@ 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);
rows.forEach((row, rIndex) => {
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',
});
Expand All @@ -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',
});
Expand All @@ -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',
});
});

Expand All @@ -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',
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand Down Expand Up @@ -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];
Expand All @@ -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);
});
Expand Down
36 changes: 12 additions & 24 deletions test/ue/attributes.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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', {
Expand Down
2 changes: 1 addition & 1 deletion wrangler.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
enabled = true