Skip to content

feat: Support portals for components tree construction #140

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

Closed
fralongo wants to merge 1 commit into from
Closed

feat: Support portals for components tree construction #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
58 changes: 57 additions & 1 deletion src/internal/analytics-metadata/__tests__/dom-utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { activateAnalyticsMetadata, getAnalyticsMetadataAttribute, METADATA_ATTRIBUTE } from '../attributes';
import { findLogicalParent, isNodeComponent, findComponentUp, findSelectorUp } from '../dom-utils';
import { findLogicalParent, isNodeComponent, findComponentUp, findSelectorUp, findPortals } from '../dom-utils';

beforeAll(() => {
activateAnalyticsMetadata(true);
Expand Down Expand Up @@ -153,3 +153,59 @@ describe('findSelectorUp', () => {
expect(findSelectorUp(container.querySelector('#target-element'), '.test-class')).toBeNull();
});
});

describe('findPortals', () => {
test('returns an empty array when no referrerId is found', () => {
const { container } = render(<div id="root-element"></div>);
expect(findPortals(container.querySelector('#root-element')!)).toEqual([]);
});
test('returns an empty array when no portal is found', () => {
const { container } = render(
<div id="root-element">
<div data-awsui-referrer-id="id:portal"></div>
</div>
);
expect(findPortals(container.querySelector('#root-element')!)).toEqual([]);
});
test('returns one portal', () => {
const { container } = render(
<div id="root-element">
<div data-awsui-referrer-id="id:portal"></div>
<div id="id:portal" className="portal"></div>
</div>
);
expect(findPortals(container.querySelector('#root-element')!)).toEqual([container.querySelector('.portal')]);
});
test('returns multiple portals', () => {
const { container } = render(
<>
<div id="id:portal-2" className="portal-2"></div>
<div id="id:portal-3" className="portal-3"></div>
<div id="root-element">
<div data-awsui-referrer-id="id:portal-1"></div>
<div id="id:portal-1" className="portal-1"></div>
<div data-awsui-referrer-id="id:portal-2"></div>
<div data-awsui-referrer-id="id:portal-3"></div>
</div>
</>
);
expect(findPortals(container.querySelector('#root-element')!)).toEqual(
[1, 2, 3].map(index => container.querySelector(`.portal-${index}`))
);
});
test('returns only portals contained in the specified elements', () => {
const { container } = render(
<div id="root-element">
<div data-awsui-referrer-id="id:portal-1"></div>
<div id="id:portal-1" className="portal-1"></div>
<div id="target-element">
<div data-awsui-referrer-id="id:portal-2"></div>
</div>
<div id="id:portal-2" className="portal-2"></div>
<div data-awsui-referrer-id="id:portal-3"></div>
<div id="id:portal-3" className="portal-3"></div>
</div>
);
expect(findPortals(container.querySelector('#target-element')!)).toEqual([container.querySelector('.portal-2')]);
});
});
77 changes: 76 additions & 1 deletion src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { getComponentsTree } from '../utils';
import { METADATA_ATTRIBUTE, activateAnalyticsMetadata } from '../attributes';
import { METADATA_ATTRIBUTE, activateAnalyticsMetadata, getAnalyticsMetadataAttribute } from '../attributes';
import { ComponentOne, ComponentTwo, ComponentThree } from './components';

