general.js

import { html, signal, useEffect } from '../../../deps/htm-preact.js';
import { STATUS_TO_ICON_MAP, STRUCTURE_TITLES } from '../checks/constants.js';
import { runChecks as runStructureChecks } from '../checks/structure.js';
import userCanPublishPage from '../../../tools/utils/publish.js';
import { runChecks as runLocalizationChecks } from '../checks/localization.js';

const DEF_NOT_FOUND = 'Not found';
const DEF_NEVER = 'Never';
const NOT_FOUND = {
  preview: { lastModified: DEF_NOT_FOUND },
  live: { lastModified: DEF_NOT_FOUND },
};
const DA_DOMAIN = 'da.live';
const nonEDSContent = 'Non AEM EDS Content';
const EXCLUDED_PATHS = ['/tools/caas'];

const content = signal({});

const navResult = signal({ icon: 'purple', title: STRUCTURE_TITLES.navigation, description: 'Checking...' });
const footerResult = signal({ icon: 'purple', title: STRUCTURE_TITLES.footer, description: 'Checking...' });
const regionSelectorResult = signal({ icon: 'purple', title: STRUCTURE_TITLES.regionSelector, description: 'Checking...' });
const georoutingResult = signal({ icon: 'purple', title: STRUCTURE_TITLES.georouting, description: 'Checking...' });
const breadcrumbsResult = signal({ icon: 'purple', title: STRUCTURE_TITLES.breadcrumbs, description: 'Checking...' });
const localizationResult = signal({ icon: 'purple', title: 'Links', description: 'Checking...' });
const localizationIssues = signal([]);
const localizationClosed = signal(false);

async function getStructureResults() {
  const signals = [
    navResult,
    footerResult,
    regionSelectorResult,
    georoutingResult,
    breadcrumbsResult,
  ];
  const checks = runStructureChecks({ area: document });

  await Promise.all(checks.map((result, index) => Promise.resolve(result)
    .then((res) => {
      const icon = STATUS_TO_ICON_MAP[res.status] || 'orange';
      signals[index].value = {
        icon,
        title: res.title,
        description: res.description,
      };
    })
    .catch((error) => {
      signals[index].value = {
        icon: 'red',
        title: 'Error',
        description: `Error: ${error.message}`,
      };
    })));
}

async function getLocalizationResults() {
  try {
    const [res] = await runLocalizationChecks({ area: document });
    localizationResult.value = {
      icon: STATUS_TO_ICON_MAP[res.status] || 'orange',
      title: res.title,
      description: res.description,
    };
    localizationIssues.value = res.details?.violations || [];
  } catch (error) {
    localizationResult.value = {
      icon: 'red',
      title: 'Links',
      description: `Error: ${error.message}`,
    };
  }
}

function getAdminUrl(url, type) {
  if (!(/adobecom\.(hlx|aem)./.test(url.hostname))) return false;
  const project = url.hostname === 'localhost' ? 'main--milo--adobecom' : url.hostname.split('.')[0];
  const [branch, repo, owner] = project.split('--');
  const base = `https://admin.hlx.page/${type}/${owner}/${repo}/${branch}${url.pathname}`;
  return type === 'status' ? `${base}?editUrl=auto` : base;
}

