🐛 [Frontend] Fix: Remove Task (#7451)

Author: odeimaiz

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

@@ -500,6 +500,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       return taskCard;
     },
 
+    _removeTaskCard: function(task) {
+      if (task) {
+        const taskPlaceholders = this._resourcesContainer.getCards().filter(card => osparc.dashboard.ResourceBrowserBase.isCardTaskPlaceholder(card));
+        const taskCard = taskPlaceholders.find(taskPlaceholder => taskPlaceholder.getTask() === task);
+        if (taskCard) {
+          this._resourcesContainer.removeNonResourceCard(taskCard);
+        }
+      }
+    },
+
     _populateCardMenu: function(card) {
       throw new Error("Abstract method called!");
     },

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

@@ -121,29 +121,34 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     addNonResourceCard: function(card) {
       if (osparc.dashboard.CardContainer.isValidCard(card)) {
+        let groupContainer = null;
+        let contentContainer = null;
         if (this.getGroupBy()) {
           // it will always go to the no-group group
-          const noGroupContainer = this.__getGroupContainer("no-group");
-          this.__addCardToContainer(card, noGroupContainer);
-          this.self().sortListByPriority(noGroupContainer.getContentContainer());
+          groupContainer = this.__getGroupContainer("no-group");
+          contentContainer = groupContainer.getContentContainer();
         } else {
-          this.__addCardToContainer(card, this.__nonGroupedContainer);
-          this.self().sortListByPriority(this.__nonGroupedContainer);
+          groupContainer = this.__nonGroupedContainer;
+          contentContainer = this.__nonGroupedContainer;
         }
+        this.__addCardToContainer(card, groupContainer);
+        this.self().sortListByPriority(contentContainer);
       } else {
         console.error("CardContainer only allows CardBase as its children.");
       }
     },
 
     removeNonResourceCard: function(card) {
       if (osparc.dashboard.CardContainer.isValidCard(card)) {
+        let contentContainer = null;
         if (this.getGroupBy()) {
           const noGroupContainer = this.__getGroupContainer("no-group");
-          if (noGroupContainer.getContentContainer().getChildren().indexOf(card) > -1) {
-            noGroupContainer.getContentContainer().remove(card);
-          }
-        } else if (this.__nonGroupedContainer.getChildren().indexOf(card) > -1) {
-          this.__nonGroupedContainer.remove(card);
+          contentContainer = noGroupContainer.getContentContainer();
+        } else {
+          contentContainer = this.__nonGroupedContainer;
+        }
+        if (contentContainer && contentContainer.getChildren().indexOf(card) > -1) {
+          contentContainer.remove(card);
         }
       } else {
         console.error("CardContainer only allows CardBase as its children.");

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

@@ -375,6 +375,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       this.__addNewStudyButtons();
 
+      this.__tasksToCards();
+
       const loadMoreBtn = this.__createLoadMoreButton();
       loadMoreBtn.set({
         fetching,
@@ -2132,18 +2134,18 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       const cardTitle = this.tr("Duplicating ") + studyName;
       const duplicatingStudyCard = this._addTaskCard(task, cardTitle, osparc.task.Duplicate.ICON);
       if (duplicatingStudyCard) {
-        this.__attachDuplicateEventHandler(task, duplicateTaskUI, duplicatingStudyCard);
+        this.__attachDuplicateEventHandler(task, duplicateTaskUI);
       }
     },
 
-    __attachDuplicateEventHandler: function(task, taskUI, duplicatingStudyCard) {
+    __attachDuplicateEventHandler: function(task, taskUI) {
       const finished = (msg, msgLevel) => {
         if (msg) {
           osparc.FlashMessenger.logAs(msg, msgLevel);
         }
         osparc.store.PollTasks.getInstance().removeTask(task);
         osparc.task.TasksContainer.getInstance().removeTaskUI(taskUI);
-        this._resourcesContainer.removeNonResourceCard(duplicatingStudyCard);
+        this._removeTaskCard(task);
       };
 
       task.addListener("taskAborted", () => {

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

@@ -55,6 +55,14 @@ qx.Class.define("osparc.store.PollTasks", {
       });
     },
 
+    removeTask: function(task) {
+      const tasks = this.getTasks();
+      const index = tasks.findIndex(t => t.getTaskId() === task.getTaskId());
+      if (index > -1) {
+        tasks.splice(index, 1);
+      }
+    },
+
     __addTask: function(taskData, interval = 1000) {
       const tasks = this.getTasks();
       const index = tasks.findIndex(t => t.getTaskId() === taskData["task_id"]);

services/static-webserver/client/source/class/osparc/task/TasksButton.js

@@ -57,10 +57,11 @@ qx.Class.define("osparc.task.TasksButton", {
         case "number":
           control = new qx.ui.basic.Label().set({
             backgroundColor: "background-main-1",
+            paddingLeft: 4,
             font: "text-12"
           });
           control.getContentElement().setStyles({
-            "border-radius": "4px"
+            "border-radius": "8px"
           });
           this._add(control, {
             bottom: 8,
@@ -72,7 +73,7 @@ qx.Class.define("osparc.task.TasksButton", {
     },
 
     __updateTasksButton: function() {
-      this._createChildControlImpl("icon");
+      this.getChildControl("icon");
       const number = this.getChildControl("number");
 
       const tasks = osparc.task.TasksContainer.getInstance();