@kumologica/sdk 3.5.4 → 3.6.0-alpha7

package/src/app/ui/editor-client/src/js/ui/common/commandBox.js

@@ -0,0 +1,107 @@
+(function ($) {
+  /**
+   * options:
+   *   - command : the command to run
+   *   - delay : delay, in ms, after a keystroke before firing change event
+   *
+   * methods:
+   *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+   *   - count - sets or clears a sub-label on the input. This can be used to provide
+   *             a feedback on the number of matches, or number of available entries to search
+   *   - change - trigger a change event
+   *
+   */
+
+  $.widget("kumologica.commandBox", {
+    _create: function () {
+      var that = this;
+
+      this.currentTimeout = null;
+      this.lastSent = "";
+      let command = this.options.command || "";
+
+      this.element.val(command + " ");
+      this.uiContainer = this.element.wrap("<div>").parent();
+      this.uiContainer.addClass("red-ui-commandBox-container");
+
+      $(
+        `<div class="red-ui-commandBox-command"><i class="fa fa-terminal"></i></div>`
+      ).prependTo(this.uiContainer);
+      this.enterButton = $(
+        '<span class="enter-command pointer">run</span>'
+      ).appendTo(this.uiContainer);
+
+      this.enterButton.on("click", function (e) {
+        e.preventDefault();
+        that.options.execute(that.element.val());
+      });
+
+      this.resultCount = $("<span>", {
+        class: "red-ui-searchBox-resultCount hide",
+      }).appendTo(this.uiContainer);
+
+      this.element.on("keydown", function (evt) {
+        if (evt.keyCode === 27) {
+          // Escape key
+          that.element.val("");
+        } else if (evt.keyCode === 13) {
+          // Enter key
+          evt.preventDefault();
+          let command = that.element.val();
+          that.options.execute(command);
+        }
+      });
+      this.element.on("keyup", function (evt) {
+        that._change($(this).val());
+      });
+
+      this.element.on("focus", function () {
+        $("body").one("mousedown", function () {
+          that.element.blur();
+        });
+      });
+    },
+    _change: function (val, instant) {
+      var fireEvent = false;
+      if (val === "") {
+        // this.clearButton.hide();
+        fireEvent = true;
+      } else {
+        // this.clearButton.show();
+        fireEvent = val.length >= (this.options.minimumLength || 0);
+      }
+      var current = this.element.val();
+      fireEvent = fireEvent && current !== this.lastSent;
+      if (fireEvent) {
+        if (!instant && this.options.delay > 0) {
+          clearTimeout(this.currentTimeout);
+          var that = this;
+          this.currentTimeout = setTimeout(function () {
+            that.lastSent = that.element.val();
+            that._trigger("change");
+          }, this.options.delay);
+        } else {
+          this._trigger("change");
+        }
+      }
+    },
+    value: function (val) {
+      if (val === undefined) {
+        return this.element.val();
+      } else {
+        this.element.val(val);
+        this._change(val);
+      }
+    },
+    count: function (val) {
+      if (val === undefined || val === null || val === "") {
+        this.resultCount.text("").hide();
+      } else {
+        this.resultCount.text(val).show();
+      }
+    },
+    change: function () {
+      this._trigger("change");
+    },
+  });
+})(jQuery);

package/src/app/ui/editor-client/src/js/ui/common/searchBox.js

@@ -1,98 +1,99 @@
- 
-(function($) {
+(function ($) {
+  /**
+   * options:
+   *   - minimumLength : the minimum length of text before firing a change event
+   *   - delay : delay, in ms, after a keystroke before firing change event
+   *
+   * methods:
+   *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+   *   - count - sets or clears a sub-label on the input. This can be used to provide
+   *             a feedback on the number of matches, or number of available entries to search
+   *   - change - trigger a change event
+   *
+   */
 
-/**
- * options:
- *   - minimumLength : the minimum length of text before firing a change event
- *   - delay : delay, in ms, after a keystroke before firing change event
- *
- * methods:
- *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
- *   - count - sets or clears a sub-label on the input. This can be used to provide
- *             a feedback on the number of matches, or number of available entries to search
- *   - change - trigger a change event
- *
- */
+  $.widget("nodered.searchBox", {
+    _create: function () {
+      var that = this;
 
-    $.widget( "nodered.searchBox", {
-        _create: function() {
-            var that = this;
+      this.currentTimeout = null;
+      this.lastSent = "";
+      this.element.val("");
+      this.uiContainer = this.element.wrap("<div>").parent();
+      this.uiContainer.addClass("red-ui-searchBox-container");
 
-            this.currentTimeout = null;
-            this.lastSent = "";
-            this.element.val("");
-            this.uiContainer = this.element.wrap("<div>").parent();
-            this.uiContainer.addClass("red-ui-searchBox-container");
+      $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
+      this.clearButton = $(
+        '<a href="#"><i class="fa fa-times"></i></a>'
+      ).appendTo(this.uiContainer);
+      this.clearButton.on("click", function (e) {
+        e.preventDefault();
+        that.element.val("");
+        that._change("", true);
+        that.element.focus();
+      });
 
-            $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
-            this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
-            this.clearButton.on("click",function(e) {
-                e.preventDefault();
-                that.element.val("");
-                that._change("",true);
-                that.element.focus();
-            });
+      this.resultCount = $("<span>", {
+        class: "red-ui-searchBox-resultCount hide",
+      }).appendTo(this.uiContainer);
 
-            this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
-
-            this.element.val("");
-            this.element.on("keydown",function(evt) {
-                if (evt.keyCode === 27) {
-                    that.element.val("");
-                }
-            })
-            this.element.on("keyup",function(evt) {
-                that._change($(this).val());
-            });
-
-            this.element.on("focus",function() {
-                $("body").one("mousedown",function() {
-                    that.element.blur();
-                });
-            });
+      this.element.val("");
+      this.element.on("keydown", function (evt) {
+        if (evt.keyCode === 27) {
+          that.element.val("");
+        }
+      });
+      this.element.on("keyup", function (evt) {
+        that._change($(this).val());
+      });
 
-        },
-        _change: function(val,instant) {
-            var fireEvent = false;
-            if (val === "") {
-                this.clearButton.hide();
-                fireEvent = true;
-            } else {
-                this.clearButton.show();
-                fireEvent = (val.length >= (this.options.minimumLength||0));
-            }
-            var current = this.element.val();
-            fireEvent = fireEvent && current !== this.lastSent;
-            if (fireEvent) {
-                if (!instant && this.options.delay > 0) {
-                    clearTimeout(this.currentTimeout);
-                    var that = this;
-                    this.currentTimeout = setTimeout(function() {
-                        that.lastSent = that.element.val();
-                        that._trigger("change");
-                    },this.options.delay);
-                } else {
-                    this._trigger("change");
-                }
-            }
-        },
-        value: function(val) {
-            if (val === undefined) {
-                return this.element.val();
-            } else {
-                this.element.val(val);
-                this._change(val);
-            }
-        },
-        count: function(val) {
-            if (val === undefined || val === null || val === "") {
-                this.resultCount.text("").hide();
-            } else {
-                this.resultCount.text(val).show();
-            }
-        },
-        change: function() {
-            this._trigger("change");
+      this.element.on("focus", function () {
+        $("body").one("mousedown", function () {
+          that.element.blur();
+        });
+      });
+    },
+    _change: function (val, instant) {
+      var fireEvent = false;
+      if (val === "") {
+        this.clearButton.hide();
+        fireEvent = true;
+      } else {
+        this.clearButton.show();
+        fireEvent = val.length >= (this.options.minimumLength || 0);
+      }
+      var current = this.element.val();
+      fireEvent = fireEvent && current !== this.lastSent;
+      if (fireEvent) {
+        if (!instant && this.options.delay > 0) {
+          clearTimeout(this.currentTimeout);
+          var that = this;
+          this.currentTimeout = setTimeout(function () {
+            that.lastSent = that.element.val();
+            that._trigger("change");
+          }, this.options.delay);
+        } else {
+          this._trigger("change");
         }
-    });
+      }
+    },
+    value: function (val) {
+      if (val === undefined) {
+        return this.element.val();
+      } else {
+        this.element.val(val);
+        this._change(val);
+      }
+    },
+    count: function (val) {
+      if (val === undefined || val === null || val === "") {
+        this.resultCount.text("").hide();
+      } else {
+        this.resultCount.text(val).show();
+      }
+    },
+    change: function () {
+      this._trigger("change");
+    },
+  });
 })(jQuery);

package/src/app/ui/editor-client/src/js/ui/modules.js

@@ -0,0 +1,164 @@
+RED.modules = (function () {
+  let dialog;
+  let commandInputContainer;
+  let visible = false;
+
+  const NPM_INSTALL_CMD = "npm install";
+  function createDialog() {
+    console.log("[RED.modules.createDialog] Invoked");
+
+    let $mainContainer = $("#main-container");
+
+    dialog = $(
+      `<div id="modules-dialog-container" class="red-ui-search"></div>`
+    ).appendTo($mainContainer);
+
+    dialog.on("click", function (e) {
+      e.stopPropagation();
+    });
+
+    console.log(
+      "[RED.modules.createDialog] Looking for hook for main-container",
+      $("#main-container")
+    );
+
+    commandInputContainer = $("<div>", {
+      class: "command-input-container",
+    }).appendTo(dialog);
+
+    installInput = $(
+      `<input type="text" placeholder="Type module to install...">`
+    )
+      .appendTo(commandInputContainer)
+      .commandBox({
+        command: NPM_INSTALL_CMD,
+        delay: 100,
+        change: function () {
+          evaluateCommand($(this).val());
+        },
+        execute: function (command) {
+          hide();
+          $("#workspace-terminal").show();
+          console.log("[modules] command received", command);
+          executeCommand(command);
+        },
+      });
+    console.log("[RED.modules.createDialog] 2");
+
+    installInput.on("keydown", function (evt) {
+      if (evt.key === "Enter" || evt.keyCode === 13) {
+        evt.preventDefault(); // Prevent default action if necessary
+        evaluateCommand($(this).val());
+      }
+    });
+
+    installInput.on("paste", function (evt) {
+      evt.preventDefault();
+
+      let clipboardData =
+        evt.originalEvent.clipboardData || window.clipboardData;
+      let pastedData = clipboardData.getData("Text");
+      if (pastedData.startsWith(NPM_INSTALL_CMD)) {
+        pastedData = pastedData.slice(NPM_INSTALL_CMD.length).trim();
+      }
+
+      installInput.commandBox("value", `${NPM_INSTALL_CMD} ${pastedData}`);
+    });
+  }
+
+  function init() {
+    RED.actions.add("npm:install", show);
+    RED.actions.add("npm:install:close", hide);
+  }
+
+  function show(v) {
+    if (!visible) {
+      RED.keyboard.add("*", "escape", function () {
+        hide();
+      });
+
+      $("#main-container").click(() => {
+        hide();
+      });
+
+      console.log("[modules.show] dialog?", dialog);
+      if (!dialog) {
+        createDialog();
+      }
+      // restore the value to the original
+      installInput.commandBox("value", NPM_INSTALL_CMD + " ");
+      visible = true;
+      console.log("[modules.show] dialog created");
+      dialog.slideDown(300);
+
+      RED.events.emit("modules:install");
+      window.setTimeout(() => {
+        installInput.focus();
+      }, 50);
+    }
+  }
+  function updateValue(value) {
+    installInput.commandBox("value", value);
+  }
+  function hide() {
+    if (visible) {
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
+      visible = false;
+      if (dialog !== null) {
+        dialog.slideUp(200, function () {
+          installInput.commandBox("value", NPM_INSTALL_CMD);
+        });
+      }
+      RED.events.emit("modules:close");
+    }
+  }
+
+  function evaluateCommand(module) {
+    // check that module contains the prefix: NPM_INSTALL_CMD otherwise quit the app
+    if (!module.startsWith(NPM_INSTALL_CMD)) {
+      hide();
+      RED.actions.invoke("core:search");
+    } else {
+      const moduleName = module.slice(NPM_INSTALL_CMD.length).trim();
+      console.log(`npm install ${moduleName}`);
+    }
+  }
+
+  async function executeCommand(command) {
+    try {
+      await window.__kumologica.command.npmInstall(command);
+      RED.notifications.notify(
+        "<b>Task Completed Successfully</b></br>Please reload the designer to update the nodes palette.",
+        {
+          type: "success",
+          buttons: [
+            {
+              text: "Reload",
+              click: () => {
+                window.__kumologica.main.dispatch("restart-requested");
+              },
+            },
+          ],
+          fixed: true,
+        },
+        true,
+        undefined
+      );
+    } catch (err) {
+      RED.notifications.notify(
+        "<b>Error: Task Failed</b></br>The task could not be completed due to errors. Check the logs for details",
+        "error",
+        undefined,
+        5000
+      );
+    }
+  }
+
+  return {
+    init,
+    show,
+    hide,
+    updateValue,
+  };
+})();