Add text/color mapping and hide legend when not table

Author: Carreau

src/pages/status/migration/index.jsx

@@ -52,24 +52,32 @@ export function measureProgress(details) {
   return { done, percentage, total };
 }
 
+// Mapping of GitHub PR status to UI display properties
+const STATUS_DISPLAY_MAP = {
+  clean: { text: "Passing", badgeClass: "success" },
+  unstable: { text: "Failing", badgeClass: "danger" },
+  dirty: { text: "Conflicts", badgeClass: "warning" },
+  blocked: { text: "Blocked", badgeClass: "danger" },
+  behind: { text: "Passing*", badgeClass: "success" },
+  draft: { text: "Draft", badgeClass: "secondary" },
+  has_hooks: { text: "Unknown*", badgeClass: "secondary" },
+  unknown: { text: "Unknown", badgeClass: "secondary" },
+};
+
 function getStatusBadgeClass(prStatus) {
-  switch (prStatus) {
-    case "clean":
-      return "success";
-    case "unstable":
-      return "danger";
-    case "draft":
-      return "secondary";
-    case "behind":
-    case "blocked":
-    case "dirty":
-      return "warning";
-    case "has_hooks":
-      return "info";
-    case "unknown":
-    default:
-      return "secondary";
+  if (!STATUS_DISPLAY_MAP[prStatus]) {
+    console.warn(`Unknown PR status: "${prStatus}". Expected one of: ${Object.keys(STATUS_DISPLAY_MAP).join(", ")}`);
+    return "secondary";
   }
+  return STATUS_DISPLAY_MAP[prStatus].badgeClass;
+}
+
+function getStatusDisplayText(prStatus) {
+  if (!STATUS_DISPLAY_MAP[prStatus]) {
+    console.warn(`Unknown PR status: "${prStatus}". Expected one of: ${Object.keys(STATUS_DISPLAY_MAP).join(", ")}`);
+    return prStatus;
+  }
+  return STATUS_DISPLAY_MAP[prStatus].text;
 }
 
 export default function MigrationDetails() {
@@ -172,14 +180,16 @@ export default function MigrationDetails() {
             }
           </div>
         </div>
-        <div className={`card margin-top--md`}>
-          <div className="card__header">
-            <h3>CI Status Legend</h3>
-          </div>
-          <div className="card__body">
-            <CIStatusLegend />
+        {view === "table" && (
+          <div className={`card margin-top--md`}>
+            <div className="card__header">
+              <h3>CI Status Legend</h3>
+            </div>
+            <div className="card__body">
+              <CIStatusLegend />
+            </div>
           </div>
-        </div>
+        )}
       </main>
     </Layout>
   );
@@ -440,7 +450,7 @@ function Row({ children }) {
             className={`badge badge--${getStatusBadgeClass(pr_status)}`}
             title={CI_STATUS_DESCRIPTIONS[pr_status] || pr_status}
           >
-            {pr_status}
+            {getStatusDisplayText(pr_status)}
           </span>
         ) : (
           <span>—</span>
@@ -463,11 +473,20 @@ function Row({ children }) {
 }
 
 function CIStatusLegend() {
+  const colorOrder = { danger: 0, success: 1, secondary: 2 };
+  const sortedStatuses = Object.entries(CI_STATUS_DESCRIPTIONS).sort(
+    ([statusA], [statusB]) => {
+      const classA = getStatusBadgeClass(statusA);
+      const classB = getStatusBadgeClass(statusB);
+      return (colorOrder[classA] ?? 3) - (colorOrder[classB] ?? 3);
+    }
+  );
+
   return (
     <div className={styles.ci_status_legend}>
-      {Object.entries(CI_STATUS_DESCRIPTIONS).map(([status, description]) => (
+      {sortedStatuses.map(([status, description]) => (
         <div key={status} className={styles.ci_status_item}>
-          <span className={`badge badge--${getStatusBadgeClass(status)}`}>{status}</span>
+          <span className={`badge badge--${getStatusBadgeClass(status)}`}>{getStatusDisplayText(status)}</span>
           <span>{description}</span>
         </div>
       ))}