Merge pull request #28835 from nextcloud/feat/ExternalShareActions-API

apps/files_sharing/js/dist/collaboration.js

@@ -1,4 +1,4 @@
-!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/js/",t(t.s=155)}({155:function(e,n,r){
+!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/js/",t(t.s=154)}({154:function(e,n,r){
 /**
  * @copyright Copyright (c) 2016 John Molakvoæ <skjnldsv@protonmail.com>
  *

apps/files_sharing/js/dist/main.js

@@ -1,4 +1,4 @@
-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/js/",r(r.s=503)}({503:function(e,t){
+!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/js/",r(r.s=500)}({500:function(e,t){
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *

apps/files_sharing/src/components/ExternalShareAction.vue

@@ -0,0 +1,63 @@
+<!--
+  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<Component :is="data.is"
+		v-bind="data"
+		v-on="action.handlers">
+		{{ data.text }}
+	</Component>
+</template>
+
+<script>
+import Share from '../models/Share'
+
+export default {
+	name: 'ExternalShareAction',
+
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+		action: {
+			type: Object,
+			default: () => ({}),
+		},
+		fileInfo: {
+			type: Object,
+			default: () => {},
+			required: true,
+		},
+		share: {
+			type: Share,
+			default: null,
+		},
+	},
+
+	computed: {
+		data() {
+			return this.action.data(this)
+		},
+	},
+}
+</script>

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -285,8 +285,16 @@
 						@submit="onNoteSubmit" />
 				</template>
 
-				<!-- external sharing via url (social...) -->
-				<ActionLink v-for="({icon, url, name}, index) in externalActions"
+				<!-- external actions -->
+				<ExternalShareAction v-for="action in externalLinkActions"
+					:id="action.id"
+					:key="action.id"
+					:action="action"
+					:file-info="fileInfo"
+					:share="share" />
+
+				<!-- external legacy sharing via url (social...) -->
+				<ActionLink v-for="({icon, url, name}, index) in externalLegacyLinkActions"
 					:key="index"
 					:href="url(shareLink)"
 					:icon="icon"
@@ -328,15 +336,16 @@ import Vue from 'vue'
 
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionRadio from '@nextcloud/vue/dist/Components/ActionRadio'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
+import ActionRadio from '@nextcloud/vue/dist/Components/ActionRadio'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import ActionTextEditable from '@nextcloud/vue/dist/Components/ActionTextEditable'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
+import ExternalShareAction from './ExternalShareAction'
 import GeneratePassword from '../utils/GeneratePassword'
 import Share from '../models/Share'
 import SharesMixin from '../mixins/SharesMixin'
@@ -354,6 +363,7 @@ export default {
 		ActionText,
 		ActionTextEditable,
 		Avatar,
+		ExternalShareAction,
 	},
 
 	directives: {
@@ -381,7 +391,8 @@ export default {
 			publicUploadRValue: OC.PERMISSION_READ,
 			publicUploadWValue: OC.PERMISSION_CREATE,
 
-			ExternalLinkActions: OCA.Sharing.ExternalLinkActions.state,
+			ExternalLegacyLinkActions: OCA.Sharing.ExternalLinkActions.state,
+			ExternalShareActions: OCA.Sharing.ExternalShareActions.state,
 		}
 	},
 
@@ -621,11 +632,23 @@ export default {
 		},
 
 		/**
-		 * External aditionnal actions for the menu
+		 * External additionnai actions for the menu
+		 * @deprecated use OCA.Sharing.ExternalShareActions
 		 * @returns {Array}
 		 */
