Merge pull request #34769 from nextcloud/port/vue/files_version

Port files_versions to vue

Author: artonge

apps/comments/src/comments-tab.js

@@ -20,12 +20,15 @@
  *
  */
 
+// eslint-disable-next-line node/no-missing-import, import/no-unresolved
+import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw'
+
 // Init Comments tab component
 let TabInstance = null
 const commentTab = new OCA.Files.Sidebar.Tab({
 	id: 'comments',
 	name: t('comments', 'Comments'),
-	icon: 'icon-comment',
+	iconSvg: MessageReplyText,
 
 	async mount(el, fileInfo, context) {
 		if (TabInstance) {

apps/files/src/components/SidebarTab.vue

@@ -26,6 +26,9 @@
 		:name="name"
 		:icon="icon"
 		@bottomReached="onScrollBottomReached">
+		<template #icon>
+			<slot name="icon" />
+		</template>
 		<!-- Fallback loading -->
 		<NcEmptyContent v-if="loading" icon="icon-loading" />
 
@@ -63,7 +66,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			required: false,
 		},
 
 		/**

apps/files/src/models/Tab.js

@@ -19,12 +19,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { sanitizeSVG } from '@skjnldsv/sanitize-svg'
 
 export default class Tab {
 
 	_id
 	_name
 	_icon
+	_iconSvgSanitized
 	_mount
 	_update
 	_destroy
@@ -37,19 +39,20 @@ export default class Tab {
 	 * @param {object} options destructuring object
 	 * @param {string} options.id the unique id of this tab
 	 * @param {string} options.name the translated tab name
-	 * @param {string} options.icon the vue component
+	 * @param {?string} options.icon the icon css class
+	 * @param {?string} options.iconSvg the icon in svg format
 	 * @param {Function} options.mount function to mount the tab
 	 * @param {Function} options.update function to update the tab
 	 * @param {Function} options.destroy function to destroy the tab
 	 * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
 	 * @param {Function} [options.scrollBottomReached] executed when the tab is scrolled to the bottom
 	 */
-	constructor({ id, name, icon, mount, update, destroy, enabled, scrollBottomReached } = {}) {
+	constructor({ id, name, icon, iconSvg, mount, update, destroy, enabled, scrollBottomReached } = {}) {
 		if (enabled === undefined) {
 			enabled = () => true
 		}
 		if (scrollBottomReached === undefined) {
-			scrollBottomReached = () => {}
+			scrollBottomReached = () => { }
 		}
 
 		// Sanity checks
@@ -59,8 +62,8 @@ export default class Tab {
 		if (typeof name !== 'string' || name.trim() === '') {
 			throw new Error('The name argument is not a valid string')
 		}
-		if (typeof icon !== 'string' || icon.trim() === '') {
-			throw new Error('The icon argument is not a valid string')
+		if ((typeof icon !== 'string' || icon.trim() === '') && typeof iconSvg !== 'string') {
+			throw new Error('Missing valid string for icon or iconSvg argument')
 		}
 		if (typeof mount !== 'function') {
 			throw new Error('The mount argument should be a function')
@@ -87,6 +90,13 @@ export default class Tab {
 		this._enabled = enabled
 		this._scrollBottomReached = scrollBottomReached
 
+		if (typeof iconSvg === 'string') {
+			sanitizeSVG(iconSvg)
+				.then(sanitizedSvg => {
+					this._iconSvgSanitized = sanitizedSvg
+				})
+		}
+
 	}
 
 	get id() {
@@ -101,6 +111,10 @@ export default class Tab {
 		return this._icon
 	}
 
+	get iconSvg() {
+		return this._iconSvgSanitized
+	}
+
 	get mount() {
 		return this._mount
 	}

apps/files/src/views/Sidebar.vue

@@ -72,7 +72,12 @@
 				:on-update="tab.update"
 				:on-destroy="tab.destroy"
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
-				:file-info="fileInfo" />
+				:file-info="fileInfo">
+				<template v-if="tab.iconSvg !== undefined" #icon>
+					<!-- eslint-disable-next-line vue/no-v-html -->
+					<span class="svg-icon" v-html="tab.iconSvg" />
+				</template>
+			</SidebarTab>
 		</template>
 	</NcAppSidebar>
 </template>
@@ -508,5 +513,13 @@ export default {
 		top: 0 !important;
 		height: 100% !important;
 	}
+
+	.svg-icon {
+		::v-deep svg {
+			width: 20px;
+			height: 20px;
+			fill: currentColor;
+		}
+	}
 }
 </style>

apps/files_sharing/src/files_sharing_tab.js

@@ -25,11 +25,14 @@ import Vue from 'vue'
 import VueClipboard from 'vue-clipboard2'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-import SharingTab from './views/SharingTab'
-import ShareSearch from './services/ShareSearch'
-import ExternalLinkActions from './services/ExternalLinkActions'
-import ExternalShareActions from './services/ExternalShareActions'
-import TabSections from './services/TabSections'
+import SharingTab from './views/SharingTab.vue'
+import ShareSearch from './services/ShareSearch.js'
+import ExternalLinkActions from './services/ExternalLinkActions.js'
+import ExternalShareActions from './services/ExternalShareActions.js'
+import TabSections from './services/TabSections.js'
+
+// eslint-disable-next-line node/no-missing-import, import/no-unresolved
+import ShareVariant from '@mdi/svg/svg/share-variant.svg?raw'
 
 // Init Sharing Tab Service
 if (!window.OCA.Sharing) {
@@ -53,7 +56,7 @@ window.addEventListener('DOMContentLoaded', function() {
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'sharing',
 			name: t('files_sharing', 'Sharing'),
-			icon: 'icon-share',
+			iconSvg: ShareVariant,
 
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {

apps/files_versions/src/css/versions.css

@@ -0,0 +1,70 @@
+/**
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ * @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 <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+
+import VersionTab from './views/VersionTab.vue'
+import VTooltip from 'v-tooltip'
+// eslint-disable-next-line node/no-missing-import, import/no-unresolved
+import BackupRestore from '@mdi/svg/svg/backup-restore.svg?raw'
+
+Vue.prototype.t = t
+Vue.prototype.n = n
+
+Vue.use(VTooltip)
+
+// Init Sharing tab component
+const View = Vue.extend(VersionTab)
+let TabInstance = null
+
+window.addEventListener('DOMContentLoaded', function() {
+	if (OCA.Files?.Sidebar === undefined) {
+		return
+	}
+
+	OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
+		id: 'version_vue',
+		name: t('files_versions', 'Version'),
+		iconSvg: BackupRestore,
+
+		async mount(el, fileInfo, context) {
+			if (TabInstance) {
+				TabInstance.$destroy()
+			}
+			TabInstance = new View({
+				// Better integration with vue parent component
+				parent: context,
+			})
+			// Only mount after we have all the info we need
+			await TabInstance.update(fileInfo)
+			TabInstance.$mount(el)
+		},
+		update(fileInfo) {
+			TabInstance.update(fileInfo)
+		},
+		destroy() {
+			TabInstance.$destroy()
+			TabInstance = null
+		},
+		enabled(fileInfo) {
+			return !(fileInfo?.isDirectory() ?? true)
+		},
+	}))
+})

apps/files_versions/src/files_versions_tab.js

@@ -1,8 +1,7 @@
 /**
- * Copyright (c) 2015
+ * @copyright 2022 Louis Chemineau <mlouis@chmn.me>
  *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- * @author Vincent Petry <vincent@nextcloud.com>
+ * @author Louis Chemineau <mlouis@chmn.me>
  *
  * @license AGPL-3.0-or-later
  *
@@ -18,29 +17,18 @@
  *
  * 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/>.
- *
  */
 
-(function() {
-	OCA.Versions = OCA.Versions || {}
+import { createClient, getPatcher } from 'webdav'
+import { generateRemoteUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
 
-	/**
-	 * @namespace
-	 */
-	OCA.Versions.Util = {
-		/**
-		 * Initialize the versions plugin.
-		 *
-		 * @param {OCA.Files.FileList} fileList file list to be extended
-		 */
-		attach(fileList) {
-			if (fileList.id === 'trashbin' || fileList.id === 'files.public') {
-				return
-			}
+const rootPath = 'dav'
 
-			fileList.registerTabView(new OCA.Versions.VersionsTabView('versionsTabView', { order: -10 }))
-		},
-	}
-})()
+// force our axios
+const patcher = getPatcher()
+patcher.patch('request', axios)
 
-OC.Plugins.register('OCA.Files.FileList', OCA.Versions.Util)
+// init webdav client on default dav endpoint
+const remote = generateRemoteUrl(rootPath)
+export default createClient(remote)