Respect archiver limits on BatchAction download (owncloud#9055)

pascalwengerter · May 22, 2023 · c43f7a9 · c43f7a9
1 parent a331980
commit c43f7a9
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 13 deletions.
diff --git a/changelog/unreleased/enhancement-respect-archiver-limits b/changelog/unreleased/enhancement-respect-archiver-limits
@@ -0,0 +1,7 @@
+Enhancement: Respect archiver limits
+
+The archiver service announces a limit for the accumulated filesize of the currently selected resources. 
+The web UI now respects those limits and shows a disabled download button once the limit has been reached.
+
+https://github.com/owncloud/web/pull/9055
+https://github.com/owncloud/web/issues/8456
diff --git a/packages/design-system/changelog/7.0.0_2021-05-31/bugfix-interactive-oc-tooltip-texts b/packages/design-system/changelog/7.0.0_2021-05-31/bugfix-interactive-oc-tooltip-texts
@@ -1,6 +1,6 @@
 Bugfix: Interactive texts in OcTooltips
 
 The new tooltip texts would only be initialized once and then didn't offer 
-the possibility of chaging reactively. By updating the directive, we've changed that.
+the possibility of changing reactively. By updating the directive, we've changed that.
 
 https://github.com/owncloud/owncloud-design-system/pull/1288
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsDownloadArchive.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsDownloadArchive.ts
@@ -19,13 +19,14 @@ import {
 import { FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
 import { useGettext } from 'vue3-gettext'
 import { useArchiverService } from 'web-app-files/src/composables/archiverService'
+import { formatFileSize } from 'web-pkg/src/helpers/filesize'
 
 export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
   const loadingService = useLoadingService()
   const archiverService = useArchiverService()
-  const { $ngettext, $gettext } = useGettext()
+  const { $ngettext, $gettext, interpolate: $gettextInterpolate, current } = useGettext()
   const publicLinkPassword = usePublicLinkPassword({ store })
   const isFilesAppActive = useIsFilesAppActive()
 
@@ -59,6 +60,20 @@ export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> }
       })
   }
 
