1 files changed, 50 insertions, 26 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
index cb9ed4da05..8356c02b5a 100644
--- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
+++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
@@ -22,14 +22,18 @@ function newCustomImageModalInit(){
   var nameInput = imgCustomModal.find('input');
 
   var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
-  var duplicateNameMsg = "A recipe with this name already exists. Image names must be unique.";
+  var duplicateNameMsg = "An image with this name already exists. Image names must be unique.";
   var duplicateImageInProjectMsg = "An image with this name already exists in this project."
   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) {
+        
+  /* 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();
+                $(".radio").each(function(){
+                        $(this).removeClass("has-error");
+                });
 
     var recipeId = $(e.target).attr('data-recipe');
     imgCustomModal.data('recipe', recipeId);
@@ -42,6 +46,9 @@ function newCustomImageModalInit(){
 
     if (!baseRecipeId) {
       showRecipeError(invalidBaseRecipeIdMsg);
+                        $(".radio").each(function(){
+                                $(this).addClass("has-error");
+                        });
       return;
     }
 
@@ -71,7 +78,7 @@ function newCustomImageModalInit(){
   function showNameError(text){
     invalidNameHelp.text(text);
     invalidNameHelp.show();
-    nameInput.parent().addClass('error');
+    nameInput.parent().addClass('has-error');
   }
 
   function showRecipeError(text){
@@ -92,26 +99,26 @@ function newCustomImageModalInit(){
     if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){
       showNameError(invalidNameMsg);
       newCustomImgBtn.prop("disabled", true);
-      nameInput.parent().addClass('error');
+      nameInput.parent().addClass('has-error');
     } else {
       invalidNameHelp.hide();
       newCustomImgBtn.prop("disabled", false);
-      nameInput.parent().removeClass('error');
+      nameInput.parent().removeClass('has-error');
     }
   });
 }
 
-// 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
+/* 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"]');
@@ -124,8 +131,9 @@ function newCustomImageModalSetRecipes(baseRecipes) {
     // hide the radio button container
     imageSelector.hide();
 
-    // set the single recipe ID on the modal as it's the only one
-    // we can build from
+    /* 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 {
@@ -134,15 +142,31 @@ function newCustomImageModalSetRecipes(baseRecipes) {
     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" ' +
+        '<div class="radio"><label data-role="image-radio">' +
+        '<input type="radio" name="select-image" ' +
         'data-recipe="' + recipe.id + '">' +
-        '</label>'
+        recipe.name +
+        '</label></div>'
       );
     }
 
+    /* select the first radio button as default selection. Radio button
+     * groups should always display with an option checked
+     */
+    imageSelectRadiosContainer.find("input:radio:first").attr("checked", "checked");
+
+    /* check which radio button is selected by default inside the modal,
+     * and set the recipe on the modal accordingly
+     */
+    imageSelectRadiosContainer.find("input:radio").each(function(){
+      if ( $(this).is(":checked") ) {
+        var recipeId = $(this).attr("data-recipe");
+        imgCustomModal.data("recipe", recipeId);
+      }
+    });
+
     // show the radio button container
     imageSelector.show();
-  }
+         
+  }     
 }