1<script>
2import { mapState, mapGetters, mapActions } from 'vuex';
3import { sprintf, s__ } from '~/locale';
4
5import gkeDropdownMixin from './gke_dropdown_mixin';
6
7export default {
8  name: 'GkeMachineTypeDropdown',
9  mixins: [gkeDropdownMixin],
10  computed: {
11    ...mapState([
12      'isValidatingProjectBilling',
13      'projectHasBillingEnabled',
14      'selectedZone',
15      'selectedMachineType',
16    ]),
17    ...mapState({ items: 'machineTypes' }),
18    ...mapGetters(['hasZone', 'hasMachineType']),
19    isDisabled() {
20      return (
21        this.isLoading ||
22        this.isValidatingProjectBilling ||
23        !this.projectHasBillingEnabled ||
24        !this.hasZone
25      );
26    },
27    toggleText() {
28      if (this.isLoading) {
29        return s__('ClusterIntegration|Fetching machine types');
30      }
31
32      if (this.selectedMachineType) {
33        return this.selectedMachineType;
34      }
35
36      if (!this.projectHasBillingEnabled && !this.hasZone) {
37        return s__('ClusterIntegration|Select project and zone to choose machine type');
38      }
39
40      return !this.hasZone
41        ? s__('ClusterIntegration|Select zone to choose machine type')
42        : s__('ClusterIntegration|Select machine type');
43    },
44    errorMessage() {
45      return sprintf(
46        s__(
47          'ClusterIntegration|An error occurred while trying to fetch zone machine types: %{error}',
48        ),
49        { error: this.gapiError },
50      );
51    },
52  },
53  watch: {
54    selectedZone() {
55      this.hasErrors = false;
56
57      if (this.hasZone) {
58        this.isLoading = true;
59
60        this.fetchMachineTypes().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler);
61      }
62    },
63  },
64  methods: {
65    ...mapActions(['fetchMachineTypes']),
66    ...mapActions({ setItem: 'setMachineType' }),
67  },
68};
69</script>
70
71<template>
72  <div>
73    <div class="js-gcp-machine-type-dropdown dropdown">
74      <dropdown-hidden-input :name="fieldName" :value="selectedMachineType" />
75      <dropdown-button
76        :class="{ 'border-danger': hasErrors }"
77        :is-disabled="isDisabled"
78        :is-loading="isLoading"
79        :toggle-text="toggleText"
80      />
81      <div class="dropdown-menu dropdown-select">
82        <dropdown-search-input
83          v-model="searchQuery"
84          :placeholder-text="s__('ClusterIntegration|Search machine types')"
85        />
86        <div class="dropdown-content">
87          <ul>
88            <li v-show="!results.length">
89              <span class="menu-item">
90                {{ s__('ClusterIntegration|No machine types matched your search') }}
91              </span>
92            </li>
93            <li v-for="result in results" :key="result.id">
94              <button type="button" @click.prevent="setItem(result.name)">{{ result.name }}</button>
95            </li>
96          </ul>
97        </div>
98        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
99      </div>
100    </div>
101    <span
102      v-if="hasErrors"
103      :class="{
104        'text-danger': hasErrors,
105        'text-muted': !hasErrors,
106      }"
107      class="form-text"
108    >
109      {{ errorMessage }}
110    </span>
111  </div>
112</template>
113