Merge branch 'design-input-component' into 'master'

Add design_input.vue component

See merge request gitlab-org/gitlab!25968

ee/app/assets/javascripts/design_management/components/upload/button.vue

 <script>
 import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import DesignInput from './design_input.vue';
 
 export default {
   components: {
     GlButton,
     GlLoadingIcon,
+    DesignInput,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -17,10 +19,10 @@ export default {
   },
   methods: {
     openFileUpload() {
-      this.$refs.fileUpload.click();
+      this.$refs.fileUpload.$el.click();
     },
-    onFileUploadChange() {
-      this.$emit('upload', this.$refs.fileUpload.files);
+    onFileUploadChange(e) {
+      this.$emit('upload', e.target.files);
     },
   },
 };
@@ -42,14 +44,7 @@ export default {
       {{ s__('DesignManagement|Add designs') }}
       <gl-loading-icon v-if="isSaving" inline class="ml-1" />
     </gl-button>
-    <input
-      ref="fileUpload"
-      type="file"
-      name="design_file"
-      accept="image/*"
-      class="hide"
-      multiple
-      @change="onFileUploadChange"
-    />
+
+    <design-input ref="fileUpload" @change="onFileUploadChange" />
   </div>
 </template>

ee/app/assets/javascripts/design_management/components/upload/design_input.vue

+<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"
+    class="hide"
+    multiple
+    @change="$emit('change', $event)"
+  />
+</template>

ee/app/assets/javascripts/design_management/constants.js

+// WARNING: replace this with something
+// more sensical as per https://gitlab.com/gitlab-org/gitlab/issues/118611
+const VALID_DESIGN_FILE_MIMETYPE = 'image/*';
+
+export { VALID_DESIGN_FILE_MIMETYPE as default };

ee/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -15,13 +15,7 @@ exports[`Design management upload button component renders inverted upload desig
     <!---->
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;
 
@@ -45,13 +39,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
     />
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;
 
@@ -68,12 +56,6 @@ exports[`Design management upload button component renders upload design button
     <!---->
   </gl-button-stub>
    
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
+  <design-input-stub />
 </div>
 `;

ee/spec/frontend/design_management/components/upload/__snapshots__/design_input_spec.js.snap

+// 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"
+/>
+`;

ee/spec/frontend/design_management/components/upload/button_spec.js

 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;
@@ -39,11 +40,7 @@ describe('Design management upload button component', () => {
     it('emits upload event', () => {
       createComponent();
 
-      jest
-        .spyOn(wrapper.find({ ref: 'fileUpload' }).element, 'files', 'get')
-        .mockReturnValue('test');
-
-      wrapper.vm.onFileUploadChange('test');
+      wrapper.vm.onFileUploadChange({ target: { files: 'test' } });
 
       expect(wrapper.emitted().upload[0]).toEqual(['test']);
     });
@@ -53,7 +50,7 @@ describe('Design management upload button component', () => {
     it('triggers click on input', () => {
       createComponent();
 
-      const clickSpy = jest.spyOn(wrapper.find({ ref: 'fileUpload' }).element, 'click');
+      const clickSpy = jest.spyOn(wrapper.find(DesignInput).element, 'click');
 
       wrapper.vm.openFileUpload();
 

ee/spec/frontend/design_management/components/upload/design_input_spec.js

+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();
+  });
+});