Respect archiver limits for batch download action (#8456)

changelog/unreleased/enhancement-respect-archiver-limits

@@ -0,0 +1,8 @@
+Enhancement: Respect archiver limits
+
+The archiver service can now announce a limit for both the amount of resources and 
+the size 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

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

packages/web-app-files/src/composables/actions/files/useFileActionsDownloadArchive.ts

@@ -59,6 +59,28 @@ export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> }
       })
   }
 
+  const archiverLimitsExceeded = (resources: Resource[]) => {
+    const archiverCapabilities = archiverService.capability
+    if (!archiverCapabilities) {
+      return
+    }
+
+    const selectedFilesAmount = resources.length
+
+    // TODO: selectedFilesSize doesn't traverse into folders, so currently limited to directly selected resources
+    const selectedFilesSize = resources.reduce(
+      (accumulator, currentValue) =>
+        accumulator +
+        (typeof currentValue.size === 'string' ? parseInt(currentValue.size) : currentValue.size),
+      0
+    )
+
+    return (
+      selectedFilesAmount > parseInt(archiverCapabilities.max_num_files) ||
+      selectedFilesSize > parseInt(archiverCapabilities.max_size)
+    )
+  }
+
   const actions = computed((): FileAction[] => {
     return [
       {
@@ -68,6 +90,12 @@ export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> }
         label: () => {
           return $gettext('Download')
         },
+        disabledTooltip: ({ resources }) => {
+          return archiverLimitsExceeded(resources)
+            ? $gettext('Unable to download that many files at once')
+            : ''
+        },
+        isDisabled: ({ resources }) => archiverLimitsExceeded(resources),
         isEnabled: ({ resources }) => {
           if (
             unref(isFilesAppActive) &&

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 {

packages/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">
             <!---->

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 () => {

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"

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 = {

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