Merge pull request #39229 from nextcloud/fix/default-empty-content-files

8 files changed, 47 insertions, 15 deletions

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index e215714882c..e1bfb95e4db 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -45,7 +45,7 @@
 		<template #before>
 			<!-- Accessibility description -->
 			<caption class="hidden-visually">
-				{{ currentView.caption || '' }}
+				{{ currentView.caption || t('files', 'List of files and folders.') }}
 				{{ t('files', 'This list is not fully rendered for performances reasons. The files will be rendered as you navigate through the list.') }}
 			</caption>
 
diff --git a/apps/files/src/services/Navigation.ts b/apps/files/src/services/Navigation.ts
index 767ab197c39..56d3ba0b97d 100644
--- a/apps/files/src/services/Navigation.ts
+++ b/apps/files/src/services/Navigation.ts
@@ -51,8 +51,14 @@ export interface Navigation {
 	id: string
 	/** Translated view name */
 	name: string
-	/** Translated view accessible description */
+	/** Translated accessible description of the view */
 	caption?: string
+
+	/** Translated title of the empty view */
+	emptyTitle?: string
+	/** Translated description of the empty view */
+	emptyCaption?: string
+
 	/**
 	 * Method return the content of the  provided path
 	 * This ideally should be a cancellable promise.
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 8b42cfe6133..b14e3287939 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -39,8 +39,8 @@
 
 		<!-- Empty content placeholder -->
 		<NcEmptyContent v-else-if="!loading && isEmptyDir"
-			:title="t('files', 'No files in here')"
-			:description="t('files', 'No files or folders have been deleted yet')"
+			:title="currentView?.emptyTitle || t('files', 'No files in here')"
+			:description="currentView?.emptyCaption || t('files', 'Upload some content or sync with your devices!')"
 			data-cy-files-content-empty>
 			<template #action>
 				<NcButton v-if="dir !== '/'"
@@ -51,7 +51,7 @@
 				</NcButton>
 			</template>
 			<template #icon>
-				<TrashCan />
+				<NcIconSvgWrapper :svg="currentView.icon" />
 			</template>
 		</NcEmptyContent>
 
@@ -72,7 +72,6 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import TrashCan from 'vue-material-design-icons/TrashCan.vue'
 import Vue from 'vue'
 
 import { useFilesStore } from '../store/files.ts'
@@ -85,6 +84,7 @@ import FilesListVirtual from '../components/FilesListVirtual.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 import Navigation, { ContentsWithRoot } from '../services/Navigation.ts'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 export default Vue.extend({
 	name: 'FilesList',
@@ -95,8 +95,8 @@ export default Vue.extend({
 		NcAppContent,
 		NcButton,
 		NcEmptyContent,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
-		TrashCan,
 	},
 
 	mixins: [
diff --git a/apps/files/src/views/favorites.spec.ts b/apps/files/src/views/favorites.spec.ts
index a1999624f2f..d39def283a9 100644
--- a/apps/files/src/views/favorites.spec.ts
+++ b/apps/files/src/views/favorites.spec.ts
@@ -68,7 +68,7 @@ describe('Favorites view definition', () => {
 
 		expect(favoritesView?.id).toBe('favorites')
 		expect(favoritesView?.name).toBe('Favorites')
-		expect(favoritesView?.caption).toBe('List of favorites files and folders.')
+		expect(favoritesView?.caption).toBeDefined()
 		expect(favoritesView?.icon).toBe('<svg>SvgMock</svg>')
 		expect(favoritesView?.order).toBe(5)
 		expect(favoritesView?.columns).toStrictEqual([])
diff --git a/apps/files/src/views/favorites.ts b/apps/files/src/views/favorites.ts
index 571db4faab3..20baa2c582d 100644
--- a/apps/files/src/views/favorites.ts
+++ b/apps/files/src/views/favorites.ts
@@ -68,6 +68,9 @@ export default () => {
 		name: t('files', 'Favorites'),
 		caption: t('files', 'List of favorites files and folders.'),
 
+		emptyTitle: t('files', 'No favorites yet'),
+		emptyCaption: t('files', 'Files and folders you mark as favorite will show up here'),
+
 		icon: StarSvg,
 		order: 5,
 
diff --git a/apps/files_sharing/src/views/shares.spec.ts b/apps/files_sharing/src/views/shares.spec.ts
index 353e82b6f84..ae67a960cc0 100644
--- a/apps/files_sharing/src/views/shares.spec.ts
+++ b/apps/files_sharing/src/views/shares.spec.ts
@@ -67,18 +67,20 @@ describe('Sharing views definition', () => {
 		expect(shareOverviewView?.getContents).toBeDefined()
 
 		const dataProvider = [
-			{ id: 'sharingin', name: 'Shared with you', caption: 'List of files that are shared with you.' },
-			{ id: 'sharingout', name: 'Shared with others', caption: 'List of files that you shared with others.' },
-			{ id: 'sharinglinks', name: 'Shared by link', caption: 'List of files that are shared by link.' },
-			{ id: 'deletedshares', name: 'Deleted shares', caption: 'List of shares that you removed yourself from.' },
-			{ id: 'pendingshares', name: 'Pending shares', caption: 'List of unapproved shares.' },
+			{ id: 'sharingin', name: 'Shared with you' },
+			{ id: 'sharingout', name: 'Shared with others' },
+			{ id: 'sharinglinks', name: 'Shared by link' },
+			{ id: 'deletedshares', name: 'Deleted shares' },
+			{ id: 'pendingshares', name: 'Pending shares' },
 		]
 
 		sharesChildViews.forEach((view, index) => {
 			expect(view?.id).toBe(dataProvider[index].id)
 			expect(view?.parent).toBe('shareoverview')
 			expect(view?.name).toBe(dataProvider[index].name)
-			expect(view?.caption).toBe(dataProvider[index].caption)
+			expect(view?.caption).toBeDefined()
+			expect(view?.emptyTitle).toBeDefined()
+			expect(view?.emptyCaption).toBeDefined()
 			expect(view?.icon).toBe('<svg>SvgMock</svg>')
 			expect(view?.order).toBe(index + 1)
 			expect(view?.columns).toStrictEqual([])
diff --git a/apps/files_sharing/src/views/shares.ts b/apps/files_sharing/src/views/shares.ts
index 97d92adeb69..7d6bf46d3ce 100644
--- a/apps/files_sharing/src/views/shares.ts
+++ b/apps/files_sharing/src/views/shares.ts
@@ -46,6 +46,9 @@ export default () => {
 		name: t('files_sharing', 'Shares'),
 		caption: t('files_sharing', 'Overview of shared files.'),
 
+		emptyTitle: t('files_sharing', 'No shares'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared or have been shared with you will show up here'),
+
 		icon: ShareVariantSvg,
 		order: 20,
 
@@ -59,6 +62,9 @@ export default () => {
 		name: t('files_sharing', 'Shared with you'),
 		caption: t('files_sharing', 'List of files that are shared with you.'),
 
+		emptyTitle: t('files_sharing', 'Nothing shared with you yet'),
+		emptyCaption: t('files_sharing', 'Files and folders others shared with you will show up here'),
+
 		icon: AccountSvg,
 		order: 1,
 		parent: sharesViewId,
@@ -73,6 +79,9 @@ export default () => {
 		name: t('files_sharing', 'Shared with others'),
 		caption: t('files_sharing', 'List of files that you shared with others.'),
 
+		emptyTitle: t('files_sharing', 'Nothing shared yet'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared will show up here'),
+
 		icon: AccountGroupSvg,
 		order: 2,
 		parent: sharesViewId,
@@ -87,6 +96,9 @@ export default () => {
 		name: t('files_sharing', 'Shared by link'),
 		caption: t('files_sharing', 'List of files that are shared by link.'),
 
+		emptyTitle: t('files_sharing', 'No shared links'),
+		emptyCaption: t('files_sharing', 'Files and folders you shared by link will show up here'),
+
 		icon: LinkSvg,
 		order: 3,
 		parent: sharesViewId,
@@ -99,7 +111,10 @@ export default () => {
 	Navigation.register({
 		id: deletedSharesViewId,
 		name: t('files_sharing', 'Deleted shares'),
-		caption: t('files_sharing', 'List of shares that you removed yourself from.'),
+		caption: t('files_sharing', 'List of shares you left.'),
+
+		emptyTitle: t('files_sharing', 'No deleted shares'),
+		emptyCaption: t('files_sharing', 'Shares you have left will show up here'),
 
 		icon: DeleteSvg,
 		order: 4,
@@ -115,6 +130,9 @@ export default () => {
 		name: t('files_sharing', 'Pending shares'),
 		caption: t('files_sharing', 'List of unapproved shares.'),
 
+		emptyTitle: t('files_sharing', 'No pending shares'),
+		emptyCaption: t('files_sharing', 'Shares you have received but not approved will show up here'),
+
 		icon: AccountClockSvg,
 		order: 5,
 		parent: sharesViewId,
diff --git a/apps/files_trashbin/src/main.ts b/apps/files_trashbin/src/main.ts
index aca22f7b47a..eb235f34c8d 100644
--- a/apps/files_trashbin/src/main.ts
+++ b/apps/files_trashbin/src/main.ts
@@ -37,6 +37,9 @@ Navigation.register({
 	name: t('files_trashbin', 'Deleted files'),
 	caption: t('files_trashbin', 'List of files that have been deleted.'),
 
+	emptyTitle: t('files_trashbin', 'No deleted files'),
+	emptyCaption: t('files_trashbin', 'Files and folders you have deleted will show up here'),
+
 	icon: DeleteSvg,
 	order: 50,
 	sticky: true,