Refactor upload inputs into one component (#6859)

* Refactor upload inputs into one component

* Add changelog item

* Run linter

* Use `oc-` classes

Co-authored-by: Pascal Wengerter <pwengerter@owncloud.com>

* Update snapshots

Co-authored-by: Pascal Wengerter <pwengerter@owncloud.com>

changelog/unreleased/enhancement-refactor-upload-inputs

@@ -0,0 +1,6 @@
+Enhancement: Refactor upload input components
+
+We've refactored the upload input components for files and folders into one component.
+
+https://github.com/owncloud/web/pull/6859
+https://github.com/owncloud/web/issues/6819

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -90,10 +90,10 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload ref="folder-upload" />
+          <resource-upload ref="folder-upload" btn-class="oc-width-1-1" />
         </li>
         <li>
-          <file-upload ref="file-upload" btn-class="oc-width-1-1" />
+          <resource-upload ref="file-upload" btn-class="oc-width-1-1" :is-folder="true" />
         </li>
       </oc-list>
     </oc-drop>
@@ -112,17 +112,14 @@ import { useAppDefaults } from 'web-pkg/src/composables'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 
-// TODO: Simplify to one UploadButton component and fill from here
-import FileUpload from './Upload/FileUpload.vue'
-import FolderUpload from './Upload/FolderUpload.vue'
+import ResourceUpload from './Upload/ResourceUpload.vue'
 import { defineComponent, getCurrentInstance, onMounted } from '@vue/composition-api'
 import { UppyResource, useUpload } from 'web-runtime/src/composables/upload'
 import { useUploadHelpers } from '../../composables/upload'
 
 export default defineComponent({
   components: {
-    FileUpload,
-    FolderUpload
+    ResourceUpload
   },
   mixins: [MixinFileActions],
   setup() {

packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
+      <oc-resource-icon :resource="{ extension: '', isFolder }" />
+      <span :id="uploadLabelId">{{ buttonLabel }}</span>
+    </oc-button>
+    <input
+      :id="inputId"
+      ref="input"
+      v-bind="inputAttrs"
+      class="upload-input-target"
+      type="file"
+      :aria-labelledby="uploadLabelId"
+      :name="isFolder ? 'file' : 'folder'"
+      tabindex="-1"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    btnLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    btnClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isFolder: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    inputId() {
+      if (this.isFolder) {
+        return 'files-folder-upload-input'
+      }
+      return 'files-file-upload-input'
+    },
+    uploadLabelId() {
+      if (this.isFolder) {
+        return 'files-folder-upload-button'
+      }
+      return 'files-file-upload-button'
+    },
+    buttonLabel() {
+      if (this.btnLabel) {
+        return this.btnLabel
+      }
+      if (this.isFolder) {
+        return this.$gettext('Folder')
+      }
+      return this.$gettext('Files')
+    },
+    inputAttrs() {
+      if (this.isFolder) {
+        return {
+          webkitdirectory: true,
+          mozdirectory: true,
+          allowdirs: true
+        }
+      }
+      return { multiple: true }
+    }
+  },
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
+  },
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input)
+  },
+  methods: {
+    triggerUpload() {
+      this.$refs.input.click()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.upload-input-target {
+  position: absolute;
+  left: -99999px;
+}
+</style>

packages/web-app-files/src/views/FilesDrop.vue

@@ -11,10 +11,10 @@
       <div v-else key="loaded-drop" class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
         <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
           <h2 v-text="title" />
-          <file-upload
+          <resource-upload
             id="files-drop-zone"
             ref="fileUpload"
-            class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"
+            class="oc-flex oc-flex-middle oc-flex-center oc-placeholder"
             :btn-label="$gettext('Drop files here to upload or click to select file')"
           />
           <div id="previews" hidden />
@@ -39,13 +39,13 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
-import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
+import ResourceUpload from '../components/AppBar/Upload/ResourceUpload.vue'
 import { getCurrentInstance, onMounted } from '@vue/composition-api/dist/vue-composition-api'
 import { useUpload } from 'web-runtime/src/composables/upload'
 
 export default {
   components: {
-    FileUpload
+    ResourceUpload
   },
   setup() {
     const instance = getCurrentInstance().proxy

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js

@@ -22,8 +22,8 @@ const elSelector = {
   uploadButton: '#upload-menu-btn',
   uploadDrop: 'oc-drop-stub #upload-menu-drop',
   uploadMenuList: '#upload-list > li',
-  fileUpload: 'file-upload-stub',
-  folderUpload: 'folder-upload-stub',
+  fileUpload: 'resource-upload-stub',
+  folderUpload: 'resource-upload-stub',
   newFolderBtn: '#new-folder-btn',
   newTextFileBtn: '.new-file-btn-txt',
   newMdFileBtn: '.new-file-btn-md',
@@ -196,8 +196,7 @@ function getWrapper(route = {}, store = {}) {
     stubs: {
       ...stubs,
       'oc-button': false,
-      'file-upload': true,
-      'folder-upload': true
+      'resource-upload': true
     },
     store
   })

packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js → packages/web-app-files/tests/unit/components/AppBar/Upload/ResourceUpload.spec.js

@@ -1,19 +1,29 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import FileUpload from '../../../../../src/components/AppBar/Upload/FileUpload.vue'
+import ResourceUpload from '../../../../../src/components/AppBar/Upload/ResourceUpload.vue'
 import DesignSystem from 'owncloud-design-system'
 
 const Translate = jest.fn()
 
-describe('File Upload Component', () => {
-  it('should render component', () => {
-    const wrapper = mount(FileUpload, getOptions())
+describe('Resource Upload Component', () => {
+  describe('file upload', () => {
+    it('should render component', () => {
+      const wrapper = mount(ResourceUpload, getOptions())
+      expect(wrapper.exists()).toBeTruthy()
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
 
-    expect(wrapper.exists()).toBeTruthy()
+  describe('folder upload', () => {
+    it('should render component', () => {
+      const wrapper = mount(ResourceUpload, getOptions({ isFolder: true }))
+      expect(wrapper.exists()).toBeTruthy()
+      expect(wrapper).toMatchSnapshot()
+    })
   })
 
   describe('when upload file button is clicked', () => {
     it('should call "triggerUpload"', async () => {
-      const wrapper = mount(FileUpload, {
+      const wrapper = mount(ResourceUpload, {
         ...getOptions(),
         stubs: {
           'oc-icon': true,
@@ -23,7 +33,7 @@ describe('File Upload Component', () => {
 
       const spyTriggerUpload = jest.spyOn(wrapper.vm, 'triggerUpload')
       const uploadButton = wrapper.find('button')
-      const fileUploadInput = wrapper.find('#fileUploadInput')
+      const fileUploadInput = wrapper.find('#files-file-upload-input')
       fileUploadInput.element.click = jest.fn()
       await wrapper.vm.$forceUpdate()
 
@@ -35,13 +45,11 @@ describe('File Upload Component', () => {
   })
 })
 
-function getOptions() {
+function getOptions(propsData = {}) {
   const localVue = createLocalVue()
   localVue.use(DesignSystem)
   return {
-    propsData: {
-      path: ''
-    },
+    propsData,
     localVue,
     directives: { Translate },
     mocks: {

packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;
+
+exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;