[Release] Stage to Main (#2951)

libs/blocks/caas-config/caas-config.js

@@ -827,10 +827,21 @@ const CopyBtn = () => {
     }, 2000);
   };
 
+  const removeDefaultsFromState = (fullState) => {
+    const reducedState = {};
+    Object.keys(fullState).forEach((key) => {
+      if (JSON.stringify(fullState[key]) !== JSON.stringify(defaultState[key])) {
+        reducedState[key] = fullState[key];
+      }
+    });
+    return reducedState;
+  };
+
   const getUrl = async () => {
     const url = new URL(window.location.href);
     url.search = '';
-    const hashStr = await getEncodedObject(state, fgKeyReplacer);
+    const reducedState = removeDefaultsFromState(state);
+    const hashStr = await getEncodedObject(reducedState, fgKeyReplacer);
     // starts with ~~ to differentiate from old hash format
     url.hash = `~~${hashStr}`;
     return url.href;
@@ -856,7 +867,7 @@ const CopyBtn = () => {
       hour12: false,
     });
     const collectionName = state.collectionName ? `- ${state.collectionName} ` : '';
-    link.textContent = `Content as a Service v2 ${collectionName}- ${dateStr}${state.doNotLazyLoad ? ' (no-lazy)' : ''}`;
+    link.textContent = `Content as a Service v3 ${collectionName}- ${dateStr}${state.doNotLazyLoad ? ' (no-lazy)' : ''}`;
 
     const blob = new Blob([link.outerHTML], { type: 'text/html' });
     const data = [new ClipboardItem({ [blob.type]: blob })];

libs/blocks/global-navigation/global-navigation.js

@@ -1027,27 +1027,28 @@ const getSource = async () => {
 };
 
 export default async function init(block) {
-  try {
-    const { mep } = getConfig();
-    const sourceUrl = await getSource();
-    const [url, hash = ''] = sourceUrl.split('#');
-    if (hash === '_noActiveItem') {
-      setDisableAEDState();
-    }
-    const content = await fetchAndProcessPlainHtml({ url });
-    if (!content) return null;
-    const gnav = new Gnav({
-      content,
-      block,
-    });
-    gnav.init();
-    block.setAttribute('daa-im', 'true');
-    const mepMartech = mep?.martech || '';
-    block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`);
-    if (isDarkMode()) block.classList.add('feds--dark');
-    return gnav;
-  } catch (e) {
-    lanaLog({ message: 'Could not create global navigation.', e, tags: 'errorType=error,module=gnav' });
-    return null;
+  const { mep } = getConfig();
+  const sourceUrl = await getSource();
+  const [url, hash = ''] = sourceUrl.split('#');
+  if (hash === '_noActiveItem') {
+    setDisableAEDState();
   }
+  const content = await fetchAndProcessPlainHtml({ url });
+  if (!content) {
+    const error = new Error('Could not create global navigation. Content not found!');
+    error.tags = 'errorType=error,module=gnav';
+    error.url = url;
+    lanaLog({ message: error.message, error, tags: 'errorType=error,module=gnav' });
+    throw error;
+  }
+  const gnav = new Gnav({
+    content,
+    block,
+  });
+  gnav.init();
+  block.setAttribute('daa-im', 'true');
+  const mepMartech = mep?.martech || '';
+  block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`);
+  if (isDarkMode()) block.classList.add('feds--dark');
+  return gnav;
 }

libs/blocks/global-navigation/utilities/utilities.js

@@ -330,6 +330,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
       e: `${res.statusText} url: ${res.url}`,
       tags: 'errorType=info,module=utilities',
     });
+    return null;
   }
   const text = await res.text();
   const { body } = new DOMParser().parseFromString(text, 'text/html');

libs/blocks/pdf-viewer/pdf-viewer.js

