Merge branch 'stage' of https://github.com/adobecom/milo into stage

adobecom · Sep 18, 2024 · ba52918 · ba52918
2 parents 52f8672 + 9323f28
commit ba52918
Show file tree

Hide file tree

Showing 195 changed files with 15,113 additions and 3,861 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -45,6 +45,17 @@ module.exports = {
       files: ['test/**/*.js'],
       rules: { 'no-console': 0 },
     },
+    {
+      // Override for nala test
+      files: ['nala/**/*.js', 'nala/**/*.test.js'],
+      rules: {
+        'no-console': 0,
+        'import/no-extraneous-dependencies': 0,
+        'max-len': 0,
+        'chai-friendly/no-unused-expressions': 0,
+        'no-plusplus': 0,
+      },
+    },
   ],
   ignorePatterns: [
     '/libs/deps/*',

diff --git a/.github/workflows/run-nala-default.yml b/.github/workflows/run-nala-default.yml
@@ -0,0 +1,48 @@
+name: Run Nala Tests
+
+on:
+  push:
+    branches:
+      - stage
+      - main
+  pull_request:
+    branches:
+      - stage
+      - main
+    types: [opened, synchronize, reopened]
+
+jobs:
+  run-nala-tests:
+    name: Running Nala E2E UI Tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Set execute permission for nalarun.sh
+        run: chmod +x ./nala/utils/pr.run.sh
+
+      - name: Run Nala Tests via pr.run.sh
+        run: ./nala/utils/pr.run.sh
+        env:
+          labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
+          branch: ${{ github.event.pull_request.head.ref }}
+          repoName: ${{ github.repository }}
+          prUrl: ${{ github.event.pull_request.head.repo.html_url }}
+          prOrg: ${{ github.event.pull_request.head.repo.owner.login }}
+          prRepo: ${{ github.event.pull_request.head.repo.name }}
+          prBranch: ${{ github.event.pull_request.head.ref }}
+          prBaseBranch: ${{ github.event.pull_request.base.ref }}
+          GITHUB_ACTION_PATH: ${{ github.workspace }}
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}
diff --git a/.github/workflows/run-nala.yml b/.github/workflows/run-nala.yml
@@ -7,7 +7,6 @@ on:
 jobs:
   action:
     name: Running E2E & IT
-    if: contains(github.event.pull_request.labels.*.name, 'run-nala')
     runs-on: ubuntu-latest
 
     steps:

