🐛 [Frontend] Fix: Limit conversation title (50) (#8416)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/conversation/AddMessage.js

@@ -85,6 +85,10 @@ qx.Class.define("osparc.conversation.AddMessage", {
           control = new osparc.editor.MarkdownEditor();
           control.addListener("textChanged", () => this.__addCommentPressed(), this);
           control.setCompact(true);
+          control.getChildControl("text-area").set({
+            maxLength: osparc.data.model.Conversation.MAX_CONTENT_LENGTH,
+          });
+          // make it visually connected to the button
           control.getChildControl("text-area").getContentElement().setStyles({
             "border-top-right-radius": "0px", // no roundness there to match the arrow button
           });

services/static-webserver/client/source/class/osparc/data/model/Conversation.js

@@ -58,6 +58,9 @@ qx.Class.define("osparc.data.model.Conversation", {
       CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
       CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
     },
+
+    MAX_TITLE_LENGTH: 50,
+    MAX_CONTENT_LENGTH: 4096,
   },
 
   properties: {
@@ -256,9 +259,8 @@ qx.Class.define("osparc.data.model.Conversation", {
 
     renameConversation: function(newName) {
       osparc.store.ConversationsSupport.getInstance().renameConversation(this.getConversationId(), newName)
-        .then(() => {
-          this.setName(newName);
-        });
+        .then(() => this.setName(newName))
+        .catch(err => osparc.FlashMessenger.logError(err));
     },
 
     patchExtraContext: function(extraContext) {

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

@@ -111,7 +111,9 @@ qx.Class.define("osparc.study.ConversationPage", {
         visibility: osparc.data.model.Study.canIWrite(this.__studyData["accessRights"]) ? "visible" : "excluded",
       });
       renameButton.addListener("execute", () => {
-        const titleEditor = new osparc.widget.Renamer(tabButton.getLabel());
+        const titleEditor = new osparc.widget.Renamer(tabButton.getLabel()).set({
+          maxChars: osparc.data.model.Conversation.MAX_TITLE_LENGTH,
+        });
         titleEditor.addListener("labelChanged", e => {
           titleEditor.close();
           const newLabel = e.getData()["newLabel"];

services/static-webserver/client/source/class/osparc/support/ConversationPage.js

@@ -301,7 +301,9 @@ qx.Class.define("osparc.support.ConversationPage", {
       if (oldName === "null") {
         oldName = "";
       }
-      const renamer = new osparc.widget.Renamer(oldName);
+      const renamer = new osparc.widget.Renamer(oldName).set({
+        maxChars: osparc.data.model.Conversation.MAX_TITLE_LENGTH,
+      });
       renamer.addListener("labelChanged", e => {
         renamer.close();
         const newLabel = e.getData()["newLabel"];

services/static-webserver/client/source/class/osparc/widget/Renamer.js

@@ -40,8 +40,8 @@ qx.Class.define("osparc.widget.Renamer", {
   construct: function(oldLabel = "", subtitle = "", winTitle) {
     this.base(arguments, winTitle || this.tr("Rename"));
 
-    const maxWidth = 350;
-    const minWidth = 200;
+    const maxWidth = 400;
+    const minWidth = 250;
     const labelWidth = oldLabel ? Math.min(Math.max(parseInt(oldLabel.length*4), minWidth), maxWidth) : minWidth;
     this.set({
       layout: new qx.ui.layout.VBox(5),
@@ -63,66 +63,93 @@ qx.Class.define("osparc.widget.Renamer", {
     "labelChanged": "qx.event.type.Data"
   },
 
+  properties: {
+    maxChars: {
+      check: "Number",
+      init: 50,
+      apply: "__applyMaxChars",
+    }
+  },
+
   members: {
-    __save: null,
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "main-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+          this.add(control);
+          break;
+        case "text-field":
+          control = new qx.ui.form.TextField().set({
+            placeholder: this.tr("Type text"),
+            allowGrowX: true
+          });
+          this.getChildControl("main-layout").add(control, {
+            flex: 1
+          });
+          break;
+        case "save-button":
+          control = new qx.ui.form.Button(this.tr("Save")).set({
+            appearance: "form-button",
+            padding: [1, 5]
+          });
+          this.getChildControl("main-layout").add(control);
+          break;
+        case "subtitle":
+          control = new qx.ui.basic.Label().set({
+            font: "text-12"
+          });
+          this.add(control);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
 
     __populateNodeLabelEditor: function(oldLabel, labelWidth) {
-      const nodeLabelEditor = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-
-      // Create a text field in which to edit the data
-      const labelEditor = new qx.ui.form.TextField(oldLabel).set({
-        placeholder: this.tr("Type text"),
-        allowGrowX: true,
-        minWidth: labelWidth
+      const textField = this.getChildControl("text-field").set({
+        value: oldLabel,
+        minWidth: labelWidth,
       });
-      nodeLabelEditor.add(labelEditor, {
-        flex: 1
-      });
-
-      this.addListener("appear", e => {
-        labelEditor.focus();
-        if (labelEditor.getValue()) {
-          labelEditor.setTextSelection(0, labelEditor.getValue().length);
-        }
-      }, this);
 
-      // Create the "Save" button to close the cell editor
-      const save = this.__save = new qx.ui.form.Button(this.tr("Save"));
-      save.set({
-        appearance: "form-button",
-        padding: [1, 5]
-      });
-      save.addListener("execute", e => {
-        const newLabel = labelEditor.getValue();
+      const saveButton = this.getChildControl("save-button");
+      saveButton.addListener("execute", () => {
+        const newLabel = textField.getValue();
         const data = {
           newLabel
         };
         this.fireDataEvent("labelChanged", data);
       }, this);
-      nodeLabelEditor.add(save);
 
-      this.add(nodeLabelEditor);
+      this.addListener("appear", () => {
+        textField.focus();
+        if (textField.getValue()) {
+          textField.setTextSelection(0, textField.getValue().length);
+        }
+      }, this);
+    },
+
+    __applyMaxChars: function(value) {
+      this.getChildControl("text-field").setMaxLength(value);
+
+      this.__addSubtitle(this.tr("%1 characters max", value));
     },
 
-    __addSubtitle: function(subtitleLabel) {
-      if (subtitleLabel) {
-        const subtitle = new qx.ui.basic.Label(subtitleLabel).set({
-          font: "text-12"
-        });
-        this.add(subtitle);
+    __addSubtitle: function(subtitleText) {
+      if (subtitleText) {
+        this.getChildControl("subtitle").setValue(subtitleText);
       }
     },
 
     __attachEventHandlers: function() {
       let command = new qx.ui.command.Command("Enter");
-      command.addListener("execute", e => {
-        this.__save.execute();
+      command.addListener("execute", () => {
+        this.getChildControl("save-button").execute();
         command.dispose();
         command = null;
       });
 
       let commandEsc = new qx.ui.command.Command("Esc");
-      commandEsc.addListener("execute", e => {
+      commandEsc.addListener("execute", () => {
         this.close();
         commandEsc.dispose();
         commandEsc = null;