diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-02 21:07:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-02 21:07:51 +0000 |
commit | d74fcc9b69746c4d9582299c370a95aafe2ac3ac (patch) | |
tree | 8230bdf94ff004521422c9986062278dd3bc5b3f /app/assets/javascripts/ci_variable_list/components | |
parent | 8a7efa45c38ed3200d173d2c3207a8154e583c16 (diff) | |
download | gitlab-ce-d74fcc9b69746c4d9582299c370a95aafe2ac3ac.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components')
3 files changed, 107 insertions, 4 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 new file mode 100644 index 00000000000..175e89a454b --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue @@ -0,0 +1,93 @@ +<script> +import { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlIcon, +} from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import { mapGetters } from 'vuex'; + +export default { + name: 'CiEnvironmentsDropdown', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlIcon, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + searchTerm: this.value || '', + }; + }, + computed: { + ...mapGetters(['joinedEnvironments']), + composedCreateButtonLabel() { + return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm }); + }, + shouldRenderCreateButton() { + return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm); + }, + filteredResults() { + const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); + return this.joinedEnvironments.filter(resultString => + resultString.toLowerCase().includes(lowerCasedSearchTerm), + ); + }, + }, + watch: { + value(newVal) { + this.searchTerm = newVal; + }, + }, + methods: { + selectEnvironment(selected) { + this.$emit('selectEnvironment', selected); + this.searchTerm = ''; + }, + createClicked() { + this.$emit('createClicked', this.searchTerm); + this.searchTerm = ''; + }, + isSelected(env) { + return this.value === env; + }, + }, +}; +</script> +<template> + <gl-dropdown :text="value"> + <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" /> + <gl-dropdown-item + v-for="environment in filteredResults" + :key="environment" + @click="selectEnvironment(environment)" + > + <gl-icon + :class="{ invisible: !isSelected(environment) }" + name="mobile-issue-close" + class="vertical-align-middle" + /> + {{ environment }} + </gl-dropdown-item> + <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + __('No matching results') + }}</gl-dropdown-item> + <template v-if="shouldRenderCreateButton"> + <gl-dropdown-divider /> + <gl-dropdown-item @click="createClicked"> + {{ composedCreateButtonLabel }} + </gl-dropdown-item> + </template> + </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 0ccc58ec2da..0460181558b 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 @@ -2,6 +2,7 @@ import { __ } from '~/locale'; import { mapActions, mapState } from 'vuex'; import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; +import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; import { GlButton, GlModal, @@ -17,6 +18,7 @@ import { export default { modalId: ADD_CI_VARIABLE_MODAL_ID, components: { + CiEnvironmentsDropdown, GlButton, GlModal, GlFormSelect, @@ -36,6 +38,7 @@ export default { 'variableBeingEdited', 'isGroup', 'maskableRegex', + 'selectedEnvironment', ]), canSubmit() { if (this.variableData.masked && this.maskedState === false) { @@ -80,6 +83,10 @@ export default { 'displayInputValue', 'clearModal', 'deleteVariable', + 'setEnvironmentScope', + 'addWildCardScope', + 'resetSelectedEnvironment', + 'setSelectedEnvironment', ]), updateOrAddVariable() { if (this.variableBeingEdited) { @@ -95,6 +102,7 @@ export default { } else { this.clearModal(); } + this.resetSelectedEnvironment(); }, hideModal() { this.$refs.modal.hide(); @@ -158,10 +166,11 @@ export default { label-for="ci-variable-env" class="w-50" > - <gl-form-select - id="ci-variable-env" - v-model="variableData.environment_scope" - :options="environments" + <ci-environments-dropdown + class="w-100" + :value="variableData.environment_scope" + @selectEnvironment="setEnvironmentScope" + @createClicked="addWildCardScope" /> </gl-form-group> </div> 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 3f2f89ada6f..806fa3e1191 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 @@ -92,6 +92,7 @@ export default { sort-by="key" sort-direction="asc" stacked="lg" + table-class="text-secondary" fixed show-empty sort-icon-left |