🐛 [Frontend] Fix: Make Join/Open button text dynamic (#8709)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -896,6 +896,12 @@ qx.Class.define("osparc.dashboard.CardBase", {
     __showCurrentUserGroupIds: function(currentUserGroupIds) {
       const avatarGroup = this.getChildControl("avatar-group");
       avatarGroup.setUserGroupIds(currentUserGroupIds);
+
+      if (this.openButton) {
+        const resourceData = this.getResourceData();
+        const openText = osparc.dashboard.ResourceBrowserBase.getOpenText(resourceData);
+        this.openButton.setLabel(openText);
+      }
     },
 
     __showBlockedCardFromStatus: function(reason, state) {

services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

@@ -407,6 +407,17 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     },
 
     __addPages: function() {
+      const studyStore = osparc.store.Study.getInstance();
+      studyStore.addListener("studyStateChanged", e => {
+        const {
+          studyId,
+          state,
+        } = e.getData();
+        if ("uuid" in this.__resourceData && studyId === this.__resourceData["uuid"]) {
+          this.__studyStateChanged(state);
+        }
+      });
+
       const tabsView = this.getChildControl("tabs-view");
 
       // keep selected page
@@ -554,7 +565,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         const lazyLoadContent = () => {
           const billingSettings = new osparc.study.BillingSettings(resourceData);
           this.self().disableIfInUse(resourceData, billingSettings);
-          billingSettings.addListener("debtPayed", () => {
+          billingSettings.addListener("debtPaid", () => {
             page.payDebtButton.set({
               visibility: osparc.study.Utils.isInDebt(resourceData) ? "visible" : "excluded"
             });
@@ -1024,6 +1035,16 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       }
     },
 
+    __studyStateChanged: function(state) {
+      this.__resourceData.state = osparc.utils.Utils.deepCloneObject(state);
+      this.getChildControl("tabs-view").getChildren().forEach(page => {
+        if (page.openButton) {
+          const openText = osparc.dashboard.ResourceBrowserBase.getOpenText(this.__resourceData);
+          page.openButton.setLabel(openText);
+        }
+      });
+    },
+
     // overridden
     destroy: function() {
       this.__widgets.forEach(w => w.destroy());

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -2001,6 +2001,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
 
       const openButton = this._getOpenMenuButton(studyData);
+      card.openButton = openButton;
       if (openButton) {
         menu.add(openButton);
       }

services/static-webserver/client/source/class/osparc/study/BillingSettings.js

@@ -32,7 +32,7 @@ qx.Class.define("osparc.study.BillingSettings", {
   },
 
   events: {
-    "debtPayed": "qx.event.type.Event",
+    "debtPaid": "qx.event.type.Event",
     "closeWindow": "qx.event.type.Event",
   },
 
@@ -221,7 +221,7 @@ qx.Class.define("osparc.study.BillingSettings", {
             } = osparc.desktop.credits.Utils.openBuyCredits(paymentMethods);
             buyCreditsWidget.addListener("completed", () => {
               // at this point we can assume that the study got unblocked
-              this.__debtPayed();
+              this.__debtPaid();
             })
           });
       }
@@ -250,17 +250,17 @@ qx.Class.define("osparc.study.BillingSettings", {
       osparc.store.Study.getInstance().payDebt(this.__studyData["uuid"], wallet.getWalletId(), this.__studyData["debt"])
         .then(() => {
           // at this point we can assume that the study got unblocked
-          this.__debtPayed();
+          this.__debtPaid();
           // also switch the study's wallet to this one
           this.__switchWallet(wallet.getWalletId());
         })
         .catch(err => osparc.FlashMessenger.logError(err));
     },
 
-    __debtPayed: function() {
+    __debtPaid: function() {
       delete this.__studyData["debt"];
       osparc.store.Study.getInstance().setStudyDebt(this.__studyData["uuid"], 0);
-      this.fireEvent("debtPayed");
+      this.fireEvent("debtPaid");
       if (this.__debtMessage) {
         this._remove(this.__debtMessage);
       }