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

Remove design_input.vue in favour of native input

See merge request gitlab-org/gitlab!27292

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

 <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>

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

 <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

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

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

@@ -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>
 `;

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

@@ -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"

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;
@@ -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();
 

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

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

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