fix: convert virtual office button to autonomous custom component

lab/templates/workplace/workplace.html

@@ -22,9 +22,10 @@
 <div id="content-main" class="fr-container workplace">
     <ul class="messagelist"></ul>
     <div class="fr-grid-row fr-grid-row--right">
-        <button is="virtual-office-button" 
-                project-slug="{{ project.slug }}" 
-                class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right">{% trans "Access virtual office" %}</button>
+        <virtual-office-button>
+            <button project-slug="{{ project.slug }}" 
+                    class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right">{% trans "Access virtual office" %}</button>
+        </virtual-office-button>
     </div>
     {% if user.is_lab_admin %}
     <fieldset class="module aligned fr-mt-3w">

lab/workplace/assets/js/components/virtual-office-button.js

@@ -4,11 +4,13 @@ import euphrosyneToolsService from "../euphrosyne-tools-service.js";
 import utils from "../../../../assets/js/utils.js";
 import euphrosyneToolsFetch from "../../../../../shared/js/euphrosyne-tools-client.ts";
 
-export default class VirtualOfficeButton extends HTMLButtonElement {
+export default class VirtualOfficeButton extends HTMLElement {
   static init() {
-    customElements.define("virtual-office-button", VirtualOfficeButton, {
-      extends: "button",
-    });
+    customElements.define("virtual-office-button", VirtualOfficeButton);
+  }
+
+  get buttoneEl() {
+    return this.querySelector("button");
   }
 
   get projectSlug() {
@@ -17,25 +19,25 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
 
   constructor() {
     super();
-    this.addEventListener("click", this.onButtonClick);
+    this.buttoneEl.addEventListener("click", this.onButtonClick);
     this.fetchFn = euphrosyneToolsFetch;
     window.addEventListener("vm-deleted", () => {
-      this.disabled = false;
-      this.innerText = window.gettext("Create virtual office");
+      this.buttoneEl.disabled = false;
+      this.buttoneEl.innerText = window.gettext("Create virtual office");
       this.connectionUrl = null;
     });
   }
 
   connectedCallback() {
-    this.disabled = true;
+    this.buttoneEl.disabled = true;
     this.initButton();
   }
 
   async onButtonClick() {
     if (this.connectionUrl) {
       window.open(this.connectionUrl, "_blank");
     } else {
-      this.disabled = true;
+      this.buttoneEl.disabled = true;
       try {
         await euphrosyneToolsService.deployVM(this.projectSlug, this.fetchFn);
       } catch (error) {
@@ -54,7 +56,7 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
         ),
         "info",
       );
-      this.innerText = window.gettext("Creating virtual office...");
+      this.buttoneEl.innerText = window.gettext("Creating virtual office...");
       setTimeout(() => this.waitForDeploymentComplete(), 10000); // Wait 10 seconds before checking deployment status
     }
   }
@@ -74,7 +76,7 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
     );
     if (url) {
       this.connectionUrl = url;
-      this.disabled = false;
+      this.buttoneEl.disabled = false;
       this.onConnectReady();
     } else {
       const deploymentStatus =
@@ -87,7 +89,9 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
         if (deploymentStatus === "Failed") {
           this.onFailedDeployment();
         } else {
-          this.innerText = window.gettext("Creating virtual office...");
+          this.buttoneEl.innerText = window.gettext(
+            "Creating virtual office...",
+          );
           utils.displayMessage(
             window.gettext(
               "The virtual office is being created. This can take up to 10 minutes.",
@@ -97,8 +101,8 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
           this.waitForDeploymentComplete();
         }
       } else {
-        this.disabled = false;
-        this.innerText = window.gettext("Create virtual office");
+        this.buttoneEl.disabled = false;
+        this.buttoneEl.innerText = window.gettext("Create virtual office");
       }
     }
   }
@@ -141,8 +145,8 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
       this.connectionUrl = url;
       clearInterval(this.checkConnectionLinkIntervalId);
       this.checkConnectionLinkIntervalId = null;
-      this.disabled = false;
-      this.innerText = window.gettext("Access virtual office");
+      this.buttoneEl.disabled = false;
+      this.buttoneEl.innerText = window.gettext("Access virtual office");
       utils.displayMessage(
         window.gettext(
           "The virtual office is ready. You can now access it by clicking Access virtual office button.",
@@ -157,8 +161,8 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
     if (!this.connectionUrl) {
       clearInterval(this.checkConnectionLinkIntervalId);
       this.checkConnectionLinkIntervalId = null;
-      this.disabled = false;
-      this.innerText = window.gettext("Create virtual office");
+      this.buttoneEl.disabled = false;
+      this.buttoneEl.innerText = window.gettext("Create virtual office");
       utils.displayMessage(
         window.gettext(
           "Configuration took too long. Something wrong occured. Please contact an administrator.",
@@ -169,7 +173,7 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
   }
 
   onFailedDeployment() {
-    this.innerText = window.gettext("Access virtual office");
+    this.buttoneEl.innerText = window.gettext("Access virtual office");
     utils.displayMessage(
       window.gettext(
         "We could not create the virtual office. Please contact an administrator.",
@@ -183,3 +187,7 @@ export default class VirtualOfficeButton extends HTMLButtonElement {
     window.dispatchEvent(new CustomEvent("vm-ready"));
   }
 }
+
+export function registerVirtualOfficeButton() {
+  customElements.define("virtual-office-button", VirtualOfficeButton);
+}

lab/workplace/assets/js/pages/workplace.ts

@@ -6,7 +6,7 @@ import "@gouvfr/dsfr/dist/component/tab/tab.module.js";
 import { renderComponent } from "../../../../../euphrosyne/assets/js/react";
 import { getTemplateJSONData } from "../../../../../shared/js/utils";
 
-import VirtualOfficeButton from "../components/virtual-office-button.js";
+import { registerVirtualOfficeButton } from "../components/virtual-office-button.js";
 import VirtualOfficeDeleteButton from "../components/virtual-office-delete-button.js";
 import VMSizeSelect from "../components/vm-size-select.js";
 import ProjectImageDefinitionSelect from "../components/ProjectImageDefinitionSelect";
@@ -23,7 +23,7 @@ export type WorkplacePageData = Omit<
   "rawDataFileService" | "processedDataFileService"
 >;
 
-VirtualOfficeButton.init();
+registerVirtualOfficeButton();
 VirtualOfficeDeleteButton.init();
 VMSizeSelect.init();