@kumologica/sdk 3.3.0-beta9 → 3.4.0-beta2

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

@@ -62,6 +62,10 @@ RED.search = (function () {
     });
   }
 
+  /**
+   * User search when typing it the search box...
+   * @param {string} val 
+   */
   function search(val) {
     searchResults.editableList('empty');
     var typeFilter;
@@ -71,11 +75,42 @@ RED.search = (function () {
       typeFilter = m[1];
     }
 
-    val = val.trim();
-
     selected = -1;
+
+    if (val && (val.length > 0 || typeFilter)) {
+      let results = searchNodes(val, typeFilter);
+      if (results.length > 0) {
+        // 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]);
+        }
+      } else {
+        searchResults.editableList('addItem', {});
+      }
+    } else {
+      let commands = searchCommands();
+      commands.forEach(c=> {
+        searchResults.editableList('addItem', c);
+      });
+
+      let results = $('#search-result-list');
+      $('<div class="searchSeparator"></div>').appendTo(results);
+
+      
+      let allNodes = searchNodes();
+      
+      allNodes.forEach(n => {
+        searchResults.editableList('addItem', n);
+      })
+
+    }
+  }
+
+  function searchNodes(val, typeFilter){
     results = [];
-    if (val.length > 0 || typeFilter) {
+    if (val) {
+      val = val.trim();
       val = val.toLowerCase();
       var i;
       var j;
@@ -106,16 +141,47 @@ RED.search = (function () {
       for (i = 0; i < list.length; i++) {
         results.push(nodes[list[i]]);
       }
-      if (results.length > 0) {
-        // 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]);
-        }
-      } else {
-        searchResults.editableList('addItem', {});
+    } else {
+      let setResults = new Set()
+      for (const i in index) {
+        index[i].forEach(n => {
+          if (setResults.has(n.node.id)) return;
+          else {
+            setResults.add(n.node.id);
+            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();
+        }
+        
+        $('#test-sidebar-run-btn').click();
+      } },
+      { 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` },
+    ]
+  }
+
+  function CtrlOrCmd() {
+    return window.__kumologica.settings.platform.isMac? "⌘": "Ctrl";
   }
 
   function ensureSelectedIsVisible() {
@@ -146,7 +212,7 @@ RED.search = (function () {
       dialog
     );
     searchInput = $(
-      '<input type="text" placeholder="Find (Nodes and Tabs)">'
+      '<input type="text" placeholder="Search nodes and tabs by name or type">'
     )
       .appendTo(searchDiv)
       .searchBox({
@@ -206,14 +272,55 @@ RED.search = (function () {
         addButton: false,
         addItem: function (container, i, object) {
           var node = object.node;
-          console.log(`[search] node = `, node);
 
-          if (node === undefined) {
+          // 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')
               .appendTo(container);
-          // } else if (node.type === 'tab') {
-          // }
+          } else if (node === undefined && object) {
+            // case of initial display of options (commands & tabs ) ... (object is a command)
+            if (object.type === 'command') {
+
+              // Main result container
+              var div = $('<a>', {
+                href: '#',
+                class: 'red-ui-search-result',
+              }).appendTo(container);
+
+              // Command title here
+              var contentDescription = $('<div>', {
+                class: 'red-ui-search-result-description',
+              }).appendTo(div);
+
+              $('<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' })
+                .text(object.shortcut)
+                .appendTo(div);
+
+              div.click(function (evt) {
+                evt.preventDefault();
+                if (object.action){
+                  hide();
+                  window.setTimeout( ()=> {
+                    RED.actions.invoke(object.action)}, 10)
+                } else {
+                  hide();
+                  window.setTimeout( ()=> {
+                    object.cb() }, 10)
+                }
+                
+              });
+            }
+
           } else {
             var def = node._def;
             var div = $('<a>', {
@@ -221,54 +328,53 @@ RED.search = (function () {
               class: 'red-ui-search-result',
             }).appendTo(container);
 
-            var nodeDiv = $('<div>', {
-              class: 'red-ui-search-result-node',
+            // ::: Part of the 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',
+            }).appendTo(contentDescription);
+
             var colour = RED.utils.getNodeColor(node.type, def);
             var icon_url = RED.utils.getNodeIcon(def, node);
+            
             if (node.type === 'tab') {
-              // colour = '#C0DEED';
               var iconContainer = $('<div/>', {
                 class: 'palette_icon_container',
               }).appendTo(nodeDiv);
               RED.utils.createIconElement('icons/kumologica-core/kumologica-tab.png', iconContainer, true);
-            }else{
-              // Disable the background color, we want it transparent now
-              //nodeDiv.css('backgroundColor', colour);
+            } else {
               var iconContainer = $('<div/>', {
                 class: 'palette_icon_container',
               }).appendTo(nodeDiv);
               RED.utils.createIconElement(icon_url, iconContainer, true);
             }
-            
-
-            
 
-            var contentDiv = $('<div>', {
-              class: 'red-ui-search-result-description',
-            }).appendTo(div);
             if (node.z) {
               var workspace = RED.nodes.workspace(node.z);
               if (!workspace) {
                 workspace = RED.nodes.subflow(node.z);
                 workspace = 'subflow:' + workspace.name;
               } else {
-                workspace = 'tab:' + workspace.label; //'flow:' + workspace.label
+                workspace = workspace.label; //'flow:' + workspace.label
               }
               $('<div>', { class: 'red-ui-search-result-node-flow' })
                 .text(workspace)
-                .appendTo(contentDiv);
+                .appendTo(div);
             }
 
             $('<div>', { class: 'red-ui-search-result-node-label' })
               .text(object.label || node.id)
-              .appendTo(contentDiv);
+              .appendTo(contentDescription);
             $('<div>', { class: 'red-ui-search-result-node-type' })
               .text(node.type)
-              .appendTo(contentDiv);
+              .appendTo(contentDescription);
             $('<div>', { class: 'red-ui-search-result-node-id' })
               .text(node.id)
-              .appendTo(contentDiv);
+              .appendTo(contentDescription);
 
             div.click(function (evt) {
               evt.preventDefault();
@@ -278,11 +384,6 @@ RED.search = (function () {
         },
         scrollOnAdd: false,
       });
-
-    // Hint to how to close the search panel
-    $(`
-    <div style="text-align:center; padding: 3px 0 5px 0">Press <span class="escape-key">Esc</span> to close</div>
-    `).appendTo(dialog);
   }
 
   function reveal(node) {
@@ -301,11 +402,6 @@ RED.search = (function () {
     RED.actions.invoke('core:project-info:close');
     RED.actions.invoke('core:settings:close');
 
-    console.log('[search] disabled=', disabled);
-    if (disabled) {
-      return;
-    }
-    console.log('[search] visible=', visible);
     if (!visible) {
       RED.keyboard.add('*', 'escape', function () {
         hide();
@@ -324,8 +420,15 @@ RED.search = (function () {
       searchInput.searchBox('value', v);
       RED.events.emit('search:open');
       visible = true;
+      window.setTimeout(()=> {
+        searchInput.focus() 
+      }, 50);
+
+      // Populate search results with commands and tabs at least
+      search();
     }
-    searchInput.focus();
+
+    
   }
 
   function hide() {

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

@@ -398,7 +398,7 @@ RED.uiSettings = (function(){
         //console.log(`lineCount: ${cmInstance.lineCount()}`)
         // Set the cursor at the end of existing content
         cmInstance.setCursor(cmInstance.lineCount(), 0);
-        let codeMirrorHeight = totalHeightAvailable - 300;
+        let codeMirrorHeight = totalHeightAvailable - 400;
 
         cmInstance.setSize(null, codeMirrorHeight);
         // cmInstance.refresh();

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

@@ -1872,7 +1872,6 @@ RED.view = (function () {
   var lastSelection = null;
 
   function updateSelection(ignoreEdit) {
-    console.log(`[view::updateSelection] invoked -  ignoreEdit=${ignoreEdit}`)
     var selection = {};
 
     var workspaceSelection = RED.workspaces.selection();
@@ -1998,13 +1997,11 @@ RED.view = (function () {
     }else{
       if (selectionJSON !== lastSelection) {
         lastSelection = selectionJSON;
-        console.log('[view::updateSelection] Selection has changed from lastSelection:\n', lastSelection);
-        console.log('[view::updateSelection] Selection has changed to selectionJSON:\n', selectionJSON);
-
         RED.editor.edit(selection);
       }else{
         // User has clicked on the canvas or link
-        console.log('[view::updateSelection] Selection has not changed. Ignore');
+        // console.log('[view::updateSelection] Selection has not changed. Ignore');
+        
         // Just close the sidebar
         RED.editor.resetEditor();
       }

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

@@ -14,13 +14,13 @@ RED.validators = {
         } else if (ptype === 'msg' || ptype === 'flow' || ptype === 'global' ) {
             return RED.utils.validatePropertyExpression(v);
         } else if (ptype === 'num') {
-            console.log('[validators] pType=num. v=', v);
+            // console.log('[validators] pType=num. v=', v);
             return /^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/.test(v);
         }
         return true;
     }},
     typedInputRules: function(ptypeName) { return function(v) {
-        console.log('[validators] TypedInput. v=', v);
+        // console.log('[validators] TypedInput. v=', v);
         let valid = true;
         if (Array.isArray(v)){
             v.forEach( rule => {

package/src/app/ui/editor-client/src/sass/dropdownMenu.scss

@@ -54,7 +54,7 @@
 /** Fix for unreachable dropdown menu **/
 .dropdown-menu  {
     border-radius: 0;
-    width: 200px !important;
+    width: 220px !important;
     margin-left: 0px !important;
 }
 .dropdown-menu > li > a > i {

package/src/app/ui/editor-client/src/sass/editor.scss

@@ -576,6 +576,7 @@
 }
 
 #clipboard-hidden {
+  display:none;
   position: absolute;
   top: -3000px;
 }

package/src/app/ui/editor-client/src/sass/header.scss

@@ -106,7 +106,7 @@ span.logo {
 #header {
   #left {
     display: flex;
-    width: 220px;
+    min-width: 220px;
     justify-content: center;
     align-items: center;
     background: $kumologica-sidebar;
@@ -120,7 +120,8 @@ span.logo {
   }
   #right {
     display: flex;
-    justify-content: flex-end;
+    width: 100%;
+    justify-content: center;
     align-items: center;
     .btn-aux {
       display: flex;
@@ -157,17 +158,23 @@ span.logo {
 // Switch projectIndicator information depending on the state of the server: deploying or running
 #header #projectIndicator {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   background: #ecebeb;
   // box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
-  width: 320px;
-  border-radius: 4px;
-  height: 25px;
+  width: 500px;
+  border-radius: 6px;
+  height: 26px;
+  &:hover{
+    // style for cursor to change to hand 
+    cursor: pointer;
+
+  }
 
   #projectInformation {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     height: 100%;
+    width: 100%;
     align-items: center;
     justify-content: center;
   }
@@ -182,6 +189,7 @@ span.logo {
   }
   #projectDeployingInformation {
     display: flex;
+    width: 100%;
   }
 }
 
@@ -207,6 +215,7 @@ span.logo {
 #header #project-title {
   font-size: 13px;
   margin-top: 1px;
+  margin-left: 6px;
   text-align: center;
   color: #313030;
   font-weight: 500;

package/src/app/ui/editor-client/src/sass/palette.scss

@@ -285,7 +285,7 @@
   bottom: 0;
   left: 0;
   width: 30px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  // border: 1px solid rgba(0, 0, 0, 0.1);
 }
 .palette_icon_container_right {
   left: auto;
@@ -372,12 +372,53 @@
   width: 25px;
 }
 
-#createTab{
-  padding-top: 4px;
+
+
+/* 
+ * ----------------
+ * Explorer tab
+ * ----------------
+ */
+
+ #palette-explorer {
+  display: flex;
+  flex-direction: column;
+ }
+
+ #palette-explorer-top {
+  display: flex;
+  margin-top: 6px;
+ }
+
+ #palette-explorer-bottom {
   display: flex;
-  width: 22px;
+  margin-top: 5px;
+  padding-top: 6px;
+  border-top: 1px solid #cccbcb;
+ }
+ 
+ #exp-workspace,
+ #exp-open-project{
+  display: flex;
+  width: 100%;
+ }
+
+ #exp-workspace-addFolder,
+ #exp-open-project-createTab {
+  display: flex;
+ }
+
+
+
+ #addProjectToWorkspace,
+ #createTab{
+  display: flex;
+  margin: 0px 5px 0 0;
+  padding: 6px;
+  height: 9px;
   justify-content: center;
-  padding-left: 7px;
+  font-size: smaller;
 }
 
 
+

package/src/app/ui/editor-client/src/sass/project-info.scss

@@ -17,7 +17,7 @@
   background: #ddd;
   padding: 2px 10px 3px 10px;
   border-radius: 4px;
-  font-weight: 500;
+  font-weight: 400;
   --saf-0: rgba(var(--sk_foreground_high,29,28,29),0.5);
   box-shadow: 0 1px 0 var(--saf-0);
 }
@@ -29,9 +29,10 @@
   width: 500px;
   background: #ecebeb;
   left: 50%;
-  margin-left: -250px;
-  top: 0px;
+  margin-left: -140px;
+  top: -36px;
   border: 1px solid $primary-border-color;
+  border-radius: 6px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }
 

package/src/app/ui/editor-client/src/sass/search.scss

@@ -18,13 +18,14 @@
   z-index: 1000;
   display: none;
   position: absolute;
-  width: 500px;
-  background: white;
+  width: 700px;
+  background: #f9f9f9;
   left: 50%;
   margin-left: -250px;
-  top: 0px;
+  top: -36px;
   border: 1px solid $primary-border-color;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 6px;
 
   ol {
   }
@@ -71,12 +72,7 @@
   .red-ui-search-result-separator {
     border-bottom: 3px solid #ddd;
   }
-  .red-ui-search-result-node {
-    position: relative;
-    width: 24px;
-    height: 24px;
-    margin-top: 1px;
-  }
+
   .red-ui-search-result-node-port {
     position: absolute;
     border-radius: 2px;
@@ -98,8 +94,8 @@
     width: 15px;
   }
   .red-ui-search-result-description {
-    margin-top: 2px;
-    margin-left: 34px;
+    display: flex;
+    margin: 0 5px;
   }
   .red-ui-search-result-node-label {
     color: #999;
@@ -112,9 +108,10 @@
 }
 .red-ui-search-results-container {
   position: relative;
-  height: 300px;
-  padding: 5px;
+  height: 450px;
+  padding: 5px 10px;
   background: #f9f9f9;
+  border-radius: 6px;
 
   .red-ui-editableList-container {
     background: white;
@@ -122,6 +119,7 @@
     background: #f9f9f9;
     li {
       padding: 0;
+      line-height: 15px;
       &.selected {
         background: #efefef;
         .red-ui-search-result {
@@ -132,13 +130,24 @@
     }
   }
 }
+.searchSeparator {
+  border-top: 1px solid #ddd;
+  margin: 7px 5px;
+}
+
+.red-ui-search-result-command-shortcut {
+  display: flex;
+  width: 5%;
+  font-size: 0.9em;
+  color: darkgrey;
+}
+
 .red-ui-search-result {
   padding: 8px 2px 8px 5px;
-  display: block;
+  display: flex;
   cursor: pointer;
   color: $form-text-color;
-  border-left: 3px solid #fff;
-  border-right: 3px solid #fff;
+
   &:hover {
     text-decoration: none;
     color: $form-text-color;
@@ -175,19 +184,30 @@
   }
 }
 .red-ui-search-result-description {
-  margin-left: 40px;
-  margin-right: 5px;
+  display: flex;
+  width: 90%;
+  margin: 0 5px;
 }
 .red-ui-search-result-node-label {
   color: #222;
+  font-weight: 400;
+  font-size: 1em;
 }
+.red-ui-search-result-command-label {
+  color: #222;
+  font-size: 1.1em;
+}
+
 .red-ui-search-result-node-type {
-  font-style: italic;
+  margin-left: 6px;
   font-size: 0.9em;
+  color: darkgrey;
 }
 .red-ui-search-result-node-flow {
-  float: right;
-  font-size: 0.8em;
+  display: flex;
+  width: 5%;
+  font-size: 0.9em;
+  color: #2979ff;
 }
 .red-ui-search-result-node-id {
   display: none;
@@ -199,3 +219,11 @@
   font-style: italic;
   color: $form-placeholder-color;
 }
+
+.ui-search-result-node {
+  position: relative;
+  width: 24px;
+  height: 14px;
+  margin-top: 1px;
+  left: -8px;
+}

package/src/app/ui/editor-client/src/sass/style.scss

@@ -90,6 +90,7 @@ body {
 }
 
 #main-container {
+  display: flex;
   position: absolute;
   top: 38px;
   left: 0;

package/src/app/ui/editor-client/src/sass/ui/common/editableList.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 .red-ui-editableList-border {
-  border: 1px solid $form-input-border-color;
+  // border: 1px solid $form-input-border-color;
   //border-radius: 4px;
   .red-ui-editableList-header {
     border-bottom: 1px solid $form-input-border-color;
@@ -27,7 +27,7 @@
   margin: 0;
   vertical-align: middle;
   box-sizing: border-box;
-  background-color: white;
+  // background-color: white;
   overflow-y: auto !important;
   .red-ui-editableList-list {
     list-style-type: none;
@@ -39,7 +39,7 @@
   li {
     box-sizing: border-box;
     position: relative;
-    background: #fff;
+    // background: #fff;
     margin: 0;
     padding: 2px 0px;
     //border-bottom: 1px solid $secondary-border-color;