@@ -31,6 +31,7 @@ const init = async (a) => {
   const id = `${PDF_RENDER_DIV_ID}_${Math.random().toString().slice(2)}`;
   const pdfViewerDiv = createTag('div', { class: 'pdf-container', id });
 
+  pdfViewerDiv.dataset.pdfSrc = url;
   a?.insertAdjacentElement('afterend', pdfViewerDiv);
   a?.remove();
 

libs/blocks/preflight/panels/general.js

@@ -1,7 +1,12 @@
 import { html, signal, useEffect } from '../../../deps/htm-preact.js';
 import userCanPublishPage from '../../../tools/utils/publish.js';
 
-const NOT_FOUND = { preview: { lastModified: 'Not found' }, live: { lastModified: 'Not found' } };
+const DEF_NOT_FOUND = 'Not found';
+const DEF_NEVER = 'Never';
+const NOT_FOUND = {
+  preview: { lastModified: DEF_NOT_FOUND },
+  live: { lastModified: DEF_NOT_FOUND },
+};
 
 const content = signal({});
 
@@ -17,9 +22,9 @@ async function getStatus(url) {
   const resp = await fetch(adminUrl);
   if (!resp.ok) return {};
   const json = await resp.json();
+  const preview = json.preview.lastModified || DEF_NEVER;
+  const live = json.live.lastModified || DEF_NEVER;
   const publish = await userCanPublishPage(json, false);
-  const preview = json.preview.lastModified || 'Never';
-  const live = json.live.lastModified || 'Never';
   const edit = json.edit.url;
   return { url, edit, preview, live, publish };
 }
@@ -40,7 +45,8 @@ function getUrl(el) {
   try {
     return new URL(dataPath);
   } catch {
-    const path = dataPath ? `${window.location.origin}${dataPath}` : el.href;
+    const elPath = el.href || (el.src && el.nodeName === 'IFRAME' ? el?.parentElement.dataset.pdfSrc : el.src);
+    const path = dataPath ? `${window.location.origin}${dataPath}` : elPath;
     return new URL(path);
   }
 }
@@ -65,6 +71,8 @@ async function setContent() {
     page: { items: [{ url: new URL(window.location.href), edit: null, preview: 'Fetching', live: 'Fetching' }] },
     fragments: { items: findLinks('main .fragment, a[data-modal-path], [data-path]') },
     links: { items: findLinks('main a[href^="/"') },
+    svgs: { items: findLinks('img[src$=".svg"') },
+    pdfs: { items: findLinks('main iframe') },
     nav: { items: findLinks('header a[href^="/"'), closed: true },
   };
 
@@ -116,6 +124,14 @@ function toggleGroup(name) {
   content.value = { ...content.value };
 }
 
+function checkPublishing(item, isFetching) {
+  if ((item.preview === DEF_NEVER && item.live === DEF_NEVER)
+    || (item.preview === DEF_NOT_FOUND && item.live === DEF_NOT_FOUND)) {
+    return ' not-found';
+  }
+  return isFetching;
+}
+
 function prettyDate(string) {
   if (Number.isNaN(Date.parse(string))) return string;
 
@@ -152,7 +168,7 @@ function Item({ name, item, idx }) {
   if (!item.url) return undefined;
 
   return html`
-    <div class="preflight-group-row preflight-group-detail${isChecked}${isFetching}"
+    <div class="preflight-group-row preflight-group-detail${isChecked}${checkPublishing(item, isFetching)}"
       onClick=${(e) => handleChange(e.target, name, idx)}>
       <p><a href=${item.url.pathname} target=_blank>${prettyPath(item.url)}</a></p>
       <p>${item.edit && html`<a href=${item.edit} class=preflight-edit target=_blank>EDIT</a>`}</p>

libs/blocks/preflight/preflight.css

@@ -155,7 +155,8 @@ p.preflight-content-heading-edit {
   bottom: 0;
 }
 
-.preflight-group-row.preflight-group-detail.is-checked::before {
+.preflight-group-row.preflight-group-detail.is-checked::before,
+.preflight-group-row.preflight-group-detail.is-checked.not-found::before {
   background-image: url('./img/check.svg');
   background-repeat: no-repeat;
   font-weight: 700;
@@ -177,6 +178,12 @@ a.preflight-edit {
   height: 32px;
 }
 
+.preflight-group-row.preflight-group-detail.not-found::before {
+  background-image: url('./img/red-error.svg');
+  background-repeat: no-repeat;
+  font-weight: 700;
+}
+
 .preflight-group-items {
   max-height: 1000px;
   transition: max-height .2s ease-in-out;

libs/blocks/quiz-entry/quiz-entry.js

@@ -3,6 +3,7 @@ import { getQuizEntryData, handleNext, handleSelections } from './utils.js';
 import { mlField, getMLResults } from './mlField.js';
 import { GetQuizOption } from './quizoption.js';
 import { quizPopover, getSuggestions } from './quizPopover.js';
+import { getConfig } from '../../utils/utils.js';
 
 export const locationWrapper = {
   redirect: (url) => {
@@ -343,7 +344,8 @@ const App = ({
 
   if (!dataLoaded || !selectedQuestion) return null;
 
-  return html`<div class="quiz-container">
+  const { locale } = getConfig();
+  return html`<div class="quiz-container${locale?.ietf === 'ja-JP' ? ' jpwordwrap-disabled' : ''}">
     <div class="quiz-heading-container">
       <h2 id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</h2>
       <p class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</p>

libs/blocks/quiz-entry/quizoption.js

@@ -1,6 +1,7 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
 import { createTag } from '../../utils/utils.js';
+import { removeLeftToRightMark } from '../quiz/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -18,13 +19,13 @@ export const OptionCard = ({
 
   const getIconHtml = () => html`<div class="quiz-option-icon">
     <picture>
-      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${iconDesktop}" />`}
-      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${iconTablet}" />`}
-      <img src="${icon}" alt="" loading="lazy" />
+      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${removeLeftToRightMark(iconDesktop)}" />`}
+      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${removeLeftToRightMark(iconTablet)}" />`}
+      <img src="${removeLeftToRightMark(icon)}" alt="" loading="lazy" />
     </picture>
   </div>`;
 
-  const imageHtml = image ? html`<div class="quiz-option-image" style="background-image: url('${image}'); background-size: cover" loading="lazy"></div>` : null;
+  const imageHtml = image ? html`<div class="quiz-option-image" style="background-image: url('${removeLeftToRightMark(image)}'); background-size: cover" loading="lazy"></div>` : null;
   const titleHtml = title ? html`<p class="quiz-option-title">${title}</p>` : null;
   const textHtml = text ? html`<p class="quiz-option-text">${text}</p>` : null;
 

libs/blocks/quiz-entry/utils.js

@@ -1,4 +1,4 @@
-import { getNormalizedMetadata } from '../quiz/utils.js';
+import { getNormalizedMetadata, getLocalizedURL } from '../quiz/utils.js';
 
 export async function fetchJson(path) {
   const response = await fetch(path);
@@ -104,8 +104,8 @@ export const handleSelections = (prevSelections, selectedQuestion, selections) =
 
 export async function getQuizEntryData(el) {
   const blockData = getNormalizedMetadata(el);
-  const dataPath = blockData.data.text;
-  const quizPath = blockData.quiz.text;
+  const dataPath = getLocalizedURL(blockData.data.text);
+  const quizPath = getLocalizedURL(blockData.quiz.text);
   const maxQuestions = Number(blockData.maxquestions?.text) || 10;
   const analyticsType = blockData.analyticstype?.text;
   const analyticsQuiz = blockData.analyticsquiz?.text;