All files / ee/app/assets/javascripts/pages/admin/application_settings/ci_cd ci_template_dropdown.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlCollapsibleListbox } from '@gitlab/ui';
import { __, n__, s__ } from '~/locale';
import { filterItems } from './helpers';
 
export default {
  name: 'CiTemplateDropdown',
  i18n: {
    searchPlaceholder: s__('AdminSettings|No required configuration'),
    headerText: s__('AdminSettings|Select a CI/CD template'),
    searchSummaryText: s__('AdminSettings|templates found'),
    resetButtonLabel: __('Reset'),
  },
  components: {
    GlCollapsibleListbox,
  },
  inject: {
    initialSelectedGitlabCiYmlName: {
      default: null,
    },
    gitlabCiYmls: {
      default: {},
    },
  },
  data() {
    return {
      selected: this.initialSelectedGitlabCiYmlName,
      searchTerm: '',
    };
  },
  computed: {
    items() {
      return filterItems(this.gitlabCiYmls, this.searchTerm);
    },
    toggleText() {
      return this.selected || this.$options.i18n.searchPlaceholder;
    },
    numberOfResults() {
      return this.items.reduce((count, current) => count + current.options.length, 0);
    },
    searchSummary() {
      return n__(`%d template found`, `%d templates found`, this.numberOfResults);
    },
  },
  methods: {
    onReset() {
      this.selected = null;
    },
    onSearch(query) {
      this.searchTerm = query.trim().toLowerCase();
    },
  },
};
</script>
 
<template>
  <div>
    <input
      id="required_instance_ci_template_name"
      type="hidden"
      name="application_setting[required_instance_ci_template]"
      :value="selected"
    />
    <gl-collapsible-listbox
      v-model="selected"
      searchable
      :header-text="$options.i18n.headerText"
      :items="items"
      :reset-button-label="$options.i18n.resetButtonLabel"
      :search-placeholder="$options.i18n.searchPlaceholder"
      :toggle-text="toggleText"
      @reset="onReset"
      @search="onSearch"
    >
      <template #search-summary-sr-only>
        {{ searchSummary }}
      </template>
    </gl-collapsible-listbox>
  </div>
</template>