Merge pull request #41736 from nextcloud/backport-41301-27

[stable27] fix(files_sharing): fix sharing tab translations

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -34,15 +34,12 @@
 					type="radio"
 					button-variant-grouped="vertical"
 					@update:checked="toggleCustomPermissions">
+					<EditIcon :size="20" />
 					<template v-if="allowsFileDrop">
-						{{ t('files_sharing', 'Allow upload and editing') }}
+						<span>{{ t('files_sharing', 'Allow upload and editing') }}</span>
 					</template>
 					<template v-else>
-						{{ t('files_sharing', 'Allow editing') }}
-					</template>
-
-					<template #icon>
-						<EditIcon :size="20" />
+						<span>{{ t('files_sharing', 'Allow editing') }}</span>
 					</template>
 				</NcCheckboxRadioSwitch>
 				<NcCheckboxRadioSwitch v-if="allowsFileDrop"
@@ -66,7 +63,7 @@
 					@update:checked="expandCustomPermissions">
 					<DotsHorizontalIcon :size="20" />
 					<span>{{ t('files_sharing', 'Custom permissions') }}</span>
-					<small>{{ t('files_sharing', customPermissionsList) }}</small>
+					<small>{{ customPermissionsList }}</small>
 				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
@@ -194,6 +191,8 @@
 </template>
 
 <script>
+import { getLanguage } from '@nextcloud/l10n'
+
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
@@ -611,26 +610,21 @@ export default {
 			return this.fileInfo.shareAttributes.some(hasDisabledDownload)
 		},
 		customPermissionsList() {
-			const perms = []
-			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.READ)) {
-				perms.push('read')
+			// Key order will be different, because ATOMIC_PERMISSIONS are numbers
+			const translatedPermissions = {
+				[ATOMIC_PERMISSIONS.READ]: this.t('files_sharing', 'Read'),
+				[ATOMIC_PERMISSIONS.CREATE]: this.t('files_sharing', 'Create'),
+				[ATOMIC_PERMISSIONS.UPDATE]: this.t('files_sharing', 'Update'),
+				[ATOMIC_PERMISSIONS.SHARE]: this.t('files_sharing', 'Share'),
+				[ATOMIC_PERMISSIONS.DELETE]: this.t('files_sharing', 'Delete'),
 			}
-			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.CREATE)) {
-				perms.push('create')
-			}
-			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.UPDATE)) {
-				perms.push('update')
-			}
-			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.DELETE)) {
-				perms.push('delete')
-			}
-			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.SHARE)) {
-				perms.push('share')
-			}
-			const capitalizeFirstAndJoin = array => array.map((item, index) => index === 0 ? item[0].toUpperCase() + item.substring(1) : item).join(', ')
-
-			return capitalizeFirstAndJoin(perms)
 
+			return [ATOMIC_PERMISSIONS.READ, ATOMIC_PERMISSIONS.CREATE, ATOMIC_PERMISSIONS.UPDATE, ATOMIC_PERMISSIONS.SHARE, ATOMIC_PERMISSIONS.DELETE]
+				.filter((permission) => hasPermissions(this.share.permissions, permission))
+				.map((permission, index) => index === 0
+					? translatedPermissions[permission]
+					: translatedPermissions[permission].toLocaleLowerCase(getLanguage()))
+				.join(', ')
 		},
 	},
 	watch: {