MWPW-166823 - [Floodgate] hlx 5 upgrade to support the floodgate flow

libs/blocks/floodgateui/actions/index.js

@@ -7,6 +7,7 @@ import { origin, preview } from '../../locui/utils/franklin.js';
 import { decorateSections } from '../../../utils/utils.js';
 import { getUrls } from '../../locui/loc/index.js';
 import { validateUrlsFormat } from '../floodgate/index.js';
+import { isUrl } from '../utils/url.js';
 
 export const showRolloutOptions = signal(false);
 
@@ -92,7 +93,7 @@ async function findPageFragments(path) {
 
     if (accDupe || dupe) return acc;
     const fragmentUrl = new URL(`${origin}${pathname}`);
-    fragmentUrl.alt = fragment.textContent;
+    fragmentUrl.alt = isUrl(fragment.textContent) ? fragment.textContent : originalUrl;
     acc.push(fragmentUrl);
     return acc;
   }, []);
@@ -119,7 +120,7 @@ async function findDeepFragments(path) {
       searched.push(search.pathname);
     }
   }
-  return fragments.length ? fragments : [];
+  return fragments.length ? getUrls(fragments) : [];
 }
 
 export async function findFragments() {

libs/blocks/floodgateui/floodgate/index.js

@@ -23,18 +23,28 @@
 let resourcePath;
 let previewPath;
 
+export function validateOrigin(urlStr) {
+  try {
+    const url = new URL(urlStr);
+    const origins = [url.origin.replace('.aem.', '.hlx.'), url.origin.replace('.hlx.', '.aem.')];
+    return origins.includes(origin);
+  } catch {
+    return false;
+  }
+}
+
 export function validateUrlsFormat(projectUrls, removeMedia = false) {
   projectUrls.forEach((projectUrl, idx) => {
     const urlObj = getUrl(projectUrl);
     const url = isUrl(urlObj.alt) ?? urlObj;
-    if (url.origin !== origin) {
+    if (!validateOrigin(url.origin)) {
       const aemUrl = url.hostname?.split('--').length === 3;
       url.valid = !aemUrl ? 'not AEM url' : 'not same domain';
     }
     if ((/\.(gif|jpg|jpeg|tiff|png|webp)$/i).test(url.pathname)) {
       url.valid = 'media';
     }
-    projectUrls[idx] = Array.isArray(projectUrls[idx]) ? [url] : url;
+    projectUrls[idx] = Array.isArray(projectUrls[idx]) ? [urlObj] : urlObj;
   });
   if (removeMedia) {
     return projectUrls.filter((url) => getUrl(url).valid !== 'media');
@@ -94,7 +104,7 @@
     if (missingKeys.length > 0) {
       setStatus('details', 'error', 'Missing required URL parameter(s)');
     } else {
       console.error(error);
     }
   }
 }

libs/blocks/floodgateui/utils/miloc.js

@@ -1,12 +1,12 @@
 import {
   allowSendForLoc,
   allowSyncToLangstore,
   heading,
   languages,
   projectStatus,
   serviceStatus,
   allowRollout,
   serviceStatusDate,
   allActionStatus,
   copyStatusCheck,
   deleteStatusCheck,
@@ -20,8 +20,8 @@
 } from './state.js';
 import { accessToken } from '../../../tools/sharepoint/state.js';
 import { origin, getStatus } from '../../locui/utils/franklin.js';
 import { setExcelStatus, setStatus } from './status.js';
 import getServiceConfig from '../../../utils/service-config.js';
 import '../../../deps/md5.min.js';
 
 const DOT_MILO = '/.milo/config.json';
@@ -120,6 +120,7 @@
 export async function fetchStatusAction() {
   // fetch copy status
   const config = await getServiceConfigFg(origin);
+  if (!config || !heading.value.env) return{};
   const paramsFg = await getParamsFg(config);
   const excelPath = paramsFg.projectExcelPath;
   const env = heading.value.env;

libs/blocks/locui/actions/index.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-restricted-syntax */
-import { heading, urls, languages, allowSyncToLangstore, allowSendForLoc, allowRollout } from '../utils/state.js';
+import {
+  heading, urls, languages, allowSyncToLangstore, allowSendForLoc, allowRollout,
+} from '../utils/state.js';
 import { setExcelStatus, setStatus } from '../utils/status.js';
 import { origin, preview } from '../utils/franklin.js';
 import { decorateSections } from '../../../utils/utils.js';

libs/blocks/locui/utils/franklin.js

@@ -1,21 +1,36 @@
-const ADMIN = 'https://admin.hlx.page';
+import { SLD } from '../../../utils/utils.js';
 
+const ADMIN = 'https://admin.hlx.page';
 const urlParams = new URLSearchParams(window.location.search);
 const owner = urlParams.get('owner') || 'adobecom';
 const repo = urlParams.get('repo') || 'milo';
-export const origin = `https://main--${repo}--${owner}.hlx.page`;
+export const origin = `https://main--${repo}--${owner}.${SLD}.page`;
+
+// Temporary fix until https://github.com/adobe/helix-admin/issues/2831 is fixed.
+function fixPreviewDomain(json) {
+  if (SLD === 'aem') {
+    if (json?.preview?.url) {
+      json.preview.url = json.preview.url.replace('.hlx.', '.aem.');
+    }
+    if (json?.live?.url) {
+      json.live.url = json.live.url.replace('.hlx.', '.aem.');
+    }
+  }
+}
 
 export async function preview(path) {
   const url = `${ADMIN}/preview/${owner}/${repo}/main${path}`;
   const resp = await fetch(url, { method: 'POST' });
   const json = await resp.json();
+  fixPreviewDomain(json);
   return json;
 }
 
-export async function getStatus(path = '', editUrl = 'auto', fgFlag = false, fgColor = null) {
-  let url = `${ADMIN}/status/${owner}/${fgFlag ? `${repo}-${fgColor}` : repo}/main${path}`;
+export async function getStatus(path = '', editUrl = 'auto') {
+  let url = `${ADMIN}/status/${owner}/${repo}/main${path}`;
   url = editUrl ? `${url}?editUrl=${editUrl}` : url;
   const resp = await fetch(url, { cache: 'reload' });
   const json = await resp.json();
+  fixPreviewDomain(json);
   return json;
 }

libs/tools/sharepoint/shared.js

@@ -1,4 +1,5 @@
 import getServiceConfig from '../../utils/service-config.js';
+import { SLD } from '../../utils/utils.js';
 
 const MOCK_REFERRER = 'https://adobe.sharepoint.com/:x:/r/sites/adobecom/_layouts/15/Doc.aspx?sourcedoc=%7B654BFAD2-84A7-442D-A13D-18DE87A405B7%7D';
 
@@ -14,7 +15,7 @@ export async function getSharePointDetails(hlxOrigin) {
 }
 
 export function getItemId() {
-  const referrer = new URLSearchParams(window.location.search).get('referrer') || MOCK_REFERRER;
+  const referrer = new URLSearchParams(window.location.search).get('referrer');
   const sourceDoc = referrer?.match(/sourcedoc=([^&]+)/)[1];
   const sourceId = decodeURIComponent(sourceDoc);
   return sourceId.slice(1, -1);
@@ -24,5 +25,5 @@ export function getSiteOrigin() {
   const search = new URLSearchParams(window.location.search);
   const repo = search.get('repo');
   const owner = search.get('owner');
-  return repo && owner ? `https://main--${repo}--${owner}.hlx.live` : window.location.origin;
+  return repo && owner ? `https://main--${repo}--${owner}.${SLD}.page` : window.location.origin;
 }

libs/utils/sidekick.js

@@ -1,13 +1,69 @@
+function stylePublish(sk) {
+  const pubPlg = sk.shadowRoot.querySelector('.publish.plugin');
+  if (!pubPlg) return;
+  const style = document.createElement('style');
+  const span = document.createElement('span');
+  span.textContent = 'Are you sure? This will publish to production.';
+  const btn = pubPlg.querySelector('button');
+  const publishStyles = `
+    .plugin.update {
+      --bg-color: rgb(129 27 14);
+      --text-color: #fff0f0;
+
+      color-scheme: light dark;
+      display: flex;
+      order: 100;
+    }
+    .publish.plugin > button {
+      background: var(--bg-color);
+      border-color: #b46157;
+      color: var(--text-color);
+    }
+    .publish.plugin > button > span {
+      display: none;
+      background: var(--bg-color);
+      border-radius: 4px;
+      line-height: 1.2rem;
+      padding: 8px 12px;
+      position: absolute;
+      top: 34px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 150px;
+      white-space: pre-wrap;
+    }
+    .publish.plugin > button:hover > span {
+      display: block;
+      color: var(--text-color);
+    }
+    .publish.plugin > button > span:before {
+      content: '';
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid var(--bg-color);
+      position: absolute;
+      text-align: center;
+      top: -6px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  `;
+  style.append(publishStyles);
+  pubPlg.prepend(style);
+  btn.append(span);
+}
+
 // loadScript and loadStyle are passed in to avoid circular dependencies
 export default function init({ createTag, loadBlock, loadScript, loadStyle }) {
   // manifest v3
   const sendToCaasListener = async (e) => {
     const { host, project, ref: branch, repo, owner } = e.detail.data.config;
+    // eslint-disable-next-line import/no-unresolved
     const { sendToCaaS } = await import('https://milo.adobe.com/tools/send-to-caas/send-to-caas.js');
     sendToCaaS({ host, project, branch, repo, owner }, loadScript, loadStyle);
   };
 
-  const checkSchemaListener = async (e) => {
+  const checkSchemaListener = async () => {
     const schema = document.querySelector('script[type="application/ld+json"]');
     if (schema === null) return;
     const resultsUrl = 'https://search.google.com/test/rich-results?url=';
@@ -29,10 +85,44 @@ export default function init({ createTag, loadBlock, loadScript, loadStyle }) {
     sendToCaaS({ host, project, branch, repo, owner }, loadScript, loadStyle);
   });
 
-  const sk = document.querySelector('helix-sidekick');
+  const sk = document.querySelector('aem-sidekick, helix-sidekick');
 
   // Add plugin listeners here
   sk.addEventListener('custom:send-to-caas', sendToCaasListener);
   sk.addEventListener('custom:check-schema', checkSchemaListener);
   sk.addEventListener('custom:preflight', preflightListener);
+
+  // Color code publish button
+  stylePublish(sk);
 }
+
+function onSkLoaded(callback) {
+  // sidekick nextGen
+  const observer = new MutationObserver(() => {
+    const sidekick = document.querySelector('aem-sidekick');
+    if (sidekick) {
+      observer.disconnect();
+      callback(sidekick);
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  // sidekick v1 ready event
+  document.addEventListener('sidekick-ready', () => {
+    callback(document.querySelector('helix-sidekick'));
+  }, { once: true });
+}
+
+export function connectSK(status, standby = null) {
+  const sidekick = document.querySelector('aem-sidekick, helix-sidekick');
+  if (sidekick) {
+    sidekick.addEventListener('statusfetched', status);
+    sidekick.addEventListener('status-fetched', status);
+  } else {
+    standby?.();
+    onSkLoaded((sk) => {
+      sk?.addEventListener('statusfetched', status);
+      sk?.addEventListener('status-fetched', status);
+    });
+  }
+}