fix(files): Provide file actions from list entry to make it reactive

This fixes non reactive default action text of the name component.
Also use download action as default action so that only one place
is needed to define how to download a file.

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

1 files changed, 31 insertions, 23 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 7a6ad2a1051..329ec7fdf19 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -37,19 +37,20 @@
 </template>
 
 <script lang="ts">
-import type { Node } from '@nextcloud/files'
+import type { FileAction, Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
 import axios, { isAxiosError } from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import { FileType, NodeStatus, Permission } from '@nextcloud/files'
+import { FileType, NodeStatus } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { defineComponent, inject } from 'vue'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { useNavigation } from '../../composables/useNavigation'
+import { useRouteParameters } from '../../composables/useRouteParameters.ts'
 import { useRenamingStore } from '../../store/renaming.ts'
 import { getFilenameValidity } from '../../utils/filenameValidity.ts'
 import logger from '../../logger.js'
@@ -98,8 +99,11 @@ export default defineComponent({
 		const { currentView } = useNavigation()
 		const renamingStore = useRenamingStore()
 
+		const defaultFileAction = inject<FileAction | undefined>('defaultFileAction')
+
 		return {
 			currentView,
+			defaultFileAction,
 
 			renamingStore,
 		}
@@ -139,32 +143,20 @@ export default defineComponent({
 				}
 			}
 
-			const enabledDefaultActions = this.$parent?.$refs?.actions?.enabledDefaultActions
-			if (enabledDefaultActions?.length > 0) {
-				const action = enabledDefaultActions[0]
-				const displayName = action.displayName([this.source], this.currentView)
+			if (this.defaultFileAction && this.currentView) {
+				const displayName = this.defaultFileAction.displayName([this.source], this.currentView)
 				return {
-					is: 'a',
+					is: 'button',
 					params: {
+						'aria-label': displayName,
 						title: displayName,
-						role: 'button',
-						tabindex: '0',
-					},
-				}
-			}
-
-			if (this.source?.permissions & Permission.READ) {
-				return {
-					is: 'a',
-					params: {
-						download: this.source.basename,
-						href: this.source.source,
-						title: t('files', 'Download file {name}', { name: `${this.basename}${this.extension}` }),
 						tabindex: '0',
 					},
 				}
 			}
 
+			// nothing interactive here, there is no default action
+			// so if not even the download action works we only can show the list entry
 			return {
 				is: 'span',
 			}
@@ -280,12 +272,15 @@ export default defineComponent({
 				// Reset the renaming store
 				this.stopRenaming()
 				this.$nextTick(() => {
-					this.$refs.basename?.focus()
+					const nameContainter = this.$refs.basename as HTMLElement | undefined
+					nameContainter?.focus()
 				})
 			} catch (error) {
 				logger.error('Error while renaming file', { error })
+				// Rename back as it failed
 				this.source.rename(oldName)
-				this.$refs.renameInput?.focus()
+				// And ensure we reset to the renaming state
+				this.startRenaming()
 
 				if (isAxiosError(error)) {
 					// TODO: 409 means current folder does not exist, redirect ?
@@ -309,3 +304,16 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style scoped lang="scss">
+button.files-list__row-name-link {
+	background-color: unset;
+	border: none;
+	font-weight: normal;
+
+	&:active {
+		// No active styles - handled by the row entry
+		background-color: unset !important;
+	}
+}
+</style>