async function getStatus(url) {
  const adminUrl = getAdminUrl(url, 'status');
  if (!adminUrl) {
    return {
      url,
      edit: null,
      preview: nonEDSContent,
      live: nonEDSContent,
      publish: nonEDSContent,
      externalUrl: 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 { sourceLocation } = json.preview;
  const edit = json.edit?.url
    || (sourceLocation?.includes(DA_DOMAIN) && sourceLocation?.replace('markup:https://content.da.live', 'https://da.live/edit#'))
    || '';
  return { url, edit, preview, live, publish };
}

async function getStatuses() {
  Object.keys(content.value).forEach(async (key) => {
    content.value[key].items.forEach(async (item, idx) => {
      const status = await getStatus(item.url);
      content.value[key].items[idx] = status;
      content.value = { ...content.value };
    });
  });
}

function getUrl(el) {
  const { modalPath, modalHash, path: fragmentPath } = el.dataset;
  const dataPath = modalPath ? `${modalPath}${modalHash}` : fragmentPath;
  try {
    return new URL(dataPath);
  } catch {
    const isPdfIframe = el.src && el.nodeName === 'IFRAME' && el.parentElement?.dataset.pdfSrc;
    const elPath = el.href || (isPdfIframe ? el.parentElement.dataset.pdfSrc : el.src);
    const path = dataPath ? `${window.location.origin}${dataPath}` : elPath;
    return new URL(path);
  }
}

function findLinks(selector) {
  const hrefs = new Set();
  return [...document.body.querySelectorAll(selector)]
    .reduce((links, el) => {
      const url = getUrl(el);
      const baseUrl = `${url.origin}${url.pathname}`;
      if (EXCLUDED_PATHS.some((path) => url.pathname.includes(path))) return links;
      if (!hrefs.has(baseUrl)) {
        hrefs.add(baseUrl);
        links.push({ url, edit: null, preview: 'Fetching', live: 'Fetching' });
      }
      return links;
    }, []);
}

export function runGeneralChecks() {
  const contentValue = {
    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 },
  };

  return contentValue;
}

async function setContent() {
  if (content.value.page) return;

  content.value = runGeneralChecks();

  getStatuses();
  const sk = document.querySelector('aem-sidekick, helix-sidekick');
  sk?.addEventListener('statusfetched', async () => { // sidekick v6
    getStatuses();
  });
  sk?.addEventListener('status-fetched', async () => { // sidekick v7
    getStatuses();
  });
}

async function handleAction(action) {
  Object.keys(content.value).map(async (key) => {
    content.value[key].items.forEach(async (item, idx) => {
      const checkPublish = action === 'live' ? (item.publish && !item.publish.canPublish) : false;
      if (!item.checked || checkPublish) return;
      content.value[key].items[idx].action = action;
      content.value = { ...content.value };
      const adminUrl = getAdminUrl(item.url, action);
      const resp = await fetch(adminUrl, { method: 'POST' });
      const json = resp.ok ? await resp.json() : NOT_FOUND;
      content.value[key].items[idx] = {
        ...item,
        action: null,
        preview: json.preview?.lastModified || item.preview,
        live: json.live?.lastModified || item.live,
      };
      content.value = { ...content.value };
    });
  });
}

function toggleSelect(checked) {
  const copy = { ...content.value };
  Object.keys(copy).forEach((key) => {
    if (copy[key].closed) return;
    copy[key].items.forEach((item) => { item.checked = !checked; });
  });
  content.value = copy;
}

function handleChange(target, name, idx) {
  if (target.nodeName === 'A') return;
  content.value[name].items[idx].checked = !content.value[name].items[idx].checked;
  content.value = { ...content.value };
}

function toggleGroup(name) {
  content.value[name].closed = !content.value[name].closed;
  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;

  const date = new Date(string);
  const localeDate = date.toLocaleString();
  const splitDate = localeDate.split(', ');

  return html`
    <span class=preflight-date>${splitDate[0]}</span>
    <span class=preflight-time>${splitDate[1]}</span>
  `;
}

function prettyPath(url) {
  if (!url) return '';
  if (url.pathname === window.location.pathname) return url.pathname;
  return url.hash ? `${url.pathname} (${url.hash})` : url.pathname;
}

function usePublishProps(item) {
  let disablePublish;
  if (item.publish && !item.publish.canPublish) {
    disablePublish = html`${item.publish.message}`;
  }
  return {
    publishText: html`${item.action === 'live' ? 'Publishing' : prettyDate(item.live)}`,
    disablePublish,
  };
}

function Item({ name, item, idx }) {
  const { publishText, disablePublish } = usePublishProps(item);
  const isChecked = item.checked ? ' is-checked' : '';
  const isFetching = item.edit || item.preview === nonEDSContent ? '' : ' is-fetching';
  const editIcon = item.edit && item.edit.includes(DA_DOMAIN) ? 'da-icon' : 'sharepoint-icon';
  const prettyUrl = item.externalUrl ? item.externalUrl.href : prettyPath(item.url);
  if (!item.url) return undefined;

  return html`
    <div class="preflight-group-row preflight-group-detail${isChecked}${checkPublishing(item, isFetching)}"
      onClick=${(e) => handleChange(e.target, name, idx)}>
      <p><a href=${item.externalUrl || item.url.pathname} target=_blank>${prettyUrl}</a></p>
      <p>${item.edit && html`<a href=${item.edit} class="preflight-edit ${editIcon}" target=_blank>EDIT</a>`}</p>
      <p class=preflight-date-wrapper>${item.action === 'preview' ? 'Previewing' : prettyDate(item.preview)}</p>
      <p class="preflight-date-wrapper">
        ${isChecked && disablePublish ? html`<span class=disabled-publish>${disablePublish}</span>` : publishText}
      </p>
    </div>`;
}

function ContentGroup({ name, group }) {
  if (group.items.length === 0) return null;
  const isClosed = group.closed ? ' is-closed' : '';

  return html`
    <div class="preflight-content-group${isClosed}">
      <div class="preflight-group-row preflight-group-heading" onClick=${() => toggleGroup(name)}>
        <div class="preflight-group-expand"></div>
        <p class=preflight-content-heading>${name}</p>
        ${name === 'page' && html`
          <p class="preflight-content-heading preflight-content-heading-edit">Edit</p>
          <p class=preflight-content-heading>Previewed</p>
          <p class=preflight-content-heading>Published</p>
        `}
      </div>
      <div class=preflight-group-items>
      ${group.items.map((item, idx) => html`<${Item} name=${name} idx=${idx} item=${item} />`)}
      </div>
    </div>`;
}

function StructureItem({ icon, title, description }) {
  return html`
    <div class="preflight-item">
      <div class="result-icon ${icon}"></div>
      <div class="preflight-item-text">
        <p class="preflight-item-title">${title}</p>
        <p class="preflight-item-description">${description}</p>
      </div>
    </div>`;
}

function LocalizationIssuesList({ issues }) {
  return html`
    ${issues.length > 0 && html`
      <div class="preflight-content-group${localizationClosed.value ? ' is-closed' : ''}">
        <div class="preflight-group-row preflight-group-heading" onClick=${() => { localizationClosed.value = !localizationClosed.value; }}>
          <div class="preflight-group-expand"></div>
          <p class=preflight-content-heading>Faulty links</p>
          <p class="preflight-content-heading">Loc</p>
          <p class="preflight-content-heading">US status</p>
          <p class="preflight-content-heading">Loc status</p>
        </div>
        <div class=preflight-group-items>
          ${issues.map((v) => html`
            <div class="preflight-group-row preflight-group-detail">
              <p><a href=${v.url} target=_blank>${v.url}</a></p>
              <p>${v.isLocalized ? 'Yes' : 'No'}</p>
              <p>${v.usStatus}</p>
              <p>${v.localizedStatus}</p>
            </div>
          `)}
        </div>
      </div>
    `}
  `;
}

export default function General() {
  useEffect(() => { setContent(); getStructureResults(); getLocalizationResults(); }, []);

  const allChecked = Object.values(content.value)
    .flatMap((item) => item.items).filter((item) => item.checked);

  const checked = !!allChecked.length;
  const publishable = allChecked
    .filter((item) => item.checked && !!item.publish?.canPublish).length;

  const hasPage = content.value.page;
  const selectStyle = checked ? 'Select none' : 'Select all';

  const tooltip = allChecked.length !== publishable && 'Puplishing disabled pages will be ignored';

  return html`
    <div class=preflight-general-content>
    <p class="preflight-structure-title">Structure</p>
       <div class=preflight-structure-columns>
        <div class=preflight-column>
          <${StructureItem} ...${navResult.value} />
          <${StructureItem} ...${footerResult.value} />
          <${StructureItem} ...${regionSelectorResult.value} />
        </div>
        <div class=preflight-column>
          <${StructureItem} ...${georoutingResult.value} />
          <${StructureItem} ...${breadcrumbsResult.value} />
        </div>
      </div>
      <p class="preflight-structure-title">Localization</p>
      <div class=preflight-structure-columns>
        <div class=preflight-column>
          <${StructureItem} ...${localizationResult.value} />
        </div>
      </div>
      <${LocalizationIssuesList} issues=${localizationIssues.value} />
      <p class="preflight-structure-title">Content</p>
      ${Object.keys(content.value).map((key) => html`<${ContentGroup} name=${key} group=${content.value[key]} />`)}
    </div>

    <div class=preflight-actions>
      ${hasPage && html`
        <div id=select-action class=preflight-action-wrapper>
          <button class=preflight-action onClick=${() => toggleSelect(checked)}>${selectStyle}</button>
        </div>
      `}
      ${checked && html`
        <div id=preview-action class=preflight-action-wrapper>
          <button class=preflight-action onClick=${() => handleAction('preview')}>Preview</button>
        </div>
        ${!!publishable && html`
          <div id=publish-action class="preflight-action-wrapper${tooltip ? ' tooltip' : ''}" data-tooltip=${tooltip}>
            <button class="preflight-action" onClick=${() => handleAction('live')}>
              Publish
            </button>
          </div>
        `}
      `}
    </div>
  `;
}