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

fix: always use the node displayname prop

Author: susnux

lib/components/ConflictPicker/ConflictPickerEntry.vue

@@ -177,7 +177,7 @@ function validate() {
 
 <template>
 	<fieldset :class="$style.pickerEntry">
-		<legend>{{ existing.basename }}</legend>
+		<legend>{{ existing.displayname }}</legend>
 
 		<!-- Incoming file -->
 		<NcCheckboxRadioSwitch

lib/components/FilePicker/FileListRow.spec.ts

@@ -59,7 +59,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({
@@ -69,7 +69,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({
@@ -79,7 +79,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

@@ -49,6 +49,7 @@
 import type { INode } from '@nextcloud/files'
 
 import { FileType, formatFileSize, 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'
@@ -80,14 +81,14 @@ const emit = defineEmits<{
 const timestamp = computed(() => props.node.mtime ?? 0)
 
 /**
- * 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

@@ -211,13 +211,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)
 				}