Replace buefy snackbars

CHANGELOG.md

@@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #920) Optimize docker builds, making them faster by leveraging more caching mechanisms and removing unnecessary package installation
 - (GH #1007) Create new Taginput component to replace Buefy's taginput component
 - (GH #1009) Replace buefy toasts with c-toasts from `csc-ui`
+- (GH #1014) Replace buefy snackbars with custom c-toasts from `csc-ui`
 
 ### Fixed
 

swift_browser_ui_frontend/src/common/lang.js

@@ -425,6 +425,10 @@ let default_translations = {
         uploadedFiles:
           "Uploaded files will be shared with all project members in ",
         advancedOptions: "Advanced encryption options",
+        enReady:
+          "Encryption engine is ready. Refresh the " +
+          "window to enable encryption.",
+        refresh: "Refresh",
       },
       search: {
         container: "Bucket",
@@ -903,6 +907,10 @@ let default_translations = {
         uploadedFiles:
           "Lähetetyt tiedostot jaetaan kaikille jäsenille projektissa ",
         advancedOptions: "Edistyneitä salausvaihtoehtoja",
+        enReady:
+          "Encryption engine is ready. Refresh the " +
+          "window to enable encryption.",
+        refresh: "Refresh",
       },
       search: {
         container: "Säiliö",

swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue

@@ -63,6 +63,18 @@
         vertical="center"
         data-testid="copy-toasts"
       />
+      <c-toasts
+        id="refresh-toasts"
+        data-testid="refresh-toasts"
+      >
+        <p>{{ $t("message.encrypt.enReady") }}</p>
+        <c-button
+          text
+          @click="handleRefreshClick"
+        >
+          {{ $t("message.encrypt.refresh") }}
+        </c-button>
+      </c-toasts>
       <c-spacer />
       <div class="navbar-item">
         <c-button
@@ -164,6 +176,10 @@ export default {
         });
       }
     },
+    handleRefreshClick: function() {
+      document.querySelector("#refresh-toasts").removeToast("refresh-toast");
+      location.reload();
+    },
   },
 };
 </script>

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -113,6 +113,18 @@
       id="objects-toasts"
       data-testid="objects-toasts"
     />
+    <c-toasts
+      id="largeDownload-toasts"
+      data-testid="largeDownload-toasts"
+    >
+      <p>{{ $t("message.largeDownMessage") }}</p>
+      <c-button
+        text
+        @click="removeToast"
+      >
+        {{ $t("message.largeDownAction") }}
+      </c-button>
+    </c-toasts>
   </div>
 </template>
 
@@ -430,17 +442,19 @@ export default {
         });
       }
     },
+    removeToast: function() {
+      this.enableDownload();
+      document.querySelector("#largeDownload-toasts")
+        .removeToast("largeDownload");
+    },
     confirmDownload: function () {
-      // Snackbar for enabling large downloads for the duration of the
-      // session
-      this.$buefy.snackbar.open({
-        duration: 5000,
-        message: this.$t("message.largeDownMessage"),
-        type: "is-success",
-        position: "is-top",
-        actionText: this.$t("message.largeDownAction"),
-        onAction: this.enableDownload,
-      });
+      document.querySelector("#largeDownload-toasts").addToast(
+        { type: "info",
+          message: "",
+          id: "largeDownload",
+          progress: false,
+          custom: true },
+      );
     },
     enableDownload: function () {
       // Enables large downloads upon execution

swift_browser_ui_frontend/src/entries/main.js

@@ -247,18 +247,14 @@ new Vue({
 
     navigator.serviceWorker.addEventListener("message", e => {
       if (e.data.eventType == "wasmReady") {
-        this.$buefy.snackbar.open({
-          message:
-            "Encryption engine is ready. Hit refresh to refresh the " +
-            "window to enable encryption.",
-          type: "is-success",
-          position: "is-top",
-          actionText: "Refresh",
-          indefinite: true,
-          onAction: () => {
-            location.reload();
-          },
-        });
+        document.querySelector("#refresh-toasts").addToast(
+          { type: "success",
+            message: "",
+            id: "refresh-toast",
+            progress: false,
+            persistent: true,
+            custom: true },
+        );
       }
     });