+  const areArchiverLimitsExceeded = (resources: Resource[]) => {
+    const archiverCapabilities = archiverService.capability
+    if (!archiverCapabilities) {
+      return
+    }
+
+    const selectedFilesSize = resources.reduce(
+      (accumulator, currentValue) => accumulator + parseInt(`${currentValue.size}`),
+      0
+    )
+
+    return selectedFilesSize > parseInt(archiverCapabilities.max_size)
+  }
+
   const actions = computed((): FileAction[] => {
     return [
       {
@@ -68,6 +83,17 @@ export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> }
         label: () => {
           return $gettext('Download')
         },
+        disabledTooltip: ({ resources }) => {
+          return areArchiverLimitsExceeded(resources)
+            ? $gettextInterpolate(
+                $gettext('The selection exceeds the allowed archive size (max. %{maxSize})'),
+                {
+                  maxSize: formatFileSize(archiverService.capability.max_size, current)
+                }
+              )
+            : ''
+        },
+        isDisabled: ({ resources }) => areArchiverLimitsExceeded(resources),
         isEnabled: ({ resources }) => {
           if (
             unref(isFilesAppActive) &&

diff --git a/packages/web-app-files/src/services/archiver.ts b/packages/web-app-files/src/services/archiver.ts
@@ -17,6 +17,8 @@ export interface ArchiverCapability {
   formats: string[]
   // eslint-disable-next-line camelcase
   archiver_url: string
+  max_num_files: string
+  max_size: string
 }
 
 interface TriggerDownloadOptions {

diff --git a/...web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap b/...web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
   <div id="oc-files-context-menu">
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
+        <button aria-label="" class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->
@@ -18,7 +18,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
     </ul>
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border" id="oc-files-context-actions-secondaryActions">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-edit-quota-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
+        <button aria-label="" class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-edit-quota-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->
@@ -31,7 +31,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
     </ul>
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-sidebar">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
+        <button aria-label="" class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->

diff --git a/packages/web-app-files/tests/unit/services/archiver.spec.ts b/packages/web-app-files/tests/unit/services/archiver.spec.ts
@@ -40,7 +40,9 @@ describe('archiver', () => {
         enabled: true,
         version: 'v2.3.5',
         archiver_url: archiverUrl,
-        formats: []
+        formats: [],
+        max_num_files: '42',
+        max_size: '1073741824'
       }
     ]
 
@@ -72,7 +74,9 @@ describe('archiver', () => {
         enabled: true,
         version: 'v1.2.3',
         archiver_url: archiverUrl,
-        formats: []
+        formats: [],
+        max_num_files: '42',
+        max_size: '1073741824'
       }
     ]
     it('is announcing itself as not supporting fileIds', () => {
@@ -105,19 +109,25 @@ describe('archiver', () => {
       enabled: true,
       version: 'v1.2.3',
       archiver_url: archiverUrl + '/v1',
-      formats: []
+      formats: [],
+      max_num_files: '42',
+      max_size: '1073741824'
     }
     const capabilityV2 = {
       enabled: true,
       version: 'v2.3.5',
       archiver_url: archiverUrl + '/v2',
-      formats: []
+      formats: [],
+      max_num_files: '42',
+      max_size: '1073741824'
     }
     const capabilityV3 = {
       enabled: false,
       version: 'v3.2.5',
       archiver_url: archiverUrl + '/v3',
-      formats: []
+      formats: [],
+      max_num_files: '42',
+      max_size: '1073741824'
     }
 
     it('uses the highest major version', async () => {

diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -1,10 +1,11 @@
 <template>
-  <li>
+  <li v-oc-tooltip="componentProps.disabled ? action.disabledTooltip(actionOptions) : ''">
     <oc-button
       v-oc-tooltip="showTooltip || action.hideLabel ? action.label(actionOptions) : ''"
       :type="action.componentType"
       v-bind="componentProps"
       :class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
+      :aria-label="componentProps.disabled ? action.disabledTooltip(actionOptions) : ''"
       data-testid="action-handler"
       size="small"
       justify-content="left"
@@ -35,8 +36,9 @@
         v-if="!action.hideLabel"
         class="oc-files-context-action-label"
         data-testid="action-label"
-        >{{ action.label(actionOptions) }}</span
       >
+        {{ action.label(actionOptions) }}
+      </span>
       <span
         v-if="action.shortcut && shortcutHint"
         class="oc-files-context-action-shortcut"

diff --git a/packages/web-pkg/src/composables/actions/types.ts b/packages/web-pkg/src/composables/actions/types.ts
@@ -29,6 +29,7 @@ export interface Action<T = ActionOptions> {
 
   // can be used to display the action in a disabled state in the UI
   isDisabled?(options?: T): boolean
+  disabledTooltip?(options?: T): string
 }
 
 export type FileActionOptions = {

diff --git a/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuItem.spec.ts b/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuItem.spec.ts
@@ -6,7 +6,8 @@ const selectors = {
   icon: '[data-testid="action-icon"]',
   img: '[data-testid="action-img"]',
   label: '[data-testid="action-label"]',
-  srHint: '[data-testid="action-sr-hint"]'
+  srHint: '[data-testid="action-sr-hint"]',
+  ariaLabel: '[aria-label="foo"]'
 }
 
 const fileActions = {
@@ -50,6 +51,15 @@ describe('ActionMenuItem component', () => {
     expect(wrapper.find(selectors.label).exists()).toBeTruthy()
     expect(wrapper.find(selectors.label).text()).toBe(action.label())
   })
+  it('renders a tooltip for a disabled action', () => {
+    const action = { ...fileActions.download, disabledTooltip: () => 'Foo', isDisabled: () => true }
+    const { wrapper } = getWrapper(action)
+
+    expect(wrapper.find(fileActions.download.selector).attributes().arialabel).toBe(
+      action.disabledTooltip()
+    )
+    expect(wrapper.find(fileActions.download.selector).attributes().disabled).toBeTruthy()
+  })
   describe('component is of type oc-button', () => {
     it('calls the action handler on button click', async () => {
       const action = fileActions.download