All files / app/assets/javascripts/feature_flags/components environments_dropdown.vue

81.48% Statements 22/27
83.33% Branches 5/6
83.33% Functions 10/12
81.48% Lines 22/27

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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185  1x   1x 1x 1x                                                                                                       11x                         1x     18x       9x 9x 9x 9x     9x 9x                           9x           4x 4x                                           3x 3x 3x               1x 1x         128x                                                                                  
<script>
import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
import { debounce } from 'lodash';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
 
/**
 * Creates a searchable input for environments.
 *
 * When given a value, it will render it as selected value
 * Otherwise it will render a placeholder for the search input.
 * It will fetch the available environments on focus.
 *
 * When the user types, it will trigger an event to allow
 * for API queries outside of the component.
 *
 * When results are returned, it renders a selectable
 * list with the suggestions
 *
 * When no results are returned, it will render a
 * button with a `Create` label. When clicked, it will
 * emit an event to allow for the creation of a new
 * record.
 *
 */
 
export default {
  name: 'EnvironmentsSearchableInput',
  components: {
    GlButton,
    GlSearchBoxByType,
  },
  inject: ['environmentsEndpoint'],
  props: {
    value: {
      type: String,
      required: false,
      default: '',
    },
    placeholder: {
      type: String,
      required: false,
      default: __('Search an environment spec'),
    },
    createButtonLabel: {
      type: String,
      required: false,
      default: __('Create'),
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      environmentSearch: this.value,
      results: [],
      showSuggestions: false,
      isLoading: false,
    };
  },
  computed: {
    /**
     * Creates a label with the value of the filter
     * @returns {String}
     */
    composedCreateButtonLabel() {
      return `${this.createButtonLabel} ${this.environmentSearch}`;
    },
    shouldRenderCreateButton() {
      return !this.isLoading && !this.results.length;
    },
  },
  methods: {
    fetchEnvironments: debounce(function debouncedFetchEnvironments() {
      this.isLoading = true;
      this.openSuggestions();
      axios
        .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
        .then(({ data }) => {
          this.results = data || [];
          this.isLoading = false;
        })
        .catch(() => {
          this.isLoading = false;
          this.closeSuggestions();
          createFlash({
            message: __('Something went wrong on our end. Please try again.'),
          });
        });
    }, 250),
    /**
     * Opens the list of suggestions
     */
    openSuggestions() {
      this.showSuggestions = true;
    },
    /**
     * Closes the list of suggestions and cleans the results
     */
    closeSuggestions() {
      this.showSuggestions = false;
      this.environmentSearch = '';
    },
    /**
     * On click, it will:
     *  1. clear the input value
     *  2. close the list of suggestions
     *  3. emit an event
     */
    clearInput() {
      this.closeSuggestions();
      this.$emit('clearInput');
    },
    /**
     * When the user selects a value from the list of suggestions
     *
     * It emits an event with the selected value
     * Clears the filter
     * and closes the list of suggestions
     *
     * @param {String} selected
     */
    selectEnvironment(selected) {
      this.$emit('selectEnvironment', selected);
      this.results = [];
      this.closeSuggestions();
    },
 
    /**
     * When the user clicks the create button
     * it emits an event with the filter value
     */
    createClicked() {
      this.$emit('createClicked', this.environmentSearch);
      this.closeSuggestions();
    },
  },
};
</script>
<template>
  <div>
    <div class="dropdown position-relative">
      <gl-search-box-by-type
        v-model.trim="environmentSearch"
        class="js-env-search"
        :aria-label="placeholder"
        :placeholder="placeholder"
        :disabled="disabled"
        :is-loading="isLoading"
        @focus="fetchEnvironments"
        @keyup="fetchEnvironments"
      />
      <div
        v-if="showSuggestions"
        class="dropdown-menu d-block dropdown-menu-selectable dropdown-menu-full-width"
      >
        <div class="dropdown-content">
          <ul v-if="results.length">
            <li v-for="(result, i) in results" :key="i">
              <gl-button category="tertiary" @click="selectEnvironment(result)">{{
                result
              }}</gl-button>
            </li>
          </ul>
          <div v-else-if="!results.length" class="text-secondary gl-p-3">
            {{ __('No matching results') }}
          </div>
          <div v-if="shouldRenderCreateButton" class="dropdown-footer">
            <gl-button
              category="tertiary"
              class="js-create-button dropdown-item"
              @click="createClicked"
              >{{ composedCreateButtonLabel }}</gl-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>