@nethserver/ns8-ui-lib 1.12.2 → 1.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "1.12.2",
+  "version": "1.12.4",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",
@@ -53,7 +53,7 @@
     "mark.js": "^8.11.1",
     "minimist": "^1.2.5",
     "rollup": "^2.53.2",
-    "rollup-plugin-terser": "^7.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
     "rollup-plugin-vue": "^5.1.9",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12"

package/src/lib-components/NsInlineNotification.vue

@@ -51,20 +51,20 @@
         </p>
       </div>
     </div>
-    <button
+    <NsButton
       v-if="actionLabel"
       @click="$emit('action')"
+      :loading="loadingAction"
+      kind="ghost"
+      size="sm"
+      type="button"
       :class="[
         `${carbonPrefix}--inline-notification__action-button`,
-        `${carbonPrefix}--btn`,
-        `${carbonPrefix}--btn--sm`,
-        `${carbonPrefix}--btn--ghost`,
         'action-button'
       ]"
-      type="button"
     >
       {{ actionLabel }}
-    </button>
+    </NsButton>
     <button
       v-if="showCloseButton"
       type="button"
@@ -81,11 +81,12 @@
 <script>
 import { CvInlineNotification } from "@carbon/vue";
 import NsCircleTimer from "./NsCircleTimer.vue";
+import NsButton from "./NsButton.vue";
 
 export default {
   name: "NsInlineNotification",
   extends: CvInlineNotification,
-  components: { NsCircleTimer },
+  components: { NsCircleTimer, NsButton },
   props: {
     showCloseButton: {
       type: Boolean,
@@ -107,6 +108,10 @@ export default {
       type: Boolean,
       default: false
     },
+    loadingAction: {
+      type: Boolean,
+      default: false
+    },
     timer: {
       type: Number
     }

package/src/lib-components/NsToastNotification.vue

@@ -45,7 +45,7 @@
 
         <!-- cancel button -->
         <div
-          v-if="isCancelShown && isProgressShown"
+          v-if="isCancelShown && isProgressShown && !isConfirmCancelShown"
           :class="[
             `${carbonPrefix}--toast-notification__caption`,
             `action`,
@@ -58,16 +58,50 @@
               `${carbonPrefix}--inline-notification__action-button`,
               `${carbonPrefix}--btn`,
               `${carbonPrefix}--btn--sm`,
-              { 'bx--btn--ghost': !isConfirmCancelShown },
-              { 'bx--btn--danger': isConfirmCancelShown }
+              `bx--btn--ghost`,
             ]"
-            :disabled="isCancelButtonDisabled"
             type="button"
           >
-            {{ isConfirmCancelShown ? confirmCancelLabel : cancelLabel }}
+            {{ cancelLabel }}
           </button>
         </div>
 
+        <!-- cancel confirmation -->
+        <div
+          v-else-if="isCancelShown && isProgressShown && isConfirmCancelShown"
+          class="cancel-confirmation"
+        >
+          <p class="cancel-confirmation__text">{{ confirmCancelText }}</p>
+          <div class="cancel-confirmation__buttons">
+            <button
+              @click="handleKeepRunning"
+              :class="[
+                `${carbonPrefix}--inline-notification__action-button`,
+                `${carbonPrefix}--btn`,
+                `${carbonPrefix}--btn--sm`,
+                `bx--btn--ghost`,
+              ]"
+              type="button"
+              :disabled="isKeepRunningButtonDisabled"
+            >
+              {{ keepRunningLabel }}
+            </button>
+            <button
+              @click="confirmCancelTask"
+              :class="[
+                `${carbonPrefix}--inline-notification__action-button`,
+                `${carbonPrefix}--btn`,
+                `${carbonPrefix}--btn--sm`,
+                `bx--btn--danger`,
+              ]"
+              :disabled="isCancelButtonDisabled"
+              type="button"
+            >
+              {{ confirmCancelLabel }}
+            </button>
+          </div>
+        </div>
+
         <!-- action button -->
         <div
           v-else-if="actionLabel"
@@ -153,7 +187,12 @@ export default {
       default: false
     },
     cancelLabel: { type: String, default: "Abort" },
-    confirmCancelLabel: { type: String, default: "Confirm abort" },
+    confirmCancelText: {
+      type: String,
+      default: "Abort this task? This action can't be undone",
+    },
+    keepRunningLabel: { type: String, default: "Keep running" },
+    confirmCancelLabel: { type: String, default: "Yes, abort" },
     closeAriaLabel: { type: String, default: "Dismiss notification" },
     kind: {
       type: String,
@@ -165,25 +204,23 @@ export default {
   data() {
     return {
       isConfirmCancelShown: false,
-      isCancelButtonDisabled: false
+      isCancelButtonDisabled: false,
+      isKeepRunningButtonDisabled: false,
     };
   },
   methods: {
     cancelTask() {
-      if (!this.isConfirmCancelShown) {
-        // show confirmation
-        this.isConfirmCancelShown = true;
-
-        setTimeout(() => {
-          this.isConfirmCancelShown = false;
-        }, 5000);
-      } else {
-        // cancel task
-        this.$emit("cancelTask", this.id);
-        this.isCancelButtonDisabled = true;
-      }
-    }
-  }
+      this.isConfirmCancelShown = true;
+    },
+    handleKeepRunning() {
+      this.isConfirmCancelShown = false;
+    },
+    confirmCancelTask() {
+      this.$emit("cancelTask", this.id);
+      this.isCancelButtonDisabled = true;
+      this.isKeepRunningButtonDisabled = true;
+    },
+  },
 };
 </script>
 
@@ -198,6 +235,17 @@ export default {
   margin-bottom: 0;
 }
 
+.cancel-confirmation {
+  margin-top: 1rem;
+}
+
+.cancel-confirmation__buttons {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  gap: 2rem;
+}
+
 .bx--toast-notification .bx--inline-notification__action-button {
   // following rule uses branding color so it's inside core _core.scss
   // color: $inverse-link;