Merge pull request #2182 from nextcloud-libraries/fix/always-use-displayname-6

[stable6] fix: always use the node displayname prop

Author: susnux

lib/components/FilePicker/FileListRow.spec.ts

@@ -58,7 +58,7 @@ const node = new File({
 	mime: 'text/plain',
 	source: 'https://example.com/remote.php/dav/alice/a.txt',
 	root: '/',
-	attributes: { displayName: 'test' },
+	attributes: { displayname: 'test' },
 })
 
 const folder = new Folder({
@@ -68,7 +68,7 @@ const folder = new Folder({
 	source: 'https://example.com/remote.php/dav/alice/b',
 	root: '/',
 	permissions: Permission.ALL,
-	attributes: { displayName: 'test folder' },
+	attributes: { displayname: 'test folder' },
 })
 
 const folderNonReadable = new Folder({
@@ -78,7 +78,7 @@ const folderNonReadable = new Folder({
 	source: 'https://example.com/remote.php/dav/alice/b',
 	root: '/',
 	permissions: Permission.ALL & ~Permission.READ,
-	attributes: { displayName: 'test folder' },
+	attributes: { displayname: 'test folder' },
 })
 
 const defaultOptions = {

lib/components/FilePicker/FileListRow.vue

@@ -43,9 +43,10 @@
 import type { INode } from '@nextcloud/files'
 
 import { formatFileSize, FileType, Permission } from '@nextcloud/files'
+import { extname } from '@nextcloud/paths'
+import { computed } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
-import { computed } from 'vue'
 import { t } from '../../utils/l10n'
 
 import FilePreview from './FilePreview.vue'
@@ -73,14 +74,14 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The displayname of the current node (excluding file extension)
+ * The file extension of the file
  */
-const displayName = computed(() => props.node.attributes?.displayName || props.node.basename.slice(0, props.node.extension ? -props.node.extension.length : undefined))
+const fileExtension = computed(() => extname(props.node.displayname))
 
 /**
- * The file extension of the file
+ * The displayname of the current node (excluding file extension)
  */
-const fileExtension = computed(() => props.node.extension)
+const displayName = computed(() => props.node.displayname.slice(0, fileExtension.value ? -fileExtension.value.length : undefined))
 
 /**
  * Check if the node is a directory

lib/filepicker-builder.ts

@@ -209,13 +209,13 @@ export class FilePickerBuilder<IsMultiSelect extends boolean> {
 	public setType(type: FilePickerType) {
 		this.buttons = (nodes, path) => {
 			const buttons: IFilePickerButton[] = []
-			const node = nodes?.[0]?.attributes?.displayName || nodes?.[0]?.basename
-			const target = node || basename(path)
+			const node = nodes[0]
+			const target = node?.displayname || basename(path)
 
 			if (type === FilePickerType.Choose) {
 				let label = t('Choose')
 				if (nodes.length === 1) {
-					label = t('Choose {file}', { file: node })
+					label = t('Choose {file}', { file: target })
 				} else if (this.multiSelect) {
 					label = n('Choose %n file', 'Choose %n files', nodes.length)
 				}