Commit e4fae1db authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'tq/remove-design-input' into 'master'

Remove design_input.vue in favour of native input

See merge request gitlab-org/gitlab!27292
parents 163c8a8c 1558772f
<script>
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import DesignInput from './design_input.vue';
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
components: {
GlButton,
GlLoadingIcon,
DesignInput,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -19,12 +18,13 @@ export default {
},
methods: {
openFileUpload() {
this.$refs.fileUpload.$el.click();
this.$refs.fileUpload.click();
},
onFileUploadChange(e) {
this.$emit('upload', e.target.files);
},
},
VALID_DESIGN_FILE_MIMETYPE,
};
</script>
......@@ -45,6 +45,14 @@ export default {
<gl-loading-icon v-if="isSaving" inline class="ml-1" />
</gl-button>
<design-input ref="fileUpload" @change="onFileUploadChange" />
<input
ref="fileUpload"
type="file"
name="design_file"
:accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
class="hide"
multiple
@change="onFileUploadChange"
/>
</div>
</template>
<script>
import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import createFlash from '~/flash';
import DesignInput from './design_input.vue';
import uploadDesignMutation from '../../graphql/mutations/uploadDesign.mutation.graphql';
import { UPLOAD_DESIGN_INVALID_FILETYPE_ERROR } from '../../utils/error_messages';
import { isValidDesignFile } from '../../utils/design_management_utils';
import { VALID_DATA_TRANSFER_TYPE } from '../../constants';
import { VALID_DATA_TRANSFER_TYPE, VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
components: {
GlIcon,
GlLink,
GlSprintf,
DesignInput,
},
data() {
return {
......@@ -55,13 +53,14 @@ export default {
this.dragCounter -= 1;
},
openFileUpload() {
this.$refs.fileUpload.$el.click();
this.$refs.fileUpload.click();
},
onDesignInputChange(e) {
this.$emit('change', e.target.files);
},
},
uploadDesignMutation,
VALID_DESIGN_FILE_MIMETYPE,
};
</script>
......@@ -102,7 +101,15 @@ export default {
</div>
</button>
<design-input ref="fileUpload" @change="onDesignInputChange" />
<input
ref="fileUpload"
type="file"
name="design_file"
:accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
class="hide"
multiple
@change="onDesignInputChange"
/>
</slot>
<transition name="design-dropzone-fade">
<div
......
<script>
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
VALID_DESIGN_FILE_MIMETYPE,
};
</script>
<template>
<input
type="file"
name="design_file"
:accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
class="hide"
multiple
@change="$emit('change', $event)"
/>
</template>
......@@ -15,7 +15,13 @@ exports[`Design management upload button component renders inverted upload desig
<!---->
</gl-button-stub>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
</div>
`;
......@@ -39,7 +45,13 @@ exports[`Design management upload button component renders loading icon 1`] = `
/>
</gl-button-stub>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
</div>
`;
......@@ -56,6 +68,12 @@ exports[`Design management upload button component renders upload design button
<!---->
</gl-button-stub>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
</div>
`;
......@@ -24,7 +24,13 @@ exports[`Design management dropzone component when dragging renders correct temp
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......@@ -87,7 +93,13 @@ exports[`Design management dropzone component when dragging renders correct temp
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......@@ -150,7 +162,13 @@ exports[`Design management dropzone component when dragging renders correct temp
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......@@ -212,7 +230,13 @@ exports[`Design management dropzone component when dragging renders correct temp
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......@@ -274,7 +298,13 @@ exports[`Design management dropzone component when dragging renders correct temp
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......@@ -336,7 +366,13 @@ exports[`Design management dropzone component when no slot provided renders defa
</div>
</button>
<design-input-stub />
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
<transition-stub
name="design-dropzone-fade"
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management upload button component renders design input 1`] = `
<input
accept="image/*"
class="hide"
multiple="multiple"
name="design_file"
type="file"
/>
`;
import { shallowMount } from '@vue/test-utils';
import UploadButton from 'ee/design_management/components/upload/button.vue';
import DesignInput from 'ee/design_management/components/upload/design_input.vue';
describe('Design management upload button component', () => {
let wrapper;
......@@ -50,7 +49,7 @@ describe('Design management upload button component', () => {
it('triggers click on input', () => {
createComponent();
const clickSpy = jest.spyOn(wrapper.find(DesignInput).element, 'click');
const clickSpy = jest.spyOn(wrapper.find('input').element, 'click');
wrapper.vm.openFileUpload();
......
import { shallowMount } from '@vue/test-utils';
import DesignDropzone from 'ee/design_management/components/upload/design_dropzone.vue';
import DesignInput from 'ee/design_management/components/upload/design_input.vue';
import createFlash from '~/flash';
jest.mock('~/flash');
......@@ -48,7 +47,7 @@ describe('Design management dropzone component', () => {
it('triggers click event on file input element when clicked', () => {
createComponent();
const clickSpy = jest.spyOn(wrapper.find(DesignInput).element, 'click');
const clickSpy = jest.spyOn(wrapper.find('input').element, 'click');
findDropzoneCard().trigger('click');
expect(clickSpy).toHaveBeenCalled();
......
import { mount } from '@vue/test-utils';
import DesignInput from 'ee/design_management/components/upload/design_input.vue';
describe('Design management upload button component', () => {
let wrapper;
function createComponent() {
wrapper = mount(DesignInput);
}
afterEach(() => {
wrapper.destroy();
});
it('renders design input', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
});
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