describe('getComponentsTree', () => {
Expand Down Expand Up @@ -116,6 +116,81 @@ describe('getComponentsTree', () => {
{ name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
]);
});
describe('with portals', () => {
test('returns an empty array when portal outside of the node element', () => {
const { container } = render(
<div id="outer-target">
<div data-awsui-referrer-id="id:portal-1"></div>
<div id="id:portal-1" className="portal-1">
<ComponentOne />
</div>
<div id="inner-target"></div>
</div>
);
const target = container.querySelector('#inner-target') as HTMLElement;
expect(getComponentsTree(target)).toEqual([]);
});
test('returns nested portal correctly', () => {
const { container } = render(
<div id="outer-target">
<div id="id:portal-1" className="portal-1">
<ComponentOne />
</div>
<div id="inner-target">
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentFour' } })}>
<ComponentTwo />
<div data-awsui-referrer-id="id:portal-1"></div>
</div>
</div>
</div>
);
expect(getComponentsTree(container.querySelector('#outer-target') as HTMLElement)).toEqual([
{ name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
{
name: 'ComponentFour',
children: [{ name: 'ComponentTwo', label: 'sub label' }],
},
]);
expect(getComponentsTree(container.querySelector('#inner-target') as HTMLElement)).toEqual([
{
name: 'ComponentFour',
children: [
{ name: 'ComponentTwo', label: 'sub label' },
{ name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
],
},
]);
});
test('returns recursively nested portals', () => {
const { container } = render(
<div id="outer-target">
<div id="id:portal-1">
<ComponentOne />
<div data-awsui-referrer-id="id:portal-2"></div>
</div>
<div id="id:portal-2">
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentFive' } })} />
</div>
<div id="inner-target">
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentFour' } })}>
<ComponentTwo />
<div data-awsui-referrer-id="id:portal-1"></div>
</div>
</div>
</div>
);
expect(getComponentsTree(container.querySelector('#inner-target') as HTMLElement)).toEqual([
{
name: 'ComponentFour',
children: [
{ name: 'ComponentTwo', label: 'sub label' },
{ name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } },
{ name: 'ComponentFive' },
],
},
]);
});
});
});

describe('with inactive analytics metadata', () => {
Expand Down
2 changes: 2 additions & 0 deletions src/internal/analytics-metadata/attributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { getGlobalFlag } from '../global-flags';
export const METADATA_DATA_ATTRIBUTE = 'awsuiAnalytics';
export const METADATA_ATTRIBUTE = 'data-awsui-analytics';
export const LABEL_DATA_ATTRIBUTE = 'awsuiAnalyticsLabel';
export const REFERRER_DATA_ATTRIBUTE = 'awsuiReferrerId';
export const REFERRER_ATTRIBUTE = 'data-awsui-referrer-id';
const LABEL_ATTRIBUTE = 'data-awsui-analytics-label';

let activated = getGlobalFlag('analyticsMetadata');
Expand Down
9 changes: 7 additions & 2 deletions src/internal/analytics-metadata/dom-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import { METADATA_DATA_ATTRIBUTE } from './attributes';
import { METADATA_DATA_ATTRIBUTE, REFERRER_ATTRIBUTE, REFERRER_DATA_ATTRIBUTE } from './attributes';

export const findLogicalParent = (node: HTMLElement): HTMLElement | null => {
try {
const referrer = node.dataset.awsuiReferrerId;
const referrer = node.dataset[REFERRER_DATA_ATTRIBUTE];
if (referrer) {
return document.querySelector(`[id="${referrer}"]`);
}
Expand Down Expand Up @@ -43,3 +43,8 @@ export function findSelectorUp(node: HTMLElement | null, selector: string): HTML
}
return current && current.tagName !== 'body' ? current : null;
}

export const findPortals = (node: HTMLElement): Array<HTMLElement> =>
Array.from(node.querySelectorAll(`[${REFERRER_ATTRIBUTE}]`))
.map(element => findLogicalParent(element as HTMLElement))
.filter(element => !!element) as Array<HTMLElement>;
5 changes: 4 additions & 1 deletion src/internal/analytics-metadata/page-scanner-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import { METADATA_ATTRIBUTE } from './attributes';
import { isNodeComponent } from './dom-utils';
import { findPortals, isNodeComponent } from './dom-utils';
import { getGeneratedAnalyticsMetadata } from './utils';

interface GeneratedAnalyticsMetadataComponentTree {
Expand All @@ -14,6 +14,9 @@ interface GeneratedAnalyticsMetadataComponentTree {

const getComponentsArray = (node: HTMLElement | Document = document) => {
const elementsWithMetadata = Array.from(node.querySelectorAll(`[${METADATA_ATTRIBUTE}]`)) as Array<HTMLElement>;
findPortals(node as HTMLElement).forEach(portal => {
elementsWithMetadata.push(...getComponentsArray(portal));
});
return elementsWithMetadata.filter(isNodeComponent);
};

Expand Down
Loading