Skip: Download progress bar (merge commit)

Merge branch 'feature/download-progress' into 'main' * Trim whitespace * Refactor. Clear download progress after successful download. * Update changelog * Add icons to alerts * Avoid overlapping download and upload notifications * Abort downloads and show toast after error * Minimize notifications for upload and download when both visible * Add download notification text * Don't overlap upload and download notifications * Enable tracking the progress of multiple direct downloads with single bar * Catch download start errors and show a toast * Add basic download progress bar Closes #1168, #1166, and #1126 See merge request https://gitlab.ci.csc.fi/sds-dev/sd-connect/swift-browser-ui/-/merge_requests/253 Approved-by: Hang Le <[email protected]> Co-authored-by: Monika Radaviciute <[email protected]> Co-authored-by: Monika Radaviciute <[email protected]> Merged by Hang Le <[email protected]>
CSCfi · Feb 7, 2024 · 94cceed · 94cceed
2 parents a69f3b3 + c4ba64a
commit 94cceed
Show file tree

Hide file tree

Showing 19 changed files with 587 additions and 139 deletions.
diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
@@ -20,6 +20,7 @@ asiasana
 asiasanalla
 asiasanat
 asiasanoja
+avaaminen
 avaimelle
 avaimen
 avaimet
@@ -136,6 +137,7 @@ kaikille
 kaikki
 kaikkien
 kansio
+kansioiden
 kansioille
 kansioina
 kansioita
@@ -241,6 +243,7 @@ laskutuksesta
 laskutusyksiköiden
 laskutusysiköiden
 lataa
+latauksen
 lataukset
 lataus
 latauslinkki
@@ -698,6 +701,7 @@ voivat
 vuoksi
 vähintään
 väliaikaiseen
+väliaikaisten
 yhdelle
 yhden
 yhdistetty

diff --git a/.github/config/.wordlist.txt b/.github/config/.wordlist.txt
@@ -20,6 +20,8 @@ cli
 configs
 containerport
 cp
