Commit 8d8de87a authored by sstern's avatar sstern

Disable create list button after clicked once

Changelog: changed
parent e755595e
<script> <script>
import { GlButton } from '@gitlab/ui'; import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { mapActions } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
export default { export default {
components: { components: {
GlButton, GlButton,
}, },
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [Tracking.mixin()], mixins: [Tracking.mixin()],
computed: {
...mapState({ isNewListShowing: ({ addColumnForm }) => addColumnForm.visible }),
tooltip() {
return this.isNewListShowing ? __('The list creation wizard is already open') : '';
},
},
methods: { methods: {
...mapActions(['setAddColumnFormVisibility']), ...mapActions(['setAddColumnFormVisibility']),
handleClick() { handleClick() {
...@@ -19,7 +29,14 @@ export default { ...@@ -19,7 +29,14 @@ export default {
</script> </script>
<template> <template>
<div class="gl-ml-3 gl-display-flex gl-align-items-center" data-testid="boards-create-list"> <div
<gl-button variant="confirm" @click="handleClick">{{ __('Create list') }} </gl-button> v-gl-tooltip="tooltip"
:tabindex="isNewListShowing ? '0' : undefined"
class="gl-ml-3 gl-display-flex gl-align-items-center"
data-testid="boards-create-list"
>
<gl-button :disabled="isNewListShowing" variant="confirm" @click="handleClick"
>{{ __('Create list') }}
</gl-button>
</div> </div>
</template> </template>
...@@ -34029,6 +34029,9 @@ msgstr "" ...@@ -34029,6 +34029,9 @@ msgstr ""
msgid "The license was successfully uploaded and will be active from %{starts_at}. You can see the details below." msgid "The license was successfully uploaded and will be active from %{starts_at}. You can see the details below."
msgstr "" msgstr ""
msgid "The list creation wizard is already open"
msgstr ""
msgid "The maximum file size allowed is %{size}." msgid "The maximum file size allowed is %{size}."
msgstr "" msgstr ""
......
import { GlButton } from '@gitlab/ui';
import Vue from 'vue';
import Vuex from 'vuex';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
import { createStore } from '~/boards/stores';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
Vue.use(Vuex);
describe('BoardAddNewColumnTrigger', () => {
let wrapper;
const findBoardsCreateList = () => wrapper.findByTestId('boards-create-list');
const findTooltipText = () => getBinding(findBoardsCreateList().element, 'gl-tooltip');
const mountComponent = () => {
wrapper = mountExtended(BoardAddNewColumnTrigger, {
directives: {
GlTooltip: createMockDirective(),
},
store: createStore(),
});
};
beforeEach(() => {
mountComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('when button is active', () => {
it('does not show the tooltip', () => {
const tooltip = findTooltipText();
expect(tooltip.value).toBe('');
});
it('renders an enabled button', () => {
const button = wrapper.find(GlButton);
expect(button.props('disabled')).toBe(false);
});
});
describe('when button is disabled', () => {
it('shows the tooltip', async () => {
wrapper.find(GlButton).vm.$emit('click');
await wrapper.vm.$nextTick();
const tooltip = findTooltipText();
expect(tooltip.value).toBe('The list creation wizard is already open');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment