fix: show folder loading errors in the app wrapper instead of an endless spinner

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -19,7 +19,7 @@
         />
       </template>
     </no-content-message>
-    <error-screen v-else-if="loadingError" :message="loadingError.message" />
+    <error-screen v-else-if="error" :message="error.message" />
     <div v-else class="flex size-full">
       <slot
         class="app-wrapper-content size-full"
@@ -170,7 +170,9 @@ const currentETag = ref('')
 const url = ref('')
 const loading = ref(!unref(noResourceLoading))
 const loadingError: Ref<Error> = ref()
-const isNotFoundError = computed(() => (unref(loadingError) as HttpError)?.statusCode === 404)
+// apps that load their files themselves (e.g. the preview) report errors via the folder loading
+const error = computed(() => unref(loadingError) || unref(folderLoadingError))
+const isNotFoundError = computed(() => (unref(error) as HttpError)?.statusCode === 404)
 const isReadOnly = ref(false)
 const serverContent = ref<unknown>()
 const currentContent = ref<unknown>()
@@ -240,7 +242,8 @@ const {
   revokeUrl,
   activeFiles,
   loadFolderForFileContext,
-  isFolderLoading
+  isFolderLoading,
+  folderLoadingError
 } = useAppDefaults({
   applicationId
 })
@@ -293,7 +296,7 @@ const {
 // failure short-circuits: it leaves the session disabled, so waiting on it
 // would keep the error screen from ever showing.
 const isLoading = computed(() => {
-  if (unref(loadingError)) return false
+  if (unref(error)) return false
   return unref(loading) || !unref(isSessionReady)
 })
 

packages/web-pkg/src/composables/appDefaults/useAppFolderHandling.ts

@@ -2,7 +2,12 @@ import { Ref, ref, unref, MaybeRef } from 'vue'
 import { dirname } from 'path'
 import { ClientService, folderService } from '../../services'
 import { useAppFileHandling } from './useAppFileHandling'
-import { isSearchResource, isShareSpaceResource, Resource } from '@opencloud-eu/web-client'
+import {
+  HttpError,
+  isSearchResource,
+  isShareSpaceResource,
+  Resource
+} from '@opencloud-eu/web-client'
 import { FileContext } from './types'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
@@ -21,6 +26,7 @@ interface AppFolderHandlingOptions {
 
 export interface AppFolderHandlingResult {
   isFolderLoading: Ref<boolean>
+  folderLoadingError: Ref<HttpError>
   activeFiles: Ref<Array<Resource>>
 
   loadFolderForFileContext(context: MaybeRef<FileContext>): Promise<void>
@@ -31,6 +37,7 @@ export function useAppFolderHandling({
   clientService
 }: AppFolderHandlingOptions): AppFolderHandlingResult {
   const isFolderLoading = ref(false)
+  const folderLoadingError = ref<HttpError>()
   const { webdav } = clientService
   const { replaceInvalidFileRoute } = useFileRouteReplace()
   const { getFileInfo } = useAppFileHandling({ clientService })
@@ -44,6 +51,7 @@ export function useAppFolderHandling({
 
   const loadFolderForFileContext = async (context: MaybeRef<FileContext>) => {
     isFolderLoading.value = true
+    folderLoadingError.value = undefined
 
     try {
       context = unref(context)
@@ -122,13 +130,15 @@ export function useAppFolderHandling({
         return authService.handleAuthError(unref(currentRoute))
       }
       resourcesStore.setCurrentFolder(null)
+      folderLoadingError.value = error
       console.error(error)
     }
     isFolderLoading.value = false
   }
 
   return {
     isFolderLoading,
+    folderLoadingError,
     loadFolderForFileContext,
     activeFiles: activeResources
   }

packages/web-pkg/tests/unit/components/AppTemplates/AppWrapper.spec.ts

@@ -86,7 +86,8 @@ function setup({
   roomWrite = false,
   // Whether the runtime has an authenticated SSE stream for this user.
   sse = true,
-  fileSizeLimit = undefined as number | undefined
+  fileSizeLimit = undefined as number | undefined,
+  folderLoadingError = undefined as HttpError
 } = {}) {
   const wasWrittenByRoom = vi.fn().mockResolvedValue(writtenByRoom)
   const beginSave = vi.fn()
@@ -131,7 +132,8 @@ function setup({
       getFileInfo,
       getFileContents,
       putFileContents,
-      closeApp
+      closeApp,
+      folderLoadingError: ref(folderLoadingError)
     })
   )
 
@@ -316,6 +318,18 @@ describe('AppWrapper — loading a file that does not exist', () => {
   })
 })
 
+describe('AppWrapper — folder loading of apps that load their files themselves', () => {
+  it('shows the not found message when the folder of the file cannot be found', async () => {
+    const s = setup({
+      yjsEnabled: false,
+      folderLoadingError: new HttpError('Resource not found', undefined, 404)
+    })
+    await nextTick()
+
+    expect(s.wrapper.find('#app-wrapper-not-found-message').exists()).toBe(true)
+  })
+})
+
 describe('AppWrapper — changes still pending in the session', () => {
   async function openFileWithPendingChange(content: string) {
     const s = setup()

packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts

@@ -1,7 +1,7 @@
 import { mock } from 'vitest-mock-extended'
 import { ref } from 'vue'
 import { FileContext, useAppDefaults, AppConfigObject } from '@opencloud-eu/web-pkg'
-import { FileResource, Resource } from '@opencloud-eu/web-client'
+import { FileResource, HttpError, Resource } from '@opencloud-eu/web-client'
 import { GetFileContentsResponse } from '@opencloud-eu/web-client/webdav'
 
 export const useAppDefaultsMock = (
@@ -19,6 +19,7 @@ export const useAppDefaultsMock = (
     getFileContents: vi.fn().mockImplementation(() => mock<GetFileContentsResponse>({ body: '' })),
     putFileContents: vi.fn().mockImplementation(() => mock<FileResource>()),
     isFolderLoading: ref(false),
+    folderLoadingError: ref<HttpError>(),
     activeFiles: ref([]),
     loadFolderForFileContext: vi.fn(),
     makeRequest: vi.fn().mockResolvedValue({ status: 200 }),