diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue')
| -rw-r--r-- | app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue | 113 |
1 files changed, 68 insertions, 45 deletions
diff --git a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue index be8ce832d20..1cec08b93bd 100644 --- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue +++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue @@ -1,8 +1,8 @@ <script> -import Vue from 'vue'; import { uniqueId } from 'lodash'; import { GlAlert, + GlIcon, GlButton, GlForm, GlFormGroup, @@ -27,12 +27,13 @@ export default { variablesDescription: s__( 'Pipeline|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used by default.', ), - formElementClasses: 'gl-mr-3 gl-mb-3 table-section section-15', + formElementClasses: 'gl-mr-3 gl-mb-3 gl-flex-basis-quarter gl-flex-shrink-0 gl-flex-grow-0', errorTitle: __('The form contains the following error:'), warningTitle: __('The form contains the following warning:'), maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'), components: { GlAlert, + GlIcon, GlButton, GlForm, GlFormGroup, @@ -85,7 +86,7 @@ export default { return { searchTerm: '', refValue: this.refParam, - variables: {}, + variables: [], error: null, warnings: [], totalWarnings: 0, @@ -97,9 +98,6 @@ export default { const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); return this.refs.filter(ref => ref.toLowerCase().includes(lowerCasedSearchTerm)); }, - variablesLength() { - return Object.keys(this.variables).length; - }, overMaxWarningsLimit() { return this.totalWarnings > this.maxWarnings; }, @@ -114,6 +112,8 @@ export default { }, }, created() { + this.addEmptyVariable(); + if (this.variableParams) { this.setVariableParams(VARIABLE_TYPE, this.variableParams); } @@ -121,24 +121,26 @@ export default { if (this.fileParams) { this.setVariableParams(FILE_TYPE, this.fileParams); } - - this.addEmptyVariable(); }, methods: { - addEmptyVariable() { - this.variables[uniqueId('var')] = { - variable_type: VARIABLE_TYPE, - key: '', - value: '', - }; - }, - setVariableParams(type, paramsObj) { - Object.entries(paramsObj).forEach(([key, value]) => { - this.variables[uniqueId('var')] = { + setVariable(type, key, value) { + const variable = this.variables.find(v => v.key === key); + if (variable) { + variable.type = type; + variable.value = value; + } else { + // insert before the empty variable + this.variables.splice(this.variables.length - 1, 0, { + uniqueId: uniqueId('var'), key, value, variable_type: type, - }; + }); + } + }, + setVariableParams(type, paramsObj) { + Object.entries(paramsObj).forEach(([key, value]) => { + this.setVariable(type, key, value); }); }, setRefSelected(ref) { @@ -147,29 +149,34 @@ export default { isSelected(ref) { return ref === this.refValue; }, - insertNewVariable() { - Vue.set(this.variables, uniqueId('var'), { + addEmptyVariable() { + this.variables.push({ + uniqueId: uniqueId('var'), variable_type: VARIABLE_TYPE, key: '', value: '', }); }, - removeVariable(key) { - Vue.delete(this.variables, key); + removeVariable(index) { + this.variables.splice(index, 1); }, canRemove(index) { - return index < this.variablesLength - 1; + return index < this.variables.length - 1; }, createPipeline() { - const filteredVariables = Object.values(this.variables).filter( - ({ key, value }) => key !== '' && value !== '', - ); + const filteredVariables = this.variables + .filter(({ key, value }) => key !== '' && value !== '') + .map(({ variable_type, key, value }) => ({ + variable_type, + key, + secret_value: value, + })); return axios .post(this.pipelinesPath, { ref: this.refValue, - variables: filteredVariables, + variables_attributes: filteredVariables, }) .then(({ data }) => { redirectTo(`${this.pipelinesPath}/${data.id}`); @@ -253,35 +260,47 @@ export default { <gl-form-group :label="s__('Pipeline|Variables')"> <div - v-for="(value, key, index) in variables" - :key="key" - class="gl-display-flex gl-align-items-center gl-mb-4 gl-pb-2 gl-border-b-solid gl-border-gray-200 gl-border-b-1 gl-flex-direction-column gl-md-flex-direction-row" + v-for="(variable, index) in variables" + :key="variable.uniqueId" + class="gl-display-flex gl-align-items-stretch gl-align-items-center gl-mb-4 gl-ml-n3 gl-pb-2 gl-border-b-solid gl-border-gray-200 gl-border-b-1 gl-flex-direction-column gl-md-flex-direction-row" data-testid="ci-variable-row" > <gl-form-select - v-model="variables[key].variable_type" + v-model="variable.variable_type" :class="$options.formElementClasses" :options="$options.typeOptions" /> <gl-form-input - v-model="variables[key].key" + v-model="variable.key" :placeholder="s__('CiVariables|Input variable key')" :class="$options.formElementClasses" data-testid="pipeline-form-ci-variable-key" - @change.once="insertNewVariable()" + @change.once="addEmptyVariable()" /> <gl-form-input - v-model="variables[key].value" + v-model="variable.value" :placeholder="s__('CiVariables|Input variable value')" - class="gl-mr-5 gl-mb-3 table-section section-15" - /> - <gl-button - v-if="canRemove(index)" - icon="issue-close" class="gl-mb-3" - data-testid="remove-ci-variable-row" - @click="removeVariable(key)" /> + + <template v-if="variables.length > 1"> + <gl-button + v-if="canRemove(index)" + class="gl-md-ml-3 gl-mb-3" + data-testid="remove-ci-variable-row" + variant="danger" + category="secondary" + @click="removeVariable(index)" + > + <gl-icon class="gl-mr-0! gl-display-none gl-display-md-block" name="clear" /> + <span class="gl-display-md-none">{{ s__('CiVariables|Remove variable') }}</span> + </gl-button> + <gl-button + v-else + class="gl-md-ml-3 gl-mb-3 gl-display-none gl-display-md-block gl-visibility-hidden" + icon="clear" + /> + </template> </div> <template #description @@ -295,9 +314,13 @@ export default { <div class="gl-border-t-solid gl-border-gray-100 gl-border-t-1 gl-p-5 gl-bg-gray-10 gl-display-flex gl-justify-content-space-between" > - <gl-button type="submit" category="primary" variant="success">{{ - s__('Pipeline|Run Pipeline') - }}</gl-button> + <gl-button + type="submit" + category="primary" + variant="success" + data-qa-selector="run_pipeline_button" + >{{ s__('Pipeline|Run Pipeline') }}</gl-button + > <gl-button :href="pipelinesPath">{{ __('Cancel') }}</gl-button> </div> </gl-form> |