restore acl ui in sharing tab

package.json

@@ -59,22 +59,21 @@
     "@nextcloud/auth": "^2.2.1",
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/event-bus": "^3.1.0",
-    "@nextcloud/files": "^3.0.0",
+    "@nextcloud/files": "^3.1.0",
     "@nextcloud/initial-state": "^2.1.0",
-    "@nextcloud/l10n": "^2.1.0",
-    "@nextcloud/router": "^2.1.2",
-    "@nextcloud/vue": "^7.12.6",
+    "@nextcloud/l10n": "^2.2.0",
+    "@nextcloud/router": "^2.2.0",
+    "@nextcloud/vue": "^8.4.0",
     "nextcloud-server": "^0.15.10",
     "oc-react-components": "^0.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flip-move": "^3.0.5",
     "react-select": "^5.8.0",
-    "vue": "^2.7.14",
-    "vue-click-outside": "^1.1.0",
+    "vue": "^2.7.16",
     "vue-material-design-icons": "^5.2.0",
     "vue-template-compiler": "^2.7.14",
     "webdav": "^5.3.0",
     "whatwg-fetch": "^3.6.20"
   }
-}
+}

src/SharingSidebarApp.js

@@ -23,15 +23,13 @@
 import Vue from 'vue'
 import SharingSidebarView from './components/SharingSidebarView.vue'
 import { Tooltip } from '@nextcloud/vue'
-import ClickOutside from 'vue-click-outside'
 
 Vue.prototype.t = t
 Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.use(Tooltip)
-Vue.directive('ClickOutside', ClickOutside)
 
 const View = Vue.extend(SharingSidebarView)
 

src/client.js

@@ -23,6 +23,9 @@
 import ACL_PROPERTIES from './model/Properties.js'
 import Rule from './model/Rule.js'
 
