Add latest changes from gitlab-org/gitlab@master

1 files changed, 93 insertions, 0 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>