Feature/replace buefy notification

CHANGELOG.md

@@ -68,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GL #944) Replace buefy b-loading with c-loader from `csc-ui` and remove unused b-loading
 - (GL #944) Replace buefy b-table with c-data-table from `csc-ui`
 - (GL #944) Replace buefy dialogs with c-modal from `csc-ui`
+- (GL #944) Replace buefy notifications with c-toasts from `csc-ui`
 
 ### Fixed
 

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -384,13 +384,14 @@ export default {
     },
     confirmDelete: function (container, objects) {
       if (objects > 0) {
-        this.$buefy.notification.open({
-          message: this.$t("message.container_ops.deleteNote"),
-          type: "is-danger",
-          position: "is-top-right",
-          duration: 30000,
-          hasIcon: true,
-        });
+        document.querySelector("#container-error-toasts").addToast(
+          { 
+            progress: false,
+            type: "error",
+            duration: 30000,
+            message: this.$t("message.container_ops.deleteNote"),
+          },
+        );
         this.$router.push(
           this.$route.params.project
             + "/"

swift_browser_ui_frontend/src/components/SearchBox.vue

@@ -43,6 +43,12 @@
         </div>
       </template>
     </b-autocomplete>
+    <c-toasts
+      id="searchbox-toasts"
+      data-testid="searchbox-toasts"
+      vertical="top"
+      horizontal="right"
+    />
   </div>
 </template>
 
@@ -199,13 +205,14 @@ export default {
         ) &&
         ojbCount >= 10000
       ) {
-        this.$buefy.notification.open({
-          message: this.$t("message.search.buildingIndex"),
-          type: "is-info",
-          position: "is-top-right",
-          duration: 20000,
-          hasIcon: true,
-        });
+        document.querySelector("#searchbox-toasts").addToast(
+          {
+            duration: 20000,
+            type: "info",
+            progress: false,
+            message: this.$t("message.search.buildingIndex"),
+          },
+        );
         this.$store.state.db.preferences
           .where(":id")
           .equals(1)

swift_browser_ui_frontend/src/pages/BrowserPage.vue

@@ -66,6 +66,11 @@
           </p>
         </div>
       </c-toasts>
+      <c-toasts
+        id="container-error-toasts"
+        vertical="top"
+        horizontal="right"
+      />
     </div>
     <CFooter />
   </div>

swift_browser_ui_frontend/src/views/Tokens.vue

@@ -59,8 +59,14 @@
       hide-footer
     />
     <c-toasts
-      id="token-toasts"
-      data-testid="token-toasts"
+      id="add-token-toasts"
+      data-testid="add-token-toasts"
+      vertical="top"
+      horizontal="right"
+    />
+    <c-toasts
+      id="copy-token-toasts"
+      data-testid="copy-token-toasts"
     />
   </div>
 </template>
@@ -150,12 +156,14 @@ export default {
         identifier,
       ).then((ret) => {
         this.latest = ret;
-        this.$buefy.notification.open({
-          message: this.$t("message.tokens.copyToken"),
-          duration: 3600000,
-          type: "is-success",
-          queue: false,
-        });
+        document.querySelector("#add-token-toasts").addToast(
+          {
+            duration: 3600000,
+            type: "success",
+            progress: false,
+            message: this.$t("message.tokens.copyToken"),
+          },
+        );
         this.getTokens();
       });
     },
@@ -168,7 +176,7 @@ export default {
           this.latest,
         ).then(() => {
           this.copied = true;
-          document.querySelector("#token-toasts").addToast(
+          document.querySelector("#copy-token-toasts").addToast(
             {
               duration: 6000,
               type: "success",