Commit 4501eb59 authored by Tom Quirk's avatar Tom Quirk Committed by Paul Slaughter

Minor style improvements to design management

- align buttons in widget/design header
- simplify DOM by removing unnecessary nesting of DOM elements
- use data-testid where possible
parent 5c89c788
......@@ -73,21 +73,19 @@ export default {
</script>
<template>
<div class="gl-display-flex gl-align-items-center gl-h-full">
<div>
<gl-modal
:modal-id="modalId"
:title="$options.modal.title"
:action-primary="$options.modal.actionPrimary"
:action-cancel="$options.modal.actionCancel"
@ok="$emit('deleteSelectedDesigns')"
@ok="$emit('delete-selected-designs')"
>
<p>
{{
s__(
'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
)
}}
</p>
{{
s__(
'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
)
}}
</gl-modal>
<gl-button
v-gl-modal-directive="modalId"
......
......@@ -55,6 +55,7 @@ export default {
iid,
}"
:update="updateStoreAfterDelete"
:tag="null"
v-on="$listeners"
>
<slot v-bind="{ mutate, loading, error }"></slot>
......
......@@ -130,7 +130,7 @@ export default {
button-icon="archive"
button-category="secondary"
:title="s__('DesignManagement|Archive design')"
@deleteSelectedDesigns="$emit('delete')"
@delete-selected-designs="$emit('delete')"
/>
</header>
</template>
......@@ -50,7 +50,7 @@ export default {
type="file"
name="design_file"
:accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
class="hide"
class="gl-display-none"
multiple
@change="onFileUploadChange"
/>
......
......@@ -365,7 +365,8 @@ export default {
v-if="isLatestVersion"
variant="link"
size="small"
class="gl-mr-4 js-select-all"
class="gl-mr-3"
data-testid="select-all-designs-button"
@click="toggleDesignsSelection"
>{{ selectAllButtonText }}
</gl-button>
......@@ -385,7 +386,7 @@ export default {
data-qa-selector="archive_button"
:loading="loading"
:has-selected-designs="hasSelectedDesigns"
@deleteSelectedDesigns="mutate()"
@delete-selected-designs="mutate()"
>
{{ s__('DesignManagement|Archive selected') }}
</delete-button>
......
---
title: Fix button alignment in design management header
merge_request: 48003
author:
type: fixed
......@@ -36,7 +36,7 @@ describe('Batch delete button component', () => {
expect(findButton().attributes('disabled')).toBeTruthy();
});
it('emits `deleteSelectedDesigns` event on modal ok click', () => {
it('emits `delete-selected-designs` event on modal ok click', () => {
createComponent();
findButton().vm.$emit('click');
return wrapper.vm
......@@ -46,7 +46,7 @@ describe('Batch delete button component', () => {
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.emitted().deleteSelectedDesigns).toBeTruthy();
expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
});
});
......
......@@ -106,11 +106,11 @@ describe('Design management toolbar component', () => {
});
});
it('emits `delete` event on deleteButton `deleteSelectedDesigns` event', () => {
it('emits `delete` event on deleteButton `delete-selected-designs` event', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
wrapper.find(DeleteButton).vm.$emit('deleteSelectedDesigns');
wrapper.find(DeleteButton).vm.$emit('delete-selected-designs');
expect(wrapper.emitted().delete).toBeTruthy();
});
});
......
......@@ -19,7 +19,7 @@ exports[`Design management upload button component renders inverted upload desig
<input
accept="image/*"
class="hide"
class="gl-display-none"
multiple="multiple"
name="design_file"
type="file"
......@@ -44,7 +44,7 @@ exports[`Design management upload button component renders upload design button
<input
accept="image/*"
class="hide"
class="gl-display-none"
multiple="multiple"
name="design_file"
type="file"
......
......@@ -97,7 +97,7 @@ describe('Design management index page', () => {
let moveDesignHandler;
const findDesignCheckboxes = () => wrapper.findAll('.design-checkbox');
const findSelectAllButton = () => wrapper.find('.js-select-all');
const findSelectAllButton = () => wrapper.find('[data-testid="select-all-designs-button"');
const findToolbar = () => wrapper.find('.qa-selector-toolbar');
const findDesignCollectionIsCopying = () =>
wrapper.find('[data-testid="design-collection-is-copying"');
......@@ -542,7 +542,9 @@ describe('Design management index page', () => {
await nextTick();
expect(findDeleteButton().exists()).toBe(true);
expect(findSelectAllButton().text()).toBe('Deselect all');
findDeleteButton().vm.$emit('deleteSelectedDesigns');
findDeleteButton().vm.$emit('delete-selected-designs');
const [{ variables }] = mutate.mock.calls[0];
expect(variables.filenames).toStrictEqual([mockDesigns[0].filename, mockDesigns[1].filename]);
});
......
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