From 38c7ca0d4dec36fb10736afa7c5947939f831fa6 Mon Sep 17 00:00:00 2001 From: skjnldsv Date: Tue, 2 Apr 2024 11:28:59 +0200 Subject: [PATCH] chore: add drag and drop recursion and FilesystemAPI testing Signed-off-by: skjnldsv --- __tests__/FileSystemAPIUtils.ts | 124 +++++++++++ .../src/components/DragAndDropNotice.vue | 7 +- apps/files/src/components/FileEntryMixin.ts | 2 +- apps/files/src/services/DropService.ts | 178 +--------------- .../src/services/DropServiceUtils.spec.ts | 142 +++++++++++++ apps/files/src/services/DropServiceUtils.ts | 195 ++++++++++++++++++ cypress/e2e/files/FileSystemAPIUtils.ts | 59 ------ cypress/e2e/files/drag-n-drop.cy.ts | 2 +- jest.config.ts | 7 + package-lock.json | 64 +++--- package.json | 3 +- 11 files changed, 518 insertions(+), 265 deletions(-) create mode 100644 __tests__/FileSystemAPIUtils.ts create mode 100644 apps/files/src/services/DropServiceUtils.spec.ts create mode 100644 apps/files/src/services/DropServiceUtils.ts delete mode 100644 cypress/e2e/files/FileSystemAPIUtils.ts diff --git a/__tests__/FileSystemAPIUtils.ts b/__tests__/FileSystemAPIUtils.ts new file mode 100644 index 00000000000..efb273e9dcd --- /dev/null +++ b/__tests__/FileSystemAPIUtils.ts @@ -0,0 +1,124 @@ +import { basename } from 'node:path' +import mime from 'mime' + +class FileSystemEntry { + + private _isFile: boolean + private _fullPath: string + + constructor(isFile: boolean, fullPath: string) { + this._isFile = isFile + this._fullPath = fullPath + } + + get isFile() { + return !!this._isFile + } + + get isDirectory() { + return !this.isFile + } + + get name() { + return basename(this._fullPath) + } + +} + +export class FileSystemFileEntry extends FileSystemEntry { + + private _contents: string + private _lastModified: number + + constructor(fullPath: string, contents: string, lastModified = Date.now()) { + super(true, fullPath) + this._contents = contents + this._lastModified = lastModified + } + + file(success: (file: File) => void) { + const lastModified = this._lastModified + // Faking the mime by using the file extension + const type = mime.getType(this.name) || '' + success(new File([this._contents], this.name, { lastModified, type })) + } + +} + +export class FileSystemDirectoryEntry extends FileSystemEntry { + + private _entries: FileSystemEntry[] + + constructor(fullPath: string, entries: FileSystemEntry[]) { + super(false, fullPath) + this._entries = entries || [] + } + + createReader() { + let read = false + return { + readEntries: (success: (entries: FileSystemEntry[]) => void) => { + if (read) { + return success([]) + } + read = true + success(this._entries) + }, + } + } + +} + +/** + * This mocks the File API's File class + * It will allow us to test the Filesystem API as well as the + * File API in the same test suite. + */ +export class DataTransferItem { + + private _type: string + private _entry: FileSystemEntry + + getAsEntry?: () => FileSystemEntry + + constructor(type = '', entry: FileSystemEntry, isFileSystemAPIAvailable = true) { + this._type = type + this._entry = entry + + // Only when the Files API is available we are + // able to get the entry + if (isFileSystemAPIAvailable) { + this.getAsEntry = () => this._entry + } + } + + get kind() { + return 'file' + } + + get type() { + return this._type + } + + getAsFile(): File|null { + if (this._entry.isFile && this._entry instanceof FileSystemFileEntry) { + let file: File | null = null + this._entry.file((f) => { + file = f + }) + return file + } + + // The browser will return an empty File object if the entry is a directory + return new File([], this._entry.name, { type: '' }) + } + +} + +export const fileSystemEntryToDataTransferItem = (entry: FileSystemEntry, isFileSystemAPIAvailable = true): DataTransferItem => { + return new DataTransferItem( + entry.isFile ? 'text/plain' : 'httpd/unix-directory', + entry, + isFileSystemAPIAvailable, + ) +} diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue index d591f6ee934..c036c86fb64 100644 --- a/apps/files/src/components/DragAndDropNotice.vue +++ b/apps/files/src/components/DragAndDropNotice.vue @@ -180,7 +180,7 @@ export default defineComponent({ // If another button is pressed, cancel it. This // allows cancelling the drag with the right click. - if (event.button !== 0) { + if (event.button) { return } @@ -192,9 +192,12 @@ export default defineComponent({ // Scroll to last successful upload in current directory if terminated const lastUpload = uploads.findLast((upload) => upload.status !== UploadStatus.FAILED && !upload.file.webkitRelativePath.includes('/') - && upload.response?.headers?.['oc-fileid']) + && upload.response?.headers?.['oc-fileid'] + // Only use the last ID if it's in the current folder + && upload.source.replace(folder.source, '').split('/').length === 2) if (lastUpload !== undefined) { + logger.debug('Scrolling to last upload in current folder', { lastUpload }) this.$router.push({ ...this.$route, params: { diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts index 255f0204914..b822363885c 100644 --- a/apps/files/src/components/FileEntryMixin.ts +++ b/apps/files/src/components/FileEntryMixin.ts @@ -332,7 +332,7 @@ export default defineComponent({ // If another button is pressed, cancel it. This // allows cancelling the drag with the right click. - if (!this.canDrop || event.button !== 0) { + if (!this.canDrop || event.button) { return } diff --git a/apps/files/src/services/DropService.ts b/apps/files/src/services/DropService.ts index e5f806d9f0b..d3711741753 100644 --- a/apps/files/src/services/DropService.ts +++ b/apps/files/src/services/DropService.ts @@ -22,186 +22,21 @@ */ import type { Upload } from '@nextcloud/upload' -import type { FileStat, ResponseDataDetailed } from 'webdav' +import type { RootDirectory } from './DropServiceUtils' -import { emit } from '@nextcloud/event-bus' -import { Folder, Node, NodeStatus, davGetClient, davGetDefaultPropfind, davResultToNode, davRootPath } from '@nextcloud/files' -import { getUploader, hasConflict, openConflictPicker } from '@nextcloud/upload' +import { Folder, Node, NodeStatus, davRootPath } from '@nextcloud/files' +import { getUploader, hasConflict } from '@nextcloud/upload' import { join } from 'path' import { joinPaths } from '@nextcloud/paths' import { showError, showInfo, showSuccess, showWarning } from '@nextcloud/dialogs' import { translate as t } from '@nextcloud/l10n' import Vue from 'vue' +import { Directory, traverseTree, resolveConflict, createDirectoryIfNotExists } from './DropServiceUtils' import { handleCopyMoveNodeTo } from '../actions/moveOrCopyAction' import { MoveCopyAction } from '../actions/moveOrCopyActionUtils' import logger from '../logger.js' -/** - * This represents a Directory in the file tree - * We extend the File class to better handling uploading - * and stay as close as possible as the Filesystem API. - * This also allow us to hijack the size or lastModified - * properties to compute them dynamically. - */ -class Directory extends File { - - /* eslint-disable no-use-before-define */ - _contents: (Directory|File)[] - - constructor(name, contents: (Directory|File)[] = []) { - super([], name, { type: 'httpd/unix-directory' }) - this._contents = contents - } - - set contents(contents: (Directory|File)[]) { - this._contents = contents - } - - get contents(): (Directory|File)[] { - return this._contents - } - - get size() { - return this._computeDirectorySize(this) - } - - get lastModified() { - if (this._contents.length === 0) { - return Date.now() - } - return this._computeDirectoryMtime(this) - } - - /** - * Get the last modification time of a file tree - * This is not perfect, but will get us a pretty good approximation - * @param directory the directory to traverse - */ - _computeDirectoryMtime(directory: Directory): number { - return directory.contents.reduce((acc, file) => { - return file.lastModified > acc - // If the file is a directory, the lastModified will - // also return the results of its _computeDirectoryMtime method - // Fancy recursion, huh? - ? file.lastModified - : acc - }, 0) - } - - /** - * Get the size of a file tree - * @param directory the directory to traverse - */ - _computeDirectorySize(directory: Directory): number { - return directory.contents.reduce((acc: number, entry: Directory|File) => { - // If the file is a directory, the size will - // also return the results of its _computeDirectorySize method - // Fancy recursion, huh? - return acc + entry.size - }, 0) - } - -} - -type RootDirectory = Directory & { - name: 'root' -} - -/** - * Traverse a file tree using the Filesystem API - * @param entry the entry to traverse - */ -const traverseTree = async (entry: FileSystemEntry): Promise => { - // Handle file - if (entry.isFile) { - return new Promise((resolve, reject) => { - (entry as FileSystemFileEntry).file(resolve, reject) - }) - } - - // Handle directory - logger.debug('Handling recursive file tree', { entry: entry.name }) - const directory = entry as FileSystemDirectoryEntry - const entries = await readDirectory(directory) - const contents = (await Promise.all(entries.map(traverseTree))).flat() - return new Directory(directory.name, contents) -} - -/** - * Read a directory using Filesystem API - * @param directory the directory to read - */ -const readDirectory = (directory: FileSystemDirectoryEntry): Promise => { - const dirReader = directory.createReader() - - return new Promise((resolve, reject) => { - const entries = [] as FileSystemEntry[] - const getEntries = () => { - dirReader.readEntries((results) => { - if (results.length) { - entries.push(...results) - getEntries() - } else { - resolve(entries) - } - }, (error) => { - reject(error) - }) - } - - getEntries() - }) -} - -const createDirectoryIfNotExists = async (absolutePath: string) => { - const davClient = davGetClient() - const dirExists = await davClient.exists(absolutePath) - if (!dirExists) { - logger.debug('Directory does not exist, creating it', { absolutePath }) - await davClient.createDirectory(absolutePath, { recursive: true }) - const stat = await davClient.stat(absolutePath, { details: true, data: davGetDefaultPropfind() }) as ResponseDataDetailed - emit('files:node:created', davResultToNode(stat.data)) - } -} - -const resolveConflict = async (files: Array, destination: Folder, contents: Node[]): Promise => { - try { - // List all conflicting files - const conflicts = files.filter((file: File|Node) => { - return contents.find((node: Node) => node.basename === (file instanceof File ? file.name : file.basename)) - }).filter(Boolean) as (File|Node)[] - - // List of incoming files that are NOT in conflict - const uploads = files.filter((file: File|Node) => { - return !conflicts.includes(file) - }) - - // Let the user choose what to do with the conflicting files - const { selected, renamed } = await openConflictPicker(destination.path, conflicts, contents) - - logger.debug('Conflict resolution', { uploads, selected, renamed }) - - // If the user selected nothing, we cancel the upload - if (selected.length === 0 && renamed.length === 0) { - // User skipped - showInfo(t('files', 'Conflicts resolution skipped')) - logger.info('User skipped the conflict resolution') - return [] - } - - // Update the list of files to upload - return [...uploads, ...selected, ...renamed] as (typeof files) - } catch (error) { - console.error(error) - // User cancelled - showError(t('files', 'Upload cancelled')) - logger.error('User cancelled the upload') - } - - return [] -} - /** * This function converts a list of DataTransferItems to a file tree. * It uses the Filesystem API if available, otherwise it falls back to the File API. @@ -225,7 +60,7 @@ export const dataTransferToFileTree = async (items: DataTransferItem[]): Promise }).map((item) => { // MDN recommends to try both, as it might be renamed in the future return (item as unknown as { getAsEntry?: () => FileSystemEntry|undefined })?.getAsEntry?.() - ?? item.webkitGetAsEntry() + ?? item?.webkitGetAsEntry?.() ?? item }) as (FileSystemEntry | DataTransferItem)[] @@ -249,7 +84,8 @@ export const dataTransferToFileTree = async (items: DataTransferItem[]): Promise // we therefore cannot upload directories recursively. if (file.type === 'httpd/unix-directory' || !file.type) { if (!warned) { - showWarning(t('files', 'Your browser does not support the Filesystem API. Directories will not be uploaded.')) + logger.warn('Browser does not support Filesystem API. Directories will not be uploaded') + showWarning(t('files', 'Your browser does not support the Filesystem API. Directories will not be uploaded')) warned = true } continue diff --git a/apps/files/src/services/DropServiceUtils.spec.ts b/apps/files/src/services/DropServiceUtils.spec.ts new file mode 100644 index 00000000000..1502d83d9ce --- /dev/null +++ b/apps/files/src/services/DropServiceUtils.spec.ts @@ -0,0 +1,142 @@ +import { describe, it, expect } from '@jest/globals' + +import { FileSystemDirectoryEntry, FileSystemFileEntry, fileSystemEntryToDataTransferItem, DataTransferItem as DataTransferItemMock } from '../../../../__tests__/FileSystemAPIUtils' +import { join } from 'node:path' +import { Directory, traverseTree } from './DropServiceUtils' +import { dataTransferToFileTree } from './DropService' +import logger from '../logger' + +const dataTree = { + 'file0.txt': ['Hello, world!', 1234567890], + dir1: { + 'file1.txt': ['Hello, world!', 4567891230], + 'file2.txt': ['Hello, world!', 7891234560], + }, + dir2: { + 'file3.txt': ['Hello, world!', 1234567890], + }, +} + +// This is mocking a file tree using the FileSystem API +const buildFileSystemDirectoryEntry = (path: string, tree: any): FileSystemDirectoryEntry => { + const entries = Object.entries(tree).map(([name, contents]) => { + const fullPath = join(path, name) + if (Array.isArray(contents)) { + return new FileSystemFileEntry(fullPath, contents[0], contents[1]) + } else { + return buildFileSystemDirectoryEntry(fullPath, contents) + } + }) + return new FileSystemDirectoryEntry(path, entries) +} + +const buildDataTransferItemArray = (path: string, tree: any, isFileSystemAPIAvailable = true): DataTransferItemMock[] => { + return Object.entries(tree).map(([name, contents]) => { + const fullPath = join(path, name) + if (Array.isArray(contents)) { + const entry = new FileSystemFileEntry(fullPath, contents[0], contents[1]) + return fileSystemEntryToDataTransferItem(entry, isFileSystemAPIAvailable) + } + + const entry = buildFileSystemDirectoryEntry(fullPath, contents) + return fileSystemEntryToDataTransferItem(entry, isFileSystemAPIAvailable) + }) +} + +describe('Filesystem API traverseTree', () => { + it('Should traverse a file tree from root', async () => { + // Fake a FileSystemEntry tree + const root = buildFileSystemDirectoryEntry('root', dataTree) + const tree = await traverseTree(root as unknown as FileSystemEntry) as Directory + + expect(tree.name).toBe('root') + expect(tree).toBeInstanceOf(Directory) + expect(tree.contents).toHaveLength(3) + expect(tree.size).toBe(13 * 4) // 13 bytes from 'Hello, world!' + }) + + it('Should traverse a file tree from a subdirectory', async () => { + // Fake a FileSystemEntry tree + const dir2 = buildFileSystemDirectoryEntry('dir2', dataTree.dir2) + const tree = await traverseTree(dir2 as unknown as FileSystemEntry) as Directory + + expect(tree.name).toBe('dir2') + expect(tree).toBeInstanceOf(Directory) + expect(tree.contents).toHaveLength(1) + expect(tree.contents[0].name).toBe('file3.txt') + expect(tree.size).toBe(13) // 13 bytes from 'Hello, world!' + }) + + it('Should properly compute the last modified', async () => { + // Fake a FileSystemEntry tree + const root = buildFileSystemDirectoryEntry('root', dataTree) + const rootTree = await traverseTree(root as unknown as FileSystemEntry) as Directory + + expect(rootTree.lastModified).toBe(7891234560) + + // Fake a FileSystemEntry tree + const dir2 = buildFileSystemDirectoryEntry('root', dataTree.dir2) + const dir2Tree = await traverseTree(dir2 as unknown as FileSystemEntry) as Directory + expect(dir2Tree.lastModified).toBe(1234567890) + }) +}) + +describe('DropService dataTransferToFileTree', () => { + + beforeAll(() => { + // DataTransferItem doesn't exists in jsdom, let's mock + // a dumb one so we can check the instanceof + // @ts-expect-error jsdom doesn't have DataTransferItem + window.DataTransferItem = DataTransferItemMock + }) + + afterAll(() => { + // @ts-expect-error jsdom doesn't have DataTransferItem + delete window.DataTransferItem + }) + + it('Should return a RootDirectory with Filesystem API', async () => { + jest.spyOn(logger, 'error').mockImplementation(() => jest.fn()) + jest.spyOn(logger, 'warn').mockImplementation(() => jest.fn()) + + const dataTransferItems = buildDataTransferItemArray('root', dataTree) + const fileTree = await dataTransferToFileTree(dataTransferItems as unknown as DataTransferItem[]) + + expect(fileTree.name).toBe('root') + expect(fileTree).toBeInstanceOf(Directory) + expect(fileTree.contents).toHaveLength(3) + + // The file tree should be recursive when using the Filesystem API + expect(fileTree.contents[1]).toBeInstanceOf(Directory) + expect((fileTree.contents[1] as Directory).contents).toHaveLength(2) + expect(fileTree.contents[2]).toBeInstanceOf(Directory) + expect((fileTree.contents[2] as Directory).contents).toHaveLength(1) + + expect(logger.error).not.toBeCalled() + expect(logger.warn).not.toBeCalled() + }) + + it('Should return a RootDirectory with legacy File API ignoring recursive directories', async () => { + jest.spyOn(logger, 'error').mockImplementation(() => jest.fn()) + jest.spyOn(logger, 'warn').mockImplementation(() => jest.fn()) + + const dataTransferItems = buildDataTransferItemArray('root', dataTree, false) + + const fileTree = await dataTransferToFileTree(dataTransferItems as unknown as DataTransferItem[]) + + expect(fileTree.name).toBe('root') + expect(fileTree).toBeInstanceOf(Directory) + expect(fileTree.contents).toHaveLength(1) + + // The file tree should be recursive when using the Filesystem API + expect(fileTree.contents[0]).not.toBeInstanceOf(Directory) + expect((fileTree.contents[0].name)).toBe('file0.txt') + + expect(logger.error).not.toBeCalled() + expect(logger.warn).toHaveBeenNthCalledWith(1, 'Could not get FilesystemEntry of item, falling back to file') + expect(logger.warn).toHaveBeenNthCalledWith(2, 'Could not get FilesystemEntry of item, falling back to file') + expect(logger.warn).toHaveBeenNthCalledWith(3, 'Browser does not support Filesystem API. Directories will not be uploaded') + expect(logger.warn).toHaveBeenNthCalledWith(4, 'Could not get FilesystemEntry of item, falling back to file') + expect(logger.warn).toHaveBeenCalledTimes(4) + }) +}) diff --git a/apps/files/src/services/DropServiceUtils.ts b/apps/files/src/services/DropServiceUtils.ts new file mode 100644 index 00000000000..6fd051f9dae --- /dev/null +++ b/apps/files/src/services/DropServiceUtils.ts @@ -0,0 +1,195 @@ +/** + * @copyright Copyright (c) 2024 John Molakvoæ + * + * @author John Molakvoæ + * + * @license AGPL-3.0-or-later + * + * 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 . + * + */ +import type { FileStat, ResponseDataDetailed } from 'webdav' + +import { emit } from '@nextcloud/event-bus' +import { Folder, Node, davGetClient, davGetDefaultPropfind, davResultToNode } from '@nextcloud/files' +import { openConflictPicker } from '@nextcloud/upload' +import { showError, showInfo } from '@nextcloud/dialogs' +import { translate as t } from '@nextcloud/l10n' + +import logger from '../logger.js' + +/** + * This represents a Directory in the file tree + * We extend the File class to better handling uploading + * and stay as close as possible as the Filesystem API. + * This also allow us to hijack the size or lastModified + * properties to compute them dynamically. + */ +export class Directory extends File { + + /* eslint-disable no-use-before-define */ + _contents: (Directory|File)[] + + constructor(name, contents: (Directory|File)[] = []) { + super([], name, { type: 'httpd/unix-directory' }) + this._contents = contents + } + + set contents(contents: (Directory|File)[]) { + this._contents = contents + } + + get contents(): (Directory|File)[] { + return this._contents + } + + get size() { + return this._computeDirectorySize(this) + } + + get lastModified() { + if (this._contents.length === 0) { + return Date.now() + } + return this._computeDirectoryMtime(this) + } + + /** + * Get the last modification time of a file tree + * This is not perfect, but will get us a pretty good approximation + * @param directory the directory to traverse + */ + _computeDirectoryMtime(directory: Directory): number { + return directory.contents.reduce((acc, file) => { + return file.lastModified > acc + // If the file is a directory, the lastModified will + // also return the results of its _computeDirectoryMtime method + // Fancy recursion, huh? + ? file.lastModified + : acc + }, 0) + } + + /** + * Get the size of a file tree + * @param directory the directory to traverse + */ + _computeDirectorySize(directory: Directory): number { + return directory.contents.reduce((acc: number, entry: Directory|File) => { + // If the file is a directory, the size will + // also return the results of its _computeDirectorySize method + // Fancy recursion, huh? + return acc + entry.size + }, 0) + } + +} + +export type RootDirectory = Directory & { + name: 'root' +} + +/** + * Traverse a file tree using the Filesystem API + * @param entry the entry to traverse + */ +export const traverseTree = async (entry: FileSystemEntry): Promise => { + // Handle file + if (entry.isFile) { + return new Promise((resolve, reject) => { + (entry as FileSystemFileEntry).file(resolve, reject) + }) + } + + // Handle directory + logger.debug('Handling recursive file tree', { entry: entry.name }) + const directory = entry as FileSystemDirectoryEntry + const entries = await readDirectory(directory) + const contents = (await Promise.all(entries.map(traverseTree))).flat() + return new Directory(directory.name, contents) +} + +/** + * Read a directory using Filesystem API + * @param directory the directory to read + */ +const readDirectory = (directory: FileSystemDirectoryEntry): Promise => { + const dirReader = directory.createReader() + + return new Promise((resolve, reject) => { + const entries = [] as FileSystemEntry[] + const getEntries = () => { + dirReader.readEntries((results) => { + if (results.length) { + entries.push(...results) + getEntries() + } else { + resolve(entries) + } + }, (error) => { + reject(error) + }) + } + + getEntries() + }) +} + +export const createDirectoryIfNotExists = async (absolutePath: string) => { + const davClient = davGetClient() + const dirExists = await davClient.exists(absolutePath) + if (!dirExists) { + logger.debug('Directory does not exist, creating it', { absolutePath }) + await davClient.createDirectory(absolutePath, { recursive: true }) + const stat = await davClient.stat(absolutePath, { details: true, data: davGetDefaultPropfind() }) as ResponseDataDetailed + emit('files:node:created', davResultToNode(stat.data)) + } +} + +export const resolveConflict = async (files: Array, destination: Folder, contents: Node[]): Promise => { + try { + // List all conflicting files + const conflicts = files.filter((file: File|Node) => { + return contents.find((node: Node) => node.basename === (file instanceof File ? file.name : file.basename)) + }).filter(Boolean) as (File|Node)[] + + // List of incoming files that are NOT in conflict + const uploads = files.filter((file: File|Node) => { + return !conflicts.includes(file) + }) + + // Let the user choose what to do with the conflicting files + const { selected, renamed } = await openConflictPicker(destination.path, conflicts, contents) + + logger.debug('Conflict resolution', { uploads, selected, renamed }) + + // If the user selected nothing, we cancel the upload + if (selected.length === 0 && renamed.length === 0) { + // User skipped + showInfo(t('files', 'Conflicts resolution skipped')) + logger.info('User skipped the conflict resolution') + return [] + } + + // Update the list of files to upload + return [...uploads, ...selected, ...renamed] as (typeof files) + } catch (error) { + console.error(error) + // User cancelled + showError(t('files', 'Upload cancelled')) + logger.error('User cancelled the upload') + } + + return [] +} diff --git a/cypress/e2e/files/FileSystemAPIUtils.ts b/cypress/e2e/files/FileSystemAPIUtils.ts deleted file mode 100644 index 995aef2ced5..00000000000 --- a/cypress/e2e/files/FileSystemAPIUtils.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { basename } from 'node:path' - -class FileSystemEntry { - - private _isFile: boolean - private _fullPath: string - - constructor(isFile: boolean, fullPath: string) { - this._isFile = isFile - this._fullPath = fullPath - } - - get isFile() { - return !!this._isFile - } - - get isDirectory() { - return !this.isFile - } - - get name() { - return basename(this._fullPath) - } - -} - -export class FileSystemFileEntry extends FileSystemEntry { - - private _contents: string - - constructor(fullPath: string, contents: string) { - super(true, fullPath) - this._contents = contents - } - - file(success: (file: File) => void) { - success(new File([this._contents], this.name)) - } - -} - -export class FileSystemDirectoryEntry extends FileSystemEntry { - - private _entries: FileSystemEntry[] - - constructor(fullPath: string, entries: FileSystemEntry[]) { - super(false, fullPath) - this._entries = entries || [] - } - - createReader() { - return { - readEntries: (success: (entries: FileSystemEntry[]) => void) => { - success(this._entries) - }, - } - } - -} diff --git a/cypress/e2e/files/drag-n-drop.cy.ts b/cypress/e2e/files/drag-n-drop.cy.ts index 4474f5b634c..86a3bcfb571 100644 --- a/cypress/e2e/files/drag-n-drop.cy.ts +++ b/cypress/e2e/files/drag-n-drop.cy.ts @@ -1,6 +1,6 @@ import { getRowForFile } from './FilesUtils.ts' -describe('files: Drag and Drop legacy', { testIsolation: true }, () => { +describe('files: Drag and Drop', { testIsolation: true }, () => { beforeEach(() => { cy.createRandomUser().then((user) => { cy.login(user) diff --git a/jest.config.ts b/jest.config.ts index f18589bce51..68dd68a36ce 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -26,18 +26,25 @@ const ignorePatterns = [ '@buttercup/fetch', '@juliushaertl', '@mdi/svg', + '@nextcloud/upload', '@nextcloud/vue', 'ansi-regex', 'camelcase', 'char-regex', 'hot-patcher', 'is-svg', + 'mime', + 'p-cancelable', + 'p-limit', + 'p-queue', + 'p-timeout', 'splitpanes', 'string-length', 'strip-ansi', 'tributejs', 'vue-material-design-icons', 'webdav', + 'yocto-queue', ] const config: Config = { diff --git a/package-lock.json b/package-lock.json index b731151f765..f5dab77b351 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "@nextcloud/paths": "^2.1.0", "@nextcloud/router": "^3.0.0", "@nextcloud/sharing": "^0.1.0", - "@nextcloud/upload": "^1.0.5", + "@nextcloud/upload": "^1.1.0", "@nextcloud/vue": "^8.11.1", "@skjnldsv/sanitize-svg": "^1.0.2", "@vueuse/components": "^10.7.2", @@ -142,6 +142,7 @@ "karma-jasmine-sinon": "^1.0.4", "karma-spec-reporter": "^0.0.36", "karma-viewport": "^1.0.9", + "mime": "^4.0.1", "puppeteer": "^22.5.0", "raw-loader": "^4.0.2", "regextras": "^0.8.0", @@ -4528,19 +4529,20 @@ } }, "node_modules/@nextcloud/upload": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@nextcloud/upload/-/upload-1.0.5.tgz", - "integrity": "sha512-QMojKvnBnxmxiKaFTpFIugaGsVQtjCvOrLdKzpa5IoNhouupI0vrE77aEXZuoOrhUHga9unN1YSA2hY0n8WrOQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@nextcloud/upload/-/upload-1.1.0.tgz", + "integrity": "sha512-SRBNKrPWZNMLwCkIiDfSvcDlbGisaliAbUDW0p7D0s4nA1zAG8Xfew87NQxmxNeqVeAM7IP8O83jd5MSPjKYDw==", "dependencies": { "@nextcloud/auth": "^2.2.1", "@nextcloud/axios": "^2.4.0", - "@nextcloud/dialogs": "^5.0.0-beta.6", - "@nextcloud/files": "^3.0.0", + "@nextcloud/dialogs": "^5.2.0", + "@nextcloud/files": "^3.1.1", "@nextcloud/l10n": "^2.2.0", "@nextcloud/logger": "^2.7.0", + "@nextcloud/moment": "^1.3.1", "@nextcloud/paths": "^2.1.0", - "@nextcloud/router": "^2.2.0", - "axios": "^1.6.2", + "@nextcloud/router": "^3.0.0", + "axios": "^1.6.8", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", "p-cancelable": "^4.0.1", @@ -4557,19 +4559,6 @@ "vue": "^2.7.16" } }, - "node_modules/@nextcloud/upload/node_modules/@nextcloud/router": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.2.0.tgz", - "integrity": "sha512-M4AVGnB5tt3MYO5RpH/R2jq7z/nW05AmRhk4Lh68krVwRIYGo8pgNikKrPGogHd2Q3UgzF5Py1drHz3uuV99bQ==", - "dependencies": { - "@nextcloud/typings": "^1.7.0", - "core-js": "^3.6.4" - }, - "engines": { - "node": "^20.0.0", - "npm": "^9.0.0" - } - }, "node_modules/@nextcloud/upload/node_modules/eventemitter3": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", @@ -7554,11 +7543,11 @@ } }, "node_modules/axios": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", - "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", "dependencies": { - "follow-redirects": "^1.15.4", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -18470,6 +18459,18 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/karma/node_modules/mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/karma/node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -20127,15 +20128,18 @@ "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" }, "node_modules/mime": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", - "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz", + "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==", "dev": true, + "funding": [ + "https://github.com/sponsors/broofa" + ], "bin": { - "mime": "cli.js" + "mime": "bin/cli.js" }, "engines": { - "node": ">=4.0.0" + "node": ">=16" } }, "node_modules/mime-db": { diff --git a/package.json b/package.json index 5cd98d02b98..591c7759658 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@nextcloud/paths": "^2.1.0", "@nextcloud/router": "^3.0.0", "@nextcloud/sharing": "^0.1.0", - "@nextcloud/upload": "^1.0.5", + "@nextcloud/upload": "^1.1.0", "@nextcloud/vue": "^8.11.1", "@skjnldsv/sanitize-svg": "^1.0.2", "@vueuse/components": "^10.7.2", @@ -169,6 +169,7 @@ "karma-jasmine-sinon": "^1.0.4", "karma-spec-reporter": "^0.0.36", "karma-viewport": "^1.0.9", + "mime": "^4.0.1", "puppeteer": "^22.5.0", "raw-loader": "^4.0.2", "regextras": "^0.8.0",