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>
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlButton, GlTooltipDirective } from '@gitlab/ui';
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
components: {
GlButton,
GlLoadingIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -38,12 +37,12 @@ export default {
)
"
:disabled="isSaving"
:loading="isSaving"
variant="default"
size="small"
@click="openFileUpload"
>
{{ s__('DesignManagement|Upload designs') }}
<gl-loading-icon v-if="isSaving" inline class="ml-1" />
</gl-button>
<input
......
---
title: Use standard loading state for Design Upload button
merge_request: 46292
author:
type: changed
......@@ -15,40 +15,6 @@ exports[`Design management upload button component renders inverted upload desig
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>
<input
......@@ -74,7 +40,6 @@ exports[`Design management upload button component renders upload design button
Upload designs
<!---->
</gl-button-stub>
<input
......
import { shallowMount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import UploadButton from '~/design_management/components/upload/button.vue';
describe('Design management upload button component', () => {
let wrapper;
function createComponent(isSaving = false, isInverted = false) {
function createComponent({ isSaving = false, isInverted = false } = {}) {
wrapper = shallowMount(UploadButton, {
propsData: {
isSaving,
......@@ -24,15 +25,19 @@ describe('Design management upload button component', () => {
});
it('renders inverted upload design button', () => {
createComponent(false, true);
createComponent({ isInverted: true });
expect(wrapper.element).toMatchSnapshot();
});
it('renders loading icon', () => {
createComponent(true);
describe('when `isSaving` prop is `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', () => {
......
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