[Help wanted] Add download button in actions menu

cypress/integration/delete.spec.js

@@ -23,7 +23,7 @@
 import { randHash } from '../utils'
 const randUser = randHash()
 
-describe('Open image.png in viewer', function() {
+describe('Delete image.png in viewer', function() {
 	before(function() {
 		// Init user
 		cy.nextcloudCreateUser(randUser, 'password')

cypress/integration/download.spec.js

@@ -0,0 +1,71 @@
+/**
+ * @copyright Copyright (c) 2020 Florent Fayolle <[email protected]>
+ *
+ * @author Florent Fayolle <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randHash } from '../utils'
+const randUser = randHash()
+
+describe('Download image.png in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('image.png', 'image/png')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(2000)
+	})
+
+	after(function() {
+		cy.logout()
+	})
+
+	it('See image.png in the list', function() {
+		cy.get('#fileList tr[data-file="image.png"]', { timeout: 10000 })
+			.should('contain', 'image.png')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('image.png')
+		cy.get('body > .viewer').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('Download the image', function() {
+		// open the menu
+		cy.get('body > .viewer .modal-header button.action-item__menutoggle').click()
+		// delete the file
+		cy.get('.action-button__icon.icon-download').click()
+	})
+
+	it('Compare downloaded file with asset', function() {
+		// TODO
+	})
+})

l10n/fr.js

@@ -9,6 +9,7 @@ OC.L10N.register(
     "Your browser does not support videos." : "Votre navigateur ne prend pas en charge les vidéos.",
     "Open sidebar" : "Ouvrir la barre latérale",
     "Delete" : "Supprimer",
+    "Download" : "Télécharger",
     "There is no plugin available to display this file type" : "Il n'y a pas d'extension disponible pour afficher ce type de fichier.",
     "View" : "Afficher",
     "Your browser does not support the video tag." : "Votre navigateur Web ne prend pas en charge ce type de vidéo."

src/mixins/PreviewUrl.js

@@ -21,8 +21,8 @@
  *
  */
 import { generateUrl } from '@nextcloud/router'
-import { getRootPath, getToken, isPublic } from '../utils/davUtils'
-import { encodeFilePath } from '../utils/fileUtils'
+import { getToken, isPublic } from '../utils/davUtils'
+import { encodeFilePath, genDavPath } from '../utils/fileUtils'
 
 export default {
 	computed: {
@@ -35,22 +35,10 @@ export default {
 				fileid: this.fileid,
 				filename: this.filename,
 				hasPreview: this.hasPreview,
-				davPath: this.davPath,
+				davPath: genDavPath(this),
 			})
 		},
 
-		/**
-		 * Absolute dav remote path of the file
-		 * @returns {string}
-		 */
-		davPath() {
-			// TODO: allow proper dav access without the need of basic auth
-			// https://github.com/nextcloud/server/issues/19700
-			if (isPublic()) {
-				return generateUrl(`/s/${getToken()}/download?path=${this.filename.replace(this.basename, '')}&files=${this.basename}`)
-			}
-			return getRootPath() + this.filename
-		},
 	},
 	methods: {
 		/**

src/models/file.js

@@ -19,13 +19,15 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { genDavPath } from '../utils/fileUtils'
 
 export default function(fileInfo, mime, component) {
 	const data = {
 		mime,
 		modal: component,
 		failed: false,
 		loaded: false,
+		davPath: genDavPath(fileInfo),
 	}
 
 	return Object.assign({}, fileInfo, data)

src/utils/fileUtils.js

@@ -19,7 +19,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { dirname } from '@nextcloud/paths'
+import { generateUrl } from '@nextcloud/router'
+
 import camelcase from 'camelcase'
+import { getRootPath, getToken, isPublic } from './davUtils'
 import { isNumber } from './numberUtil'
 
 /**
@@ -119,4 +123,18 @@ const genFileInfo = function(obj) {
 	return fileInfo
 }
 
-export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo }
+/**
+ * Generate absolute dav remote path of the file
+ * @param {object} fileInfo The fileInfo
+ * @returns {string}
+ */
+function genDavPath(fileInfo) {
+	// TODO: allow proper dav access without the need of basic auth
+	// https://github.com/nextcloud/server/issues/19700
+	if (isPublic()) {
+		return generateUrl(`/s/${getToken()}/download?path=${dirname(fileInfo.filename)}&files=${fileInfo.basename}`)
+	}
+	return getRootPath() + fileInfo.filename
+}
+
+export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, genDavPath }

src/views/Viewer.vue

@@ -57,6 +57,12 @@
 				@click="onDelete">
 				{{ t('viewer', 'Delete') }}
 			</ActionButton>
+			<ActionButton
+				icon="icon-download"
+				:close-after-click="true"
+				@click="onDownload">
+				{{ t('viewer', 'Download') }}
+			</ActionButton>
 		</template>
 
 		<div class="viewer__content" @click.self.exact="close">
@@ -736,6 +742,9 @@ export default {
 			this.Viewer.onClose()
 		},
 
+		onDownload() {
+			location.href = this.currentFile.davPath
+		},
 		async onDelete() {
 			try {
 				const url = this.root + this.currentFile.filename