From 6075d7ec480136ad67ccf261eea9b83c90e4aba3 Mon Sep 17 00:00:00 2001
From: William Braeckman <wbr@odoo.com>
Date: Thu, 2 Jan 2025 11:06:02 +0100
Subject: [PATCH] [IMP] runbot: improve has_pr button

Previously the has_pr button was a literal href which meant you couldn't
do both a search with the has_pr checked in a singular action.

Now the has_pr button acts as a checkbox (the real checkbox is hidden)
and basic support for keyboard controls has been added (tab, space and
enter).
---
 runbot/static/src/css/runbot.css |  6 +++++
 runbot/static/src/js/runbot.js   | 39 ++++++++++++++++++++++++++++++++
 runbot/templates/frontend.xml    |  8 +++----
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/runbot/static/src/css/runbot.css b/runbot/static/src/css/runbot.css
index 89c79f32..308d8d68 100644
--- a/runbot/static/src/css/runbot.css
+++ b/runbot/static/src/css/runbot.css
@@ -418,3 +418,9 @@ body, .table {
 code {
 	white-space: pre-wrap;
 }
+
+input:checked + label.o_runbot_hidden_checkbox, input + label.o_runbot_hidden_checkbox:hover {
+	color: var(--bs-btn-active-color);
+	background-color: var(--bs-btn-active-bg);
+	border-color: var(--bs-btn-active-border-color);
+}
diff --git a/runbot/static/src/js/runbot.js b/runbot/static/src/js/runbot.js
index 4775c9e7..ec43703a 100644
--- a/runbot/static/src/js/runbot.js
+++ b/runbot/static/src/js/runbot.js
@@ -37,3 +37,42 @@ function copyToClipboard(text) {
     }
     navigator.clipboard.writeText(text);
 }
+
+/**
+ * Shamelessly stolen from owl's code, execute a function when the DOM is ready.
+ *
+ * @param {*} fn function to call when the DOM is ready.
+ * @returns {Promise} Promise that can be awaited for after DOM is ready.
+ */
+function whenReady(fn) {
+    return new Promise(function (resolve) {
+        if (document.readyState !== "loading") {
+            resolve(true);
+        } else {
+            document.addEventListener("DOMContentLoaded", resolve, false);
+        }
+    }).then(fn || function () { });
+}
+
+// Hidden checkbox with keyboard support
+whenReady(() => {
+    Array.from(
+        document.querySelectorAll('label.o_runbot_hidden_checkbox')
+    ).filter(
+        (label) => !!label.control
+    ).forEach(
+        (label) => {
+            label.addEventListener(
+                'keydown', (event) => {
+                    const { key } = event;
+                    if (key === ' ') {
+                        label.control.checked = !label.control.checked;
+                        event.preventDefault();
+                    } else if (key === 'Enter') {
+                        label.closest('form').submit();
+                    }
+                }
+            );
+        }
+    );
+})
diff --git a/runbot/templates/frontend.xml b/runbot/templates/frontend.xml
index e66d51c8..ffbb3d1e 100644
--- a/runbot/templates/frontend.xml
+++ b/runbot/templates/frontend.xml
@@ -7,12 +7,10 @@
           <form class="form-inline my-2 my-lg-0" role="search" t-att-action="qu(search='')" method="get">
             <div class="input-group md-form form-sm form-2 ps-0">
               <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" name="search" t-att-value="search"/>
-              <a t-if="has_pr" class="btn btn-primary active input-group-text" title="All" t-att-href="qu(has_pr=None)">
+              <input type="checkbox" class="d-none" name="has_pr" id="has_pr" t-att-checked="'' if has_pr else None"/>
+              <label class="btn btn-outline-primary input-group-text o_runbot_hidden_checkbox" title="Toggle PR State" for="has_pr" tabindex="0">
                 <i class="fa fa-github text-grey"/>
-              </a>
-              <a t-else="" class="btn input-group-text" title="Open pull requests" t-att-href="qu(has_pr=1)">
-                <i class="fa fa-github text-grey"/>
-              </a>
+              </label>
               <button type='submit' class="input-group-text">
                 <i class="fa fa-search text-grey"/>
               </button>