feat: only download file when there is no app is available, when user…

packages/web-pkg/src/composables/actions/files/index.ts

@@ -28,3 +28,4 @@ export * from './useFileActionsShowDetails'
 export * from './useFileActionsShowShares'
 export * from './useFileActionsToggleHideShare'
 export * from './useFileActionsUndoDelete'
+export * from './useFileActionFallbackToDownload'

packages/web-pkg/src/composables/actions/files/useFileActionFallbackToDownload.ts

@@ -0,0 +1,44 @@
+import { FileAction, FileActionOptions } from '../types'
+import { computed, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useDownloadFile } from '../../download'
+import { useModals } from '../../piniaStores'
+import { useFileActionsDownloadFile } from './useFileActionsDownloadFile'
+
+export const useFileActionFallbackToDownload = () => {
+  const { $gettext } = useGettext()
+  const { actions: downloadFileActions } = useFileActionsDownloadFile()
+  const { downloadFile } = useDownloadFile()
+  const { dispatchModal } = useModals()
+  const handler = ({ space, resources }: FileActionOptions) => {
+    dispatchModal({
+      title: $gettext('No preview available for »%{name}«', { name: resources[0].name }),
+      confirmText: $gettext('Download'),
+      message: $gettext(
+        'There is no preview available for this file. Do you want to download it instead?'
+      ),
+      onConfirm: () => {
+        downloadFile(space, resources[0])
+      }
+    })
+  }
+
+  const actions = computed((): FileAction[] => [
+    {
+      name: 'fallback-to-download',
+      icon: 'file-download',
+      handler,
+      label: () => {
+        return $gettext('Download')
+      },
+      isVisible: (options) => {
+        return unref(downloadFileActions)[0].isVisible(options)
+      },
+      class: 'oc-files-actions-fallback-to-download-trigger'
+    }
+  ])
+
+  return {
+    actions
+  }
+}

packages/web-pkg/src/composables/actions/files/useFileActions.ts

@@ -9,6 +9,7 @@ import {
   Action,
   FileAction,
   FileActionOptions,
+  useFileActionFallbackToDownload,
   useIsFilesAppActive,
   useIsSearchActive,
   useWindowOpen
@@ -68,6 +69,7 @@ export const useFileActions = () => {
   const { actions: disableSyncActions } = useFileActionsDisableSync()
   const { actions: downloadArchiveActions } = useFileActionsDownloadArchive()
   const { actions: downloadFileActions } = useFileActionsDownloadFile()
+  const { actions: fallbackToDownloadAction } = useFileActionFallbackToDownload()
   const { actions: favoriteActions } = useFileActionsFavorite()
   const { actions: moveActions } = useFileActionsMove()
   const { actions: navigateActions } = useFileActionsNavigate()
@@ -248,8 +250,11 @@ export const useFileActions = () => {
 
   const getDefaultAction = (options: GetFileActionsOptions): Action | undefined => {
     const actions = getAllOpenWithActions(options)
+
     if (actions.length) {
-      return actions[0]
+      return actions[0].name === unref(downloadFileActions)[0].name
+        ? unref(fallbackToDownloadAction)[0]
+        : actions[0]
     }
     return undefined
   }

packages/web-pkg/tests/unit/composables/actions/files/useFileActionFallbackToDownload.spec.ts

@@ -0,0 +1,98 @@
+import { mock } from 'vitest-mock-extended'
+import { unref } from 'vue'
+import {
+  defaultComponentMocks,
+  getComposableWrapper,
+  RouteLocation
+} from '@opencloud-eu/web-test-helpers'
+import {
+  useFileActionFallbackToDownload,
+  useModals,
+  useDownloadFile
+} from '../../../../../src/composables'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
+
+vi.mock('../../../../../src/composables/download/useDownloadFile')
+
+describe('fallbackToDownload', () => {
+  describe('computed property "actions"', () => {
+    describe('method "handler"', () => {
+      it('creates a modal with download confirmation', () => {
+        getWrapper({
+          setup: ({ actions }) => {
+            const resource = mock<Resource>({
+              name: 'test-file.png',
+              isFolder: false,
+              canDownload: () => true
+            })
+
+            const { dispatchModal } = useModals()
+
+            unref(actions)[0].handler({
+              resources: [resource],
+              space: mock<SpaceResource>()
+            })
+
+            expect(dispatchModal).toHaveBeenCalled()
+          }
+        })
+      })
+
+      it('calls downloadFile when modal is confirmed', () => {
+        getWrapper({
+          setup: ({ actions }) => {
+            const resource = mock<Resource>({
+              name: 'test-file.png',
+              isFolder: false,
+              canDownload: () => true
+            })
+
+            const { dispatchModal } = useModals()
+
+            unref(actions)[0].handler({
+              resources: [resource],
+              space: mock<SpaceResource>()
+            })
+
+            const modalCall = vi.mocked(dispatchModal).mock.calls[0][0]
+            modalCall.onConfirm(null)
+
+            const downloadFileComposable = useDownloadFile()
+            expect(downloadFileComposable.downloadFile).toHaveBeenCalled()
+          }
+        })
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup,
+  downloadFileMock = vi.fn()
+}: {
+  setup: (instance: ReturnType<typeof useFileActionFallbackToDownload>) => void
+  downloadFileMock?: (...args: unknown[]) => unknown
+}) {
+  vi.mocked(useDownloadFile).mockReturnValue({
+    downloadFile: downloadFileMock
+  } as ReturnType<typeof useDownloadFile>)
+
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+    })
+  }
+
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useFileActionFallbackToDownload()
+        setup(instance)
+      },
+      {
+        mocks,
+        provide: mocks
+      }
+    )
+  }
+}