🐛 [Frontend] Fix: Pricing plan creation and Edit (#7702)

Author: odeimaiz

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

@@ -110,8 +110,8 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       }];
       if (permissions.canDo("dashboard.templates.read")) {
         tabs.push({
-          id: "templatesTab",
-          buttonId: "templatesTabBtn",
+          id: "tutorialsTab",
+          buttonId: "tutorialsTabBtn",
           label: this.tr("TUTORIALS"),
           icon: "@FontAwesome5Solid/copy/"+tabIconSize,
           buildLayout: this.__createTutorialBrowser

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

@@ -45,6 +45,10 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     HEIGHT: 36,
 
     getSharedWithOptions: function(resourceType) {
+      if (resourceType === "template") {
+        resourceType = "tutorial";
+      }
+
       const resourceAlias = osparc.product.Utils.resourceTypeToAlias(resourceType, {
         firstUpperCase: true,
         plural: true

services/static-webserver/client/source/class/osparc/pricing/PlanEditor.js

@@ -36,7 +36,7 @@ qx.Class.define("osparc.pricing.PlanEditor", {
     manager.add(name);
 
     if (pricingPlan) {
-      this.__pricingPlan = osparc.utils.Utils.deepCloneObject(pricingPlan);
+      this.__pricingPlan = pricingPlan;
       this.set({
         ppKey: pricingPlan.getPricingPlanKey(),
         name: pricingPlan.getName(),
@@ -76,7 +76,7 @@ qx.Class.define("osparc.pricing.PlanEditor", {
 
     classification: {
       check: ["TIER", "LICENSE"],
-      init: "",
+      init: "TIER",
       nullable: false,
       event: "changeClassification"
     },
@@ -235,7 +235,7 @@ qx.Class.define("osparc.pricing.PlanEditor", {
         "classification": this.getClassification(),
         "isActive": this.getIsActive(),
       };
-      osparc.store.Pricing.getInstance().putPricingPlan(this.__pricingPlan["pricingPlanId"], updateData)
+      osparc.store.Pricing.getInstance().putPricingPlan(this.__pricingPlan.getPricingPlanId(), updateData)
         .then(() => {
           osparc.FlashMessenger.logAs(this.tr("Successfully updated"));
           this.fireEvent("done");

services/static-webserver/client/source/class/osparc/pricing/Plans.js

@@ -125,17 +125,17 @@ qx.Class.define("osparc.pricing.Plans", {
     },
 
     __openUpdatePricingPlan: function(pricingPlanId) {
-      osparc.store.Pricing.getInstance().fetchPricingUnits(pricingPlanId)
-        .then(pricingPlan => {
-          const ppEditor = new osparc.pricing.PlanEditor(pricingPlan);
-          const title = this.tr("Pricing Plan Editor");
-          const win = osparc.ui.window.Window.popUpInWindow(ppEditor, title, 400, 250);
-          ppEditor.addListener("done", () => {
-            win.close();
-            this.fetchPlans();
-          });
-          ppEditor.addListener("cancel", () => win.close());
+      const pricingPlan = osparc.store.Pricing.getInstance().getPricingPlan(pricingPlanId);
+      if (pricingPlan) {
+        const ppEditor = new osparc.pricing.PlanEditor(pricingPlan);
+        const title = this.tr("Pricing Plan Editor");
+        const win = osparc.ui.window.Window.popUpInWindow(ppEditor, title, 400, 250);
+        ppEditor.addListener("done", () => {
+          win.close();
+          this.fetchPlans();
         });
+        ppEditor.addListener("cancel", () => win.close());
+      }
     }
   }
 });

services/static-webserver/client/source/class/osparc/store/Templates.js

@@ -126,5 +126,20 @@ qx.Class.define("osparc.store.Templates", {
 
       return this.__fetchAllHypertools();
     },
+
+    getTemplate: function(templateId) {
+      if (this.__tutorials) {
+        const template = this.__tutorials.find(t => t["templateId"] === templateId);
+        if (template) {
+          return new osparc.data.model.Template(template);
+        }
+      } else if (this.__hypertools) {
+        const template = this.__hypertools.find(t => t["templateId"] === templateId);
+        if (template) {
+          return new osparc.data.model.Template(template);
+        }
+      }
+      return null;
+    },
   }
 });

services/static-webserver/client/source/resource/osparc/tours/osparc_tours.json

@@ -53,9 +53,9 @@
       "placement": "bottom"
     }, {
       "beforeClick": {
-        "selector": "osparc-test-id=templatesTabBtn"
+        "selector": "osparc-test-id=tutorialsTabBtn"
       },
-      "anchorEl": "osparc-test-id=templatesTabBtn",
+      "anchorEl": "osparc-test-id=tutorialsTabBtn",
       "text": "Clicking on a Template will create a copy of that Study, which will appear in your own Studies tab with the same name as the Template. Any changes you make to this copy will not affect the original Template.",
       "placement": "bottom"
     }, {

services/static-webserver/client/source/resource/osparc/tours/s4l_tours.json

@@ -53,9 +53,9 @@
       "placement": "bottom"
     }, {
       "beforeClick": {
-        "selector": "osparc-test-id=templatesTabBtn"
+        "selector": "osparc-test-id=tutorialsTabBtn"
       },
-      "anchorEl": "osparc-test-id=templatesTabBtn",
+      "anchorEl": "osparc-test-id=tutorialsTabBtn",
       "text": "Clicking on a Tutorial will create a copy of that Project, which will appear in your own Projects tab with the same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.",
       "placement": "bottom"
     }, {

services/static-webserver/client/source/resource/osparc/tours/s4llite_tours.json

@@ -49,9 +49,9 @@
       "placement": "bottom"
     }, {
       "beforeClick": {
-        "selector": "osparc-test-id=templatesTabBtn"
+        "selector": "osparc-test-id=tutorialsTabBtn"
       },
-      "anchorEl": "osparc-test-id=templatesTabBtn",
+      "anchorEl": "osparc-test-id=tutorialsTabBtn",
       "title": "Tutorials",
       "text": "Clicking on a Tutorial will create a copy of that Project, which will appear in your own Projects tab with the same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.",
       "placement": "bottom"

tests/e2e-frontend/tests/navigationBar/navigationBar.spec.js

@@ -174,7 +174,7 @@ for (const product in products) {
             }
           };
 
-          await checkButton("templatesTabBtn", isTemplatesVisible, templatesLabel);
+          await checkButton("tutorialsTabBtn", isTemplatesVisible, templatesLabel);
           await checkButton("appsTabBtn", isServicesVisible, servicesLabel);
           await checkButton("dataTabBtn", isDataVisible, dataLabel);
         });

tests/e2e-playwright/tests/conftest.py

@@ -643,11 +643,11 @@ def find_and_click_template_in_dashboard(
 ) -> Callable[[str], None]:
     def _(template_id: str) -> None:
         with log_context(logging.INFO, f"Finding {template_id=} in dashboard"):
-            page.get_by_test_id("templatesTabBtn").click()
+            page.get_by_test_id("tutorialsTabBtn").click()
             _textbox = page.get_by_test_id("searchBarFilter-textField-template")
             _textbox.fill(template_id)
             _textbox.press("Enter")
-            test_id = "templateBrowserListItem_" + template_id
+            test_id = "tutorialBrowserListItem_" + template_id
             page.get_by_test_id(test_id).click()
 
     return _