Commit 794644c6 authored by Tom Quirk's avatar Tom Quirk

Use loading prop for design upload button

Instead of custom gl-icon placement,
use the loading prop go gl-button.

Tests are updated in this commit to
reflect this change.
parent 8f0042e8
<script> <script>
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants'; import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default { export default {
components: { components: {
GlButton, GlButton,
GlLoadingIcon,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -38,12 +37,12 @@ export default { ...@@ -38,12 +37,12 @@ export default {
) )
" "
:disabled="isSaving" :disabled="isSaving"
:loading="isSaving"
variant="default" variant="default"
size="small" size="small"
@click="openFileUpload" @click="openFileUpload"
> >
{{ s__('DesignManagement|Upload designs') }} {{ s__('DesignManagement|Upload designs') }}
<gl-loading-icon v-if="isSaving" inline class="ml-1" />
</gl-button> </gl-button>
<input <input
......
---
title: Use standard loading state for Design Upload button
merge_request: 46292
author:
type: changed
...@@ -14,41 +14,7 @@ exports[`Design management upload button component renders inverted upload desig ...@@ -14,41 +14,7 @@ exports[`Design management upload button component renders inverted upload desig
> >
Upload designs Upload designs
<!---->
</gl-button-stub>
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
</div>
`;
exports[`Design management upload button component renders loading icon 1`] = `
<div>
<gl-button-stub
buttontextclasses=""
category="primary"
disabled="true"
icon=""
size="small"
title="Adding a design with the same filename replaces the file in a new version."
variant="default"
>
Upload designs
<gl-loading-icon-stub
class="ml-1"
color="dark"
inline="true"
label="Loading"
size="sm"
/>
</gl-button-stub> </gl-button-stub>
<input <input
...@@ -73,8 +39,7 @@ exports[`Design management upload button component renders upload design button ...@@ -73,8 +39,7 @@ exports[`Design management upload button component renders upload design button
> >
Upload designs Upload designs
<!---->
</gl-button-stub> </gl-button-stub>
<input <input
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import UploadButton from '~/design_management/components/upload/button.vue'; import UploadButton from '~/design_management/components/upload/button.vue';
describe('Design management upload button component', () => { describe('Design management upload button component', () => {
let wrapper; let wrapper;
function createComponent(isSaving = false, isInverted = false) { function createComponent({ isSaving = false, isInverted = false } = {}) {
wrapper = shallowMount(UploadButton, { wrapper = shallowMount(UploadButton, {
propsData: { propsData: {
isSaving, isSaving,
...@@ -24,15 +25,19 @@ describe('Design management upload button component', () => { ...@@ -24,15 +25,19 @@ describe('Design management upload button component', () => {
}); });
it('renders inverted upload design button', () => { it('renders inverted upload design button', () => {
createComponent(false, true); createComponent({ isInverted: true });
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('renders loading icon', () => { describe('when `isSaving` prop is `true`', () => {
createComponent(true); it('Button `loading` prop is `true`', () => {
createComponent({ isSaving: true });
expect(wrapper.element).toMatchSnapshot(); const button = wrapper.find(GlButton);
expect(button.exists()).toBe(true);
expect(button.props('loading')).toBe(true);
});
}); });
describe('onFileUploadChange', () => { describe('onFileUploadChange', () => {
......
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