adjustments to display retry queue

adobecom · May 30, 2024 · 1f4f790 · 1f4f790
1 parent 475f4f4
commit 1f4f790
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/libs/blocks/locui/langs/view.js b/libs/blocks/locui/langs/view.js
@@ -2,21 +2,23 @@ import { html } from '../../../deps/htm-preact.js';
 import { languages } from '../utils/state.js';
 import { rollout, showLangErrors, showUrls } from './index.js';
 
-function getPrettyStatus(status) {
+function getPrettyStatus({ status, queued }) {
   switch (status) {
     case 'translated':
       return 'Rollout ready';
     case 'in-progress':
       return 'In progress';
     case 'rolling-out':
       return 'Rolling out';
+    case 'error':
+      return `${queued ? 'In Retry Queue' : status}`;
     default:
       return status;
   }
 }
 
-function Badge({ status }) {
-  const prettyStatus = getPrettyStatus(status);
+function Badge(props) {
+  const prettyStatus = getPrettyStatus(props);
   if (!prettyStatus) return null;
   return html`<div class=locui-subproject-badge>${prettyStatus}</div>`;
 }
@@ -32,7 +34,7 @@ function Language({ item, idx }) {
   if (item.status === 'error') { rolloutType = 'Retry'; }
   return html`
     <li class="locui-subproject ${cssStatus}" onClick=${(e) => showLangErrors(e, item)}>
-      ${item.status && html`<${Badge} status=${item.status} />`}
+      ${item.status && html`<${Badge} status=${item.status} queued=${item.rolloutQueued} />`}
       <p class=locui-project-label>Language</p>
       <h3 class=locui-subproject-name>${item.Language}</h3>
       <p class=locui-project-label>Action</p>
@@ -64,9 +66,9 @@ function Language({ item, idx }) {
           `)}
         </div>
       `}
-      ${['translated', 'completed', 'error'].includes(item.status) && html`
+      ${['translated', 'completed', 'error'].includes(item.status) && !item.rolloutQueued && html`
         <div class=locui-subproject-action-area>
-          <button class=locui-urls-heading-action onClick=${(e) => onRollout(e)}>${rolloutType}</button>
+          <button class="locui-urls-heading-action ${item.status}" onClick=${(e) => onRollout(e)}>${rolloutType}</button>
         </div>
       `}
     </li>

diff --git a/libs/blocks/locui/locui.css b/libs/blocks/locui/locui.css
@@ -308,16 +308,19 @@ li.locui-subproject.locui-subproject-in-progress .locui-subproject-badge {
   background: #80B3E7;
 }
 
+li.locui-subproject.locui-subproject-retrying,
 li.locui-subproject.locui-subproject-error {
   border-color: #e40909;
   background: rgb(249 148 148 / 20%);
   cursor: pointer;
 }
 
+li.locui-subproject.locui-subproject-retrying:hover,
 li.locui-subproject.locui-subproject-error:hover {
   background: rgb(249 148 148 / 40%);
 }
 
+li.locui-subproject.locui-subproject-retrying .locui-subproject-badge,
 li.locui-subproject.locui-subproject-error .locui-subproject-badge {
   background: #e40909;
 }
@@ -407,6 +410,14 @@ button.locui-urls-heading-action.cancel:hover {
   background: #666;
 }
 
+button.locui-urls-heading-action.error {
+  background: red;
+}
+
+button.locui-urls-heading-action.error:hover {
+  background: #cd0505;
+}
+
 ul.locui-urls {
   margin: 0;
   list-style: none;