Add latest changes from gitlab-org/gitlab@13-4-stable-ee

4 files changed, 144 insertions, 20 deletions

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index 969e914ef0c..ee0e00b0f5d 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
@@ -3,7 +3,7 @@ import {
   GlFilteredSearchToken,
   GlAvatar,
   GlFilteredSearchSuggestion,
-  GlDeprecatedDropdownDivider,
+  GlDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -11,15 +11,14 @@ import { debounce } from 'lodash';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 
-import { ANY_AUTHOR, DEBOUNCE_DELAY } from '../constants';
+import { DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants';
 
 export default {
-  anyAuthor: ANY_AUTHOR,
   components: {
     GlFilteredSearchToken,
     GlAvatar,
     GlFilteredSearchSuggestion,
-    GlDeprecatedDropdownDivider,
+    GlDropdownDivider,
     GlLoadingIcon,
   },
   props: {
@@ -35,6 +34,7 @@ export default {
   data() {
     return {
       authors: this.config.initialAuthors || [],
+      defaultAuthors: this.config.defaultAuthors || [DEFAULT_LABEL_ANY],
       loading: true,
     };
   },
@@ -99,10 +99,14 @@ export default {
       <span>{{ activeAuthor ? activeAuthor.name : inputValue }}</span>
     </template>
     <template #suggestions>
-      <gl-filtered-search-suggestion :value="$options.anyAuthor">
-        {{ __('Any') }}
+      <gl-filtered-search-suggestion
+        v-for="author in defaultAuthors"
+        :key="author.value"
+        :value="author.value"
+      >
+        {{ author.text }}
       </gl-filtered-search-suggestion>
-      <gl-deprecated-dropdown-divider />
+      <gl-dropdown-divider v-if="defaultAuthors.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
new file mode 100644
index 00000000000..c18bdfc5c20
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
@@ -0,0 +1,115 @@
+<script>
+import {
+  GlToken,
+  GlFilteredSearchToken,
+  GlFilteredSearchSuggestion,
+  GlDropdownDivider,
+  GlLoadingIcon,
+} from '@gitlab/ui';
+import { debounce } from 'lodash';
+
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+
+import { DEBOUNCE_DELAY } from '../constants';
+
+export default {
+  components: {
+    GlToken,
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlDropdownDivider,
+    GlLoadingIcon,
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      branches: this.config.initialBranches || [],
+      defaultBranches: this.config.defaultBranches || [],
+      loading: true,
+    };
+  },
+  computed: {
+    currentValue() {
+      return this.value.data.toLowerCase();
+    },
+    activeBranch() {
+      return this.branches.find(branch => branch.name.toLowerCase() === this.currentValue);
+    },
+  },
+  watch: {
+    active: {
+      immediate: true,
+      handler(newValue) {
+        if (!newValue && !this.branches.length) {
+          this.fetchBranchBySearchTerm(this.value.data);
+        }
+      },
+    },
+  },
+  methods: {
+    fetchBranchBySearchTerm(searchTerm) {
+      this.loading = true;
+      this.config
+        .fetchBranches(searchTerm)
+        .then(({ data }) => {
+          this.branches = data;
+        })
+        .catch(() => createFlash({ message: __('There was a problem fetching branches.') }))
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    searchBranches: debounce(function debouncedSearch({ data }) {
+      this.fetchBranchBySearchTerm(data);
+    }, DEBOUNCE_DELAY),
+  },
+};
+</script>
+
+<template>
+  <gl-filtered-search-token
+    :config="config"
+    v-bind="{ ...$props, ...$attrs }"
+    v-on="$listeners"
+    @input="searchBranches"
+  >
+    <template #view-token="{ inputValue }">
+      <gl-token variant="search-value">{{
+        activeBranch ? activeBranch.name : inputValue
+      }}</gl-token>
+    </template>
+    <template #suggestions>
+      <gl-filtered-search-suggestion
+        v-for="branch in defaultBranches"
+        :key="branch.value"
+        :value="branch.value"
+      >
+        {{ branch.text }}
+      </gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="defaultBranches.length" />
+      <gl-loading-icon v-if="loading" />
+      <template v-else>
+        <gl-filtered-search-suggestion
+          v-for="branch in branches"
+          :key="branch.id"
+          :value="branch.name"
+        >
+          <div class="gl-display-flex">
+            <span class="gl-display-inline-block gl-mr-3 gl-p-3"></span>
+            <div>{{ branch.name }}</div>
+          </div>
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+  </gl-filtered-search-token>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
index 726a1c49993..7a9c5c277eb 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
@@ -3,7 +3,7 @@ import {
   GlToken,
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
-  GlNewDropdownDivider as GlDropdownDivider,
+  GlDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -14,10 +14,9 @@ import { __ } from '~/locale';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import { stripQuotes } from '../filtered_search_utils';
-import { NO_LABEL, DEBOUNCE_DELAY } from '../constants';
+import { DEFAULT_LABELS, DEBOUNCE_DELAY } from '../constants';
 
 export default {
-  noLabel: NO_LABEL,
   components: {
     GlToken,
     GlFilteredSearchToken,
@@ -38,6 +37,7 @@ export default {
   data() {
     return {
       labels: this.config.initialLabels || [],
+      defaultLabels: this.config.defaultLabels || DEFAULT_LABELS,
       loading: true,
     };
   },
@@ -105,10 +105,14 @@ export default {
       >
     </template>
     <template #suggestions>
-      <gl-filtered-search-suggestion :value="$options.noLabel">{{
-        __('No label')
-      }}</gl-filtered-search-suggestion>
-      <gl-dropdown-divider />
+      <gl-filtered-search-suggestion
+        v-for="label in defaultLabels"
+        :key="label.value"
+        :value="label.value"
+      >
+        {{ label.text }}
+      </gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="defaultLabels.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="label in labels" :key="label.id" :value="label.title">
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index cf1ac4e718b..89952623d0d 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -2,7 +2,7 @@
 import {
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
-  GlNewDropdownDivider as GlDropdownDivider,
+  GlDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -11,10 +11,9 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 import { stripQuotes } from '../filtered_search_utils';
-import { defaultMilestones, DEBOUNCE_DELAY } from '../constants';
+import { DEFAULT_MILESTONES, DEBOUNCE_DELAY } from '../constants';
 
 export default {
-  defaultMilestones,
   components: {
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
@@ -34,6 +33,7 @@ export default {
   data() {
     return {
       milestones: this.config.initialMilestones || [],
+      defaultMilestones: this.config.defaultMilestones || DEFAULT_MILESTONES,
       loading: true,
     };
   },
@@ -89,12 +89,13 @@ export default {
     </template>
     <template #suggestions>
       <gl-filtered-search-suggestion
-        v-for="milestone in $options.defaultMilestones"
+        v-for="milestone in defaultMilestones"
         :key="milestone.value"
         :value="milestone.value"
-        >{{ milestone.text }}</gl-filtered-search-suggestion
       >
-      <gl-dropdown-divider />
+        {{ milestone.text }}
+      </gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="defaultMilestones.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion