From eb9df38e9225f5b180308de4133090c9ccab17a4 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 22 Nov 2020 13:43:24 +0100
Subject: [PATCH] static: fix ActionButton not working

---
 passbook/static/static/rollup.config.js       |  3 ++
 .../static/src/elements/ActionButton.ts       | 28 ++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/passbook/static/static/rollup.config.js b/passbook/static/static/rollup.config.js
index 0e7e6a3ed..23c840446 100644
--- a/passbook/static/static/rollup.config.js
+++ b/passbook/static/static/rollup.config.js
@@ -25,5 +25,8 @@ export default [
             minifyHTML(),
             terser(),
         ],
+        watch: {
+            clearScreen: false,
+        },
     },
 ];
diff --git a/passbook/static/static/src/elements/ActionButton.ts b/passbook/static/static/src/elements/ActionButton.ts
index d4ad5e34a..76eba0332 100644
--- a/passbook/static/static/src/elements/ActionButton.ts
+++ b/passbook/static/static/src/elements/ActionButton.ts
@@ -1,39 +1,47 @@
 import { getCookie } from "../utils";
 import { updateMessages } from "./Messages";
 import { customElement, html, LitElement, property } from "lit-element";
+// @ts-ignore
+import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+// @ts-ignore
+import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
+// @ts-ignore
+import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
 
 const PRIMARY_CLASS = "pf-m-primary";
 const SUCCESS_CLASS = "pf-m-success";
 const ERROR_CLASS = "pf-m-danger";
-const PROGRESS_CLASSES = ["pf-m-progress", "pf-m-in-progress"];
+const PROGRESS_CLASS ="pf-m-in-progress";
 
 @customElement("pb-action-button")
 export class ActionButton extends LitElement {
-    constructor() {
-        super();
-        this.querySelector("button")?.addEventListener("click", (e) =>
-            this.callAction()
-        );
-    }
 
     @property()
     url: string = "";
 
+    @property()
     isRunning = false;
 
+    static get styles() {
+        return [GlobalsStyle, ButtonStyle, SpinnerStyle]
+    }
+
     setLoading() {
         this.isRunning = true;
-        this.classList.add(...PROGRESS_CLASSES);
+        this.classList.add(PROGRESS_CLASS);
+        this.requestUpdate();
     }
 
     setDone(statusClass: string) {
         this.isRunning = false;
-        this.classList.remove(...PROGRESS_CLASSES);
+        this.classList.remove(PROGRESS_CLASS);
         this.classList.replace(PRIMARY_CLASS, statusClass);
+        this.requestUpdate();
         // Trigger messages to update
         updateMessages();
         setTimeout(() => {
             this.classList.replace(statusClass, PRIMARY_CLASS);
+            this.requestUpdate();
         }, 1000);
     }
 
@@ -60,7 +68,7 @@ export class ActionButton extends LitElement {
     }
 
     render() {
-        return html`<button class="pf-c-button pf-m-primary">
+        return html`<button class="pf-c-button pf-m-progress ${this.classList}" @click=${() => this.callAction()}>
             ${this.isRunning
                 ? html` <span class="pf-c-button__progress">
                       <span