Add alert which prompts user to confirm they want to go through with …

…export when there are too many files
UNC-Libraries · Nov 27, 2024 · 30cc970 · 30cc970
1 parent 3984c4e
commit 30cc970
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 5 deletions.
diff --git a/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue b/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue
@@ -69,7 +69,8 @@
                     <h3 class="column">{{ $t('full_record.item_list') }} ({{ childCount }})</h3>
                     <bulk-download :has-bulk-download-access="recordData.canBulkDownload"
                                    :total-download-size="recordData.totalDownloadSize"
-                                   :work-id="recordData.briefObject.id">
+                                   :work-id="recordData.briefObject.id"
+                                   :child-count="childCount">
                     </bulk-download>
                 </div>
                 <file-list id="file-display"

diff --git a/static/js/vue-cdr-access/src/components/full_record/bulkDownload.vue b/static/js/vue-cdr-access/src/components/full_record/bulkDownload.vue
@@ -1,9 +1,12 @@
 <template>
     <div v-if="hasDownloadableContent" class="column pr-0 has-text-right">
-        <a v-if="showTotalFilesize" class="bulk-download bulk-download-link button action is-primary" :href="downloadBulkUrl(workId)">
-                    <span class="icon">
-                        <i class="fa fa-archive"></i>
-                    </span>
+        <a v-if="showTotalFilesize"
+           class="bulk-download bulk-download-link button action is-primary"
+           :href="downloadBulkUrl(workId)"
+           @click.prevent="handleDownload">
+            <span class="icon">
+                <i class="fa fa-archive"></i>
+            </span>
             <span>{{ $t('full_record.bulk_download') }} ({{ formatFilesize(totalDownloadSize) }})</span>
         </a>
         <a v-else class="bulk-download bulk-download-email button action" href="https://library.unc.edu/contact-us/?destination=wilson">
@@ -35,17 +38,41 @@ export default {
             default: false,
             type: Boolean
         },
+        childCount: {
+            default: null,
+            type: Number
+        },
         workId: String
     },
 
     computed: {
+        hasTooManyChildren() {
+            // Based off of the limit set in DownloadBulkService
+            return this.childCount > 100;
+        },
+
         hasDownloadableContent() {
             return this.hasBulkDownloadAccess && this.totalDownloadSize !== null;
         },
 
         showTotalFilesize() {
             return this.hasBulkDownloadAccess && this.totalDownloadSize <= ONE_GIGABYTE;
         }
+    },
+
+    methods: {
+        handleDownload(event) {
+            if (this.hasTooManyChildren) {
+                // Prevent navigation if user cancels
+                if (!confirm("Number of files exceeds the download limit, only the first 100 will be exported, do you want continue?")) {
+                    return;
+                }
+            }
+
+            // Trigger the download
+            const link = event.target.closest('a');
+            window.location.href = link.href;
+        }
     }
 }
 </script>
diff --git a/static/js/vue-cdr-access/tests/unit/bulkDownload.spec.js b/static/js/vue-cdr-access/tests/unit/bulkDownload.spec.js
@@ -22,6 +22,7 @@ describe('bulkDownload.vue', () => {
                 totalDownloadSize: 8193,
                 hasBulkDownloadAccess: true,
                 workId: work_id,
+                childCount: 5
             }
         });
     });
@@ -68,4 +69,49 @@ describe('bulkDownload.vue', () => {
         let download_link = wrapper.find('.actionlink');
         expect(download_link.exists()).toBe(false);
     });
+
+    it ("prompts user for confirmation if there are more than 100 files", async () => {
+        // Mock window.confirm
+        const confirmMock = jest.spyOn(window, 'confirm');
+
+        // Mock return values for confirm
+        confirmMock.mockImplementationOnce(() => false); // Simulate "No" click
+        confirmMock.mockImplementationOnce(() => true);  // Simulate "Yes" click
+
+        // Mock navigation
+        const locationMock = jest.spyOn(window, 'location', 'get');
+        const mockLocation = { href: '' };
+        locationMock.mockReturnValue(mockLocation);
+
+        await wrapper.setProps({
+            childCount: 200
+        });
+
+        let download_link = wrapper.find('.bulk-download-link');
+        let download_email = wrapper.find('.bulk-download-email');
+
+        expect(download_link.exists()).toBe(true);
+        expect(download_email.exists()).toBe(false);
+        expect(download_link.attributes('href')).toEqual(expect.stringContaining(`/services/api/bulkDownload/${work_id}`));
+        expect(download_link.text()).toEqual(expect.stringContaining('Download All Files (8 KB)'));
+
+        // Trigger the click (simulating user action)
+        await download_link.trigger('click');
+        expect(window.confirm).toHaveBeenCalledWith(
+            "Number of files exceeds the download limit, only the first 100 will be exported, do you want continue?"
+        );
+
+        // Verify that "No" prevents navigation
+        expect(mockLocation.href).toBe('');
+
+        // Simulate another click with "Yes"
+        await download_link.trigger('click');
+        expect(window.confirm).toBeCalledTimes(2);
+        // Download should occur this time
+        expect(mockLocation.href).toContain(`/services/api/bulkDownload/${work_id}`);
+
+        // Cleanup mocks
+        confirmMock.mockRestore();
+        locationMock.mockRestore();
+    });
 });