diff --git a/.hlxignore b/.hlxignore
@@ -3,6 +3,7 @@
 .*
 *.md
 test/*
+nala
 build/*
 LICENSE
 web-test-runner.config.mjs

diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
@@ -1,22 +1,15 @@
-import { createIntersectionObserver } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { decorateAnchorVideo } from '../../utils/decorate.js';
 
-const ROOT_MARGIN = 1000;
-
-const loadAdobeTv = (a) => {
+export default function init(a) {
+  a.classList.add('hide-video');
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
-    const { href, hash, dataset } = a;
-    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
-    const video = `<video ${attrs}>
-          <source src="${href}" type="video/mp4" />
-        </video>`;
     if (!a.parentNode) return;
-    a.insertAdjacentHTML('afterend', video);
-    const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
-    applyHoverPlay(videoElem);
-    a.remove();
+    decorateAnchorVideo({
+      src: a.href,
+      anchorTag: a,
+    });
   } else {
     const embed = `<div class="milo-video">
       <iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
@@ -25,17 +18,4 @@ const loadAdobeTv = (a) => {
     a.insertAdjacentHTML('afterend', embed);
     a.remove();
   }
-};
-
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (a.textContent.includes('no-lazy')) {
-    loadAdobeTv(a);
-  } else {
-    createIntersectionObserver({
-      el: a,
-      options: { rootMargin: `${ROOT_MARGIN}px` },
-      callback: loadAdobeTv,
-    });
-  }
 }
diff --git a/libs/blocks/article-feed/article-helpers.js b/libs/blocks/article-feed/article-helpers.js
@@ -129,7 +129,7 @@ export async function loadTaxonomy() {
         a.href = tax.link;
       } else {
         // eslint-disable-next-line no-console
-        window.lana.log(`Trying to get a link for an unknown topic: ${topic} (current page)`, { tags: 'errorType=warn,module=article-feed' });
+        window.lana.log(`Trying to get a link for an unknown topic: ${topic} (current page)`, { tags: 'article-feed' });
         a.href = '#';
       }
       delete a.dataset.topicLink;

diff --git a/libs/blocks/article-header/article-header.js b/libs/blocks/article-header/article-header.js
@@ -32,14 +32,15 @@ function openPopup(e) {
 }
 
 async function buildAuthorInfo(authorEl, bylineContainer) {
-  const { href, textContent } = authorEl;
+  const { textContent } = authorEl;
+  const link = authorEl.href || authorEl.dataset.authorPage;
   const config = getConfig();
   const base = config.miloLibs || config.codeRoot;
   const authorImg = createTag('div', { class: 'article-author-image' });
   authorImg.style.backgroundImage = `url(${base}/blocks/article-header/adobe-logo.svg)`;
   bylineContainer.prepend(authorImg);
 
-  const doc = await validateAuthorUrl(href);
+  const doc = await validateAuthorUrl(link);
   if (!doc) {
     const p = createTag('p', null, textContent);
     authorEl.replaceWith(p);
@@ -48,7 +49,7 @@ async function buildAuthorInfo(authorEl, bylineContainer) {
 
   const img = doc.querySelector('img');
   if (img) {
-    img.setAttribute('alt', authorEl.textContent);
+    img.setAttribute('alt', textContent);
     authorImg.append(img);
     if (!img.complete) {
       img.addEventListener('load', () => {
@@ -197,7 +198,7 @@ export default async function init(blockEl) {
   bylineContainer.firstElementChild.classList.add('article-byline-info');
 
   const authorContainer = bylineContainer.firstElementChild.firstElementChild;
-  const authorEl = authorContainer.querySelector('a');
+  const authorEl = authorContainer.firstElementChild;
   authorContainer.classList.add('article-author');
 
   buildAuthorInfo(authorEl, bylineContainer);

diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js
@@ -660,7 +660,7 @@ const PaginationPanel = () => {
       options=${defaultOptions.paginationType}
     />
     <${Select}
-      label="Animation Style"
+      label="Carousel Animation Style"
       prop="paginationAnimationStyle"
       options=${defaultOptions.paginationAnimationStyle}
     />

diff --git a/libs/blocks/event-rich-results/event-rich-results.js b/libs/blocks/event-rich-results/event-rich-results.js
@@ -16,7 +16,7 @@ function logNullValues(obj) {
   Object.keys(obj).forEach((key) => {
     const value = obj[key];
     if (!value || value === '') {
-      window.lana.log(`Event property ${key} is not defined`, { tags: 'errorType=warn,module=event-rich-results' });
+      window.lana.log(`Event property ${key} is not defined`, { tags: 'event-rich-results' });
     }
     logNullValues(value);
   });

diff --git a/libs/blocks/faas/utils.js b/libs/blocks/faas/utils.js
@@ -248,7 +248,7 @@ const beforeSubmitCallback = () => {
       }),
     })
       .catch((error) => {
-        window.lana.log(`AA Sandbox Error: ${error.reason || error.error || error.message || error}`, { tags: 'errorType=info,module=faas' });
+        window.lana.log(`AA Sandbox Error: ${error.reason || error.error || error.message || error}`, { tags: 'faas', errorType: 'i' });
       });
   }
 };

diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
@@ -1,4 +1,5 @@
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -15,23 +16,22 @@ function htmlToElement(html) {
 }
 
 function decorateVideo(clone, figEl) {
-  let video = clone.querySelector('video');
-  const videoLink = clone.querySelector('a[href*=".mp4"]');
-  if (videoLink) {
-    const { href, hash, dataset } = videoLink;
-    const attrs = getVideoAttrs(hash, dataset);
-    const videoElem = `<video ${attrs}>
-      <source src="${href}" type="video/mp4" />
-    </video>`;
-
-    videoLink.insertAdjacentHTML('afterend', videoElem);
-    videoLink.remove();
-    video = clone.querySelector('video');
-  }
-  if (video) {
-    video.removeAttribute('data-mouseevent');
-    applyHoverPlay(video);
-    figEl.prepend(video);
+  const videoTag = clone.querySelector('video');
+  const anchorTag = clone.querySelector('a[href*=".mp4"]');
+  if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
+  if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
+  if (videoTag) {
+    videoTag.removeAttribute('data-mouseevent');
+    if (videoTag.dataset?.videoSource) {
+      videoTag.appendChild(
+        createTag('source', {
+          src: videoTag.dataset?.videoSource,
+          type: 'video/mp4',
+        }),
+      );
+    }
+    applyHoverPlay(videoTag);
+    figEl.prepend(videoTag);
   }
 }
 

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -521,7 +521,7 @@ class Gnav {
       return 'linux';
     };
 
-    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.1';
+    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.3';
     await Promise.all([
       loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
       loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
@@ -608,9 +608,6 @@ class Gnav {
       locale,
       imsClientId: window.adobeid?.client_id,
       theme: isDarkMode() ? 'dark' : 'light',
-      onReady: () => {
-        this.decorateAppPrompt({ getAnchorState: () => window.UniversalNav.getComponent?.('app-switcher') });
-      },
       analyticsContext: {
         consumer: {
           name: 'adobecom',
@@ -627,8 +624,8 @@ class Gnav {
 
     // Exposing UNAV config for consumers
     CONFIG.universalNav.universalNavConfig = getConfiguration();
-    window.UniversalNav(CONFIG.universalNav.universalNavConfig);
-
+    await window.UniversalNav(CONFIG.universalNav.universalNavConfig);
+    this.decorateAppPrompt({ getAnchorState: () => window.UniversalNav.getComponent?.('app-switcher') });
     isDesktop.addEventListener('change', () => {
       window.UniversalNav.reload(CONFIG.universalNav.universalNavConfig);
     });
@@ -822,6 +819,7 @@ class Gnav {
         ${isDesktop.matches ? '' : this.decorateSearch()}
         ${this.elements.mainNav}
         ${isDesktop.matches ? this.decorateSearch() : ''}
+        ${getConfig().searchEnabled === 'on' ? toFragment`<div class="feds-client-search"></div>` : ''}
       </div>
     `;
 

diff --git a/libs/blocks/hero-marquee/hero-marquee.css b/libs/blocks/hero-marquee/hero-marquee.css
@@ -17,6 +17,7 @@
   align-items: center;
 }
 
+.hero-marquee.no-min-height { min-height: unset; }
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 

diff --git a/libs/blocks/hero-marquee/hero-marquee.js b/libs/blocks/hero-marquee/hero-marquee.js
@@ -132,14 +132,14 @@ function parseKeyString(str) {
   return result;
 }
 
-function loadContentType(el, key, classes) {
+async function loadContentType(el, key, classes) {
   if (classes !== undefined && classes.length) el.classList.add(...classes);
   switch (key) {
     case 'bgcolor':
       decorateBg(el);
       break;
     case 'lockup':
-      decorateLockupRow(el, classes);
+      await decorateLockupRow(el, classes);
       break;
     case 'qrcode':
       decorateQr(el);
@@ -164,14 +164,16 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length > 1 && rows[0].textContent !== '') {
+  if (rows.length <= 1) return;
+  const [head, ...tail] = rows;
+  rows = tail;
+  if (head.textContent.trim() === '') {
+    head.remove();
+  } else {
     el.classList.add('has-bg');
-    const [head, ...tail] = rows;
     handleObjectFit(head);
     decorateBlockBg(el, head, { useHandleFocalpoint: true });
-    rows = tail;
   }
-
   // get first row that's not a keyword key/value row
   const mainRowIndex = rows.findIndex((row) => {
     const firstColText = row.children[0].textContent.toLowerCase().trim();
@@ -237,6 +239,7 @@ export default async function init(el) {
     }
   });
 
+  const promiseArr = [];
   [...rows].forEach(async (row) => {
     const cols = row.querySelectorAll(':scope > div');
     const firstCol = cols[0];
@@ -248,12 +251,15 @@ export default async function init(el) {
       firstCol.parentElement.classList.add(`row-${parsed.key}`, 'con-block');
       firstCol.remove();
       cols[1].classList.add('row-wrapper');
-      if (contentTypes.includes(parsed.key)) loadContentType(row, parsed.key, parsed.classes);
+      if (contentTypes.includes(parsed.key)) {
+        promiseArr.push(loadContentType(row, parsed.key, parsed.classes));
+      }
     } else {
       row.classList.add('norm');
       decorateBlockHrs(row);
       decorateButtons(row, 'button-xl');
     }
   });
   decorateTextOverrides(el, ['-heading', '-body', '-detail'], mainCopy);
+  await Promise.all(promiseArr);
 }
diff --git a/libs/blocks/library-config/lists/templates.js b/libs/blocks/library-config/lists/templates.js
@@ -43,7 +43,7 @@ function formatDom(aemDom, path) {
 
 async function formatTemplate(path) {
   const resp = await fetch(path);
-  if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'errorType=info,module=sidekick-templates' });
+  if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'sidekick-templates', errorType: 'i' });
 
   const html = await resp.text();
   const dom = new DOMParser().parseFromString(html, 'text/html');

diff --git a/libs/blocks/merch-card-collection/merch-card-collection.js b/libs/blocks/merch-card-collection/merch-card-collection.js
@@ -1,3 +1,4 @@
+import { overrideUrlOrigin } from '../../utils/helpers.js';
 import {
   createTag, decorateLinks, getConfig, loadBlock, loadStyle, localizeLink,
 } from '../../utils/utils.js';
@@ -57,7 +58,7 @@ async function getCardsRoot(config, html) {
 }
 
 const fetchOverrideCard = (action, config) => new Promise((resolve, reject) => {
-  fetch(`${localizeLink(action?.target, config)}.plain.html`).then((res) => {
+  fetch(`${localizeLink(overrideUrlOrigin(action?.target))}.plain.html`).then((res) => {
     if (res.ok) {
       res.text().then((cardContent) => {
         const response = { path: action.target, cardContent: /^<div>(.*)<\/div>$/.exec(cardContent.replaceAll('\n', ''))[1] };

diff --git a/libs/blocks/mobile-app-banner/mobile-app-banner.js b/libs/blocks/mobile-app-banner/mobile-app-banner.js
@@ -18,7 +18,7 @@ async function getECID() {
   if (window.alloy) {
     await window.alloy('getIdentity').then((data) => {
       ecid = data?.identity?.ECID;
-    }).catch((err) => window.lana.log(`Error fetching ECID: ${err}`, { tags: 'errorType=error,module=mobile-app-banner' }));
+    }).catch((err) => window.lana.log(`Error fetching ECID: ${err}`, { tags: 'mobile-app-banner' }));
   }
   return ecid;
 }

diff --git a/libs/blocks/path-finder/path-finder.js b/libs/blocks/path-finder/path-finder.js
@@ -63,7 +63,7 @@ function buildUi(el, path) {
 async function setup(el) {
   await login({ scopes: SCOPES, telemetry: TELEMETRY });
   if (!account.value.username) {
-    window.lana.log('Could not login to MS Graph', { tags: 'errorType=info,module=path-finder' });
+    window.lana.log('Could not login to MS Graph', { tags: 'path-finder', errorType: 'i' });
     return;
   }
   el.innerHTML = '';