+/**
+ * @member {OC.Files.Client} client
+ */
 let client
 
 const XML_CHAR_MAP = {
@@ -137,53 +140,60 @@ const parseAclList = (acls) => {
 	return list
 }
 
-/** @type OC.Plugin */
-const FilesPlugin = {
-	attach(fileList) {
-		client = fileList.filesClient
-		client.addFileInfoParser((response) => {
-			const data = {}
-			const props = response.propStat[0].properties
-			const groupFolderId = props[ACL_PROPERTIES.GROUP_FOLDER_ID]
-			if (typeof groupFolderId !== 'undefined') {
-				data.groupFolderId = groupFolderId
-			}
-			const aclEnabled = props[ACL_PROPERTIES.PROPERTY_ACL_ENABLED]
-			if (typeof aclEnabled !== 'undefined') {
-				data.aclEnabled = !!aclEnabled
-			}
+/**
+ *
+ * @param {OC.Files.Client} filesClient files dav client
+ */
+export function initFilesClient(filesClient) {
+	client = filesClient
+	patchFilesClient(filesClient)
+}
 
-			const aclCanManage = props[ACL_PROPERTIES.PROPERTY_ACL_CAN_MANAGE]
-			if (typeof aclCanManage !== 'undefined') {
-				data.aclCanManage = !!aclCanManage
-			}
+/**
+ *
+ * @param {OC.Files.Client} client files dav client
+ */
+function patchFilesClient(client) {
+	client.addFileInfoParser((response) => {
+		const data = {}
+		const props = response.propStat[0].properties
+		const groupFolderId = props[ACL_PROPERTIES.GROUP_FOLDER_ID]
+		if (typeof groupFolderId !== 'undefined') {
+			data.groupFolderId = groupFolderId
+		}
+		const aclEnabled = props[ACL_PROPERTIES.PROPERTY_ACL_ENABLED]
+		if (typeof aclEnabled !== 'undefined') {
+			data.aclEnabled = !!aclEnabled
+		}
 
-			const acls = props[ACL_PROPERTIES.PROPERTY_ACL_LIST] || []
-			const inheritedAcls = props[ACL_PROPERTIES.PROPERTY_INHERITED_ACL_LIST] || []
+		const aclCanManage = props[ACL_PROPERTIES.PROPERTY_ACL_CAN_MANAGE]
+		if (typeof aclCanManage !== 'undefined') {
+			data.aclCanManage = !!aclCanManage
+		}
 
-			data.acl = parseAclList(acls)
-			data.inheritedAcls = parseAclList(inheritedAcls)
+		const acls = props[ACL_PROPERTIES.PROPERTY_ACL_LIST] || []
+		const inheritedAcls = props[ACL_PROPERTIES.PROPERTY_INHERITED_ACL_LIST] || []
 
-			data.acl.map((acl) => {
-				const inheritedAcl = data.inheritedAcls.find((inheritedAclRule) => inheritedAclRule.mappingType === acl.mappingType && inheritedAclRule.mappingId === acl.mappingId)
-				if (inheritedAcl) {
-					acl.permissions = (acl.permissions & acl.mask) | (inheritedAcl.permissions & ~acl.mask)
-				}
-				return acl
-			})
-			return data
+		data.acl = parseAclList(acls)
+		data.inheritedAcls = parseAclList(inheritedAcls)
+
+		data.acl.map((acl) => {
+			const inheritedAcl = data.inheritedAcls.find((inheritedAclRule) => inheritedAclRule.mappingType === acl.mappingType && inheritedAclRule.mappingId === acl.mappingId)
+			if (inheritedAcl) {
+				acl.permissions = (acl.permissions & acl.mask) | (inheritedAcl.permissions & ~acl.mask)
+			}
+			return acl
 		})
+		return data
+	})
 
-		patchClientForNestedPropPatch(client)
-	},
-};
+	patchClientForNestedPropPatch(client)
+}
 
 (function(OC) {
 	Object.assign(OC.Files.Client, ACL_PROPERTIES)
 })(window.OC)
 
-OC.Plugins.register('OCA.Files.FileList', FilesPlugin)
-
 class AclDavService {
 
 	propFind(model) {
@@ -212,7 +222,7 @@ class AclDavService {
 						fileInfo.inheritedAcls[i].mappingDisplayName,
 						fileInfo.inheritedAcls[i].mask,
 						fileInfo.inheritedAcls[i].permissions,
-						true
+						true,
 					)
 					const id = acl.getUniqueMappingIdentifier()
 					inheritedAclsById[id] = acl

src/components/AclStateButton.vue

@@ -41,7 +41,7 @@
 	<div v-else>
 		<NcActions :aria-label="label" :v-tooltip="label">
 			<template #icon>
-				<component :is="icon" :size="16" />
+				<component :is="icon" :class="{inherited: isInherited}" :size="16" />
 			</template>
 			<NcActionRadio name="state"
 				:checked="state === STATES.INHERIT_ALLOW || state === STATES.INHERIT_DENY"
@@ -50,13 +50,13 @@
 				{{ t('groupfolders', 'Inherit permission') }}
 			</NcActionRadio>
 			<NcActionRadio name="state"
-				:check="state === STATES.SELF_DENY"
+				:checked="state === STATES.SELF_DENY"
 				:disabled="disabled"
 				@change="$emit('update', STATES.SELF_DENY)">
 				{{ t('groupfolders', 'Deny') }}
 			</NcActionRadio>
 			<NcActionRadio name="state"
-				:check="state === STATES.SELF_ALLOW"
+				:checked="state === STATES.SELF_ALLOW"
 				:disabled="disabled"
 				@change="$emit('update', STATES.SELF_ALLOW)">
 				{{ t('groupfolders', 'Allow') }}
@@ -69,7 +69,6 @@
 import Check from 'vue-material-design-icons/Check.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
@@ -87,7 +86,6 @@ export default {
 		tooltip: Tooltip,
 	},
 	components: {
-		NcPopoverMenu,
 		NcButton,
 		NcActions,
 		NcActionRadio,
@@ -121,6 +119,9 @@ export default {
 		isAllowed() {
 			return this.state & 1
 		},
+		isInherited() {
+			return (this.state & 2) === 0
+		},
 		icon() {
 			switch (this.state) {
 			case STATES.INHERIT_ALLOW:

src/components/SharingSidebarView.vue

@@ -133,27 +133,23 @@
 			</template>
 			{{ t('groupfolders', 'Add advanced permission rule') }}
 		</NcButton>
-		<NcMultiselect v-if="isAdmin && !loading"
+		<NcSelect v-if="isAdmin && !loading"
 			v-show="showAclCreate"
 			ref="select"
 			v-model="value"
 			:options="options"
-			:reset-after="true"
+			:clear-search-on-select="true"
 			:loading="isSearching"
-			:internal-search="false"
+			:filterable="false"
 			:placeholder="t('groupfolders', 'Select a user or group')"
-			track-by="unique"
-			@select="createAcl"
-			@search-change="searchMappings">
-			<template slot="singleLabel" slot-scope="props">
-				<NcAvatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
-				{{ getFullDisplayName(props.option.displayname, props.option.type) }}
+			:get-option-key="() => 'unique'"
+			@input="createAcl"
+			@search="searchMappings">
+			<template #option="option">
+				<NcAvatar :user="option.id" :is-no-user="option.type !== 'user'" />
+				{{ option.label }}
 			</template>
-			<template slot="option" slot-scope="props">
-				<NcAvatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
-				{{ getFullDisplayName(props.option.displayname, props.option.type) }}
-			</template>
-		</NcMultiselect>
+		</NcSelect>
 	</div>
 </template>
 
@@ -167,7 +163,7 @@ import BinaryTools from './../BinaryTools.js'
 import client from './../client.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -181,7 +177,7 @@ export default {
 	},
 	components: {
 		NcAvatar,
-		NcMultiselect,
+		NcSelect,
 		NcButton,
 		AclStateButton,
 		Plus,
@@ -279,6 +275,7 @@ export default {
 						type: 'group',
 						id: group.gid,
 						displayname: group.displayname,
+						label: this.getFullDisplayName(group.displayname, 'group'),
 					}
 				})
 				const users = Object.values(result.data.ocs.data.users).map((user) => {
@@ -287,6 +284,7 @@ export default {
 						type: 'user',
 						id: user.uid,
 						displayname: user.displayname,
+						label: this.getFullDisplayName(user.displayname, 'user'),
 					}
 				})
 				this.options = [...groups, ...users].filter((entry) => {
@@ -295,7 +293,7 @@ export default {
 				})
 			}).catch((error) => {
 				if (!axios.isCancel(error)) {
-					console.error('Failed to l search results for groupfolder ACL')
+					console.error('Failed to search results for groupfolder ACL')
 				}
 			})
 		},

src/files.js

@@ -20,7 +20,7 @@
  *
  */
 import { generateUrl, imagePath } from '@nextcloud/router'
-import './client.js'
+import { initFilesClient } from './client.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
@@ -38,6 +38,7 @@ window.addEventListener('DOMContentLoaded', () => {
 		return
 	}
 	import(/* webpackChunkName: "sharing" */'./SharingSidebarApp.js').then((Module) => {
+		initFilesClient(OC.Files.getClient())
 		OCA.Sharing.ShareTabSections.registerSection((el, fileInfo) => {
 			if (fileInfo.mountType !== 'group') {
 				return