MWPW-148208 - [LocUI] Render links in error messages

libs/blocks/locui/actions/view.js

@@ -19,7 +19,7 @@ import {
 } from './index.js';
 
 export default function Actions() {
-  const hasErrors = urls.value.filter((url) => !url.valid)?.length > 0;
+  const hasErrors = urls.value.filter((url) => url.valid !== undefined && !url.valid)?.length > 0;
   const canAct = allowSyncToLangstore.value
               || allowSendForLoc.value
               || allowRollout.value

libs/blocks/locui/langs/modal.js

@@ -2,6 +2,7 @@ import { html, render } from '../../../deps/htm-preact.js';
 import { urls } from '../utils/state.js';
 import Url from '../url/view.js';
 import { origin } from '../utils/franklin.js';
+import { renderLinks } from '../status/view.js';
 
 function Modal({ lang, prefix, error }) {
   const localeUrls = urls.value.map(
@@ -13,7 +14,7 @@ function Modal({ lang, prefix, error }) {
     return html`
       <h2><span class="error-icon" /> ${statusText}</h2>
       <p>Errors reported for <i><strong>${lang.Language}</strong>:</i></p>
-      <ol>${errors.map((err) => html`<li>${err}</li>`)}</ol>
+      <ol>${errors.map((err) => html`<li>${renderLinks(err)}</li>`)}</ol>
     `;
   }
 

libs/blocks/locui/loc/index.js

@@ -104,7 +104,7 @@ async function loadDetails() {
     setStatus('details', 'info', 'Validating Project Configuration');
     urls.value = await validatedUrls(projectUrls);
     if (json.settings) loadProjectSettings(json.settings.data);
-    const errors = urls.value.filter((url) => !url.valid);
+    const errors = urls.value.filter((url) => url.valid !== undefined && !url.valid);
     if (errors?.length > 0) {
       setStatus('details', 'error', 'Invalid URLs.', errors.map((url) => (`${url.href} was not found.`)));
     } else {

libs/blocks/locui/status/view.js

@@ -5,11 +5,27 @@ function toggleDesc(e) {
   e.target.closest('.locui-status-toast').classList.toggle('open');
 }
 
-function renderMessage(description) {
+export function renderLinks(str) {
+  const linkPattern = /\[(.*?)\]\((.*?)\)/g;
+  const link = linkPattern.exec(str);
+  if (link) {
+    const msg = str.replace(linkPattern, '');
+    const [text, href] = link.slice(1);
+    return html`
+      <span>
+        ${msg.substring(0, link.index)}
+        <a href="${href}" target="_blank">${text}</a>
+        ${msg.substring(link.index, msg.length)} 
+      </span>`;
+  }
+  return str;
+}
+
+function renderDescription(description) {
   let message = description;
   if (Array.isArray(description) && description.length > 1) {
-    message = html`<ol>${description.map((desc) => html`<li>${desc}</li>`)}</ol>`;
-  }
+    message = html`<ol>${description.map((desc) => html`<li>${renderLinks(desc)}</li>`)}</ol>`;
+  } else return renderLinks(message[0]);
   return message;
 }
 
@@ -23,7 +39,7 @@ function Toast({ status }) {
         ${status.description && html`<div class=locui-status-toast-expand>Expand</div>`}
       </div>
       ${status.description && html`
-        <p class=locui-status-toast-description>${renderMessage(status.description)}</p>`}
+        <p class=locui-status-toast-description>${renderDescription(status.description)}</p>`}
     </div>
   `;
 }

libs/blocks/locui/url/tabs.js

@@ -3,7 +3,7 @@
 import { setActions, openWord, handleAction } from './index.js';
 
 function useSignal(value) {
   return useMemo(() => signal(value), []);
 }
 
 function Actions({ item }) {
@@ -11,19 +11,19 @@
   const isDisabled = (status) => (!status || status !== 200 ? ' disabled' : '');
   const itemUrl = urls.value.find((url) => url.pathname === item.value.path
   || url.langstore.pathname === item.value.path);
-  const disableExcel = itemUrl?.valid !== undefined && !itemUrl.valid;
+  const disabled = itemUrl?.valid !== undefined && !itemUrl.valid;
   return html`
     <div class=locui-url-source-actions>
       <button
         disabled=${item.value.edit?.status === 404}
-        class="locui-url-action locui-url-action-edit${isExcel}${disableExcel ? ' disabled' : ''}"
-        onClick=${(e) => { if (!disableExcel) openWord(e, item); }}>Edit</button>
+        class="locui-url-action locui-url-action-edit${isExcel}${disabled ? ' disabled' : ''}"
+        onClick=${(e) => { if (!disabled) openWord(e, item); }}>Edit</button>
       <button
         class="locui-url-action locui-url-action-view${isDisabled(item.value.preview?.status)}"
-        onClick=${(e) => { if (itemUrl.valid) handleAction(e, item, true); }}>Preview</button>
+        onClick=${(e) => { if (!disabled) handleAction(e, item, true); }}>Preview</button>
       <button
         class="locui-url-action locui-url-action-view${isDisabled(item.value.live?.status)}"
-        onClick=${(e) => { if (itemUrl.valid) handleAction(e, item); }}>Live</button>
+        onClick=${(e) => { if (!disabled) handleAction(e, item); }}>Live</button>
     </div>
   `;
 }

libs/blocks/locui/utils/miloc.js

@@ -52,6 +52,10 @@ export async function getProjectStatus() {
       setStatus('service-error');
     }
 
+    if (json.projectStatus === 'not-found') {
+      setStatus('service-error', 'error', json.projectStatusText);
+    }
+
     if (json.projectStatus === 'sync') {
       allowSyncToLangstore.value = false;
     }