fix(files): handle empty view with error

apps/files/src/components/TemplatePreview.vue

@@ -33,7 +33,7 @@
 <script>
 import { encodePath } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
-import { getToken, isPublic } from '../utils/davUtils.js'
+import { getToken, isPublic } from '../utils/davUtils.ts'
 
 // preview width generation
 const previewWidth = 256

apps/files/src/utils/davUtils.ts

@@ -0,0 +1,59 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
+import type { WebDAVClientError } from 'webdav'
+
+/**
+ * Check whether this is a public share
+ * @return {boolean} Whether this is a public share
+ */
+export function isPublic() {
+ return !getCurrentUser()
+}
+
+/**
+ * Get the sharing token
+ * @return {string|null} The sharing token
+ */
+export function getToken() {
+ const tokenElement = document.getElementById('sharingToken') as (HTMLInputElement | null)
+ return tokenElement?.value
+}
+
+/**
+ * Whether error is a WebDAVClientError
+ * @param error - Any exception
+ * @return {boolean} - Whether error is a WebDAVClientError
+ */
+function isWebDAVClientError(error: unknown): error is WebDAVClientError {
+ return error instanceof Error && 'status' in error && 'response' in error
+}
+
+/**
+ * Get a localized error message from webdav request
+ * @param error - An exception from webdav request
+ * @return {string} Localized error message for end user
+ */
+export function humanizeWebDAVError(error: unknown) {
+ if (error instanceof Error) {
+ if (isWebDAVClientError(error)) {
+ const status = error.status || error.response?.status || 0
+ if ([400, 404, 405].includes(status)) {
+ return t('files', 'Folder not found')
+ } else if (status === 403) {
+ return t('files', 'This operation is forbidden')
+ } else if (status === 500) {
+ return t('files', 'This directory is unavailable, please check the logs or contact the administrator')
+ } else if (status === 503) {
+ return t('files', 'Storage is temporarily not available')
+ }
+ }
+ return t('files', 'Unexpected error: {error}', { error: error.message })
+ }
+
+ return t('files', 'Unknown error')
+}

apps/files/src/views/FilesList.vue

@@ -75,16 +75,32 @@
 
  <!-- Empty content placeholder -->
  <template v-else-if="!loading && isEmptyDir">
- <div v-if="currentView?.emptyView" class="files-list__empty-view-wrapper">
+ <!-- Empty due to error -->
+ <NcEmptyContent v-if="error" :name="error" data-cy-files-content-error>
+ <template #action>
+ <NcButton type="secondary" @click="fetchContent">
+ <template #icon>
+ <IconReload :size="20" />
+ </template>
+ {{ t('files', 'Retry') }}
+ </NcButton>
+ </template>
+ <template #icon>
+ <IconAlertCircleOutline />
+ </template>
+ </NcEmptyContent>
+ <!-- Custom empty view -->
+ <div v-else-if="currentView?.emptyView" class="files-list__empty-view-wrapper">
  <div ref="customEmptyView" />
  </div>
+ <!-- Default empty directory view -->
  <NcEmptyContent v-else
  :name="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 v-if="directory !== '/'" #action>
  <!-- Uploader -->
- <UploadPicker v-if="currentFolder && canUpload && !isQuotaExceeded"
+ <UploadPicker v-if="canUpload && !isQuotaExceeded"
  allow-folders
  class="files-list__header-upload-button"
  :content="getContent"
@@ -93,10 +109,7 @@
  multiple
  @failed="onUploadFail"
  @uploaded="onUpload" />
- <NcButton v-else
- :aria-label="t('files', 'Go to the previous folder')"
- :to="toPreviousDir"
- type="primary">
+ <NcButton v-else :to="toPreviousDir" type="primary">
  {{ t('files', 'Go back') }}
  </NcButton>
  </template>
@@ -134,6 +147,8 @@ import { UploadPicker, UploadStatus } from '@nextcloud/upload'
 import { loadState } from '@nextcloud/initial-state'
 import { defineComponent } from 'vue'
 
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconReload from 'vue-material-design-icons/Reload.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
@@ -161,6 +176,7 @@ import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.ts'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
+import { humanizeWebDAVError } from '../utils/davUtils.ts'
 
 const isSharingEnabled = (getCapabilities() as { files_sharing?: boolean })?.files_sharing !== undefined
 
@@ -182,6 +198,8 @@ export default defineComponent({
  AccountPlusIcon,
  UploadPicker,
  ViewGridIcon,
+ IconAlertCircleOutline,
+ IconReload,
  },
 
  mixins: [
@@ -234,6 +252,7 @@ export default defineComponent({
  data() {
  return {
  loading: true,
+ error: null as string | null,
  promise: null as CancelablePromise<ContentsWithRoot> | Promise<ContentsWithRoot> | null,
 
  dirContentsFiltered: [] as INode[],
@@ -410,7 +429,7 @@ export default defineComponent({
 
  showCustomEmptyView() {
  return !this.loading && this.isEmptyDir && this.currentView?.emptyView !== undefined
- }
+ },
  },
 
  watch: {
@@ -489,6 +508,7 @@ export default defineComponent({
  methods: {
  async fetchContent() {
  this.loading = true
+ this.error = null
  const dir = this.directory
  const currentView = this.currentView
 
@@ -537,6 +557,7 @@ export default defineComponent({
  })
  } catch (error) {
  logger.error('Error while fetching content', { error })
+ this.error = humanizeWebDAVError(error)
  } finally {
  this.loading = false
  }