Merge pull request #36534 from nextcloud/feat/files2vue-trashbin

[F2V] migrate  files_trashbin to vue

Author: skjnldsv

apps/comments/src/services/DavClient.js

@@ -20,19 +20,18 @@
  *
  */
 
-import { createClient, getPatcher } from 'webdav'
-import axios from '@nextcloud/axios'
-
+import { createClient } from 'webdav'
 import { getRootPath } from '../utils/davUtils.js'
-
-// Add this so the server knows it is an request from the browser
-axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
-
-// force our axios
-const patcher = getPatcher()
-patcher.patch('request', axios)
+import { getRequestToken } from '@nextcloud/auth'
 
 // init webdav client
-const client = createClient(getRootPath())
+const client = createClient(getRootPath(), {
+	headers: {
+		// Add this so the server knows it is an request from the browser
+		'X-Requested-With': 'XMLHttpRequest',
+		// Inject user auth
+		requesttoken: getRequestToken() ?? '',
+	},
+})
 
 export default client

apps/comments/src/services/GetComments.js apps/comments/src/services/GetComments.tsapps/comments/src/services/GetComments.js renamed to apps/comments/src/services/GetComments.ts

@@ -20,26 +20,29 @@
  *
  */
 
-import { parseXML, prepareFileFromProps } from 'webdav/dist/node/tools/dav.js'
-import { processResponsePayload } from 'webdav/dist/node/response.js'
-import { decodeHtmlEntities } from '../utils/decodeHtmlEntities.js'
+import { parseXML, type DAVResult, type FileStat } from 'webdav'
+
+// https://github.com/perry-mitchell/webdav-client/issues/339
+import { processResponsePayload } from '../../../../node_modules/webdav/dist/node/response.js'
+import { prepareFileFromProps } from '../../../../node_modules/webdav/dist/node/tools/dav.js'
 import client from './DavClient.js'
 
 export const DEFAULT_LIMIT = 20
+
 /**
  * Retrieve the comments list
  *
  * @param {object} data destructuring object
  * @param {string} data.commentsType the ressource type
  * @param {number} data.ressourceId the ressource ID
  * @param {object} [options] optional options for axios
+ * @param {number} [options.offset] the pagination offset
  * @return {object[]} the comments list
  */
