[stable27] Vue based FilePicker

core/css/server.scss

@@ -8,5 +8,5 @@
 @import 'mobile.scss';
 @import 'tooltip.scss';
 // If you include .css, it will be imported as url
-@import '../../node_modules/@nextcloud/dialogs/dist/index';
+@import '../../node_modules/@nextcloud/dialogs/dist/style';
 @import 'public.scss';

core/src/OC/dialogs.js

@@ -50,6 +50,7 @@ import $ from 'jquery'
 import OC from './index.js'
 import OCA from '../OCA/index.js'
 import { isA11yActivation } from '../Util/a11y.js'
+import { filepicker } from '@nextcloud/dialogs/legacy.js'
 
 /**
  * this class to ease the usage of jquery dialogs
@@ -226,6 +227,7 @@ const Dialogs = {
 			Dialogs.dialogsCounter++
 		})
 	},
+
 	/**
 	 * show a file picker to pick a file from
 	 *
@@ -246,7 +248,31 @@ const Dialogs = {
 	 * @param {Object} [options] additonal options that need to be set
 	 * @param {Function} [options.filter] filter function for advanced filtering
 	 */
-	filepicker: function(title, callback, multiselect, mimetypeFilter, modal, type, path, options) {
+	filepicker,
+
+	/**
+	 * Show the legacy file picker to pick a file from
+	 *
+	 * In order to pick several types of mime types they need to be passed as an
+	 * array of strings.
+	 *
+	 * When no mime type filter is given only files can be selected. In order to
+	 * be able to select both files and folders "['*', 'httpd/unix-directory']"
+	 * should be used instead.
+	 *
+	 * @deprecated since 27.1.0
+	 *
+	 * @param {string} title dialog title
+	 * @param {function} callback which will be triggered when user presses Choose
+	 * @param {boolean} [multiselect] whether it should be possible to select multiple files
+	 * @param {string[]} [mimetypeFilter] mimetype to filter by - directories will always be included
+	 * @param {boolean} [modal] make the dialog modal
+	 * @param {string} [type] Type of file picker : Choose, copy, move, copy and move
+	 * @param {string} [path] path to the folder that the the file can be picket from
+	 * @param {Object} [options] additonal options that need to be set
+	 * @param {Function} [options.filter] filter function for advanced filtering
+	 */
+	legacyFilepicker: function(title, callback, multiselect, mimetypeFilter, modal, type, path, options) {
 		var self = this
 
 		this.filepicker.sortField = 'name'

core/src/main.js

@@ -36,6 +36,10 @@ import OC from './OC/index.js'
 import './globals.js'
 import './jquery/index.js'
 import { initCore } from './init.js'
+import { getRequestToken } from '@nextcloud/auth'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
 
 window.addEventListener('DOMContentLoaded', function() {
 	initCore()

cypress/e2e/files.cy.ts

@@ -19,19 +19,86 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+import type { User } from "@nextcloud/cypress"
+
+const startCopyMove = (file: string) => {
+	cy.get(`.files-fileList tr[data-file="${file}"`)
+		.find('.fileactions [data-action="menu"]')
+		.click()
+	cy.get('.fileActionsMenu .action-movecopy').click()
+}
+
 describe('Login with a new user and open the files app', function() {
-	before(function() {
+	let currentUser: User
+	beforeEach(function() {
 		cy.createRandomUser().then((user) => {
+			currentUser = user
 			cy.login(user)
 		})
 	})
 
-	after(function() {
-		cy.logout()
+	afterEach(function() {
+		cy.deleteUser(currentUser)
+	})
+
+	Cypress.on('uncaught:exception', (err) => {
+		// This can happen because of blink engine & skeleton animation, its not a bug just engine related.
+		if (err.message.includes('ResizeObserver loop limit exceeded')) {
+		  return false
+		}
 	})
 
 	it('See the default file welcome.txt in the files list', function() {
 		cy.visit('/apps/files')
 		cy.get('.files-fileList tr').should('contain', 'welcome.txt')
 	})
+
+	it('Copy a file in its same folder', () => {
+		cy.visit('/apps/files')
+		// When I start the move or copy operation for "welcome.txt"
+		startCopyMove('welcome.txt')
+		// And I copy to the last selected folder in the file picker
+		cy.get('.dialog__actions button').contains('Copy').click()
+		// Then I see that the file list contains a file named "welcome.txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome.txt')
+		// And I see that the file list contains a file named "welcome (copy).txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome (copy).txt')
+	})
+
+	it('copy a file twice in its same folder', () => {
+		cy.visit('/apps/files')
+		// When I start the move or copy operation for "welcome.txt"
+		startCopyMove('welcome.txt')
+		// And I copy to the last selected folder in the file picker
+		cy.get('.dialog__actions button').contains('Copy').click()
+		// When I start the move or copy operation for "welcome.txt"
+		startCopyMove('welcome.txt')
+		// And I copy to the last selected folder in the file picker
+		cy.get('.dialog__actions button').contains('Copy').click()
+		// Then I see that the file list contains a file named "welcome.txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome.txt')
+		// And I see that the file list contains a file named "welcome (copy).txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome (copy).txt')
+		// And I see that the file list contains a file named "welcome (copy 2).txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome (copy 2).txt')
+	})
+
+	it('copy a copy of a file in its same folder', () => {
+		cy.visit('/apps/files')
+		// When I start the move or copy operation for "welcome.txt"
+		startCopyMove('welcome.txt')
+		// And I copy to the last selected folder in the file picker
+		cy.get('.dialog__actions button').contains('Copy').click()
+		// When I start the move or copy operation for "welcome (copy).txt"
+		startCopyMove('welcome (copy).txt')
+		// And I copy to the last selected folder in the file picker
+		cy.get('.dialog__actions button').contains('Copy').click()
+		// Then I see that the file list contains a file named "welcome.txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome.txt')
+		// And I see that the file list contains a file named "welcome (copy).txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome (copy).txt')
+		// And I see that the file list contains a file named "welcome (copy 2).txt"
+		cy.get('.files-fileList tr').should('contain', 'welcome (copy 2).txt')
+	})
 })

cypress/e2e/theming/user-background.cy.ts

@@ -210,10 +210,17 @@ describe('User select a custom background', function() {
 	it('Select a custom background', function() {
 		cy.intercept('*/apps/theming/background/custom').as('setBackground')
 
+		cy.on('uncaught:exception', (err) => {
+			// This can happen because of blink engine & skeleton animation, its not a bug just engine related.
+			if (err.message.includes('ResizeObserver loop limit exceeded')) {
+			  return false
+			}
+		})
+
 		// Pick background
 		cy.get('[data-user-theming-background-custom]').click()
-		cy.get(`#picker-filestable tr[data-entryname="${image}"]`).click()
-		cy.get('#oc-dialog-filepicker-content ~ .oc-dialog-buttonrow button.primary').click()
+		cy.get('.file-picker__files tr').contains(image).click()
+		cy.get('.dialog__actions .button-vue--vue-primary').click()
 
 		// Wait for background to be set
 		cy.wait('@setBackground')
@@ -242,10 +249,17 @@ describe('User changes settings and reload the page', function() {
 	it('Select a custom background', function() {
 		cy.intercept('*/apps/theming/background/custom').as('setBackground')
 
+		cy.on('uncaught:exception', (err) => {
+			// This can happen because of blink engine & skeleton animation, its not a bug just engine related.
+			if (err.message.includes('ResizeObserver loop limit exceeded')) {
+			  return false
+			}
+		})
+
 		// Pick background
 		cy.get('[data-user-theming-background-custom]').click()
-		cy.get(`#picker-filestable tr[data-entryname="${image}"]`).click()
-		cy.get('#oc-dialog-filepicker-content ~ .oc-dialog-buttonrow button.primary').click()
+		cy.get('.file-picker__files tr').contains(image).click()
+		cy.get('.dialog__actions .button-vue--vue-primary').click()
 
 		// Wait for background to be set
 		cy.wait('@setBackground')