refactor(files): replace deprecated `is` attr on `<a>` with dynamic component

- Special attribute `is` is deprecated and removed in Vue 3
- It is confusing, that `<a>` element is rendered as `span` sometimes

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

1 files changed, 20 insertions, 11 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 538c79b02db..3848b3bb73d 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -37,12 +37,13 @@
 			@keyup.esc="stopRenaming" />
 	</form>
 
-	<a v-else
+	<component :is="linkTo.is"
+		v-else
 		ref="basename"
 		:aria-hidden="isRenaming"
 		class="files-list__row-name-link"
 		data-cy-files-list-row-name-link
-		v-bind="linkTo"
+		v-bind="linkTo.params"
 		@click="$emit('click', $event)">
 		<!-- File name -->
 		<span class="files-list__row-name-text">
@@ -50,7 +51,7 @@
 			<span class="files-list__row-name-" v-text="displayName" />
 			<span class="files-list__row-name-ext" v-text="extension" />
 		</span>
-	</a>
+	</component>
 </template>
 
 <script lang="ts">
@@ -137,8 +138,10 @@ export default Vue.extend({
 		linkTo() {
 			if (this.source.attributes.failed) {
 				return {
-					title: t('files', 'This node is unavailable'),
 					is: 'span',
+					params: {
+						title: t('files', 'This node is unavailable'),
+					},
 				}
 			}
 
@@ -147,18 +150,24 @@ export default Vue.extend({
 				const action = enabledDefaultActions[0]
 				const displayName = action.displayName([this.source], this.currentView)
 				return {
-					title: displayName,
-					role: 'button',
-					tabindex: '0',
+					is: 'a',
+					params: {
+						title: displayName,
+						role: 'button',
+						tabindex: '0',
+					},
 				}
 			}
 
 			if (this.source?.permissions & Permission.READ) {
 				return {
-					download: this.source.basename,
-					href: this.source.source,
-					title: t('files', 'Download file {name}', { name: this.displayName }),
-					tabindex: '0',
+					is: 'a',
+					params: {
+						download: this.source.basename,
+						href: this.source.source,
+						title: t('files', 'Download file {name}', { name: this.displayName }),
+						tabindex: '0',
+					},
 				}
 			}