diff --git a/apps/dashboard/app/javascript/launcher_edit.js b/apps/dashboard/app/javascript/launcher_edit.js index e5c758071d..28e9310c85 100644 --- a/apps/dashboard/app/javascript/launcher_edit.js +++ b/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,7 +135,8 @@ 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`); @@ -145,10 +144,10 @@ function addInProgressField(event) { 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]') diff --git a/apps/dashboard/app/views/launchers/_add_new_field.html.erb b/apps/dashboard/app/views/launchers/_add_new_field.html.erb index cf73efb257..b86f5aad76 100644 --- a/apps/dashboard/app/views/launchers/_add_new_field.html.erb +++ b/apps/dashboard/app/views/launchers/_add_new_field.html.erb @@ -7,9 +7,9 @@