diff --git a/libs/features/dynamic-navigation/dynamic-navigation.js b/libs/features/dynamic-navigation/dynamic-navigation.js
index 7354518a58..7d943cc597 100644
--- a/libs/features/dynamic-navigation/dynamic-navigation.js
+++ b/libs/features/dynamic-navigation/dynamic-navigation.js
@@ -14,16 +14,30 @@ export function foundDisableValues() {
return foundValues.length ? foundValues : false;
}
+function dynamicNavGroupMatches(groupMetaData) {
+ const storedGroup = window.sessionStorage.getItem('dynamicNavGroup');
+ if (groupMetaData && storedGroup) {
+ return storedGroup.toLowerCase() === groupMetaData.toLowerCase();
+ }
+ return false;
+}
+
export default function dynamicNav(url, key) {
if (foundDisableValues()) return url;
const metadataContent = getMetadata('dynamic-nav');
+ const dynamicNavGroup = getMetadata('dynamic-nav-group');
if (metadataContent === 'entry') {
window.sessionStorage.setItem('gnavSource', url);
window.sessionStorage.setItem('dynamicNavKey', key);
+ if (dynamicNavGroup) window.sessionStorage.setItem('dynamicNavGroup', dynamicNavGroup);
return url;
}
+ if (metadataContent === 'on' && dynamicNavGroup) {
+ if (!dynamicNavGroupMatches(dynamicNavGroup)) return url;
+ }
+
if (metadataContent !== 'on' || key !== window.sessionStorage.getItem('dynamicNavKey')) return url;
return window.sessionStorage.getItem('gnavSource') || url;
diff --git a/libs/features/dynamic-navigation/status.js b/libs/features/dynamic-navigation/status.js
index 792f586765..3321459581 100644
--- a/libs/features/dynamic-navigation/status.js
+++ b/libs/features/dynamic-navigation/status.js
@@ -80,7 +80,11 @@ const createStatusWidget = (dynamicNavKey) => {
const currentSource = getCurrentSource(dynamicNavSetting, storedSource, authoredSource);
const dynamicNavDisableValues = getMetadata('dynamic-nav-disable');
const foundValues = foundDisableValues();
- const status = getStatus(dynamicNavSetting, foundValues.length >= 1, storedSource);
+ const groupMetaSetting = getMetadata('dynamic-nav-group') || 'Group not set';
+ const groupsMatch = groupMetaSetting.toLowerCase() === window.sessionStorage.getItem('dynamicNavGroup').toLowerCase();
+ const groupsMatchMessage = groupsMatch ? 'Yes' : 'No';
+ const isDisabled = foundValues.length >= 1 || (!groupsMatch && groupMetaSetting !== 'Group not set');
+ const status = getStatus(dynamicNavSetting, isDisabled, storedSource);
const statusWidget = createTag('div', { class: 'dynamic-nav-status' });
statusWidget.innerHTML = `
@@ -94,6 +98,8 @@ const createStatusWidget = (dynamicNavKey) => {
Status: ${status}
Setting: ${dynamicNavSetting}
+ Group: ${groupMetaSetting}
+ Group matches stored group: ${groupsMatchMessage}
Consumer key: ${dynamicNavKey}
Authored and stored source match: ${authoredSource === currentSource}
diff --git a/test/features/dynamic-nav/dynamicNav.test.js b/test/features/dynamic-nav/dynamicNav.test.js
index a08c98ba22..710b9c78e2 100644
--- a/test/features/dynamic-nav/dynamicNav.test.js
+++ b/test/features/dynamic-nav/dynamicNav.test.js
@@ -58,6 +58,24 @@ describe('Dynamic nav', () => {
expect(url).to.equal('gnav/aem-sites');
});
+ it('Returns the provided url when the group has not been set', async () => {
+ document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+ const url = dynamicNav('gnav/aem-sites', 'bacom');
+ expect(url).to.equal('some-source-string');
+ });
+
+ it('Returns the provided url when the group does not match', async () => {
+ document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+ const groupMeta = document.createElement('meta');
+ groupMeta.setAttribute('name', 'dynamic-nav-group');
+ groupMeta.setAttribute('content', 'test');
+ document.head.appendChild(groupMeta);
+
+ window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+ const url = dynamicNav('gnav/aem-sites', 'bacom');
+ expect(url).to.equal('gnav/aem-sites');
+ });
+
it('Returns the sessionStorage url when dynamic nav ignore items are present but do not match the metadata', async () => {
document.head.innerHTML = await readFile({ path: './mocks/on-ignore-does-not-match.html' });
const url = dynamicNav('gnav/aem-sites', 'bacom');
@@ -75,4 +93,16 @@ describe('Dynamic nav', () => {
const url = dynamicNav('gnav/aem-sites', 'bacom');
expect(url).to.equal('some-source-string');
});
+
+ it('Returns the sessionStorage url when the groups match', async () => {
+ document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+ const groupMeta = document.createElement('meta');
+ groupMeta.setAttribute('name', 'dynamic-nav-group');
+ groupMeta.setAttribute('content', 'test');
+ document.head.appendChild(groupMeta);
+
+ window.sessionStorage.setItem('dynamicNavGroup', 'test');
+ const url = dynamicNav('gnav/aem-sites', 'bacom');
+ expect(url).to.equal('some-source-string');
+ });
});
diff --git a/test/features/dynamic-nav/status.test.js b/test/features/dynamic-nav/status.test.js
index 2b9a261e61..6d43ae23a2 100644
--- a/test/features/dynamic-nav/status.test.js
+++ b/test/features/dynamic-nav/status.test.js
@@ -23,7 +23,8 @@ describe('Dynamic Nav Status', () => {
beforeEach(async () => {
const conf = { dynamicNavKey: 'bacom' };
document.body.innerHTML = await readFile({ path: './mocks/status.html' });
- document.head.innerHTML = '
';
+ document.head.innerHTML = '
';
+ window.sessionStorage.setItem('dynamicNavGroup', 'test');
setConfig(conf);
});
@@ -159,6 +160,73 @@ describe('Dynamic Nav Status', () => {
expect(info.authoredSource).to.equal('/test');
expect(info.storedSource).to.equal('/test');
});
+
+ it('displays the correct information for a group match', () => {
+ document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+ document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+ dynamicNav();
+ status();
+
+ const statusWidget = document.querySelector('.dynamic-nav-status');
+ const group = statusWidget.querySelector('.group span');
+ const groupMatch = statusWidget.querySelector('.group-match span');
+
+ expect(group.innerText).to.equal('test');
+ expect(groupMatch.innerText).to.equal('Yes');
+ expect(statusWidget.classList.contains(ENABLED)).to.be.true;
+ });
+
+ it('displays the correct information for a group mismatch', () => {
+ document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+ document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+ window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+
+ dynamicNav();
+ status();
+
+ const statusWidget = document.querySelector('.dynamic-nav-status');
+ const group = statusWidget.querySelector('.group span');
+ const groupMatch = statusWidget.querySelector('.group-match span');
+
+ expect(group.innerText).to.equal('test');
+ expect(groupMatch.innerText).to.equal('No');
+ expect(statusWidget.classList.contains(INACTIVE)).to.be.true;
+ });
+
+ it('displays the correct information for no group being set', () => {
+ document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+ document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+ document.querySelector('meta[name="dynamic-nav-group"]').remove();
+ window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+
+ dynamicNav();
+ status();
+
+ const statusWidget = document.querySelector('.dynamic-nav-status');
+ const group = statusWidget.querySelector('.group span');
+ const groupMatch = statusWidget.querySelector('.group-match span');
+
+ expect(group.innerText).to.equal('Group not set');
+ expect(groupMatch.innerText).to.equal('No');
+ });
+
+ it('remains active when there is no group match but the nav is active', () => {
+ document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+ document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+ document.querySelector('meta[name="dynamic-nav-group"]').remove();
+ window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+ window.sessionStorage.setItem('gnavSource', GNAV_SOURCE);
+
+ dynamicNav();
+ status();
+
+ const statusWidget = document.querySelector('.dynamic-nav-status');
+ expect(statusWidget.classList.contains(ACTIVE)).to.be.true;
+ });
});
describe('disabled values', () => {