Merge branch 'jnnkl-352013-add-secondary-action-to-confirm-modal' into 'master'

Add Secondary Action to confirm_via_gl_modal

See merge request gitlab-org/gitlab!84267

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,
@@ -47,6 +57,18 @@ export default {
         },
       };
     },
+    secondaryAction() {
+      if (!this.secondaryText) {
+        return null;
+      }
+
+      return {
+        text: this.secondaryText,
+        attributes: {
+          variant: this.secondaryVariant,
+        },
+      };
+    },
     cancelAction() {
       return this.hideCancel ? null : this.$options.cancelAction;
     },
@@ -69,6 +91,7 @@ export default {
     :title="title"
     :action-primary="primaryAction"
     :action-cancel="cancelAction"
+    :action-secondary="secondaryAction"
     :hide-header="!shouldShowHeader"
     @primary="$emit('confirmed')"
     @hidden="$emit('closed')"

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,

spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js

@@ -5,12 +5,23 @@ import ConfirmModal from '~/lib/utils/confirm_via_gl_modal/confirm_modal.vue';
 describe('Confirm Modal', () => {
   let wrapper;
   let modal;
+  const SECONDARY_TEXT = 'secondaryText';
+  const SECONDARY_VARIANT = 'danger';
 
-  const createComponent = ({ primaryText, primaryVariant, title, hideCancel = false } = {}) => {
+  const createComponent = ({
+    primaryText,
+    primaryVariant,
+    secondaryText,
+    secondaryVariant,
+    title,
+    hideCancel = false,
+  } = {}) => {
     wrapper = mount(ConfirmModal, {
       propsData: {
         primaryText,
         primaryVariant,
+        secondaryText,
+        secondaryVariant,
         hideCancel,
         title,
       },
@@ -65,6 +76,19 @@ describe('Confirm Modal', () => {
       expect(props.actionCancel).toBeNull();
     });
 
+    it('should not show secondary Button when secondary Text is not set', () => {
+      createComponent();
+      const props = findGlModal().props();
+      expect(props.actionSecondary).toBeNull();
+    });
+
+    it('should show secondary Button when secondaryText is set', () => {
+      createComponent({ secondaryText: SECONDARY_TEXT, secondaryVariant: SECONDARY_VARIANT });
+      const actionSecondary = findGlModal().props('actionSecondary');
+      expect(actionSecondary.text).toEqual(SECONDARY_TEXT);
+      expect(actionSecondary.attributes.variant).toEqual(SECONDARY_VARIANT);
+    });
+
     it('should set the modal title when the `title` prop is set', () => {
       const title = 'Modal title';
       createComponent({ title });