toaster: disable/enable "Add layer" button according to input's content

In the import layer page, the "Add layer" button in the layer dependencies
section doesn't accurately reflect whether the layer name in the
corresponding input can be added. A partial or empty layer name can
leave the button active, such that when it is clicked, a
previously-selected layer can be accidentally added.

Fix by keeping track of the items currently available in the typeahead,
only activating the "Add layer" button when the input matches the name
of one of those items.

[YOCTO #8511]

Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

diff --git a/lib/toaster/toastergui/static/js/importlayer.js b/lib/toaster/toastergui/static/js/importlayer.js
index c68f3669f6c50cfcd5a72ac49b1eae85cf16e9de..5a59799bc51227166f0da008e4d39d374a52d737 100644 (file)
--- a/lib/toaster/toastergui/static/js/importlayer.js
+++ b/lib/toaster/toastergui/static/js/importlayer.js
@@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
 
   libtoaster.makeTypeahead(layerDepInput, libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" }, function(item){
     currentLayerDepSelection = item;
+  });
+
+  // choices available in the typeahead
+  var layerDepsChoices = {};
+
+  // when the typeahead choices change, store an array of the available layer
+  // choices locally, to use for enabling/disabling the "Add layer" button
+  layerDepInput.on("typeahead-choices-change", function (event, data) {
+    layerDepsChoices = {};
 
-    layerDepBtn.removeAttr("disabled");
+    if (data.choices) {
+      data.choices.forEach(function (item) {
+        layerDepsChoices[item.name] = item;
+      });
+    }
   });
 
+  // disable the "Add layer" button when the layer input typeahead is empty
+  // or not in the typeahead choices
+  layerDepInput.on("input change", function () {
+    // get the choices from the typeahead
+    var choice = layerDepsChoices[$(this).val()];
+
+    if (choice) {
+      layerDepBtn.removeAttr("disabled");
+      currentLayerDepSelection = choice;
+    }
+    else {
+      layerDepBtn.attr("disabled", "disabled");
+      currentLayerDepSelection = undefined;
+    }
+  });
 
   /* We automatically add "openembedded-core" layer for convenience as a
    * dependency as pretty much all layers depend on this one

diff --git a/lib/toaster/toastergui/static/js/libtoaster.js b/lib/toaster/toastergui/static/js/libtoaster.js
index 8d1d20f133a955dda2d302415eea5653084c051f..43930a2c30f68b8e8bfb680cebb80b0f0cdd5615 100644 (file)
--- a/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/lib/toaster/toastergui/static/js/libtoaster.js
@@ -21,6 +21,9 @@ var libtoaster = (function (){
     var xhrReq;
 
     jQElement.typeahead({
+        // each time the typeahead's choices change, a
+        // "typeahead-choices-change" event is fired with an object
+        // containing the available choices in a "choices" property
         source: function(query, process){
           xhrParams.search = query;
 
@@ -36,6 +39,8 @@ var libtoaster = (function (){
 
             xhrReq = null;
 
+            jQElement.trigger("typeahead-choices-change", {choices: data.results});
+
             return process(data.results);
           });
         },