From 42d99274f49836cb99493dfed2e9684887c4b556 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Tue, 30 Jul 2024 18:24:36 +0530
Subject: [PATCH 01/10] Adding configuration for header component

---
 libs/navigation/bootstrapper.js | 12 ++++--
 libs/navigation/navigation.css  |  6 +--
 libs/navigation/navigation.js   | 67 ++++++++++++++++++++++++++-------
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js
index e98941060b..acf499cda1 100644
--- a/libs/navigation/bootstrapper.js
+++ b/libs/navigation/bootstrapper.js
@@ -1,8 +1,6 @@
-export default async function bootstrapBlock(miloConfigs, blockConfig) {
-  const { miloLibs } = miloConfigs;
+export default async function bootstrapBlock(miloLibs, blockConfig) {
   const { name, targetEl } = blockConfig;
-  const { getConfig, setConfig, createTag, loadLink, loadScript } = await import(`${miloLibs}/utils/utils.js`);
-  setConfig({ ...miloConfigs });
+  const { getConfig, createTag, loadLink, loadScript } = await import(`${miloLibs}/utils/utils.js`);
   const { default: initBlock } = await import(`${miloLibs}/blocks/${name}/${name}.js`);
 
   const styles = [`${miloLibs}/blocks/${name}/${name}.css`, `${miloLibs}/navigation/navigation.css`];
@@ -12,6 +10,12 @@ export default async function bootstrapBlock(miloConfigs, blockConfig) {
     const block = createTag(targetEl, { class: name });
     document.body[blockConfig.appendType](block);
   }
+  // Configure Unav if unav components are in configs
+  if (blockConfig.targetEl === 'header' && blockConfig.unavComponents) {
+    const unavMeta = createTag('meta', { name: 'universal-nav', content: blockConfig.unavComponents });
+    document.head.append(unavMeta);
+  }
+
   initBlock(document.querySelector(targetEl));
   if (blockConfig.targetEl === 'footer') {
     const { loadPrivacy } = await import(`${miloLibs}/scripts/delayed.js`);
diff --git a/libs/navigation/navigation.css b/libs/navigation/navigation.css
index e3ef7f1241..2cb6c20882 100644
--- a/libs/navigation/navigation.css
+++ b/libs/navigation/navigation.css
@@ -1,5 +1,5 @@
  /* Extracting the essential styles required for rendering the component independently */
- .global-footer, .dialog-modal {
+ .global-navigation, .global-footer, .dialog-modal {
    font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
    line-height: 27px;
    color: #2c2c2c;
@@ -7,7 +7,7 @@
    -webkit-font-smoothing: antialiased;
 }
   
-.global-footer a, .dialog-modal a {
+.global-navigation a, .global-footer a, .dialog-modal a {
   text-decoration: none;
 }
   
@@ -15,7 +15,7 @@
   color: #035FE6;
 }
   
-.global-footer img {
+.global-navigation img, .global-footer img {
   max-width: 100%;
   height: auto;
 }
diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index 5329b5a87d..c239b5ad20 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -1,35 +1,76 @@
-const blockConfig = {
-  footer: {
+const blockConfig = [
+  {
+    key: 'header',
+    name: 'global-navigation',
+    targetEl: 'header',
+    appendType: 'prepend',
+    params: ['imsClientId'],
+  },
+  {
+    key: 'footer',
     name: 'global-footer',
     targetEl: 'footer',
     appendType: 'appendChild',
+    params: ['privacyId', 'privacyLoadDelay'],
   },
-};
+];
 
 const envMap = {
   prod: 'https://www.adobe.com',
   stage: 'https://www.stage.adobe.com',
-  qa: 'https://feds--milo--adobecom.hlx.page',
+  qa: 'https://gnav--milo--adobecom.hlx.page',
 };
+
+function getParamsConfigs(configs) {
+  return blockConfig.reduce((acc, block) => {
+    block.params.forEach((param) => {
+      const value = configs[block.key]?.[param];
+      if (value !== undefined) {
+        acc[param] = value;
+      }
+    });
+    return acc;
+  }, {});
+}
+
 export default async function loadBlock(configs, customLib) {
-  const { footer, locale, env = 'prod' } = configs || {};
+  const { header, footer, authoringPath, env = 'prod', locale = '' } = configs || {};
   const branch = new URLSearchParams(window.location.search).get('navbranch');
   const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env];
 
+  if (!header && !footer) {
+    console.error('No block configs found!');
+    return;
+  }
   // Relative path can't be used, as the script will run on consumer's app
-  const { default: bootstrapBlock } = await import(`${miloLibs}/libs/navigation/bootstrapper.js`);
-  const { default: locales } = await import(`${miloLibs}/libs/utils/locales.js`);
+  const [[{ default: bootstrapBlock }, { default: locales }, { setConfig }]] = await Promise.all([
+    Promise.all([
+      import(`${miloLibs}/libs/navigation/bootstrapper.js`),
+      import(`${miloLibs}/libs/utils/locales.js`),
+      import(`${miloLibs}/libs/utils/utils.js`),
+    ]),
+  ]);
+
+  const paramConfigs = getParamsConfigs(configs, miloLibs);
   const clientConfig = {
     origin: miloLibs,
     miloLibs: `${miloLibs}/libs`,
-    pathname: `/${locale || ''}`,
+    pathname: `/${locale}`,
     locales: configs.locales || locales,
+    contentRoot: authoringPath || footer.authoringPath,
+    ...paramConfigs,
   };
-  if (footer) {
-    const { authoringPath, privacyId, privacyLoadDelay = 3000 } = footer;
-    blockConfig.delay = privacyLoadDelay;
-    bootstrapBlock({ ...clientConfig, contentRoot: authoringPath, privacyId }, blockConfig.footer);
-  }
+  setConfig(clientConfig);
+
+  blockConfig.forEach((block) => {
+    const configBlock = configs[block.key];
+    if (configBlock) {
+      bootstrapBlock(`${miloLibs}/libs`, {
+        ...block,
+        ...(block.key === 'header' && { unavComponents: configBlock.unavComponents }),
+      });
+    }
+  });
 }
 
 window.loadNavigation = loadBlock;

From 03dce80cd83caab3aca51de7948e2e8cc6f7bd57 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Wed, 31 Jul 2024 17:26:54 +0530
Subject: [PATCH 02/10] Adding test cases

---
 libs/navigation/navigation.js        |  1 -
 test/navigation/bootstrapper.test.js | 31 +++++++++++++++++++---------
 test/navigation/navigation.test.js   | 17 ++++++++++++++-
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index c239b5ad20..4b5c48733b 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -37,7 +37,6 @@ export default async function loadBlock(configs, customLib) {
   const { header, footer, authoringPath, env = 'prod', locale = '' } = configs || {};
   const branch = new URLSearchParams(window.location.search).get('navbranch');
   const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env];
-
   if (!header && !footer) {
     console.error('No block configs found!');
     return;
diff --git a/test/navigation/bootstrapper.test.js b/test/navigation/bootstrapper.test.js
index 4415788452..18379d4a27 100644
--- a/test/navigation/bootstrapper.test.js
+++ b/test/navigation/bootstrapper.test.js
@@ -4,21 +4,25 @@ import { stub, useFakeTimers, restore } from 'sinon';
 import loadBlock from '../../libs/navigation/bootstrapper.js';
 import fetchedFooter from '../blocks/global-footer/mocks/fetched-footer.js';
 import placeholders from '../blocks/global-navigation/mocks/placeholders.js';
+import { setConfig } from '../../libs/utils/utils.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 
 const blockConfig = {
-  name: 'global-footer',
-  targetEl: 'footer',
-  appendType: 'append',
-  footer: { authoringPath: '/federal/home', privacyLoadDelay: 0 },
+  footer: {
+    name: 'global-footer',
+    targetEl: 'footer',
+    appendType: 'append',
+  },
+  header: {
+    name: 'global-navigation',
+    targetEl: 'header',
+    appendType: 'prepend',
+    unavComponents: 'profile',
+  },
 };
 
-const miloConfigs = {
-  origin: 'https://feds--milo--adobecom.hlx.page',
-  miloLibs: 'http://localhost:2000/libs',
-  pathname: '/',
-};
+const miloLibs = 'http://localhost:2000/libs';
 
 const mockRes = ({ payload, status = 200, ok = true } = {}) => new Promise((resolve) => {
   resolve({
@@ -43,6 +47,7 @@ describe('Bootstrapper', async () => {
       if (url.includes('/footer.plain.html')) return mockRes({ payload: await readFile({ path: '../blocks/region-nav/mocks/regions.html' }) });
       return null;
     });
+    setConfig({ miloLibs, contentRoot: '/federal/dev' });
   });
 
   afterEach(() => {
@@ -50,7 +55,7 @@ describe('Bootstrapper', async () => {
   });
 
   it('Renders the footer block', async () => {
-    await loadBlock(miloConfigs, blockConfig);
+    await loadBlock(miloLibs, blockConfig.footer);
     const clock = useFakeTimers({
       toFake: ['setTimeout'],
       shouldAdvanceTime: true,
@@ -59,4 +64,10 @@ describe('Bootstrapper', async () => {
     const el = document.getElementsByTagName('footer');
     expect(el).to.exist;
   });
+
+  it('Renders the header block', async () => {
+    await loadBlock(miloLibs, blockConfig.header);
+    const el = document.getElementsByTagName('header');
+    expect(el).to.exist;
+  });
 });
diff --git a/test/navigation/navigation.test.js b/test/navigation/navigation.test.js
index 28b3bacc13..466452b269 100644
--- a/test/navigation/navigation.test.js
+++ b/test/navigation/navigation.test.js
@@ -6,8 +6,23 @@ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 
 describe('Navigation component', async () => {
   it('Renders the footer block', async () => {
-    await loadBlock({ footer: { authoringPath: '/federal/home' }, env: 'qa' }, 'http://localhost:2000');
+    await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa' }, 'http://localhost:2000');
     const el = document.getElementsByTagName('footer');
     expect(el).to.exist;
   });
+
+  it('Renders the header block', async () => {
+    await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo' }, env: 'qa' }, 'http://localhost:2000');
+    const el = document.getElementsByTagName('header');
+    expect(el).to.exist;
+  });
+
+  it('Does not render either header or footer if not found in configs', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await loadBlock({ authoringPath: '/federal/dev', env: 'qa' }, 'http://localhost:2000');
+    const header = document.getElementsByTagName('header');
+    const footer = document.getElementsByTagName('footer');
+    expect(header).to.be.empty;
+    expect(footer).to.be.empty;
+  });
 });

From bec1ec0dfbd0b927c4a9b6a0b0bfb00b223f8ee9 Mon Sep 17 00:00:00 2001
From: Snehal Sonawane <sonawane@Snehals-MacBook-Pro.local>
Date: Wed, 31 Jul 2024 17:49:02 +0530
Subject: [PATCH 03/10] Adding css changes

---
 libs/navigation/navigation.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/libs/navigation/navigation.css b/libs/navigation/navigation.css
index 2cb6c20882..57d888c6fd 100644
--- a/libs/navigation/navigation.css
+++ b/libs/navigation/navigation.css
@@ -1,6 +1,7 @@
  /* Extracting the essential styles required for rendering the component independently */
  .global-navigation, .global-footer, .dialog-modal {
    font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
+   font-size: 18px;
    line-height: 27px;
    color: #2c2c2c;
    word-wrap: break-word;
@@ -19,3 +20,8 @@
   max-width: 100%;
   height: auto;
 }
+
+header.global-navigation {
+  height: var(--global-height-nav);
+  visibility: hidden;
+}

From ee55711a6dc1ed8061ee9ee12951276f240b0b3a Mon Sep 17 00:00:00 2001
From: Snehal Sonawane <sonawane@Snehals-MacBook-Pro.local>
Date: Wed, 31 Jul 2024 18:16:32 +0530
Subject: [PATCH 04/10] Updated for css

---
 libs/navigation/navigation.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/libs/navigation/navigation.css b/libs/navigation/navigation.css
index 57d888c6fd..96ac72d5de 100644
--- a/libs/navigation/navigation.css
+++ b/libs/navigation/navigation.css
@@ -1,7 +1,6 @@
  /* Extracting the essential styles required for rendering the component independently */
  .global-navigation, .global-footer, .dialog-modal {
    font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
-   font-size: 18px;
    line-height: 27px;
    color: #2c2c2c;
    word-wrap: break-word;
@@ -21,7 +20,11 @@
   height: auto;
 }
 
+.global-navigation {
+  font-size: 18px;
+}
+ 
 header.global-navigation {
-  height: var(--global-height-nav);
+  height: 64px;
   visibility: hidden;
 }

From 1d7355d0de2eeefd5a4c2f5e8dd5ba97bcbb8c66 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Thu, 1 Aug 2024 10:39:32 +0530
Subject: [PATCH 05/10] Setting the origin to federal

---
 libs/navigation/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index 4b5c48733b..685d834982 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -52,7 +52,7 @@ export default async function loadBlock(configs, customLib) {
 
   const paramConfigs = getParamsConfigs(configs, miloLibs);
   const clientConfig = {
-    origin: miloLibs,
+    origin: `https://main--federal--adobecom.hlx.${env === 'prod' ? 'live' : 'page'}`,
     miloLibs: `${miloLibs}/libs`,
     pathname: `/${locale}`,
     locales: configs.locales || locales,

From c2d74dbaa57ff8d90e5d830be607a3ac13f805a8 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Thu, 1 Aug 2024 12:16:41 +0530
Subject: [PATCH 06/10] Removing promise array

---
 libs/navigation/navigation.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index 685d834982..742305b674 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -42,12 +42,10 @@ export default async function loadBlock(configs, customLib) {
     return;
   }
   // Relative path can't be used, as the script will run on consumer's app
-  const [[{ default: bootstrapBlock }, { default: locales }, { setConfig }]] = await Promise.all([
-    Promise.all([
-      import(`${miloLibs}/libs/navigation/bootstrapper.js`),
-      import(`${miloLibs}/libs/utils/locales.js`),
-      import(`${miloLibs}/libs/utils/utils.js`),
-    ]),
+  const [{ default: bootstrapBlock }, { default: locales }, { setConfig }] = await Promise.all([
+    import(`${miloLibs}/libs/navigation/bootstrapper.js`),
+    import(`${miloLibs}/libs/utils/locales.js`),
+    import(`${miloLibs}/libs/utils/utils.js`),
   ]);
 
   const paramConfigs = getParamsConfigs(configs, miloLibs);

From 36cde88914d109a7905442eda9423757c3eeb3dd Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Mon, 5 Aug 2024 11:21:42 +0530
Subject: [PATCH 07/10] Adding redirect uri in meta

---
 libs/navigation/bootstrapper.js | 15 +++++++++++----
 libs/navigation/navigation.js   |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js
index acf499cda1..e1d54c5c98 100644
--- a/libs/navigation/bootstrapper.js
+++ b/libs/navigation/bootstrapper.js
@@ -10,10 +10,17 @@ export default async function bootstrapBlock(miloLibs, blockConfig) {
     const block = createTag(targetEl, { class: name });
     document.body[blockConfig.appendType](block);
   }
-  // Configure Unav if unav components are in configs
-  if (blockConfig.targetEl === 'header' && blockConfig.unavComponents) {
-    const unavMeta = createTag('meta', { name: 'universal-nav', content: blockConfig.unavComponents });
-    document.head.append(unavMeta);
+  // Configure Unav components and redirect uri
+  if (blockConfig.targetEl === 'header') {
+    ['unavComponents', 'redirect'].forEach((key) => {
+      if (blockConfig[key]) {
+        const metaTag = createTag('meta', {
+          name: key === 'unavComponents' ? 'universal-nav' : 'adobe-home-redirect',
+          content: blockConfig[key],
+        });
+        document.head.append(metaTag);
+      }
+    });
   }
 
   initBlock(document.querySelector(targetEl));
diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index 742305b674..276c32bb35 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -64,7 +64,7 @@ export default async function loadBlock(configs, customLib) {
     if (configBlock) {
       bootstrapBlock(`${miloLibs}/libs`, {
         ...block,
-        ...(block.key === 'header' && { unavComponents: configBlock.unavComponents }),
+        ...(block.key === 'header' && { unavComponents: configBlock.unavComponents, redirect: configBlock.redirect }),
       });
     }
   });

From 8d966a92de0afc51744d1429f82c2f53c15bfe00 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Mon, 5 Aug 2024 16:50:40 +0530
Subject: [PATCH 08/10] Updating meta insert function

---
 libs/navigation/bootstrapper.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js
index e1d54c5c98..da35a9aed1 100644
--- a/libs/navigation/bootstrapper.js
+++ b/libs/navigation/bootstrapper.js
@@ -12,10 +12,14 @@ export default async function bootstrapBlock(miloLibs, blockConfig) {
   }
   // Configure Unav components and redirect uri
   if (blockConfig.targetEl === 'header') {
-    ['unavComponents', 'redirect'].forEach((key) => {
+    const metaTags = [
+      { key: 'unavComponents', name: 'universal-nav' },
+      { key: 'redirect', name: 'adobe-home-redirect' }
+    ];
+    metaTags.forEach((tags) => {
       if (blockConfig[key]) {
         const metaTag = createTag('meta', {
-          name: key === 'unavComponents' ? 'universal-nav' : 'adobe-home-redirect',
+          name: tags.name,
           content: blockConfig[key],
         });
         document.head.append(metaTag);

From a55099547833f5617bb8940af99f065c2c5b5142 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Mon, 5 Aug 2024 17:10:25 +0530
Subject: [PATCH 09/10] Lint fix

---
 libs/navigation/bootstrapper.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js
index da35a9aed1..e644702992 100644
--- a/libs/navigation/bootstrapper.js
+++ b/libs/navigation/bootstrapper.js
@@ -14,12 +14,13 @@ export default async function bootstrapBlock(miloLibs, blockConfig) {
   if (blockConfig.targetEl === 'header') {
     const metaTags = [
       { key: 'unavComponents', name: 'universal-nav' },
-      { key: 'redirect', name: 'adobe-home-redirect' }
+      { key: 'redirect', name: 'adobe-home-redirect' },
     ];
-    metaTags.forEach((tags) => {
+    metaTags.forEach((tag) => {
+      const { key } = tag;
       if (blockConfig[key]) {
         const metaTag = createTag('meta', {
-          name: tags.name,
+          name: tag.name,
           content: blockConfig[key],
         });
         document.head.append(metaTag);

From bd6f4b896600b24e7a8532baa98b85f29f6bb615 Mon Sep 17 00:00:00 2001
From: Bandana Laishram <bandanalaishram@gmail.com>
Date: Tue, 6 Aug 2024 20:53:22 +0530
Subject: [PATCH 10/10] Making error message descriptive

---
 libs/navigation/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index 276c32bb35..c74bcaed2e 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -38,7 +38,7 @@ export default async function loadBlock(configs, customLib) {
   const branch = new URLSearchParams(window.location.search).get('navbranch');
   const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env];
   if (!header && !footer) {
-    console.error('No block configs found!');
+    console.error('Global navigation Error: header and footer configurations are missing.');
     return;
   }
   // Relative path can't be used, as the script will run on consumer's app