All files / app/assets/javascripts/feature_flags/components/strategies gitlab_user_list.vue

25% Statements 2/8
100% Branches 0/0
0% Functions 0/7
25% Lines 2/8

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                7x   7x                                                                                                                                              
<script>
import { GlCollapsibleListbox } from '@gitlab/ui';
import { debounce } from 'lodash';
// eslint-disable-next-line no-restricted-imports
import { createNamespacedHelpers } from 'vuex';
import { s__ } from '~/locale';
import ParameterFormGroup from './parameter_form_group.vue';
 
const { mapActions, mapGetters, mapState } = createNamespacedHelpers('userLists');
 
const { fetchUserLists, setFilter } = mapActions(['fetchUserLists', 'setFilter']);
 
export default {
  components: {
    GlCollapsibleListbox,
    ParameterFormGroup,
  },
  props: {
    strategy: {
      required: true,
      type: Object,
    },
  },
  translations: {
    rolloutUserListLabel: s__('FeatureFlag|User List'),
    rolloutUserListDescription: s__('FeatureFlag|Select a user list'),
    rolloutUserListNoListError: s__('FeatureFlag|There are no configured user lists'),
    defaultDropdownText: s__('FeatureFlags|No user list selected'),
  },
  computed: {
    ...mapGetters(['hasUserLists', 'isLoading', 'hasError', 'userListOptions']),
    ...mapState(['filter', 'userLists']),
    userListId() {
      return this.strategy?.userList?.id ?? '';
    },
    dropdownText() {
      return this.strategy?.userList?.name ?? this.$options.translations.defaultDropdownText;
    },
    listboxItems() {
      return this.userLists.map((list) => ({
        value: list.id,
        text: list.name,
      }));
    },
  },
  mounted() {
    fetchUserLists.apply(this);
  },
 
  methods: {
    setFilter: debounce(setFilter, 250),
    onUserListChange(listId) {
      const list = this.userLists.find((userList) => userList.id === listId);
      this.$emit('change', {
        userList: list,
      });
    },
  },
};
</script>
<template>
  <parameter-form-group
    :state="hasUserLists"
    :invalid-feedback="$options.translations.rolloutUserListNoListError"
    :label="$options.translations.rolloutUserListLabel"
    :description="hasUserLists ? $options.translations.rolloutUserListDescription : ''"
  >
    <template #default="{ inputId }">
      <gl-collapsible-listbox
        :id="inputId"
        :toggle-text="dropdownText"
        :loading="isLoading"
        :items="listboxItems"
        searchable
        :selected="userListId"
        @select="onUserListChange"
        @search="setFilter"
      />
    </template>
  </parameter-form-group>
</template>