-export default async function({ commentsType, ressourceId }, options = {}) {
-	let response = null
+export const getComments = async function({ commentsType, ressourceId }, options: { offset: number }) {
 	const ressourcePath = ['', commentsType, ressourceId].join('/')
 
-	return await client.customRequest(ressourcePath, Object.assign({
+	const response = await client.customRequest(ressourcePath, Object.assign({
 		method: 'REPORT',
 		data: `<?xml version="1.0"?>
 			<oc:filter-comments
@@ -51,42 +54,30 @@ export default async function({ commentsType, ressourceId }, options = {}) {
 				<oc:offset>${options.offset || 0}</oc:offset>
 			</oc:filter-comments>`,
 	}, options))
-		// See example on how it's done normally
-		// https://github.com/perry-mitchell/webdav-client/blob/9de2da4a2599e06bd86c2778145b7ade39fe0b3c/source/interface/stat.js#L19
-		// Waiting for proper REPORT integration https://github.com/perry-mitchell/webdav-client/issues/207
-		.then(res => {
-			response = res
-			return res.data
-		})
-		.then(parseXML)
-		.then(xml => processMultistatus(xml, true))
-		.then(comments => processResponsePayload(response, comments, true))
-		.then(response => response.data)
+
+	const responseData = await response.text()
+	const result = await parseXML(responseData)
+	const stat = getDirectoryFiles(result, true)
+	return processResponsePayload(response, stat, true)
 }
 
-// https://github.com/perry-mitchell/webdav-client/blob/9de2da4a2599e06bd86c2778145b7ade39fe0b3c/source/interface/directoryContents.js#L32
-/**
- * @param {any} result -
- * @param {any} isDetailed -
- */
-function processMultistatus(result, isDetailed = false) {
+// https://github.com/perry-mitchell/webdav-client/blob/8d9694613c978ce7404e26a401c39a41f125f87f/source/operations/directoryContents.ts
+const getDirectoryFiles = function(
+	result: DAVResult,
+	isDetailed = false,
+): Array<FileStat> {
 	// Extract the response items (directory contents)
 	const {
 		multistatus: { response: responseItems },
 	} = result
+
+	// Map all items to a consistent output structure (results)
 	return responseItems.map(item => {
 		// Each item should contain a stat object
 		const {
 			propstat: { prop: props },
 		} = item
-		// Decode HTML entities
-		const decodedProps = {
-			...props,
-			// Decode twice to handle potentially double-encoded entities
-			// FIXME Remove this once https://github.com/nextcloud/server/issues/29306 is resolved
-			actorDisplayName: decodeHtmlEntities(props.actorDisplayName, 2),
-			message: decodeHtmlEntities(props.message, 2),
-		}
-		return prepareFileFromProps(decodedProps, decodedProps.id.toString(), isDetailed)
+
+		return prepareFileFromProps(props, props.id.toString(), isDetailed)
 	})
 }

apps/comments/src/utils/cancelableRequest.js

@@ -20,26 +20,15 @@
  *
  */
 
-import axios from '@nextcloud/axios'
-
-/**
- * Create a cancel token
- *
- * @return {import('axios').CancelTokenSource}
- */
-const createCancelToken = () => axios.CancelToken.source()
-
 /**
  * Creates a cancelable axios 'request object'.
  *
  * @param {Function} request the axios promise request
  * @return {object}
  */
 const cancelableRequest = function(request) {
-	/**
-	 * Generate an axios cancel token
-	 */
-	const cancelToken = createCancelToken()
+	const controller = new AbortController()
+	const signal = controller.signal
 
 	/**
 	 * Execute the request
@@ -48,15 +37,16 @@ const cancelableRequest = function(request) {
 	 * @param {object} [options] optional config for the request
 	 */
 	const fetch = async function(url, options) {
-		return request(
+		const response = await request(
 			url,
-			Object.assign({ cancelToken: cancelToken.token }, options)
+			Object.assign({ signal }, options)
 		)
+		return response
 	}
 
 	return {
 		request: fetch,
-		cancel: cancelToken.cancel,
+		abort: () => controller.abort(),
 	}
 }
 

apps/comments/src/views/Comments.vue

@@ -94,7 +94,7 @@ import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue
 import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
 
 import Comment from '../components/Comment.vue'
-import getComments, { DEFAULT_LIMIT } from '../services/GetComments.js'
+import { getComments, DEFAULT_LIMIT } from '../services/GetComments.ts'
 import cancelableRequest from '../utils/cancelableRequest.js'
 
 Vue.use(VTooltip)
@@ -206,14 +206,14 @@ export default {
 				this.error = ''
 
 				// Init cancellable request
-				const { request, cancel } = cancelableRequest(getComments)
-				this.cancelRequest = cancel
+				const { request, abort } = cancelableRequest(getComments)
+				this.cancelRequest = abort
 
 				// Fetch comments
-				const comments = await request({
+				const { data: comments } = await request({
 					commentsType: this.commentsType,
 					ressourceId: this.ressourceId,
-				}, { offset: this.offset })
+				}, { offset: this.offset }) || { data: [] }
 
 				this.logger.debug(`Processed ${comments.length} comments`, { comments })
 

apps/dav/src/service/CalendarService.js

@@ -20,7 +20,7 @@
  */
 import { getClient } from '../dav/client.js'
 import logger from './logger.js'
-import { parseXML } from 'webdav/dist/node/tools/dav.js'
+import { parseXML } from 'webdav'
 
 import {
 	slotsToVavailability,

apps/files/appinfo/routes.php

@@ -133,6 +133,11 @@
 				'url' => '/directEditing/{token}',
 				'verb' => 'GET'
 			],
+			[
+				'name' => 'api#serviceWorker',
+				'url' => '/preview-service-worker.js',
+				'verb' => 'GET'
+			],
 			[
 				'name' => 'view#index',
 				'url' => '/{view}',

apps/files/js/app.js

@@ -51,7 +51,6 @@
 		 * Initializes the files app
 		 */
 		initialize: function() {
-			this.navigation = OCP.Files.Navigation;
 			this.$showHiddenFiles = $('input#showhiddenfilesToggle');
 			var showHidden = $('#showHiddenFiles').val() === "1";
 			this.$showHiddenFiles.prop('checked', showHidden);
@@ -117,7 +116,9 @@
 						},
 					],
 					sorting: {
-						mode: $('#defaultFileSorting').val(),
+						mode: $('#defaultFileSorting').val() === 'basename'
+							? 'name'
+							: $('#defaultFileSorting').val(),
 						direction: $('#defaultFileSortingDirection').val()
 					},
 					config: this._filesConfig,
@@ -135,8 +136,6 @@
 			OC.Plugins.attach('OCA.Files.App', this);
 
 			this._setupEvents();
-			// trigger URL change event handlers
-			this._onPopState({ ...OC.Util.History.parseUrlQuery(), view: this.navigation?.active?.id });
 
 			this._debouncedPersistShowHiddenFilesState = _.debounce(this._persistShowHiddenFilesState, 1200);
 			this._debouncedPersistCropImagePreviewsState = _.debounce(this._persistCropImagePreviewsState, 1200);
@@ -145,6 +144,10 @@
 				OCP.WhatsNew.query(); // for Nextcloud server
 				sessionStorage.setItem('WhatsNewServerCheck', Date.now());
 			}
+
+			window._nc_event_bus.emit('files:legacy-view:initialized', this);
+
+			this.navigation = OCP.Files.Navigation
 		},
 
 		/**
@@ -225,7 +228,8 @@
 		 * @return view id
 		 */
 		getActiveView: function() {
-			return this.navigation.active
+			return this.navigation
+				&& this.navigation.active
 				&& this.navigation.active.id;
 		},
 
@@ -314,7 +318,7 @@
 				view: 'files'
 			}, params);
 
-			var lastId = this.navigation.active;
+			var lastId = this.getActiveView();
 			if (!this.navigation.views.find(view => view.id === params.view)) {
 				params.view = 'files';
 			}

apps/files/js/filelist.js

@@ -2181,8 +2181,10 @@
 
 			if (persist && OC.getCurrentUser().uid) {
 				$.post(OC.generateUrl('/apps/files/api/v1/sorting'), {
-					mode: sort,
-					direction: direction
+					// Compatibility with new files-to-vue API
+					mode: sort === 'name' ? 'basename' : sort,
+					direction: direction,
+					view: 'files'
 				});
 			}
 		},

apps/files/lib/Controller/ApiController.php

@@ -42,10 +42,12 @@
 use OCA\Files\Service\UserConfig;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Http\FileDisplayResponse;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\Response;
+use OCP\AppFramework\Http\StreamResponse;
 use OCP\Files\File;
 use OCP\Files\Folder;
 use OCP\Files\NotFoundException;
@@ -279,20 +281,29 @@ public function getStorageStats($dir = '/'): JSONResponse {
 	 *
 	 * @param string $mode
 	 * @param string $direction
-	 * @return Response
+	 * @return JSONResponse
 	 * @throws \OCP\PreConditionNotMetException
 	 */
-	public function updateFileSorting($mode, $direction) {
-		$allowedMode = ['name', 'size', 'mtime'];
+	public function updateFileSorting($mode, string $direction = 'asc', string $view = 'files'): JSONResponse {
 		$allowedDirection = ['asc', 'desc'];
-		if (!in_array($mode, $allowedMode) || !in_array($direction, $allowedDirection)) {
-			$response = new Response();
-			$response->setStatus(Http::STATUS_UNPROCESSABLE_ENTITY);
-			return $response;
+		if (!in_array($direction, $allowedDirection)) {
+			return  new JSONResponse(['message' => 'Invalid direction parameter'], Http::STATUS_UNPROCESSABLE_ENTITY);
 		}
-		$this->config->setUserValue($this->userSession->getUser()->getUID(), 'files', 'file_sorting', $mode);
-		$this->config->setUserValue($this->userSession->getUser()->getUID(), 'files', 'file_sorting_direction', $direction);
-		return new Response();
+
+		$userId = $this->userSession->getUser()->getUID();
+
+		$sortingJson = $this->config->getUserValue($userId, 'files', 'files_sorting_configs', '{}');
+		$sortingConfig = json_decode($sortingJson, true) ?: [];
+		$sortingConfig[$view] = [
+			'mode' => $mode,
+			'direction' => $direction,
+		];
+
+		$this->config->setUserValue($userId, 'files', 'files_sorting_configs', json_encode($sortingConfig));
+		return new JSONResponse([
+			'message' => 'ok',
+			'data' => $sortingConfig,
+		]);
 	}
 
 	/**
@@ -417,4 +428,22 @@ public function getNodeType($folderpath) {
 		$node = $this->userFolder->get($folderpath);
 		return $node->getType();
 	}
+	
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
+	public function serviceWorker(): StreamResponse {
+		$response = new StreamResponse(__DIR__ . '/../../../../dist/preview-service-worker.js');
+		$response->setHeaders([
+			'Content-Type' => 'application/javascript',
+			'Service-Worker-Allowed' => '/'
+		]);
+		$policy = new ContentSecurityPolicy();
+		$policy->addAllowedWorkerSrcDomain("'self'");
+		$policy->addAllowedScriptDomain("'self'");
+		$policy->addAllowedConnectDomain("'self'");
+		$response->setContentSecurityPolicy($policy);
+		return $response;
+	}
 }

apps/files/lib/Controller/ViewController.php

@@ -249,6 +249,10 @@ public function index($dir = '', $view = '', $fileid = null, $fileNotFound = fal
 		$this->initialState->provideInitialState('navigation', $navItems);
 		$this->initialState->provideInitialState('config', $this->userConfig->getConfigs());
 
+		// File sorting user config
+		$filesSortingConfig = json_decode($this->config->getUserValue($userId, 'files', 'files_sorting_configs', '{}'), true);
+		$this->initialState->provideInitialState('filesSortingConfig', $filesSortingConfig);
+
 		// render the container content for every navigation item
 		foreach ($navItems as $item) {
 			$content = '';
@@ -292,8 +296,8 @@ public function index($dir = '', $view = '', $fileid = null, $fileNotFound = fal
 		$params['ownerDisplayName'] = $storageInfo['ownerDisplayName'] ?? '';
 		$params['isPublic'] = false;
 		$params['allowShareWithLink'] = $this->shareManager->shareApiAllowLinks() ? 'yes' : 'no';
-		$params['defaultFileSorting'] = $this->config->getUserValue($userId, 'files', 'file_sorting', 'name');
-		$params['defaultFileSortingDirection'] = $this->config->getUserValue($userId, 'files', 'file_sorting_direction', 'asc');
+		$params['defaultFileSorting'] = $filesSortingConfig['files']['mode'] ?? 'basename';
+		$params['defaultFileSortingDirection'] = $filesSortingConfig['files']['direction'] ?? 'asc';
 		$params['showgridview'] = $this->config->getUserValue($userId, 'files', 'show_grid', false);
 		$showHidden = (bool) $this->config->getUserValue($userId, 'files', 'show_hidden', false);
 		$params['showHiddenFiles'] = $showHidden ? 1 : 0;