diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list')
3 files changed, 9 insertions, 131 deletions
diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js deleted file mode 100644 index b8bf363fc9d..00000000000 --- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js +++ /dev/null @@ -1,128 +0,0 @@ -import { escape } from 'lodash'; -import axios from '../lib/utils/axios_utils'; -import { s__ } from '../locale'; -import { deprecatedCreateFlash as Flash } from '../flash'; -import { parseBoolean } from '../lib/utils/common_utils'; -import statusCodes from '../lib/utils/http_status'; -import VariableList from './ci_variable_list'; - -function generateErrorBoxContent(errors) { - const errorList = [].concat(errors).map( - errorString => ` - <li> - ${escape(errorString)} - </li> - `, - ); - - return ` - <p> - ${s__('CiVariable|Validation failed')} - </p> - <ul> - ${errorList.join('')} - </ul> - `; -} - -// Used for the variable list on CI/CD projects/groups settings page -export default class AjaxVariableList { - constructor({ - container, - saveButton, - errorBox, - formField = 'variables', - saveEndpoint, - maskableRegex, - }) { - this.container = container; - this.saveButton = saveButton; - this.errorBox = errorBox; - this.saveEndpoint = saveEndpoint; - this.maskableRegex = maskableRegex; - - this.variableList = new VariableList({ - container: this.container, - formField, - maskableRegex, - }); - - this.bindEvents(); - this.variableList.init(); - } - - bindEvents() { - this.saveButton.addEventListener('click', this.onSaveClicked.bind(this)); - } - - onSaveClicked() { - const loadingIcon = this.saveButton.querySelector('.js-ci-variables-save-loading-icon'); - loadingIcon.classList.toggle('hide', false); - this.errorBox.classList.toggle('hide', true); - // We use this to prevent a user from changing a key before we have a chance - // to match it up in `updateRowsWithPersistedVariables` - this.variableList.toggleEnableRow(false); - - return axios - .patch( - this.saveEndpoint, - { - variables_attributes: this.variableList.getAllData(), - }, - { - // We want to be able to process the `res.data` from a 400 error response - // and print the validation messages such as duplicate variable keys - validateStatus: status => - (status >= statusCodes.OK && status < statusCodes.MULTIPLE_CHOICES) || - status === statusCodes.BAD_REQUEST, - }, - ) - .then(res => { - loadingIcon.classList.toggle('hide', true); - this.variableList.toggleEnableRow(true); - - if (res.status === statusCodes.OK && res.data) { - this.updateRowsWithPersistedVariables(res.data.variables); - this.variableList.hideValues(); - } else if (res.status === statusCodes.BAD_REQUEST) { - // Validation failed - this.errorBox.innerHTML = generateErrorBoxContent(res.data); - this.errorBox.classList.toggle('hide', false); - } - }) - .catch(() => { - loadingIcon.classList.toggle('hide', true); - this.variableList.toggleEnableRow(true); - Flash(s__('CiVariable|Error occurred while saving variables')); - }); - } - - updateRowsWithPersistedVariables(persistedVariables = []) { - const persistedVariableMap = [].concat(persistedVariables).reduce( - (variableMap, variable) => ({ - ...variableMap, - [variable.key]: variable, - }), - {}, - ); - - this.container.querySelectorAll('.js-row').forEach(row => { - // If we submitted a row that was destroyed, remove it so we don't try - // to destroy it again which would cause a BE error - const destroyInput = row.querySelector('.js-ci-variable-input-destroy'); - if (parseBoolean(destroyInput.value)) { - row.remove(); - // Update the ID input so any future edits and `_destroy` will apply on the BE - } else { - const key = row.querySelector('.js-ci-variable-input-key').value; - const persistedVariable = persistedVariableMap[key]; - - if (persistedVariable) { - // eslint-disable-next-line no-param-reassign - row.querySelector('.js-ci-variable-input-id').value = persistedVariable.id; - row.setAttribute('data-is-persisted', 'true'); - } - } - }); - } -} diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue index ceb94b1f0f8..83e9717041f 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue @@ -60,7 +60,7 @@ export default { </script> <template> <gl-dropdown :text="value"> - <gl-search-box-by-type v-model.trim="searchTerm" /> + <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" /> <gl-dropdown-item v-for="environment in filteredResults" :key="environment" @@ -75,7 +75,7 @@ export default { }}</gl-dropdown-item> <template v-if="shouldRenderCreateButton"> <gl-dropdown-divider /> - <gl-dropdown-item @click="createClicked"> + <gl-dropdown-item data-testid="create-wildcard-button" @click="createClicked"> {{ composedCreateButtonLabel }} </gl-dropdown-item> </template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue index a2f4bea2f61..da816f85466 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue @@ -236,6 +236,7 @@ export default { :label="__('Environment scope')" label-for="ci-variable-env" class="w-50" + data-testid="environment-scope" > <ci-environments-dropdown class="w-100" @@ -247,7 +248,11 @@ export default { </div> <gl-form-group :label="__('Flags')" label-for="ci-variable-flags"> - <gl-form-checkbox v-model="protected_variable" class="mb-0"> + <gl-form-checkbox + v-model="protected_variable" + class="mb-0" + data-testid="ci-variable-protected-checkbox" + > {{ __('Protect variable') }} <gl-link target="_blank" :href="protectedEnvironmentVariablesLink"> <gl-icon name="question" :size="12" /> @@ -261,6 +266,7 @@ export default { ref="masked-ci-variable" v-model="masked" data-qa-selector="ci_variable_masked_checkbox" + data-testid="ci-variable-masked-checkbox" > {{ __('Mask variable') }} <gl-link target="_blank" :href="maskedEnvironmentVariablesLink"> |