From 1f4f7906d9ea6667f525ec9864d8a85aa16e61a2 Mon Sep 17 00:00:00 2001
From: Sartxi <sean.archibeque@gmail.com>
Date: Wed, 29 May 2024 18:18:21 -0600
Subject: [PATCH] adjustments to display retry queue

---
 libs/blocks/locui/langs/view.js | 14 ++++++++------
 libs/blocks/locui/locui.css     | 11 +++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/libs/blocks/locui/langs/view.js b/libs/blocks/locui/langs/view.js
index 2660fd0b80..b1a259fd69 100644
--- a/libs/blocks/locui/langs/view.js
+++ b/libs/blocks/locui/langs/view.js
@@ -2,7 +2,7 @@ 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';
@@ -10,13 +10,15 @@ function getPrettyStatus(status) {
       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
index e9592e5b87..7a6c8be746 100644
--- 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;