Add context support for newFileMenuEntries

Signed-off-by: John Molakvoæ <[email protected]>

Author: skjnldsv

.gitignore

@@ -226,3 +226,4 @@ temp/
 # End of https://www.gitignore.io/api/node,macos,intellij+all
 
 cypress/videos
+cypress/screenshots

lib/components/ActionIcon.vue

@@ -21,6 +21,9 @@ export default {
 
 	methods: {
 		async sanitizeSVG() {
+			if (!this.svg) {
+				return
+			}
 			this.cleanSvg = await sanitizeSVG(this.svg)
 		},
 	},

lib/components/UploadPicker.cy.ts

@@ -1,12 +1,98 @@
 // dist file might not be built when running eslint only
-// eslint-disable-next-line import/no-unresolved,node/no-missing-import
+// eslint-disable-next-line import/no-unresolved,n/no-missing-import
+import { addNewFileMenuEntry } from '@nextcloud/files'
 import { UploadPicker } from '../../dist/index.js'
 
 describe('UploadPicker rendering', () => {
 	it('Renders default UploadPicker', () => {
 		cy.mount(UploadPicker)
 		cy.get('form').should('have.class', 'upload-picker')
 		cy.get('form input[type="file"]').should('exist')
+		cy.screenshot()
+	})
+})
+
+describe('NewFileMenu handling', () => {
+	const propsData = {
+		context: {
+			basename: 'Folder',
+			etag: '63071eedd82fe',
+			fileid: '56',
+			filename: '/Folder',
+			hasPreview: false,
+			lastmod: 1661410576,
+			mime: 'httpd/unix-directory',
+			month: '197001',
+			permissions: 'CKGWDR',
+			showShared: false,
+			size: 2610077102,
+			timestamp: 1661410,
+			type: 'dir',
+		},
+	}
+	const entry = {
+		id: 'empty-file',
+		displayName: 'Create empty file',
+		templateName: 'New file',
+		iconClass: 'icon-file',
+		if: fileInfo => fileInfo.permissions.includes('CK'),
+		handler() {},
+	}
+
+	before(() => {
+		cy.spy(entry, 'handler')
+		addNewFileMenuEntry(entry)
+	})
+
+	it('Open the New File Menu', () => {
+		// Mount picker
+		cy.mount(UploadPicker, { propsData })
+
+		// Check and init aliases
+		cy.get('form input[type="file"]').as('input').should('exist')
+		cy.get('form .upload-picker__progress').as('progress').should('exist')
+		cy.get('form .action-item__menutoggle').as('menuButton').should('exist')
+
+		cy.get('@menuButton').click()
+		cy.get('[data-upload-picker-add]').should('have.length', 1)
+		cy.get('.upload-picker__menu-entry').should('have.length', 1)
+
+		cy.screenshot()
+
+		cy.get('.upload-picker__menu-entry')
+			.click()
+			.then(() => {
+				expect(entry.handler).to.be.called
+				cy.screenshot()
+			})
+	})
+
+	it('Changes the context', () => {
+		// Mount picker
+		cy.mount(UploadPicker, { propsData })
+
+		// Check and init aliases
+		cy.get('form input[type="file"]').as('input').should('exist')
+		cy.get('form .upload-picker__progress').as('progress').should('exist')
+		cy.get('form .action-item__menutoggle').as('menuButton').should('exist')
+
+		cy.get('@menuButton').click()
+		cy.get('[data-upload-picker-add]').should('have.length', 1)
+		cy.get('.upload-picker__menu-entry').should('have.length', 1)
+		cy.screenshot()
+
+		// Close menu
+		cy.get('body').click()
+		cy.get('[data-upload-picker-add]').should('not.exist')
+		cy.get('.upload-picker__menu-entry').should('not.exist')
+
+		cy.get('@component').then(component => {
+			component.setContext(Object.assign({}, propsData.context, { permissions: 'GR' }))
+		})
+		cy.get('form .action-item__menutoggle').as('menuButton').should('not.exist')
+		cy.get('[data-upload-picker-add]').should('have.length', 1)
+		cy.get('.upload-picker__menu-entry').should('not.exist')
+		cy.screenshot()
 	})
 })
 
@@ -65,6 +151,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.wait('@chunks').then(() => {
 			cy.get('form .upload-picker__progress').as('progress').should('be.visible')
 			cy.get('@progress').children('progress').should('not.have.value', '0')
+			cy.screenshot()
 		})
 		cy.wait('@assembly', { timeout: 60000 }).then(() => {
 			cy.get('form .upload-picker__progress').as('progress').should('not.be.visible')
@@ -103,7 +190,6 @@ describe('Destination management', () => {
 		// Mount picker
 		cy.mount(UploadPicker, { propsData })
 
-
 		// Check and init aliases
 		cy.get('form input[type="file"]').as('input').should('exist')
 		cy.get('form .upload-picker__progress').as('progress').should('exist')

lib/components/UploadPicker.vue

@@ -124,6 +124,10 @@ export default {
 			type: String,
 			default: '/',
 		},
+		context: {
+			type: Object,
+			default: undefined,
+		},
 	},
 
 	data() {
@@ -135,7 +139,7 @@ export default {
 			eta: null,
 			timeLeft: '',
 
-			newFileMenuEntries: getNewFileMenuEntries(),
+			newFileMenuEntries: getNewFileMenuEntries(this.context),
 			uploadManager,
 		}
 	},
@@ -170,6 +174,15 @@ export default {
 	},
 
 	watch: {
+		/**
+		 * If the context change, we need to refresh the menu
+		 *
+		 * @param {FileInfo} context the current NewFileMenu context
+		 */
+		context(context) {
+			this.setContext(context)
+		},
+
 		totalQueueSize(size) {
 			this.eta = makeEta({ min: 0, max: size })
 			this.updateStatus()
@@ -207,6 +220,7 @@ export default {
 
 	beforeMount() {
 		this.setDestination(this.destination)
+		this.setContext(this.context)
 		logger.debug('UploadPicker initialised')
 	},
 
@@ -269,6 +283,11 @@ export default {
 			logger.debug(`Destination path set to ${destination}`)
 			this.uploadManager.destination = destination
 		},
+
+		setContext(context) {
+			logger.debug('Context changed to', context);
+			this.newFileMenuEntries = getNewFileMenuEntries(context)
+		},
 	},
 }
 </script>

package-lock.json

@@ -82,7 +82,7 @@
   "dependencies": {
     "@nextcloud/auth": "^2.0.0",
     "@nextcloud/axios": "^2.0.0",
-    "@nextcloud/files": "^3.0.0-beta.1",
+    "@nextcloud/files": "^3.0.0-beta.3",
     "@nextcloud/l10n": "^1.6.0",
     "@nextcloud/logger": "^2.3.0",
     "@nextcloud/router": "^2.0.0",