Add tgz upload button to palette manager

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -22,7 +22,8 @@
             "color": "Color",
             "position": "Position",
             "enable": "Enable",
-            "disable": "Disable"
+            "disable": "Disable",
+            "upload": "Upload"
         },
         "type": {
             "string": "string",
@@ -532,6 +533,7 @@
             "sortAZ": "a-z",
             "sortRecent": "recent",
             "more": "+ __count__ more",
+            "upload": "Upload module tgz file",
             "errors": {
                 "catalogLoadFailed": "<p>Failed to load node catalogue.</p><p>Check the browser console for more information</p>",
                 "installFailed": "<p>Failed to install: __module__</p><p>__message__</p><p>Check the log for more information</p>",

packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js

@@ -542,8 +542,6 @@ RED.palette.editor = (function() {
         return settingsPane;
     }
 
-
-
     function createSettingsPane() {
         settingsPane = $('<div id="red-ui-settings-tab-palette"></div>');
         var content = $('<div id="red-ui-palette-editor">'+
@@ -574,7 +572,11 @@ RED.palette.editor = (function() {
             minimumActiveTabWidth: 110
         });
 
+        createNodeTab(content);
+        createInstallTab(content);
+    }
 
+    function createNodeTab(content) {
         var modulesTab = $('<div>',{class:"red-ui-palette-editor-tab"}).appendTo(content);
 
         editorTabs.addTab({
@@ -726,9 +728,9 @@ RED.palette.editor = (function() {
                 }
             }
         });
+    }
 
-
+    function createInstallTab(content) {
-
         var installTab = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
 
         editorTabs.addTab({
@@ -761,7 +763,6 @@ RED.palette.editor = (function() {
                 }
             });
 
-
         $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
         var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
         var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
@@ -795,6 +796,7 @@ RED.palette.editor = (function() {
             loadedIndex = {};
             initInstallTab();
         })
+        RED.popover.tooltip(refreshButton,"NLS-TODO: Refresh module list");
 
         packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
             addButton: false,
@@ -878,8 +880,87 @@ RED.palette.editor = (function() {
             }
         });
 
+        if (RED.settings.theme('palette.upload') !== false) {
+            var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
+            var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
+
+            var uploadInput = uploadButton.find('input[type="file"]');
+            uploadInput.on("change", function(evt) {
+                if (this.files.length > 0) {
+                    uploadFilenameLabel.text(this.files[0].name)
+                    uploadToolbar.slideDown(200);
+                }
+            })
+
+            var uploadToolbar = $('<div class="red-ui-palette-editor-upload"></div>').appendTo(installTab);
+            var uploadForm = $('<div>').appendTo(uploadToolbar);
+            var uploadFilename = $('<div class="placeholder-input"><i class="fa fa-upload"></i> </div>').appendTo(uploadForm);
+            var uploadFilenameLabel = $('<span></span>').appendTo(uploadFilename);
+            var uploadButtons = $('<div class="red-ui-palette-editor-upload-buttons"></div>').appendTo(uploadForm);
+            $('<button class="editor-button"></button>').text(RED._("common.label.cancel")).appendTo(uploadButtons).on("click", function(evt) {
+                evt.preventDefault();
+                uploadToolbar.slideUp(200);
+                uploadInput.val("");
+            });
+            $('<button class="editor-button primary"></button>').text(RED._("common.label.upload")).appendTo(uploadButtons).on("click", function(evt) {
+                evt.preventDefault();
+
+                var spinner = RED.utils.addSpinnerOverlay(uploadToolbar, true);
+                var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
+                $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
+                    evt.preventDefault();
+                    RED.actions.invoke("core:show-event-log");
+                });
+                RED.eventLog.startEvent(RED._("palette.editor.confirm.button.install")+" : "+uploadInput[0].files[0].name);
+
+                var data = new FormData();
+                data.append("tarball",uploadInput[0].files[0]);
+                var filename = uploadInput[0].files[0].name;
+                $.ajax({
+                    url: 'nodes',
+                    data: data,
+                    cache: false,
+                    contentType: false,
+                    processData: false,
+                    method: 'POST',
+                }).always(function(data,textStatus,xhr) {
+                    spinner.remove();
+                    uploadInput.val("");
+                    uploadToolbar.slideUp(200);
+                }).fail(function(xhr,textStatus,err) {
+                    var message = textStatus;
+                    if (xhr.responseJSON) {
+                        message = xhr.responseJSON.message;
+                    }
+                    var notification = RED.notify(RED._('palette.editor.errors.installFailed',{module: filename,message:message}),{
+                        type: 'error',
+                        modal: true,
+                        fixed: true,
+                        buttons: [
+                            {
+                                text: RED._("common.label.close"),
+                                click: function() {
+                                    notification.close();
+                                }
+                            },{
+                                text: RED._("eventLog.view"),
+                                click: function() {
+                                    notification.close();
+                                    RED.actions.invoke("core:show-event-log");
+                                }
+                            }
+                        ]
+                    });
+                    uploadInput.val("");
+                    uploadToolbar.slideUp(200);
+                })
+            })
+            RED.popover.tooltip(uploadButton,RED._("palette.editor.upload"));
+        }
+
         $('<div id="red-ui-palette-module-install-shade" class="red-ui-palette-module-shade hide"><div class="red-ui-palette-module-shade-status"></div><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(installTab);
     }
+
     function update(entry,version,url,container,done) {
         if (RED.settings.theme('palette.editable') === false) {
             done(new Error('Palette not editable'));

packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss

@@ -237,3 +237,41 @@ ul.red-ui-palette-module-error-list {
 #red-ui-palette-module-install-shade {
     padding-top: 80px;
 }
+button.red-ui-palette-editor-upload-button {
+    padding: 0;
+    height: 25px;
+    margin-top: -1px;
+
+    input[type="file"] {
+        opacity: 0;
+        margin: 0;
+        height: 0;
+        width: 0;
+    }
+    .red-ui-settings-tabs-content & label {
+        margin: 0;
+        min-width: 0;
+        padding: 2px 8px;
+    }
+}
+.red-ui-palette-editor-upload {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 44px;
+    padding: 20px;
+    background: $secondary-background;
+    border-bottom: 1px $secondary-border-color solid;
+    box-shadow: 1px 1px 4px $shadow;
+
+    .placeholder-input {
+        width: calc(100% - 180px);
+    }
+}
+.red-ui-palette-editor-upload-buttons {
+    float: right;
+    button {
+        margin-left: 10px;
+    }
+}