From 07c1516cf0d503b2dd628b309e2af24b69479bae Mon Sep 17 00:00:00 2001
From: Eric Holscher <eric@ericholscher.com>
Date: Thu, 21 Nov 2024 15:24:44 -0800
Subject: [PATCH] Draft: Flyout: Build status indicator

Do a very basic build status indictor,
which shows the status of the current/last build.
---
 src/flyout.css | 23 +++++++++++++++++++++++
 src/flyout.js  | 27 +++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/flyout.css b/src/flyout.css
index 7d175aed..cfac7750 100644
--- a/src/flyout.css
+++ b/src/flyout.css
@@ -84,6 +84,13 @@ header > span svg.icon {
   vertical-align: middle;
 }
 
+header > span.build-status {
+  width: var(
+    --readthedocs-flyout-header-font-size,
+    calc(var(--addons-flyout-font-size) * 1.125)
+  );
+}
+
 header > img.logo {
   text-align: center;
   max-width: 106px;
@@ -91,6 +98,22 @@ header > img.logo {
   margin-right: 10px;
 }
 
+.build-status-gray {
+  color: gray;
+}
+
+.build-status-green {
+  color: green;
+}
+
+.build-status-red {
+  color: red;
+}
+
+.build-status-yellow {
+  color: yellow;
+}
+
 main {
   padding: 5px;
   padding-bottom: 15px;
diff --git a/src/flyout.js b/src/flyout.js
index a10c9753..d0801c7e 100644
--- a/src/flyout.js
+++ b/src/flyout.js
@@ -2,7 +2,11 @@ import { ajv } from "./data-validation";
 import READTHEDOCS_LOGO_WORDMARK from "./images/logo-wordmark-light.svg";
 import READTHEDOCS_LOGO from "./images/logo-light.svg";
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
-import { faCodeBranch, faLanguage } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCodeBranch,
+  faLanguage,
+  faCircle,
+} from "@fortawesome/free-solid-svg-icons";
 import { html, nothing, render, LitElement } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { default as objectPath } from "object-path";
@@ -70,12 +74,31 @@ export class FlyoutElement extends LitElement {
   renderHeader() {
     library.add(faCodeBranch);
     library.add(faLanguage);
+    library.add(faCircle);
     const iconCodeBranch = icon(faCodeBranch, {
       classes: ["icon"],
     });
     const iconLanguage = icon(faLanguage, {
       classes: ["icon"],
     });
+
+    let buildStatus = nothing;
+    const buildState = this.config.builds.current.state.code;
+    const buildSuccess = this.config.builds.current.success;
+    let buildStatusClass = "build-status-gray";
+    if (buildState === "finished" && buildSuccess) {
+      buildStatusClass = "build-status-green";
+    } else if (buildState === "finished" && !buildSuccess) {
+      buildStatusClass = "build-status-red";
+    } else {
+      buildStatusClass = "build-status-yellow";
+    }
+    buildStatus = html`<span
+      class="build-status ${buildStatusClass}"
+      title="State: ${buildState}. Success: ${buildSuccess}"
+      >${icon(faCircle).node[0]}</span
+    >`;
+
     let version = nothing;
     if (
       this.config.projects.current.versioning_scheme !==
@@ -97,7 +120,7 @@ export class FlyoutElement extends LitElement {
     return html`
       <header @click="${this._toggleOpen}">
         <img class="logo" src="${this.readthedocsLogo}" alt="Read the Docs" />
-        ${translation} ${version}
+        ${translation} ${version} ${buildStatus}
       </header>
     `;
   }