<script> import { mapState, mapActions } from 'vuex'; import { GlForm, GlFormInput, GlFormCheckbox, GlIcon, GlButton, GlTooltipDirective, } from '@gitlab/ui'; import { __ } from '~/locale'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { GlFormCheckbox, GlIcon, GlButton, GlForm, GlFormInput, }, directives: { autofocusonshow, GlTooltip: GlTooltipDirective, }, mixins: [glFeatureFlagsMixin()], props: { alignRight: { type: Boolean, required: false, default: false, }, }, computed: { ...mapState(['newEpicTitle', 'newEpicConfidential', 'epicCreateInProgress']), buttonLabel() { return this.epicCreateInProgress ? __('Creating epic') : __('Create epic'); }, isEpicCreateDisabled() { return !this.newEpicTitle.length; }, epicTitle: { set(value) { this.setEpicCreateTitle({ newEpicTitle: value, }); }, get() { return this.newEpicTitle; }, }, epicConfidential: { set(value) { this.setEpicCreateConfidential({ newEpicConfidential: value, }); }, get() { return this.newEpicConfidential; }, }, }, methods: { ...mapActions(['setEpicCreateTitle', 'createEpic', 'setEpicCreateConfidential']), }, }; </script> <template> <div class="dropdown epic-create-dropdown"> <gl-button category="primary" variant="success" data-qa-selector="new_epic_button" data-toggle="dropdown" > {{ __('New epic') }} </gl-button> <div :class="{ 'dropdown-menu-right': alignRight }" class="dropdown-menu"> <gl-form> <gl-form-input ref="epicTitleInput" v-model="epicTitle" v-autofocusonshow :disabled="epicCreateInProgress" :placeholder="__('Title')" type="text" class="form-control" data-qa-selector="epic_title_field" @keyup.enter.exact="createEpic" /> <gl-form-checkbox v-model="epicConfidential" class="mt-3 mb-3 mr-0" data-qa-selector="confidential_epic_checkbox" ><span> {{ __('Make this epic confidential') }} </span> <span v-gl-tooltip.viewport.top.hover :title=" __( 'This epic and its child elements will only be visible to team members with at minimum Reporter access.', ) " :aria-label=" __( 'This epic and its child elements will only be visible to team members with at minimum Reporter access.', ) " > <gl-icon name="question" :size="12" /></span> </gl-form-checkbox> <gl-button :disabled="isEpicCreateDisabled" :loading="epicCreateInProgress" category="primary" variant="success" class="gl-mt-3" data-qa-selector="create_epic_button" @click.stop="createEpic" >{{ buttonLabel }}</gl-button > </gl-form> </div> </div> </template>