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 | 34 |
1 files changed, 24 insertions, 10 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 d84fc724d38..9378b67b915 100644 --- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue +++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue @@ -3,10 +3,11 @@ import { GlAlert, GlIcon, GlButton, + GlDropdown, + GlDropdownItem, GlForm, GlFormGroup, GlFormInput, - GlFormSelect, GlFormTextarea, GlLink, GlSprintf, @@ -43,10 +44,10 @@ const i18n = { }; export default { - typeOptions: [ - { value: VARIABLE_TYPE, text: __('Variable') }, - { value: FILE_TYPE, text: __('File') }, - ], + typeOptions: { + [VARIABLE_TYPE]: __('Variable'), + [FILE_TYPE]: __('File'), + }, i18n, formElementClasses: 'gl-mr-3 gl-mb-3 gl-flex-basis-quarter gl-flex-shrink-0 gl-flex-grow-0', // this height value is used inline on the textarea to match the input field height @@ -56,10 +57,11 @@ export default { GlAlert, GlIcon, GlButton, + GlDropdown, + GlDropdownItem, GlForm, GlFormGroup, GlFormInput, - GlFormSelect, GlFormTextarea, GlLink, GlSprintf, @@ -202,6 +204,11 @@ export default { }); } }, + setVariableType(key, type) { + const { variables } = this.form[this.refFullName]; + const variable = variables.find((v) => v.key === key); + variable.variable_type = type; + }, setVariableParams(refValue, type, paramsObj) { Object.entries(paramsObj).forEach(([key, value]) => { this.setVariable(refValue, type, key, value); @@ -401,12 +408,19 @@ export default { <div class="gl-display-flex gl-align-items-stretch gl-flex-direction-column gl-md-flex-direction-row" > - <gl-form-select - v-model="variable.variable_type" + <gl-dropdown + :text="$options.typeOptions[variable.variable_type]" :class="$options.formElementClasses" - :options="$options.typeOptions" data-testid="pipeline-form-ci-variable-type" - /> + > + <gl-dropdown-item + v-for="type in Object.keys($options.typeOptions)" + :key="type" + @click="setVariableType(variable.key, type)" + > + {{ $options.typeOptions[type] }} + </gl-dropdown-item> + </gl-dropdown> <gl-form-input v-model="variable.key" :placeholder="s__('CiVariables|Input variable key')" |