diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components')
3 files changed, 17 insertions, 46 deletions
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 0e09ae108ea..ceb94b1f0f8 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 @@ -1,22 +1,15 @@ <script> -import { - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlDeprecatedDropdownDivider, - GlSearchBoxByType, - GlIcon, -} from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui'; import { mapGetters } from 'vuex'; import { __, sprintf } from '~/locale'; export default { name: 'CiEnvironmentsDropdown', components: { - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlDeprecatedDropdownDivider, + GlDropdown, + GlDropdownItem, + GlDropdownDivider, GlSearchBoxByType, - GlIcon, }, props: { value: { @@ -66,28 +59,25 @@ export default { }; </script> <template> - <gl-deprecated-dropdown :text="value"> - <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" /> - <gl-deprecated-dropdown-item + <gl-dropdown :text="value"> + <gl-search-box-by-type v-model.trim="searchTerm" /> + <gl-dropdown-item v-for="environment in filteredResults" :key="environment" + :is-checked="isSelected(environment)" + is-check-item @click="selectEnvironment(environment)" > - <gl-icon - :class="{ invisible: !isSelected(environment) }" - name="mobile-issue-close" - class="vertical-align-middle" - /> {{ environment }} - </gl-deprecated-dropdown-item> - <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + </gl-dropdown-item> + <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ __('No matching results') - }}</gl-deprecated-dropdown-item> + }}</gl-dropdown-item> <template v-if="shouldRenderCreateButton"> - <gl-deprecated-dropdown-divider /> - <gl-deprecated-dropdown-item @click="createClicked"> + <gl-dropdown-divider /> + <gl-dropdown-item @click="createClicked"> {{ composedCreateButtonLabel }} - </gl-deprecated-dropdown-item> + </gl-dropdown-item> </template> - </gl-deprecated-dropdown> + </gl-dropdown> </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 fbf19847e9d..a2f4bea2f61 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 @@ -6,7 +6,6 @@ import { GlFormCheckbox, GlFormCombobox, GlFormGroup, - GlFormInput, GlFormSelect, GlFormTextarea, GlIcon, @@ -41,7 +40,6 @@ export default { GlFormCheckbox, GlFormCombobox, GlFormGroup, - GlFormInput, GlFormSelect, GlFormTextarea, GlIcon, @@ -122,11 +120,6 @@ export default { return ''; }, tokenValidationState() { - // If the feature flag is off, do not validate. Remove when flag is removed. - if (!this.glFeatures.ciKeyAutocomplete) { - return true; - } - const validator = this.$options.tokens?.[this.variable.key]?.validation; if (validator) { @@ -204,21 +197,12 @@ export default { > <form> <gl-form-combobox - v-if="glFeatures.ciKeyAutocomplete" v-model="key" :token-list="$options.tokenList" :label-text="__('Key')" data-qa-selector="ci_variable_key_field" /> - <gl-form-group v-else :label="__('Key')" label-for="ci-variable-key"> - <gl-form-input - id="ci-variable-key" - v-model="key" - data-qa-selector="ci_variable_key_field" - /> - </gl-form-group> - <gl-form-group :label="__('Value')" label-for="ci-variable-value" diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue index 501c82b419e..07278bb442c 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue @@ -163,10 +163,7 @@ export default { </p> </template> </gl-table> - <div - class="ci-variable-actions d-flex justify-content-end" - :class="{ 'justify-content-center': !tableIsNotEmpty }" - > + <div class="ci-variable-actions" :class="{ 'justify-content-center': !tableIsNotEmpty }"> <gl-button v-if="tableIsNotEmpty" ref="secret-value-reveal-button" |