From e5b7fb12522636f24d9b23ea587b8d12e13c50c2 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <ldipentima@veritasgenetics.com>
Date: Mon, 8 Jan 2018 15:05:53 -0300
Subject: [PATCH] 12479: UX enhancements: * When focusing a "strict" select
 list, open the dropdown list * Placeholder messages customized for different
 strict/no-strict cases * Added plugin to show a "no results found" message
 when the user types something that doesn't match with the available options
 on a strict list.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>
---
 .../javascripts/components/edit_tags.js       | 66 +++++++++++++++++--
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/apps/workbench/app/assets/javascripts/components/edit_tags.js b/apps/workbench/app/assets/javascripts/components/edit_tags.js
index fa3f13e4ac..583047cb84 100644
--- a/apps/workbench/app/assets/javascripts/components/edit_tags.js
+++ b/apps/workbench/app/assets/javascripts/components/edit_tags.js
@@ -2,6 +2,60 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
+// Plugin taken from: https://gist.github.com/thiago-negri/132bf33b5312e2da823c
+// This behavior seems to be planned to be integrated on the next selectize release
+Selectize.define('no_results', function(options) {
+    var self = this;
+
+    options = $
+        .extend({message: 'No results found.', html: function(data) {
+            return ('<div class="selectize-dropdown ' + data.classNames + ' dropdown-empty-message">' + '<div class="selectize-dropdown-content" style="padding: 3px 12px">' + data.message + '</div>' + '</div>');
+        }}, options);
+
+    self.displayEmptyResultsMessage = function() {
+        this.$empty_results_container.css('top', this.$control.outerHeight());
+        this.$empty_results_container.css('width', this.$control.outerWidth());
+        this.$empty_results_container.show();
+    };
+
+    self.on('type', function(str) {
+        if (str && !self.hasOptions) {
+            self.displayEmptyResultsMessage();
+        } else {
+            self.$empty_results_container.hide();
+        }
+    });
+
+    self.onKeyDown = (function() {
+        var original = self.onKeyDown;
+
+        return function(e) {
+            original.apply(self, arguments);
+            this.$empty_results_container.hide();
+        }
+    })();
+
+    self.onBlur = (function() {
+        var original = self.onBlur;
+
+        return function() {
+            original.apply(self, arguments);
+            this.$empty_results_container.hide();
+        };
+    })();
+
+    self.setup = (function() {
+        var original = self.setup;
+        return function() {
+            original.apply(self, arguments);
+            self.$empty_results_container = $(options.html(
+                $.extend({classNames: self.$input.attr('class')}, options)));
+            self.$empty_results_container.insertBefore(self.$dropdown);
+            self.$empty_results_container.hide();
+        };
+    })();
+});
+
 window.SimpleInput = {
     view: function(vnode) {
         return m("input.form-control", {
@@ -30,7 +84,7 @@ window.SelectOrAutocomplete = {
     onFocus: function(vnode) {
         // Allow the user to edit an already entered value by removing it
         // and filling the input field with the same text
-        activeSelect = vnode.state.selectized[0].selectize
+        var activeSelect = vnode.state.selectized[0].selectize
         value = activeSelect.getValue()
         if (value.length > 0) {
             activeSelect.clear(silent = true)
@@ -48,16 +102,18 @@ window.SelectOrAutocomplete = {
     },
     oncreate: function(vnode) {
         vnode.state.selectized = $(vnode.dom).selectize({
+            plugins: ['no_results'],
             labelField: 'value',
             valueField: 'value',
             searchField: 'value',
             sortField: 'value',
             persist: false,
             hideSelected: true,
-            openOnFocus: false,
+            openOnFocus: !vnode.attrs.create,
             createOnBlur: true,
+            // selectOnTab: true,
             maxItems: 1,
-            placeholder: vnode.attrs.placeholder,
+            placeholder: (vnode.attrs.create ? 'Add or select ': 'Select ') + vnode.attrs.placeholder,
             create: vnode.attrs.create ? function(input) {
                 return {value: input}
             } : false,
@@ -122,7 +178,7 @@ window.TagEditorRow = {
                         value: vnode.attrs.name,
                         // Allow any tag name unless "strict" is set to true.
                         create: !vnode.attrs.vocabulary().strict,
-                        placeholder: 'new tag',
+                        placeholder: 'name',
                         // Focus on tag name field when adding a new tag that's
                         // not the first one.
                         setFocus: vnode.attrs.name() === ''
@@ -137,7 +193,7 @@ window.TagEditorRow = {
                     m(inputComponent, {
                         options: valueOpts,
                         value: vnode.attrs.value,
-                        placeholder: 'new value',
+                        placeholder: 'value',
                         // Allow any value on tags not listed on the vocabulary.
                         // Allow any value on tags without values, or the ones
                         // that aren't explicitly declared to be strict.
-- 
2.30.2