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

1 files changed, 114 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue
new file mode 100644
index 00000000000..83e3558e1a1
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue
@@ -0,0 +1,114 @@
+<script>
+import {
+  GlFilteredSearchToken,
+  GlAvatar,
+  GlFilteredSearchSuggestion,
+  GlDropdownDivider,
+  GlLoadingIcon,
+} from '@gitlab/ui';
+import Api from '~/api';
+import createFlash from '~/flash';
+import { debounce } from 'lodash';
+import {
+  ANY_TRIGGER_AUTHOR,
+  FETCH_AUTHOR_ERROR_MESSAGE,
+  FILTER_PIPELINES_SEARCH_DELAY,
+} from '../../constants';
+
+export default {
+  anyTriggerAuthor: ANY_TRIGGER_AUTHOR,
+  components: {
+    GlFilteredSearchToken,
+    GlAvatar,
+    GlFilteredSearchSuggestion,
+    GlDropdownDivider,
+    GlLoadingIcon,
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      users: this.config.triggerAuthors,
+      loading: true,
+    };
+  },
+  computed: {
+    currentValue() {
+      return this.value.data.toLowerCase();
+    },
+    activeUser() {
+      return this.users.find(user => {
+        return user.username.toLowerCase() === this.currentValue;
+      });
+    },
+  },
+  methods: {
+    fetchAuthorBySearchTerm(searchTerm) {
+      Api.projectUsers(this.config.projectId, searchTerm)
+        .then(res => {
+          this.users = res;
+          this.loading = false;
+        })
+        .catch(err => {
+          createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
+          this.loading = false;
+          throw err;
+        });
+    },
+    searchAuthors: debounce(function debounceSearch({ data }) {
+      this.fetchAuthorBySearchTerm(data);
+    }, FILTER_PIPELINES_SEARCH_DELAY),
+  },
+};
+</script>
+
+<template>
+  <gl-filtered-search-token
+    :config="config"
+    v-bind="{ ...$props, ...$attrs }"
+    v-on="$listeners"
+    @input="searchAuthors"
+  >
+    <template #view="{inputValue}">
+      <gl-avatar
+        v-if="activeUser"
+        :size="16"
+        :src="activeUser.avatar_url"
+        shape="circle"
+        class="gl-mr-2"
+      />
+      <span>{{ activeUser ? activeUser.name : inputValue }}</span>
+    </template>
+    <template #suggestions>
+      <gl-filtered-search-suggestion :value="$options.anyTriggerAuthor">{{
+        $options.anyTriggerAuthor
+      }}</gl-filtered-search-suggestion>
+      <gl-dropdown-divider />
+
+      <gl-loading-icon v-if="loading" />
+      <template v-else>
+        <gl-filtered-search-suggestion
+          v-for="user in users"
+          :key="user.username"
+          :value="user.username"
+        >
+          <div class="d-flex">
+            <gl-avatar :size="32" :src="user.avatar_url" />
+            <div>
+              <div>{{ user.name }}</div>
+              <div>@{{ user.username }}</div>
+            </div>
+          </div>
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+  </gl-filtered-search-token>
+</template>