@kumologica/sdk 3.5.4 → 3.6.0-alpha7

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

@@ -11,15 +11,15 @@ RED.search = (function () {
   var results = [];
 
   function indexProperty(node, label, property) {
-    if (typeof property === 'string' || typeof property === 'number') {
-      property = ('' + property).toLowerCase();
+    if (typeof property === "string" || typeof property === "number") {
+      property = ("" + property).toLowerCase();
       index[property] = index[property] || {};
       index[property][node.id] = { node: node, label: label };
     } else if (Array.isArray(property)) {
       property.forEach(function (prop) {
         indexProperty(node, label, prop);
       });
-    } else if (typeof property === 'object') {
+    } else if (typeof property === "object") {
       for (var prop in property) {
         if (property.hasOwnProperty(prop)) {
           indexProperty(node, label, property[prop]);
@@ -30,13 +30,13 @@ RED.search = (function () {
   function indexNode(n) {
     var l = RED.utils.getNodeLabel(n);
     if (l) {
-      l = ('' + l).toLowerCase();
+      l = ("" + l).toLowerCase();
       index[l] = index[l] || {};
       index[l][n.id] = { node: n, label: l };
     }
-    l = l || n.label || n.name || n.id || '';
+    l = l || n.label || n.name || n.id || "";
 
-    var properties = ['id', 'type', 'name', 'label', 'info'];
+    var properties = ["id", "type", "name", "label", "info"];
     if (n._def && n._def.defaults) {
       properties = properties.concat(Object.keys(n._def.defaults));
     }
@@ -64,14 +64,14 @@ RED.search = (function () {
 
   /**
    * User search when typing it the search box...
-   * @param {string} val 
+   * @param {string} val
    */
   function search(val) {
-    searchResults.editableList('empty');
+    searchResults.editableList("empty");
     var typeFilter;
     var m = /(?:^| )type:([^ ]+)/.exec(val);
     if (m) {
-      val = val.replace(/(?:^| )type:[^ ]+/, '');
+      val = val.replace(/(?:^| )type:[^ ]+/, "");
       typeFilter = m[1];
     }
 
@@ -83,27 +83,25 @@ RED.search = (function () {
         // Excluding tabs
         // results = results.filter((r) => r.node.type !== 'tab');
         for (i = 0; i < Math.min(results.length, 25); i++) {
-          searchResults.editableList('addItem', results[i]);
+          searchResults.editableList("addItem", results[i]);
         }
       } else {
-        searchResults.editableList('addItem', {});
+        searchResults.editableList("addItem", {});
       }
     } else {
       let commands = searchCommands();
-      commands.forEach(c => {
-        searchResults.editableList('addItem', c);
+      commands.forEach((c) => {
+        searchResults.editableList("addItem", c);
       });
 
-      let results = $('#search-result-list');
+      let results = $("#search-result-list");
       $('<div class="searchSeparator"></div>').appendTo(results);
 
-
       let allNodes = searchNodes();
 
-      allNodes.forEach(n => {
-        searchResults.editableList('addItem', n);
-      })
-
+      allNodes.forEach((n) => {
+        searchResults.editableList("addItem", n);
+      });
     }
   }
 
@@ -142,56 +140,89 @@ RED.search = (function () {
         results.push(nodes[list[i]]);
       }
     } else {
-      let setResults = new Set()
+      let setResults = new Set();
       for (const i in index) {
-        index[i].forEach(n => {
+        index[i].forEach((n) => {
           if (setResults.has(n.node.id)) return;
           else {
             setResults.add(n.node.id);
-            if (n.node.type === 'tab') {
+            if (n.node.type === "tab") {
               results.push({ label: n.node.label, node: n.node });
             } else {
               results.push({ label: n.node.name, node: n.node });
             }
           }
-        })
+        });
       }
-
     }
     return results;
-
   }
   /**
    * Returns a list of commands that will be added to the search window when it is opened
    */
   function searchCommands() {
-
     return [
-      { type: 'command', title: 'Open Settings', action: 'core:settings:open', shortcut: `${CtrlOrCmd()} /` },
-      { type: 'command', title: 'Show Project Info', action: 'core:project-info' },
       {
-        type: 'command', title: 'Run Test...', cb: () => {
-          if (!$('.sidebar-test').is(':visible')) {
-            $('#red-ui-tab-test-link-button').click();
+        type: "command",
+        title: "Open Settings",
+        action: "core:settings:open",
+        shortcut: `${CtrlOrCmd()} /`,
+      },
+      {
+        type: "command",
+        title: "Show Project Info",
+        action: "core:project-info",
+      },
+      {
+        type: "command",
+        title: "Run Test...",
+        cb: () => {
+          if (!$(".sidebar-test").is(":visible")) {
+            $("#red-ui-tab-test-link-button").click();
           }
 
-          $('#test-sidebar-run-btn').click();
-        }
+          $("#test-sidebar-run-btn").click();
+        },
       },
       {
-        type: 'command', title: 'Open Log Viewer', cb: () => {
-          $('#workspace-terminal').toggle()
-        }, shortcut: `${CtrlOrCmd()} T`
+        type: "command",
+        title: "Open Log Viewer",
+        cb: () => {
+          $("#workspace-terminal").toggle();
+        },
+        shortcut: `${CtrlOrCmd()} T`,
+      },
+      {
+        type: "command",
+        title: "Import Flow",
+        action: "core:show-import-dialog",
+        shortcut: `${CtrlOrCmd()} I`,
+      },
+      {
+        type: "command",
+        title: "Export Flow",
+        action: "core:show-export-dialog",
+        shortcut: `${CtrlOrCmd()} E`,
       },
-      { type: 'command', title: 'Import Flow', action: 'core:show-import-dialog', shortcut: `${CtrlOrCmd()} I` },
-      { type: 'command', title: 'Export Flow', action: 'core:show-export-dialog', shortcut: `${CtrlOrCmd()} E` },
       // { type: 'command', title: 'SignIn to Kumologica.dev', action: 'core:signup:show' },
       {
-        type: 'command', title: 'Help: Documentation', cb: () => {
-          window.__kumologica.electron.shell.openExternal('https://docs.kumologica.com/docs/guide/Intro.html');
-        }
-      }
-    ]
+        type: "command",
+        title: "Task: npm install",
+        action: "npm:install",
+        cb: () => {
+          RED.actions.invoke("core:search:close");
+        },
+      },
+      {
+        type: "command",
+        title: "Help: Documentation",
+        cb: () => {
+          window.__kumologica.electron.shell.openExternal(
+            "https://docs.kumologica.com/docs/guide/Intro.html"
+          );
+        },
+      },
+    ];
   }
 
   function CtrlOrCmd() {
@@ -199,7 +230,7 @@ RED.search = (function () {
   }
 
   function ensureSelectedIsVisible() {
-    var selectedEntry = searchResults.find('li.selected');
+    var selectedEntry = searchResults.find("li.selected");
     if (selectedEntry.length === 1) {
       var scrollWindow = searchResults.parent();
       var scrollHeight = scrollWindow.height();
@@ -208,21 +239,31 @@ RED.search = (function () {
       var h = selectedEntry.height();
       if (y + h > scrollHeight) {
         scrollWindow.animate(
-          { scrollTop: '-=' + (scrollHeight - (y + h) - 10) },
+          { scrollTop: "-=" + (scrollHeight - (y + h) - 10) },
           50
         );
       } else if (y < 0) {
-        scrollWindow.animate({ scrollTop: '+=' + (y - 10) }, 50);
+        scrollWindow.animate({ scrollTop: "+=" + (y - 10) }, 50);
       }
     }
   }
 
+  function shouldInvokeCommand(value) {
+    if (value.startsWith("npm install")) {
+      RED.actions.invoke("core:search:close");
+      RED.actions.invoke("npm:install", value);
+      RED.modules.updateValue(value);
+      return true;
+    } else {
+      return false;
+    }
+  }
   function createDialog() {
-    dialog = $('<div>', {
-      id: 'red-ui-search',
-      class: 'red-ui-search',
-    }).appendTo('#main-container');
-    var searchDiv = $('<div>', { class: 'red-ui-search-container' }).appendTo(
+    dialog = $("<div>", {
+      id: "red-ui-search",
+      class: "red-ui-search",
+    }).appendTo("#main-container");
+    var searchDiv = $("<div>", { class: "red-ui-search-container" }).appendTo(
       dialog
     );
     searchInput = $(
@@ -230,25 +271,30 @@ RED.search = (function () {
     )
       .appendTo(searchDiv)
       .searchBox({
-        delay: 200,
+        delay: 100,
         change: function () {
-          search($(this).val());
+          let value = $(this).val();
+          if (!shouldInvokeCommand(value)) {
+            search($(this).val());
+          }
         },
       });
 
-    searchInput.on('keydown', function (evt) {
+    searchInput.on("keydown", function (evt) {
       var children;
-      if (results.length > 0) {
+
+      // Check for embedded commands
+      if (!shouldInvokeCommand(evt.target.value) && results.length > 0) {
         if (evt.keyCode === 40) {
           // Down
           children = searchResults.children();
           if (selected < children.length - 1) {
             if (selected > -1) {
-              $(children[selected]).removeClass('selected');
+              $(children[selected]).removeClass("selected");
             }
             selected++;
           }
-          $(children[selected]).addClass('selected');
+          $(children[selected]).addClass("selected");
           ensureSelectedIsVisible();
           evt.preventDefault();
         } else if (evt.keyCode === 38) {
@@ -256,11 +302,11 @@ RED.search = (function () {
           children = searchResults.children();
           if (selected > 0) {
             if (selected < children.length) {
-              $(children[selected]).removeClass('selected');
+              $(children[selected]).removeClass("selected");
             }
             selected--;
           }
-          $(children[selected]).addClass('selected');
+          $(children[selected]).addClass("selected");
           ensureSelectedIsVisible();
           evt.preventDefault();
         } else if (evt.keyCode === 13) {
@@ -273,13 +319,13 @@ RED.search = (function () {
     });
     searchInput.i18n();
 
-    var searchResultsDiv = $('<div>', {
-      class: 'red-ui-search-results-container',
+    var searchResultsDiv = $("<div>", {
+      class: "red-ui-search-results-container",
     }).appendTo(dialog);
 
-    searchResults = $('<ol>', {
-      id: 'search-result-list',
-      style: 'position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;',
+    searchResults = $("<ol>", {
+      id: "search-result-list",
+      style: "position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;",
     })
       .appendTo(searchResultsDiv)
       .editableList({
@@ -287,36 +333,38 @@ RED.search = (function () {
         addItem: function (container, i, object) {
           var node = object.node;
 
-          // If node === undefined and object is object => object is the command 
+          // If node === undefined and object is object => object is the command
           // If node === undefiend and object is empty => user search yield no results
           // otherwise is a normal search ...
 
           if (node === undefined && !object) {
             // case of user search yield no results
-            $('<div>', { class: 'red-ui-search-empty' })
-              .text('No matches found')
+            $("<div>", { class: "red-ui-search-empty" })
+              .text("No matches found")
               .appendTo(container);
           } else if (node === undefined && object) {
             // case of initial display of options (commands & tabs ) ... (object is a command)
-            if (object.type === 'command') {
-
+            if (object.type === "command") {
               // Main result container
-              var div = $('<a>', {
-                href: '#',
-                class: 'red-ui-search-result',
+              var div = $("<a>", {
+                href: "#",
+                class: "red-ui-search-result",
               }).appendTo(container);
 
               // Command title here
-              var contentDescription = $('<div>', {
-                class: 'red-ui-search-result-description',
+              var contentDescription = $("<div>", {
+                class: "red-ui-search-result-description",
               }).appendTo(div);
 
-              $('<div>', { class: 'red-ui-search-result-command-label', style: 'width:95%' })
+              $("<div>", {
+                class: "red-ui-search-result-command-label",
+                style: "width:95%",
+              })
                 .text(object.title)
                 .appendTo(contentDescription);
 
               // Type of object (command)
-              $('<div>', { class: 'red-ui-search-result-command-shortcut' })
+              $("<div>", { class: "red-ui-search-result-command-shortcut" })
                 .text(object.shortcut)
                 .appendTo(div);
 
@@ -325,46 +373,48 @@ RED.search = (function () {
                 if (object.action) {
                   hide();
                   window.setTimeout(() => {
-                    RED.actions.invoke(object.action)
-                  }, 10)
+                    RED.actions.invoke(object.action);
+                  }, 10);
                 } else {
                   hide();
                   window.setTimeout(() => {
-                    object.cb()
-                  }, 10)
+                    object.cb();
+                  }, 10);
                 }
-
               });
             }
-
           } else {
             var def = node._def;
-            var div = $('<a>', {
-              href: '#',
-              class: 'red-ui-search-result',
+            var div = $("<a>", {
+              href: "#",
+              class: "red-ui-search-result",
             }).appendTo(container);
 
             // ::: Part of the description
-            var contentDescription = $('<div>', {
-              class: 'red-ui-search-result-description',
+            var contentDescription = $("<div>", {
+              class: "red-ui-search-result-description",
             }).appendTo(div);
 
-            // ::: Part of the icon here... 
-            var nodeDiv = $('<div>', {
-              class: 'ui-search-result-node',
+            // ::: Part of the icon here...
+            var nodeDiv = $("<div>", {
+              class: "ui-search-result-node",
             }).appendTo(contentDescription);
 
             var colour = RED.utils.getNodeColor(node.type, def);
             var icon_url = RED.utils.getNodeIcon(def, node);
 
-            if (node.type === 'tab') {
-              var iconContainer = $('<div/>', {
-                class: 'palette_icon_container',
+            if (node.type === "tab") {
+              var iconContainer = $("<div/>", {
+                class: "palette_icon_container",
               }).appendTo(nodeDiv);
-              RED.utils.createIconElement('icons/kumologica-core/kumologica-tab.png', iconContainer, true);
+              RED.utils.createIconElement(
+                "icons/kumologica-core/kumologica-tab.png",
+                iconContainer,
+                true
+              );
             } else {
-              var iconContainer = $('<div/>', {
-                class: 'palette_icon_container',
+              var iconContainer = $("<div/>", {
+                class: "palette_icon_container",
               }).appendTo(nodeDiv);
               RED.utils.createIconElement(icon_url, iconContainer, true);
             }
@@ -373,22 +423,22 @@ RED.search = (function () {
               var workspace = RED.nodes.workspace(node.z);
               if (!workspace) {
                 workspace = RED.nodes.subflow(node.z);
-                workspace = 'subflow:' + workspace.name;
+                workspace = "subflow:" + workspace.name;
               } else {
                 workspace = workspace.label; //'flow:' + workspace.label
               }
-              $('<div>', { class: 'red-ui-search-result-node-flow' })
+              $("<div>", { class: "red-ui-search-result-node-flow" })
                 .text(workspace)
                 .appendTo(div);
             }
 
-            $('<div>', { class: 'red-ui-search-result-node-label' })
+            $("<div>", { class: "red-ui-search-result-node-label" })
               .text(object.label || node.id)
               .appendTo(contentDescription);
-            $('<div>', { class: 'red-ui-search-result-node-type' })
+            $("<div>", { class: "red-ui-search-result-node-type" })
               .text(node.type)
               .appendTo(contentDescription);
-            $('<div>', { class: 'red-ui-search-result-node-id' })
+            $("<div>", { class: "red-ui-search-result-node-id" })
               .text(node.id)
               .appendTo(contentDescription);
 
@@ -415,15 +465,15 @@ RED.search = (function () {
 
   function show(v) {
     // Disable the project dialog
-    RED.actions.invoke('core:project-info:close');
-    RED.actions.invoke('core:settings:close');
+    RED.actions.invoke("core:project-info:close");
+    RED.actions.invoke("core:settings:close");
 
     if (!visible) {
-      RED.keyboard.add('*', 'escape', function () {
+      RED.keyboard.add("*", "escape", function () {
         hide();
       });
 
-      $('#main-container').click(() => {
+      $("#main-container").click(() => {
         hide();
       });
 
@@ -433,24 +483,22 @@ RED.search = (function () {
         createDialog();
       }
       dialog.slideDown(300);
-      searchInput.searchBox('value', v);
-      RED.events.emit('search:open');
+      searchInput.searchBox("value", v);
+      RED.events.emit("search:open");
       visible = true;
       window.setTimeout(() => {
-        searchInput.focus()
+        searchInput.focus();
       }, 50);
 
       // Populate search results with commands and tabs at least
       search();
     }
-
-
   }
 
   function hide() {
     if (visible) {
-      $('#main-container').off('click');
-      RED.keyboard.remove('escape');
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
       visible = false;
       //   $('#header-shade').hide();
       //   $('#editor-shade').hide();
@@ -459,28 +507,28 @@ RED.search = (function () {
       // $('#sidebar-separator').show();
       if (dialog !== null) {
         dialog.slideUp(200, function () {
-          searchInput.searchBox('value', '');
+          searchInput.searchBox("value", "");
         });
       }
-      RED.events.emit('search:close');
+      RED.events.emit("search:close");
     }
   }
 
   function init() {
-    RED.actions.add('core:search', show);
-    RED.actions.add('core:search:close', hide);
+    RED.actions.add("core:search", show);
+    RED.actions.add("core:search:close", hide);
 
-    RED.events.on('type-search:open', function () {
+    RED.events.on("type-search:open", function () {
       disabled = true;
     });
-    RED.events.on('type-search:close', function () {
+    RED.events.on("type-search:close", function () {
       disabled = false;
     });
 
-    $('#header-shade').on('mousedown', hide);
-    $('#editor-shade').on('mousedown', hide);
-    $('#palette-shade').on('mousedown', hide);
-    $('#sidebar-shade').on('mousedown', hide);
+    $("#header-shade").on("mousedown", hide);
+    $("#editor-shade").on("mousedown", hide);
+    $("#palette-shade").on("mousedown", hide);
+    $("#sidebar-shade").on("mousedown", hide);
   }
 
   return {
@@ -488,6 +536,6 @@ RED.search = (function () {
     show: show,
     hide: hide,
     reveal: reveal,
-    revealByNodeId: revealByNodeId
+    revealByNodeId: revealByNodeId,
   };
 })();

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

@@ -305,7 +305,7 @@ RED.sidebar = (function () {
     RED.sidebar.info.init();
     RED.sidebar.test.init();
     RED.sidebar.git.init();
-    //RED.sidebar.kumohub.init();
+    RED.sidebar.kumohub.init();
     RED.sidebar.azure.init();
     RED.sidebar.awsDeploy.init();