fix: always use the node displayname prop

It will fallback to basename anyways but will fix usage in public shares
where the displayname is the real name but the basename is the share
token.
Also fixes end-to-end encryption ui.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

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)
 				}