All files / app/assets/javascripts/user_lists/components add_user_modal.vue

0% Statements 0/4
100% Branches 0/0
0% Functions 0/3
0% Lines 0/4

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                                                                                                                                               
<script>
import { GlModal, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
import { s__ } from '~/locale';
import { ADD_USER_MODAL_ID } from '../constants/show';
 
export default {
  components: {
    GlFormGroup,
    GlFormTextarea,
    GlModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  modalOptions: {
    actionPrimary: {
      text: s__('UserLists|Add'),
      attributes: { 'data-testid': 'confirm-add-user-ids', variant: 'confirm' },
    },
    actionCancel: {
      text: s__('UserLists|Cancel'),
      attributes: { 'data-testid': 'cancel-add-user-ids' },
    },
    modalId: ADD_USER_MODAL_ID,
    static: true,
  },
  translations: {
    title: s__('UserLists|Add users'),
    description: s__(
      'UserLists|Enter a comma separated list of user IDs. These IDs should be the users of the system in which the feature flag is set, not GitLab IDs',
    ),
    userIdsLabel: s__('UserLists|User IDs'),
  },
  data() {
    return {
      userIds: '',
    };
  },
  methods: {
    submitUsers() {
      this.$emit('addUsers', this.userIds);
      this.clearInput();
    },
    clearInput() {
      this.userIds = '';
    },
  },
};
</script>
<template>
  <gl-modal
    v-bind="$options.modalOptions"
    :visible="visible"
    @primary="submitUsers"
    @canceled="clearInput"
  >
    <template #modal-title>
      {{ $options.translations.title }}
    </template>
    <template #default>
      <p data-testid="add-userids-description">{{ $options.translations.description }}</p>
      <gl-form-group label-for="add-user-ids" :label="$options.translations.userIdsLabel">
        <gl-form-textarea id="add-user-ids" v-model="userIds" />
      </gl-form-group>
    </template>
  </gl-modal>
</template>