All files / app/assets/javascripts/runner/components/search_tokens tag_token.vue

100% Statements 16/16
100% Branches 2/2
100% Functions 6/6
100% Lines 16/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86  3x 3x 3x 3x   3x 3x   3x                             13x                         16x             52x       16x 16x 16x   1x       16x               627x                                          
<script>
import { GlFilteredSearchSuggestion, GlToken } from '@gitlab/ui';
import { createAlert } from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
 
import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
import { RUNNER_TAG_BG_CLASS } from '../../constants';
 
export const TAG_SUGGESTIONS_PATH = '/admin/runners/tag_list.json';
 
export default {
  components: {
    BaseToken,
    GlFilteredSearchSuggestion,
    GlToken,
  },
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tags: [],
      loading: false,
    };
  },
  methods: {
    getTagsOptions(search) {
      // TODO This should be implemented via a GraphQL API
      // The API should
      // 1) scope to the rights of the user
      // 2) stay up to date to the removal of old tags
      // 3) consider the scope of search, like searching within the tags of a group
      // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333796
      return axios
        .get(TAG_SUGGESTIONS_PATH, {
          params: {
            search,
          },
        })
        .then(({ data }) => {
          return data.map(({ id, name }) => ({ id, value: name, text: name }));
        });
    },
    async fetchTags(searchTerm) {
      this.loading = true;
      try {
        this.tags = await this.getTagsOptions(searchTerm);
      } catch {
        createAlert({
          message: s__('Runners|Something went wrong while fetching the tags suggestions'),
        });
      } finally {
        this.loading = false;
      }
    },
  },
  RUNNER_TAG_BG_CLASS,
};
</script>
 
<template>
  <base-token
    v-bind="$attrs"
    :config="config"
    :suggestions-loading="loading"
    :suggestions="tags"
    @fetch-suggestions="fetchTags"
    v-on="$listeners"
  >
    <template #view-token="{ viewTokenProps: { listeners, inputValue, activeTokenValue } }">
      <gl-token variant="search-value" :class="$options.RUNNER_TAG_BG_CLASS" v-on="listeners">
        {{ activeTokenValue ? activeTokenValue.text : inputValue }}
      </gl-token>
    </template>
    <template #suggestions-list="{ suggestions }">
      <gl-filtered-search-suggestion v-for="tag in suggestions" :key="tag.id" :value="tag.value">
        {{ tag.text }}
      </gl-filtered-search-suggestion>
    </template>
  </base-token>
</template>