🎨 [Frontend] Search users as they type

services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js

@@ -106,7 +106,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
     },
 
     __createIntroText: function() {
-      const msg = this.tr("Only Accountants of an organization can share a wallet with the entire organization and members.");
+      const msg = this.tr("Only Accountants of an Organization can share a wallet with other users.");
       const intro = new qx.ui.basic.Label().set({
         value: msg,
         alignX: "left",

services/static-webserver/client/source/class/osparc/filter/SearchingCollaborators.js

@@ -0,0 +1,24 @@
+/*
+ * 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.filter.SearchingCollaborators", {
+  extend: qx.ui.basic.Atom,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.set({
+      label: this.tr("Searching..."),
+      icon: "@FontAwesome5Solid/circle-notch/14",
+      appearance: "tagbutton",
+      gap: 10,
+    });
+
+    this.getChildControl("icon").getContentElement().addClass("rotate");
+    this.getChildControl("label").setTextColor("text");
+  },
+});

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

@@ -44,8 +44,9 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
     __resourceData: null,
     __showOrganizations: null,
     __textFilter: null,
-    __searchButton: null,
     __collabButtonsContainer: null,
+    __searchingCollaborators: null,
+    __searchDelayer: null,
     __shareButton: null,
     __selectedCollaborators: null,
     __potentialCollaborators: null,
@@ -72,17 +73,24 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       }));
       const filter = this.__textFilter = new osparc.filter.TextFilter("name", "collaboratorsManager");
       filter.setCompact(true);
-      this.addListener("appear", () => filter.getChildControl("textfield").focus());
+      const filterTextField = filter.getChildControl("textfield");
+      filterTextField.setPlaceholder(this.tr("Search"));
+      this.addListener("appear", () => filterTextField.focus());
       toolbar.add(filter, {
         flex: 1
       });
-      const searchButton = this.__searchButton = new osparc.ui.form.FetchButton(this.tr("Search"), "@FontAwesome5Solid/search/12").set({
-        maxHeight: 30,
+      filterTextField.addListener("input", e => {
+        const filterValue = e.getData();
+        if (this.__searchDelayer) {
+          clearTimeout(this.__searchDelayer);
+        }
+        if (filterValue.length > 3) {
+          const waitBeforeSearching = 1000;
+          this.__searchDelayer = setTimeout(() => {
+            this.__searchUsers();
+          }, waitBeforeSearching);
+        }
       });
-      const command = new qx.ui.command.Command("Enter");
-      searchButton.setCommand(command);
-      searchButton.addListener("execute", () => this.__searchUsers(), this);
-      toolbar.add(searchButton);
       this.add(toolbar);
 
       const collabButtonsContainer = this.__collabButtonsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());
@@ -92,6 +100,10 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
         flex: 1
       });
 
+      const searchingCollaborators = this.__searchingCollaborators = new osparc.filter.SearchingCollaborators();
+      searchingCollaborators.exclude();
+      this.__collabButtonsContainer.add(searchingCollaborators);
+
       const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
         alignX: "right"
       }));
@@ -105,8 +117,8 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
     },
 
     __searchUsers: function() {
+      this.__searchingCollaborators.show();
       const text = this.__textFilter.getChildControl("textfield").getValue();
-      this.__searchButton.setFetching(true);
       osparc.store.Users.getInstance().searchUsers(text)
         .then(users => {
           users.forEach(user => user["collabType"] = 2);
@@ -116,7 +128,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
           console.error(err);
           osparc.FlashMessenger.getInstance().logAs(err.message, "ERROR");
         })
-        .finally(() => this.__searchButton.setFetching(false));
+        .finally(() => this.__searchingCollaborators.exclude());
     },
 
     __showProductEveryone: function() {
@@ -208,6 +220,10 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
         }
         this.__collabButtonsContainer.add(this.__collaboratorButton(potentialCollaborator));
       });
+
+      // move it to last position
+      this.__collabButtonsContainer.remove(this.__searchingCollaborators);
+      this.__collabButtonsContainer.add(this.__searchingCollaborators);
     },
 
     __shareClicked: function() {

services/static-webserver/client/source/class/osparc/ui/hint/Hint.js

@@ -71,6 +71,8 @@ qx.Class.define("osparc.ui.hint.Hint", {
 
     setText: function(text) {
       this.getChildControl("label").setValue(text);
+      // After setting the text, the dimensions of the Hint changed: recenter it
+      setTimeout(() => this.updatePosition(), 10);
     }
   }
 });