-		externalActions() {
-			return this.ExternalLinkActions.actions
+		externalLegacyLinkActions() {
+			return this.ExternalLegacyLinkActions.actions
+		},
+
+		/**
+		 * Additional actions for the menu
+		 * @returns {Array}
+		 */
+		externalLinkActions() {
+			// filter only the registered actions for said link
+			return this.ExternalShareActions.actions
+				.filter(action => action.shareType.includes(OC.Share.SHARE_TYPE_LINK)
+					|| action.shareType.includes(OC.Share.SHARE_TYPE_EMAIL))
 		},
 
 		isPasswordPolicyEnabled() {

apps/files_sharing/src/files_sharing_tab.js

@@ -28,6 +28,7 @@ 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'
 
 // Init Sharing Tab Service
@@ -36,6 +37,7 @@ if (!window.OCA.Sharing) {
 }
 Object.assign(window.OCA.Sharing, { ShareSearch: new ShareSearch() })
 Object.assign(window.OCA.Sharing, { ExternalLinkActions: new ExternalLinkActions() })
+Object.assign(window.OCA.Sharing, { ExternalShareActions: new ExternalShareActions() })
 Object.assign(window.OCA.Sharing, { ShareTabSections: new TabSections() })
 
 Vue.prototype.t = t

apps/files_sharing/src/services/ExternalLinkActions.js

@@ -52,6 +52,8 @@ export default class ExternalLinkActions {
 	 * @returns {boolean}
 	 */
 	registerAction(action) {
+		console.warn('OCA.Sharing.ExternalLinkActions is deprecated, use OCA.Sharing.ExternalShareAction instead')
+
 		if (typeof action === 'object' && action.icon && action.name && action.url) {
 			this._state.actions.push(action)
 			return true

apps/files_sharing/src/services/ExternalShareActions.js

@@ -0,0 +1,80 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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/>.
+ *
+ */
+
+export default class ExternalShareActions {
+
+	_state;
+
+	constructor() {
+		// init empty state
+		this._state = {}
+
+		// init default values
+		this._state.actions = []
+		console.debug('OCA.Sharing.ExternalShareActions initialized')
+	}
+
+	/**
+	 * Get the state
+	 *
+	 * @readonly
+	 * @memberof ExternalLinkActions
+	 * @returns {Object} the data state
+	 */
+	get state() {
+		return this._state
+	}
+
+	/**
+	 * Register a new option/entry for the a given share type
+	 *
+	 * @param {Object} action new action component to register
+	 * @param {string} action.id unique action id
+	 * @param {Function} action.data data to bind the component to
+	 * @param {Array} action.shareType list of OC.Share.SHARE_XXX to be mounted on
+	 * @param {Object} action.handlers list of listeners
+	 * @returns {boolean}
+	 */
+	registerAction(action) {
+		// Validate action
+		if (typeof action !== 'object'
+			|| typeof action.id !== 'string'
+			|| typeof action.data !== 'function' // () => {disabled: true}
+			|| !Array.isArray(action.shareType) // [OC.Share.SHARE_TYPE_LINK, ...]
+			|| typeof action.handlers !== 'object' // {click: () => {}, ...}
+			|| !Object.values(action.handlers).every(handler => typeof handler === 'function')) {
+			console.error('Invalid action provided', action)
+			return false
+		}
+
+		// Check duplicates
+		const hasDuplicate = this._state.actions.findIndex(check => check.id === action.id) > -1
+		if (hasDuplicate) {
+			console.error(`An action with the same id ${action.id} already exists`, action)
+			return false
+		}
+
+		this._state.actions.push(action)
+		return true
+	}
+
+}

package-lock.json

@@ -23,7 +23,7 @@
         "@nextcloud/password-confirmation": "^1.0.1",
         "@nextcloud/paths": "^2.0.0",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue": "^4.1.0",
+        "@nextcloud/vue": "^4.1.1",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "autosize": "^5.0.1",
         "backbone": "^1.4.0",
@@ -6882,9 +6882,9 @@
       "dev": true
     },
     "node_modules/@nextcloud/calendar-js": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/calendar-js/-/calendar-js-1.1.1.tgz",
-      "integrity": "sha512-Uk0vuLBGkPgqLNLn+ut43MlSNu1FFMT5ke+A/yQXfdhNpriFEVOlQdj9OrJzr9KGZF7snWJvTqJIjOGvfoV6zg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/calendar-js/-/calendar-js-2.0.0.tgz",
+      "integrity": "sha512-wGDDWjnXaMTJVxK2B31S0BAstN5759fptuddWRVZcFU2gEFXZyiv0iFgcbCOdAni+/Mz9rBbdV8h+TYWbst6Qg==",
       "dependencies": {
         "ical.js": "^1.4.0",
         "uuid": "^8.3.2"
@@ -7100,14 +7100,14 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-4.1.0.tgz",
-      "integrity": "sha512-ntnEra0VmX7WRbgwoD7wlTfReuEof0N5tFIj5phkW08heNQFgIHUUHwuIxx6jt7pFTDNz1gF+Z4xTNhiGA+cEw==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-5PxJaI66ANdMaRcFKORFdU5g5Bcsl7YXgR4oBUY/ITQi0kmrSNxXzTe3VTl8q2UyS46gmTbDMPa6yx1ydh96Rg==",
       "dependencies": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
         "@nextcloud/browser-storage": "^0.1.1",
-        "@nextcloud/calendar-js": "^1.0.0",
+        "@nextcloud/calendar-js": "^2.0.0",
         "@nextcloud/capabilities": "^1.0.2",
         "@nextcloud/dialogs": "^3.0.0",
         "@nextcloud/event-bus": "^2.0.0",
@@ -7175,9 +7175,9 @@
       }
     },
     "node_modules/@nextcloud/vue-dashboard/node_modules/@nextcloud/vue": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.1.tgz",
-      "integrity": "sha512-DdnnEFxt5FuZOtAD1x7hSDFVQF9KVVgQtFKwzs2ySNbyIx8rfRfc6noC7JbMAPR1LyPegCst0bVwQIfqsASGog==",
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.2.tgz",
+      "integrity": "sha512-/8r2fE8V7nw9erjm06x3nCALC+6o9q2CzNSL0eDRfsKXCVySFoZ4bYX+zziQUStienisKDRXRhxh7RUAwkS2+w==",
       "dependencies": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
@@ -7212,9 +7212,9 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/ansi-regex": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-      "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "engines": {
         "node": ">=12"
       },
@@ -7231,12 +7231,12 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/string-length": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-      "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
       "dependencies": {
         "char-regex": "^2.0.0",
-        "strip-ansi": "^7.0.0"
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
         "node": ">=12.20"
@@ -7246,11 +7246,11 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/strip-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-      "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
       "dependencies": {
-        "ansi-regex": "^6.0.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
         "node": ">=12"
@@ -18415,9 +18415,9 @@
       }
     },
     "node_modules/nextcloud-vue-collections/node_modules/@nextcloud/vue": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.1.tgz",
-      "integrity": "sha512-DdnnEFxt5FuZOtAD1x7hSDFVQF9KVVgQtFKwzs2ySNbyIx8rfRfc6noC7JbMAPR1LyPegCst0bVwQIfqsASGog==",
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.2.tgz",
+      "integrity": "sha512-/8r2fE8V7nw9erjm06x3nCALC+6o9q2CzNSL0eDRfsKXCVySFoZ4bYX+zziQUStienisKDRXRhxh7RUAwkS2+w==",
       "dependencies": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
@@ -29128,9 +29128,9 @@
       "dev": true
     },
     "@nextcloud/calendar-js": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/calendar-js/-/calendar-js-1.1.1.tgz",
-      "integrity": "sha512-Uk0vuLBGkPgqLNLn+ut43MlSNu1FFMT5ke+A/yQXfdhNpriFEVOlQdj9OrJzr9KGZF7snWJvTqJIjOGvfoV6zg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/calendar-js/-/calendar-js-2.0.0.tgz",
+      "integrity": "sha512-wGDDWjnXaMTJVxK2B31S0BAstN5759fptuddWRVZcFU2gEFXZyiv0iFgcbCOdAni+/Mz9rBbdV8h+TYWbst6Qg==",
       "requires": {
         "ical.js": "^1.4.0",
         "uuid": "^8.3.2"
@@ -29317,14 +29317,14 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-4.1.0.tgz",
-      "integrity": "sha512-ntnEra0VmX7WRbgwoD7wlTfReuEof0N5tFIj5phkW08heNQFgIHUUHwuIxx6jt7pFTDNz1gF+Z4xTNhiGA+cEw==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-5PxJaI66ANdMaRcFKORFdU5g5Bcsl7YXgR4oBUY/ITQi0kmrSNxXzTe3VTl8q2UyS46gmTbDMPa6yx1ydh96Rg==",
       "requires": {
         "@nextcloud/auth": "^1.2.3",
         "@nextcloud/axios": "^1.3.2",
         "@nextcloud/browser-storage": "^0.1.1",
-        "@nextcloud/calendar-js": "^1.0.0",
+        "@nextcloud/calendar-js": "^2.0.0",
         "@nextcloud/capabilities": "^1.0.2",
         "@nextcloud/dialogs": "^3.0.0",
         "@nextcloud/event-bus": "^2.0.0",
@@ -29353,9 +29353,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-          "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ=="
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
         "char-regex": {
           "version": "2.0.0",
@@ -29363,20 +29363,20 @@
           "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA=="
         },
         "string-length": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-          "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+          "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
           "requires": {
             "char-regex": "^2.0.0",
-            "strip-ansi": "^7.0.0"
+            "strip-ansi": "^7.0.1"
           }
         },
         "strip-ansi": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-          "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
           "requires": {
-            "ansi-regex": "^6.0.0"
+            "ansi-regex": "^6.0.1"
           }
         }
       }
@@ -29410,9 +29410,9 @@
           }
         },
         "@nextcloud/vue": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.1.tgz",
