script#edit don't allow user to remove last option (#3844)

Instead of showing an alert when attempting to remove the last option,
we'll now just disable the remove button when it's the last option in the list.

apps/dashboard/app/javascript/launcher_edit.js

@@ -280,12 +280,6 @@ function enableOrDisableSelectOption(event) {
   const optionToToggle = selectOptions.filter(opt => opt.text == choice)[0];
   const selectOptionsEnabled = selectOptions.filter(opt => !opt.disabled);
 
-  if(selectOptionsEnabled.length <= 1 && toggleAction == 'remove') {
-    alert("Cannot remove the last option available")
-    event.target.disabled = false;
-    return
-  }
-
   if(toggleAction == 'add') {
     enableRemoveOption(li);
     removeFromExcludeInput(excludeId, choice);
@@ -300,6 +294,28 @@ function enableOrDisableSelectOption(event) {
       selectOptionsEnabled.filter(opt => opt.text !== choice)[0].selected = true;
     }
   }
+  enableOrDisableLastOption(li.parentElement);
+}
+
+function enableOrDisableLastOption(optionsOl) {
+  const optionLis = Array.from(optionsOl.children);
+
+  const optionsEnabled = Array.from(optionLis.filter((child) => {
+    return !child.classList.contains('text-strike');
+  }));
+
+  if(optionsEnabled.length > 1) {
+    // Make sure there are no options that have both the add and remove button disabled
+    const bothButtonsDisabled = optionsEnabled.filter((option) => {
+      return option.querySelectorAll('button:disabled').length == 2;
+    });
+    for(const option of bothButtonsDisabled) {
+      enableRemoveOption(option);
+    }
+  } else {
+    // Disable the remove button on the last option
+    enableRemoveOption(optionsEnabled[0], true);
+  }
 }
 
 function getExcludeList(excludeElementId) {
@@ -351,6 +367,8 @@ function initSelect(selectElement) {
       enableAddOption(configItem);
     }
   });
+
+  enableOrDisableLastOption(selectOptionsConfig[0].parentElement);
 }
 
 

apps/dashboard/app/views/launchers/editable_form_fields/_editable_select.html.erb

@@ -17,6 +17,7 @@
       <%- 
         choice = parse_select_data(select_data)
         disabled = attrib.exclude_select_choices.include?(choice)
+        last_option = attrib.exclude_select_choices.length + 1 == attrib.select_choices(hide_excludable: false).length
         li_classes = disabled ? 'list-group-item list-group-item-danger text-strike' : 'list-group-item'
         add_id = "#{field_id}_add_#{choice}"
         remove_id = "#{field_id}_remove_#{choice}"
@@ -26,15 +27,15 @@
 
         <button class="btn btn-info float-start" type="button" id="<%= add_id %>"
           data-select-toggler="add" data-select-id="<%= field_id %>"
-          <%= disabled ? nil : 'disabled="true"'.html_safe %> >
+          <%= disabled ? nil : 'disabled="true"' %> >
           <%= t('dashboard.add') %>
         </button>
 
         <span data-select-value><%= choice %></span>
 
         <button class="btn btn-warning float-end" type="button" id="<%= remove_id %>"
           data-select-toggler="remove" data-select-id="<%= field_id %>"
-          <%= disabled ? 'disabled="true"'.html_safe : nil %> >
+          <%= disabled || last_option ? 'disabled="true"'.html_safe : nil %> >
           <%= t('dashboard.remove') %>
         </button>