RequestServiceAccess

Author: odeimaiz

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

@@ -150,10 +150,10 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       if (["study", "template", "tutorial"].includes(resourceData["resourceType"])) {
         const cantReadServices = osparc.study.Utils.getCantReadServices(resourceData["services"]);
         if (cantReadServices.length) {
-          const requestAccessButton = new qx.ui.form.Button(this.tr("Request Access"));
+          const requestAccessButton = new qx.ui.form.Button(this.tr("Request Apps Access"));
           osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(requestAccessButton);
           requestAccessButton.addListener("execute", () => {
-            console.log("cantReadServices", cantReadServices);
+            osparc.share.RequestServiceAccess.openRequestAccess(cantReadServices);
           });
           toolbar.add(requestAccessButton);
         }

services/static-webserver/client/source/class/osparc/share/RequestServiceAccess.js

@@ -0,0 +1,75 @@
+/*
+ * oSPARC - The SIMCORE frontend - https://osparc.io
+ * Copyright: 2025 IT'IS Foundation - https://itis.swiss
+ * License: MIT - https://opensource.org/licenses/MIT
+ * Authors: Odei Maiz (odeimaiz)
+ */
+
+qx.Class.define("osparc.share.RequestServiceAccess", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(cantReadServicesData) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.VBox(25));
+
+    this.__populateLayout(cantReadServicesData);
+  },
+
+  statics: {
+    openRequestAccess: function(cantReadServicesData) {
+      const requestServiceAccess = new osparc.share.RequestServiceAccess(cantReadServicesData);
+      const caption = qx.locale.Manager.tr("Request Apps Access");
+      osparc.ui.window.Window.popUpInWindow(requestServiceAccess, caption, 500, 500).set({
+        clickAwayClose: false,
+        resizable: true,
+        showClose: true
+      });
+    }
+  },
+
+  members: {
+    __populateLayout: function(cantReadServicesData) {
+      const text = this.tr("In order to open the Project, the following users/groups need to give you access to some apps. Please contact the app owner(s):");
+      this._add(new qx.ui.basic.Label().set({
+        value: text,
+        font: "text-14",
+        rich: true,
+        wrap: true
+      }));
+
+      const grid = new qx.ui.layout.Grid(20, 10);
+      grid.setColumnAlign(0, "center", "middle");
+      grid.setColumnAlign(1, "center", "middle");
+      const layout = new qx.ui.container.Composite(grid);
+      this._add(layout);
+
+      // Header
+      layout.add(new qx.ui.basic.Label(this.tr("Owner"), {
+        row: idx+1,
+        column: 0
+      }));
+      layout.add(new qx.ui.basic.Label(this.tr("App"), {
+        row: idx+1,
+        column: 1
+      }));
+
+      cantReadServicesData.forEach((cantReadServiceData, idx) => {
+        const group = osparc.store.Groups.getInstance().getGroup(cantReadServiceData["owner"]);
+        if (group) {
+          layout.add(new qx.ui.basic.Label(group.getLabel()), {
+            row: idx+1,
+            column: 0
+          });
+          const appLabel = new qx.ui.basic.Label().set({
+            value: `${cantReadServiceData["key"]} : ${osparc.service.Utils.extractVersionDisplay(cantReadServiceData["release"])}`,
+          });
+          layout.add(appLabel, {
+            row: i,
+            column: 1
+          });
+        }
+      });
+    }
+  }
+});