Bug fix/robust html fetching 5304

apps/dashboard/app/javascript/launcher_edit.js

@@ -63,8 +63,8 @@ function addNewField(_event) {
   newFieldButton.before(newFieldTemplate.html());
 
   const justAdded = newFieldButton.prev();
-  const deleteButton = justAdded.find('.btn-danger');
-  const addButton = justAdded.find('.btn-success');
+  const deleteButton = justAdded.find('[data-new-field-action="cancel"]');
+  const addButton = justAdded.find('[data-new-field-action="add"]');
   const selectMenu = justAdded.find('select');
 
   deleteButton.on('click', (event) => { removeInProgressField(event) });
@@ -93,27 +93,25 @@ function updateNewFieldOptions(selectMenu) {
 
 function addHelpTextForOption(event) {
   const helpText = newFieldData[event.target.value].help;
-  const topLevelDiv = event.target.parentElement.parentElement;
+  const inProgressField = event.target.closest('[data-in-progress-field]');
 
-  const helpTextDiv = topLevelDiv.firstElementChild;
+  const helpTextDiv = inProgressField.querySelector('[data-new-field-help]');
   helpTextDiv.innerText = helpText;
 }
 
 function removeInProgressField(event) {
-  const entireDiv = event.target.parentElement.parentElement.parentElement;
-  entireDiv.remove();
-  enableNewFieldButton()
+  event.target.closest('[data-in-progress-field]').remove();
+  enableNewFieldButton();
 }
 
 function removeField(event) {
   // TODO: shouldn't be able to remove cluster & script form fields.
-  const entireDiv = event.target.parentElement;
-  entireDiv.remove();
+  event.target.closest('.editable-form-field').remove();
   enableNewFieldButton();
 }
 
 function showEditField(event) {
-  const entireDiv = event.target.parentElement;
+  const entireDiv = event.target.closest('.editable-form-field');
   const editField = entireDiv.querySelector('.edit-group');
 
   const editButton = entireDiv.querySelector('.btn-primary, .btn-success');
@@ -137,18 +135,19 @@ function showEditField(event) {
 }
 
 function addInProgressField(event) {  
-  const selectMenu = event.target.parentElement.parentElement.firstElementChild;
+  const inProgressField = event.target.closest('[data-in-progress-field]');
+  const selectMenu = inProgressField.querySelector('select');
   const choice = selectMenu.value;
   const template = $(`#${choice}_template`);
 
   const newFieldButton = addNewFieldButton();
   newFieldButton.before(template.html());
 
   const justAdded = newFieldButton.prev();
-  justAdded.find('.btn-danger')
+  justAdded.find('[data-field-remove-button]')
            .on('click', (event) => { removeField(event) });
 
-  justAdded.find('.btn-primary')
+  justAdded.find('[data-field-edit-button]')
            .on('click', (event) => { showEditField(event) });
 
   justAdded.find('[data-select-toggler]')
@@ -160,8 +159,7 @@ function addInProgressField(event) {
   justAdded.find('[data-auto-environment-variable="name"]')
            .on('keyup', (event) => { updateAutoEnvironmentVariable(event) });
 
-  const entireDiv = event.target.parentElement.parentElement.parentElement;
-  entireDiv.remove();
+  inProgressField.remove();
   enableNewFieldButton();
 }
 
@@ -170,35 +168,34 @@ function updateAutoEnvironmentVariable(event) {
   const labelString = event.target.dataset.labelString;
   const idString = `launcher_auto_environment_variable_${aev_name}`;
   const nameString = `launcher[auto_environment_variable_${aev_name}]`;
-  var input_field = event.target.parentElement.children[2].children[0].children[0].children[1];
+  const editableTextField = event.target.closest('.editable-form-field');
 
+  const formItemPreview = editableTextField.querySelector('[data-form-item-preview]');
+  const input_field = formItemPreview.querySelector('input');
   input_field.removeAttribute('readonly');
   input_field.id = idString;
   input_field.name = nameString;
 
   if (labelString.match(/Environment( |\s)Variable/)) {
-    const label_field = event.target.parentElement.children[2].children[0].children[0].children[0];
+    const label_field = formItemPreview.querySelector('label');
     label_field.innerHTML = `Environment Variable: ${aev_name}`;
   }
 
   // Update the checkbox so that environment variables can be fixed when created
-  let fixedBoxGroup = event.target.parentElement.children[3].children[0].children[0];
+  const fixedField = editableTextField.querySelector('[data-edit-fixed-field]');
 
-  let checkbox = fixedBoxGroup.children[0];
+  const checkbox = fixedField.querySelector('input[type="checkbox"]');
   checkbox.id = `${idString}_fixed`;
   checkbox.name = `launcher[auto_environment_variable_${aev_name}_fixed]`;
   checkbox.setAttribute('data-fixed-toggler', idString);
 
-  // Update hidden field if attribute is already fixed, otherwise just update label
-  let labelIndex = 2;
-  if(fixedBoxGroup.children.length == 3) {
-    let hiddenField = fixedBoxGroup.children[1];
+  // Update hidden field if attribute is already fixed
+  const hiddenField = fixedField.querySelector('input[type="hidden"]');
+  if (hiddenField) {
     hiddenField.name = nameString;
-  } else {
-    labelIndex = 1;
   }
 
-  let fixedLabel = fixedBoxGroup.children[labelIndex];
+  const fixedLabel = fixedField.querySelector('label');
   fixedLabel.setAttribute('for', `${idString}_fixed`);
 }
 
@@ -220,7 +217,7 @@ function fixedFieldEnabled(checkbox, dataElement) {
   if (dataElement.nodeName == 'SELECT') {
     const selectOptions = Array.from(dataElement.options);
     const selectedOption = selectOptions.filter(opt => opt.selected)[0];
-    const selectOptionsConfig = $(dataElement).parents('.editable-form-field').find('li.list-group-item').get();
+    const selectOptionsConfig = $(dataElement).closest('.editable-form-field').find('[data-select-option]').get();
 
     selectOptionsConfig.forEach(configItemLi => {
       const textContent = $(configItemLi).find('[data-select-value]')[0].textContent;
@@ -271,7 +268,7 @@ function enableRemoveOption(optionLi, removeButtonDisabled = false) {
 
 function enableOrDisableSelectOption(event) {
   const toggleAction = event.target.dataset.selectToggler;
-  const li = event.target.parentElement;
+  const li = event.target.closest('[data-select-option]');
   event.target.disabled = true;
 
   const choice = $(li).find('[data-select-value]')[0].textContent;
@@ -351,7 +348,7 @@ function initSelectFields(){
 function initSelect(selectElement) {
   const excludeId = selectElement.dataset.excludeId;
   const selectOptions = Array.from(selectElement.options);
-  const selectOptionsConfig = $(selectElement).parents('.editable-form-field').find('li.list-group-item').get();
+  const selectOptionsConfig = $(selectElement).closest('.editable-form-field').find('[data-select-option]').get();
   const { excludeList } = getExcludeList(excludeId);
 
   selectOptions.forEach(option => {
@@ -392,12 +389,12 @@ jQuery(() => {
   $('#add_new_field_button').on('click', (event) => { addNewField(event) });
   $('.new_launcher')
     .find('.editable-form-field')
-    .find('.btn-danger')
+    .find('[data-field-remove-button]')
     .on('click', (event) => { removeField(event) });
 
   $('.new_launcher')
     .find('.editable-form-field')
-    .find('.btn-primary')
+    .find('[data-field-edit-button]')
     .on('click', (event) => { showEditField(event) });
 
   $('[data-select-toggler]')

apps/dashboard/app/views/launchers/_add_new_field.html.erb

@@ -7,9 +7,9 @@
 </div>
 
 <template id="new_field_template">
-  <div class="editable-form-field">
+  <div class="editable-form-field" data-in-progress-field>
 
-    <div class="row mx-0 justify-text-center my-2" aria-live="polite">
+    <div class="row mx-0 justify-text-center my-2" aria-live="polite" data-new-field-help>
       <!-- help text is going to be place here in javascript -->
     </div>
 
@@ -19,8 +19,8 @@
       </select>
 
       <div class='mt-3 p-0'>
-        <button class="btn btn-success" type="button"><%= t('dashboard.add') %></button>
-        <button class="btn btn-danger float-end" type="button"><%= t('dashboard.cancel') %></button>
+        <button class="btn btn-success" type="button" data-new-field-action="add"><%= t('dashboard.add') %></button>
+        <button class="btn btn-danger float-end" type="button" data-new-field-action="cancel"><%= t('dashboard.cancel') %></button>
       </div>
     </div>
   </div>

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

@@ -6,6 +6,7 @@
   data-save-label="<%= t('dashboard.jobs_launchers_save_form_item', label: label)%>"
   data-edit-text="<%= t('dashboard.edit') %>"
   data-save-text="<%= t('dashboard.save') %>"
+  data-field-edit-button
   aria-expanded="false"
   aria-controls="edit_field_<%= field_id %>"
 >
@@ -17,6 +18,7 @@
   <button id='<%= "remove_#{field_id}" %>' 
     class="btn btn-danger float-end" 
     type="button"
+    data-field-remove-button
     aria-label="<%= t('dashboard.jobs_launchers_remove_form_item', label: label)%>"
   >
     <%= t('dashboard.remove') %>

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

@@ -4,7 +4,7 @@
   fixed_id = "#{field_id}_fixed"
   fixed_name = "#{form.object_name}[#{attrib.id}_fixed]"
 -%>
-<div class="list-group col-md-4">
+<div class="list-group col-md-4" data-edit-fixed-field>
   <div class="list-group-item mb-3">
     <input type="checkbox" 
       id="<%= fixed_id %>" 

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

@@ -25,7 +25,7 @@
           remove_id = "#{field_id}_remove_option#{counter}"
         -%>
 
-        <li class="<%= li_classes %>">
+        <li class="<%= li_classes %>" data-select-option>
 
           <span data-select-value class="text-break"><%= choice %></span><br/>
 

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

@@ -1,3 +1,3 @@
-  <div role="group" aria-label="<%= t('dashboard.jobs_launchers_preview_form_item', label: attrib.label) %>">
+  <div role="group" aria-label="<%= t('dashboard.jobs_launchers_preview_form_item', label: attrib.label) %>" data-form-item-preview>
     <%=  create_widget(form, attrib, format: format, hide_excludable: false, hide_fixed: false) %>
   </div>