2 files changed, 42 insertions, 2 deletions
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
index f3380b7b4ba..1d8eb73d3d7 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -26,6 +26,16 @@ export default {
       required: false,
       default: 'confirm',
     },
+    secondaryText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    secondaryVariant: {
+      type: String,
+      required: false,
+      default: 'confirm',
+    },
     modalHtmlMessage: {
       type: String,
       required: false,
@@ -39,7 +49,26 @@ export default {
   },
   computed: {
     primaryAction() {
-      return { text: this.primaryText, attributes: { variant: this.primaryVariant } };
+      return {
+        text: this.primaryText,
+        attributes: {
+          variant: this.primaryVariant,
+          'data-qa-selector': 'confirm_ok_button',
+        },
+      };
+    },
+    secondaryAction() {
+      if (!this.secondaryText) {
+        return null;
+      }
+
+      return {
+        text: this.secondaryText,
+        attributes: {
+          variant: this.secondaryVariant,
+          category: 'secondary',
+        },
+      };
     },
     cancelAction() {
       return this.hideCancel ? null : this.$options.cancelAction;
@@ -63,6 +92,7 @@ export default {
     :title="title"
     :action-primary="primaryAction"
     :action-cancel="cancelAction"
+    :action-secondary="secondaryAction"
     :hide-header="!shouldShowHeader"
     @primary="$emit('confirmed')"
     @hidden="$emit('closed')"
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index a8a89d0644a..1adb6f9c26f 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -2,7 +2,15 @@ import Vue from 'vue';
 
 export function confirmAction(
   message,
-  { primaryBtnVariant, primaryBtnText, modalHtmlMessage, title, hideCancel } = {},
+  {
+    primaryBtnVariant,
+    primaryBtnText,
+    secondaryBtnVariant,
+    secondaryBtnText,
+    modalHtmlMessage,
+    title,
+    hideCancel,
+  } = {},
 ) {
   return new Promise((resolve) => {
     let confirmed = false;
@@ -16,6 +24,8 @@ export function confirmAction(
           'confirm-modal',
           {
             props: {
+              secondaryText: secondaryBtnText,
+              secondaryVariant: secondaryBtnVariant,
               primaryVariant: primaryBtnVariant,
               primaryText: primaryBtnText,
               title,