3 files changed, 96 insertions, 13 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/layerBtn.js b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
index aa43284396..259271df33 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
@@ -76,7 +76,8 @@ function layerBtnsInit() {
     if (imgCustomModal.length == 0)
       throw("Modal new-custom-image not found");
 
-    imgCustomModal.data('recipe', $(this).data('recipe'));
+    var recipe = {id: $(this).data('recipe'), name: null}
+    newCustomImageModalSetRecipes([recipe]);
     imgCustomModal.modal('show');
   });
 }
diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
index 98e87f4a6b..1ae0d34e90 100644
--- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
+++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
@@ -1,33 +1,59 @@
 "use strict";
 
-/* Used for the newcustomimage_modal actions */
+/*
+Used for the newcustomimage_modal actions
+
+The .data('recipe') value on the outer element determines which
+recipe ID is used as the basis for the new custom image recipe created via
+this modal.
+
+Use newCustomImageModalSetRecipes() to set the recipes available as a base
+for the new custom image. This will manage the addition of radio buttons
+to select the base image (or remove the radio buttons, if there is only a
+single base image available).
+*/
 function newCustomImageModalInit(){
 
   var newCustomImgBtn = $("#create-new-custom-image-btn");
   var imgCustomModal = $("#new-custom-image-modal");
   var invalidNameHelp = $("#invalid-name-help");
+  var invalidRecipeHelp = $("#invalid-recipe-help");
   var nameInput = imgCustomModal.find('input');
 
-  var invalidMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
-  var duplicateImageMsg = "An image with this name already exists in this project.";
-  var duplicateRecipeMsg = "A non-image recipe with this name already exists.";
+  var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
+  var duplicateNameMsg = "An image with this name already exists. Image names must be unique.";
+  var invalidBaseRecipeIdMsg = "Please select an image to customise.";
+
+  // capture clicks on radio buttons inside the modal; when one is selected,
+  // set the recipe on the modal
+  imgCustomModal.on("click", "[name='select-image']", function (e) {
+    clearRecipeError();
+
+    var recipeId = $(e.target).attr('data-recipe');
+    imgCustomModal.data('recipe', recipeId);
+  });
 
   newCustomImgBtn.click(function(e){
     e.preventDefault();
 
     var baseRecipeId = imgCustomModal.data('recipe');
 
+    if (!baseRecipeId) {
+      showRecipeError(invalidBaseRecipeIdMsg);
+      return;
+    }
+
     if (nameInput.val().length > 0) {
       libtoaster.createCustomRecipe(nameInput.val(), baseRecipeId,
       function(ret) {
         if (ret.error !== "ok") {
           console.warn(ret.error);
           if (ret.error === "invalid-name") {
-            showError(invalidMsg);
-          } else if (ret.error === "image-already-exists") {
-            showError(duplicateImageMsg);
-          } else if (ret.error === "recipe-already-exists") {
-            showError(duplicateRecipeMsg);
+            showNameError(invalidNameMsg);
+            return;
+          } else if (ret.error === "already-exists") {
+            showNameError(duplicateNameMsg);
+            return;
           }
         } else {
           imgCustomModal.modal('hide');
@@ -37,12 +63,21 @@ function newCustomImageModalInit(){
     }
   });
 
-  function showError(text){
+  function showNameError(text){
     invalidNameHelp.text(text);
     invalidNameHelp.show();
     nameInput.parent().addClass('error');
   }
 
+  function showRecipeError(text){
+    invalidRecipeHelp.text(text);
+    invalidRecipeHelp.show();
+  }
+
+  function clearRecipeError(){
+    invalidRecipeHelp.hide();
+  }
+
   nameInput.on('keyup', function(){
     if (nameInput.val().length === 0){
       newCustomImgBtn.prop("disabled", true);
@@ -50,7 +85,7 @@ function newCustomImageModalInit(){
     }
 
     if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){
-      showError(invalidMsg);
+      showNameError(invalidNameMsg);
       newCustomImgBtn.prop("disabled", true);
       nameInput.parent().addClass('error');
     } else {
@@ -60,3 +95,49 @@ function newCustomImageModalInit(){
     }
   });
 }
+
+// Set the image recipes which can used as the basis for the custom
+// image recipe the user is creating
+//
+// baseRecipes: a list of one or more recipes which can be
+// used as the base for the new custom image recipe in the format:
+// [{'id': <recipe ID>, 'name': <recipe name>'}, ...]
+//
+// if recipes is a single recipe, just show the text box to set the
+// name for the new custom image; if recipes contains multiple recipe objects,
+// show a set of radio buttons so the user can decide which to use as the
+// basis for the new custom image
+function newCustomImageModalSetRecipes(baseRecipes) {
+  var imgCustomModal = $("#new-custom-image-modal");
+  var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]');
+  var imageSelectRadiosContainer = $('#new-custom-image-modal [data-role="image-selector-radios"]');
+
+  if (baseRecipes.length === 1) {
+    // hide the radio button container
+    imageSelector.hide();
+
+    // remove any radio buttons + labels
+    imageSelector.remove('[data-role="image-radio"]');
+
+    // set the single recipe ID on the modal as it's the only one
+    // we can build from
+    imgCustomModal.data('recipe', baseRecipes[0].id);
+  }
+  else {
+    // add radio buttons; note that the handlers for the radio buttons
+    // are set in newCustomImageModalInit via event delegation
+    for (var i = 0; i < baseRecipes.length; i++) {
+      var recipe = baseRecipes[i];
+      imageSelectRadiosContainer.append(
+        '<label class="radio" data-role="image-radio">' +
+        recipe.name +
+        '<input type="radio" class="form-control" name="select-image" ' +
+        'data-recipe="' + recipe.id + '">' +
+        '</label>'
+      );
+    }
+
+    // show the radio button container
+    imageSelector.show();
+  }
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/recipedetails.js b/bitbake/lib/toaster/toastergui/static/js/recipedetails.js
index d5f9eacdce..604db5f037 100644
--- a/bitbake/lib/toaster/toastergui/static/js/recipedetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/recipedetails.js
@@ -9,7 +9,8 @@ function recipeDetailsPageInit(ctx){
     if (imgCustomModal.length === 0)
       throw("Modal new-custom-image not found");
 
-    imgCustomModal.data('recipe', $(this).data('recipe'));
+    var recipe = {id: $(this).data('recipe'), name: null}
+    newCustomImageModalSetRecipes([recipe]);
     imgCustomModal.modal('show');
   });