-          "integrity": "sha512-DdnnEFxt5FuZOtAD1x7hSDFVQF9KVVgQtFKwzs2ySNbyIx8rfRfc6noC7JbMAPR1LyPegCst0bVwQIfqsASGog==",
+          "version": "3.10.2",
+          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.2.tgz",
+          "integrity": "sha512-/8r2fE8V7nw9erjm06x3nCALC+6o9q2CzNSL0eDRfsKXCVySFoZ4bYX+zziQUStienisKDRXRhxh7RUAwkS2+w==",
           "requires": {
             "@nextcloud/auth": "^1.2.3",
             "@nextcloud/axios": "^1.3.2",
@@ -38142,9 +38142,9 @@
           }
         },
         "@nextcloud/vue": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.1.tgz",
-          "integrity": "sha512-DdnnEFxt5FuZOtAD1x7hSDFVQF9KVVgQtFKwzs2ySNbyIx8rfRfc6noC7JbMAPR1LyPegCst0bVwQIfqsASGog==",
+          "version": "3.10.2",
+          "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-3.10.2.tgz",
+          "integrity": "sha512-/8r2fE8V7nw9erjm06x3nCALC+6o9q2CzNSL0eDRfsKXCVySFoZ4bYX+zziQUStienisKDRXRhxh7RUAwkS2+w==",
           "requires": {
             "@nextcloud/auth": "^1.2.3",
             "@nextcloud/axios": "^1.3.2",

package.json

@@ -39,7 +39,7 @@
     "@nextcloud/password-confirmation": "^1.0.1",
     "@nextcloud/paths": "^2.0.0",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^4.1.0",
+    "@nextcloud/vue": "^4.1.1",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "autosize": "^5.0.1",
     "backbone": "^1.4.0",

tests/acceptance/features/bootstrap/AppSettingsContext.php

@@ -39,7 +39,7 @@ class AppSettingsContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function appSettingsContent() {
-		return Locator::forThe()->id("app-settings-content")->
+		return Locator::forThe()->xpath("//div[@id = 'app-settings-content' or  @id = 'app-settings__content']")->
 			descendantOf(self::appSettings())->
 			describedAs("App settings");
 	}
@@ -48,7 +48,7 @@ class AppSettingsContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function appSettingsOpenButton() {
-		return Locator::forThe()->xpath("//div[@id = 'app-settings-header']/button")->
+		return Locator::forThe()->xpath("//div[@id = 'app-settings-header' or  @id = 'app-settings__header']/button")->
 			descendantOf(self::appSettings())->
 			describedAs("The button to open the app settings");
 	}

tests/acceptance/features/bootstrap/FilesAppContext.php

@@ -89,7 +89,7 @@ class FilesAppContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function closeDetailsViewButton() {
-		return Locator::forThe()->css(".icon-close")->
+		return Locator::forThe()->css(".app-sidebar__close")->
 				descendantOf(self::detailsView())->
 				describedAs("Close details view in Files app");
 	}