Merge pull request #19212 from nextcloud/backport/19125/bugfix/noid/tab-id

[stable18] Give the sharing tab a unique id so it also opens properly on other languages

apps/files/js/filelist.js

@@ -3658,10 +3658,9 @@
 		 */
 		registerTabView: function(tabView) {
 			console.warn('registerTabView is deprecated! It will be removed in nextcloud 20.');
-			const name = tabView.getLabel()
 			const enabled = tabView.canDisplay || undefined
-			if (name) {
-				OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab(name, tabView, enabled, true))
+			if (tabView.id) {
+				OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab(tabView.id, tabView, enabled, true))
 			}
 		},
 

apps/files/src/components/LegacyTab.vue

@@ -21,7 +21,9 @@
   -->
 
 <template>
-	<AppSidebarTab :icon="icon"
+	<AppSidebarTab
+		:id="id"
+		:icon="icon"
 		:name="name"
 		:active-tab="activeTab" />
 </template>
@@ -38,7 +40,7 @@ export default {
 			type: Object,
 			required: true,
 		},
-		name: {
+		id: {
 			type: String,
 			required: true,
 		},
@@ -52,9 +54,8 @@ export default {
 		icon() {
 			return this.component.getIcon()
 		},
-		id() {
-			// copied from AppSidebarTab
-			return this.name.toLowerCase().replace(/ /g, '-')
+		name() {
+			return this.component.getLabel()
 		},
 		order() {
 			return this.component.order

apps/files/src/models/Tab.js

@@ -24,23 +24,23 @@ export default class Tab {
 
 	#component
 	#legacy
-	#name
+	#id
 	#enabled
 
 	/**
 	 * Create a new tab instance
 	 *
-	 * @param {string} name the name of this tab
+	 * @param {string} id the unique id of this tab
 	 * @param {Object} component the vue component
 	 * @param {Function} [enabled] function that returns if the tab should be shown or not
 	 * @param {boolean} [legacy] is this a legacy tab
 	 */
-	constructor(name, component, enabled = () => true, legacy) {
+	constructor(id, component, enabled = () => true, legacy) {
 		if (typeof enabled !== 'function') {
 			throw new Error('The enabled argument should be a function')
 		}
 
-		this.#name = name
+		this.#id = id
 		this.#component = component
 		this.#enabled = enabled
 		this.#legacy = legacy === true
@@ -51,8 +51,8 @@ export default class Tab {
 
 	}
 
-	get name() {
-		return this.#name
+	get id() {
+		return this.#id
 	}
 
 	get component() {

apps/files/src/services/Sidebar.js

@@ -56,17 +56,17 @@ export default class Sidebar {
 	 * @returns {Boolean}
 	 */
 	registerTab(tab) {
-		const hasDuplicate = this.#state.tabs.findIndex(check => check.name === tab.name) > -1
+		const hasDuplicate = this.#state.tabs.findIndex(check => check.id === tab.id) > -1
 		if (!hasDuplicate) {
 			this.#state.tabs.push(tab)
 			return true
 		}
-		console.error(`An tab with the same name ${tab.name} already exists`, tab)
+		console.error(`An tab with the same id ${tab.id} already exists`, tab)
 		return false
 	}
 
 	registerSecondaryView(view) {
-		const hasDuplicate = this.#state.views.findIndex(check => check.name === view.name) > -1
+		const hasDuplicate = this.#state.views.findIndex(check => check.id === view.id) > -1
 		if (!hasDuplicate) {
 			this.#state.views.push(view)
 			return true

apps/files/src/views/Sidebar.vue

@@ -62,6 +62,7 @@
 			<component
 				:is="tabComponent(tab).is"
 				v-if="canDisplay(tab)"
+				:id="tab.id"
 				:key="tab.id"
 				:component="tabComponent(tab).component"
 				:name="tab.name"

apps/files_sharing/src/views/SharingTab.vue

@@ -21,7 +21,10 @@
   -->
 
 <template>
-	<Tab :icon="icon" :name="name" :class="{ 'icon-loading': loading }">
+	<Tab :id="id"
+		:icon="icon"
+		:name="name"
+		:class="{ 'icon-loading': loading }">
 		<!-- error message -->
 		<div v-if="error" class="emptycontent">
 			<div class="icon icon-error" />
@@ -151,7 +154,7 @@ export default {
 		 * @returns {string}
 		 */
 		id() {
-			return this.name.toLowerCase().replace(/ /g, '-')
+			return 'sharing'
 		},
 
 		/**

package-lock.json

@@ -7238,9 +7238,9 @@
       }
     },
     "nextcloud-vue": {
-      "version": "0.12.11",
-      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.12.11.tgz",
-      "integrity": "sha512-3zzgSRpWtPMqIi+DpZsh0YxACACHv+j8bWmMYyiUJVB2JjVADYpzb/lbUxQCE/A8rB3N75zIfkQOf0gd9BC9oA==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.13.0.tgz",
+      "integrity": "sha512-MKOZFv4RPSd2xjh7IV/iSZiRQceCOPPL139cEQ4aX3G6LzQfGLuNE97vn0U6vQbqlrINwHVh0k6IBaNIZ2Su2g==",
       "requires": {
         "@babel/polyfill": "^7.4.4",
         "escape-html": "^1.0.3",

package.json

@@ -56,7 +56,7 @@
     "moment-timezone": "^0.5.27",
     "nextcloud-password-confirmation": "^0.4.2",
     "nextcloud-router": "0.0.9",
-    "nextcloud-vue": "^0.12.11",
+    "nextcloud-vue": "^0.13.0",
     "nextcloud-vue-collections": "^0.7.1",
     "p-limit": "^2.2.2",
     "p-queue": "^6.2.1",