+crdownload
+crswap
 cryptfiles
 cryptupload
 csc

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - (GL #1205) Add a route back to front page from top toolbar
+- (GL #1126) Added download progress bar for direct downloads (Chrome)
+- (GL #1166) Added clarifying text about folder extension during download
+- (GL #1168) Added notifications for failed downloads
 
 ### Changed
 - Refactor entries' files, IndexPage and IndexOIDCPage

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -268,3 +268,25 @@ export function checkIfCanDownloadTar(objs, isSubfolder) {
 export function timeout(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+export function addErrorToastOnMain(msg) {
+  document.querySelector("#container-error-toasts")
+    .addToast(
+      { progress: false,
+        type: "error",
+        duration: 6000,
+        message: msg },
+    );
+}
+
+export function moveToast(toastToMove, otherElement, restore) {
+  //restore toast to original position or
+  //move toast above another element
+  if (toastToMove && restore) {
+    toastToMove.style.marginBottom = "0";
+  }
+  else if (toastToMove && otherElement){
+    const h = otherElement.getBoundingClientRect().height;
+    toastToMove.style.marginBottom = h + "px";
+  }
+}
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
@@ -191,10 +191,6 @@ let default_translations = {
           "delete the sharing permissions?",
         share_delete_confirm: "Delete permissions",
       },
-      download: " Download",
-      downloadFiles: "Files can only be downloaded " +
-      "individually because there are file or subfolder names longer than " +
-      "99 characters.",
       largeDownMessage:
         "No large (> 1GiB) downloads enabled. Click to " +
         "enable them for the duration of the session.",
@@ -207,16 +203,26 @@ let default_translations = {
       },
       sharing: "Sharing - ",
       containers: "Folders - ",
+      download: {
+        download: " Download",
+        files: "Files can only be downloaded " +
+          "individually because there are file or subfolder names longer " +
+          "than 99 characters.",
+        inProgress: "Download in progress",
+        complete: "Download completed",
+        warnWait: "Please wait for the download to finish.",
+        warnTempFiles: "Opening temporary files or folders " +
+          "(.crdownload, .crswap) may interrupt the process.",
+        error: "Download has failed. Please try again.",
+      },
       upload: {
         duplicate: "Files with the same paths are not allowed.",
         sizeZero: "Empty files cannot be uploaded.",
         upfinish: "Finished uploading ",
         upfail: "Failed uploading ",
         upnotsupported: "Uploading is not supported by your browser",
-        isStarting: "Data upload will start shortly",
         hasStarted: "Uploading has started",
         inProgress: "Upload in progress",
-        longProgress: "Upload in progress",
         viewDestinationFolder: "View destination folder",
         maximize: "Maximize",
         minimize: "Minimize",
@@ -729,10 +735,6 @@ let default_translations = {
         share_delete_text: "Haluatko varmasti poistaa käyttöoikeuden?",
         share_delete_confirm: "Poista käyttöoikeus",
       },
-      download: " Lataa",
-      downloadFiles: "Tiedostot voidaan ladata vain " +
-      "erikseen, koska tiedostojen tai alikansioiden nimet ovat " +
-      "yli 99 merkkiä pitkiä.",
       largeDownMessage:
         "Suurten tiedostojen (> 1Gt) lataus täytyy hyväksyä " +
         "erikseen. Paina hyväksyäksesi suuret lataukset " +
@@ -746,16 +748,26 @@ let default_translations = {
       },
       sharing: "Jako - ",
       containers: "Kansiot - ",
+      download: {
+        download: " Lataa",
+        files: "Tiedostot voidaan ladata vain " +
+          "erikseen, koska tiedostojen tai alikansioiden nimet ovat " +
+          "yli 99 merkkiä pitkiä.",
+        inProgress: "Lataus käynnissä",
+        complete: "Lataus on valmis",
+        warnWait: "Odota, kunnes lataus on valmis. ",
+        warnTempFiles: "Väliaikaisten tiedostojen tai kansioiden " +
+        "(.crdownload, .crswap) avaaminen voi keskeyttää latauksen.",
+        error: "Lataus epäonnistui. Yritä uudelleen.",
+      },
       upload: {
         duplicate: "Tiedostot, joilla on samat polut, eivät ole sallittuja.",
         sizeZero: "Tyhjiä tiedostoja ei voi lähettää.",
         upfinish: "Lähetettiin tiedosto ",
         upfail: "Epäonnistuttiin lähettäessä tiedosto ",
         upnotsupported: "Selain ei tue tiedostojen lähettämistä",
         hasStarted: "Lähetys aloitettu",
-        isStarting: "Tiedostojen lähetys käynnistyy pian",
         inProgress: "Lähetys käynnissä",
-        longProgress: "Lähetys käynnissä, lähetetään tiedostoa ",
         viewDestinationFolder: "Näytä kohdekansio",
         maximize: "Suurenna",
         minimize: "Pienennä",

diff --git a/swift_browser_ui_frontend/src/common/socket.js b/swift_browser_ui_frontend/src/common/socket.js
@@ -135,6 +135,13 @@ export default class UploadSocket {
               if (DEV) console.log(downloadUrl);
               window.open(downloadUrl, "_blank");
             }
+          } else {
+            //show download progress
+            if (this.$store.state.downloadCount <= 0) {
+              this.$store.commit("eraseDownloadProgress");
+            }
+            this.$store.commit("addDownload");
+            this.$store.commit("toggleDownloadNotification", true);
           }
           break;
         case "downloadProgressing":
@@ -171,12 +178,33 @@ export default class UploadSocket {
             },
           );
           break;
+        case "error":
+          this.$store.commit("setDownloadError", true);
+          if (!this.useServiceWorker) {
+            this.$store.commit("toggleDownloadNotification", false);
+            this.$store.commit("removeDownload", true);
+            this.$store.commit("eraseDownloadProgress");
+          }
+          break;
+        case "progress":
+          this.$store.commit("updateDownloadProgress", e.data.progress);
+          break;
         case "finished":
           if (DEV) {
             console.log(
               `Finished a download in container ${e.data.container}`,
             );
           }
+          if (this.$store.state.downloadCount === 1) {
+            this.$store.commit("updateDownloadProgress", 1);
+            this.downWorker.postMessage({
+              command: "clear",
+            });
+            if (DEV) {
+              console.log("Clearing download progress interval");
+            }
+          }
+          this.$store.commit("removeDownload");
           break;
       }
     };

diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
@@ -42,8 +42,18 @@ const store = createStore({
     encryptedFile: "",
     encryptedFileProgress: undefined,
     uploadProgress: undefined,
-    uploadNotification: false,
-    uploadNotificationClosable: false,
+    uploadNotification: {
+      visible: false,
+      maximized: true,
+      closable: false,
+    },
+    downloadCount: 0,
+    downloadProgress: undefined,
+    downloadNotification: {
+      visible: false,
+      maximized: true,
+    },
+    downloadError: false,
     altContainer: undefined,
     uploadInfo: undefined,
     uploadEndpoint: "",
@@ -104,15 +114,19 @@ const store = createStore({
     },
     setUploading(state) {
       state.isUploading = true;
-      if (!state.uploadNotification) state.uploadNotification = true;
+      if (!state.uploadNotification.visible) {
+        state.uploadNotification.visible = true;
+      }
     },
     stopUploading(state, cancelled = false) {
       state.isUploading = false;
       if (!cancelled) state.isLoaderVisible = true;
     },
     setChunking(state) {
       state.isChunking = true;
-      if (!state.uploadNotification) state.uploadNotification = true;
+      if (!state.uploadNotification.visible) {
+        state.uploadNotification.visible = true;
+      }
     },
     stopChunking(state) {
       state.isChunking = false;
@@ -130,14 +144,41 @@ const store = createStore({
       state.encryptedFileProgress = undefined;
     },
     toggleUploadNotification(state, payload) {
-      state.uploadNotification = payload;
+      state.uploadNotification.visible = payload;
+    },
+    toggleUploadNotificationSize(state) {
+      state.uploadNotification.maximized =
+        !state.uploadNotification.maximized;
+    },
+    toggleDownloadNotification(state, payload) {
+      state.downloadNotification.visible = payload;
+    },
+    toggleDownloadNotificationSize(state) {
+      state.downloadNotification.maximized =
+        !state.downloadNotification.maximized;
     },
     updateProgress(state, progress) {
       state.uploadProgress = progress;
     },
     eraseProgress(state) {
       state.uploadProgress = undefined;
     },
+    setDownloadError(state, payload) {
+      state.downloadError = payload;
+    },
+    addDownload(state) {
+      state.downloadCount += 1;
+    },
+    removeDownload(state, all = false) {
+      if (all) state.downloadCount = 0;
+      else state.downloadCount -= 1;
+    },
+    updateDownloadProgress(state, progress) {
+      state.downloadProgress = progress;
+    },
+    eraseDownloadProgress(state) {
+      state.downloadProgress = undefined;
+    },
     setAltContainer(state, altContainer) {
       state.altContainer = altContainer;
     },
@@ -206,18 +247,18 @@ const store = createStore({
     },
     setCurrentUpload(state, cur) {
       state.currentUpload = cur;
-      state.uploadNotificationClosable = false;
+      state.uploadNotification.closable = false;
     },
     eraseCurrentUpload(state) {
       delete state.currentUpload;
       state.currentUpload = undefined;
-      state.uploadNotificationClosable = true;
+      state.uploadNotification.closable = true;
     },
     setNotClosable(state) {
-      state.uploadNotificationClosable = false;
+      state.uploadNotification.closable = false;
     },
     eraseNotClosable(state) {
-      state.uploadNotificationClosable = true;
+      state.uploadNotification.closable = true;
     },
     createCurrentUploadAbort(state) {
       state.uploadAbort = new AbortController();

diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -102,6 +102,7 @@
 
 <script>
 import {
+  addErrorToastOnMain,
   getAccessDetails,
 } from "@/common/globalFunctions";
 import { setPrevActiveElement } from "@/common/keyboardNavigation";
@@ -149,6 +150,9 @@ export default {
     client() {
       return this.$store.state.client;
     },
+    downloadError() {
+      return this.$store.state.downloadError;
+    },
   },
   watch: {
     container() {
@@ -157,6 +161,12 @@ export default {
     client() {
       this.checkIfCanReadWrite();
     },
+    downloadError() {
+      if (this.downloadError) {
+        addErrorToastOnMain(this.$t("message.download.error"));
+        this.$store.commit("setDownloadError", false);
+      }
+    },
   },
   methods: {
     changeActive(event) {

diff --git a/swift_browser_ui_frontend/src/components/CObjectTable.vue b/swift_browser_ui_frontend/src/components/CObjectTable.vue
@@ -45,6 +45,7 @@ import {
   getPaginationOptions,
   checkIfItemIsLastOnPage,
   checkIfCanDownloadTar,
+  addErrorToastOnMain,
 } from "@/common/globalFunctions";
 import {
   setPrevActiveElement,
@@ -226,7 +227,7 @@ export default {
           align: "end",
           children: [
             {
-              value: this.$t("message.download"),
+              value: this.$t("message.download.download"),
               component: {
                 tag: "c-button",
                 params: {
@@ -427,15 +428,11 @@ export default {
             this.$route.params.owner ? this.$route.params.owner : "",
           ).then(() => {
             if (DEV) console.log(`Started downloading subfolder ${object.name}`);
+          }).catch(() => {
+            addErrorToastOnMain(this.$t("message.download.error"));
           });
         } else {
-          document.querySelector("#container-error-toasts")
-            .addToast(
-              { progress: false,
-                type: "error",
-                duration: 6000,
-                message: this.$t("message.downloadFiles")},
-            );
+          addErrorToastOnMain(this.$t("message.download.files"));
         }
       } else {
         this.$store.state.socket.addDownload(
@@ -444,6 +441,8 @@ export default {
           this.$route.params.owner ? this.$route.params.owner : "",
         ).then(() => {
           if (DEV) console.log(`Started downloading object ${object.name}`);
+        }).catch(() => {
+          addErrorToastOnMain(this.$t("message.download.error"));
         });
       }
     },