Skip to content

Add Secondary Action to confirm_via_gl_modal

What does this MR do and why?

This MR is the first part of solving: #352013 (closed)

It adds support for a secondary Button to the shared confirm_via_gl_modal component.

Screenshots or screen recordings

before after
Screenshot_2022-04-04_at_10.19.34 Screenshot_2022-04-04_at_13.33.06

How to set up and validate locally

diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index eec6b9ba542..7ae741047fa 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -357,7 +357,14 @@ export default {
     }) {
       if (shouldConfirm && isDirty) {
         const msg = __('Are you sure you want to cancel editing this comment?');
-        const confirmed = await confirmAction(msg);
+        const confirmed = await confirmAction(msg, {
+          primaryBtnText: __('Cancel Editing'),
+          primaryBtnVariant: 'danger',
+          secondaryBtnVariant: 'confirm',
+          secondaryBtnText: __('Continue Editing'),
+          hideCancel: true,
+        });
         if (!confirmed) return;
       }
       this.$refs.noteBody.resetAutoSave();
  1. apply this diff
  2. Open a Merge Request
  3. write and save a comment
  4. edit comment
  5. cancel edit of comment
  6. see modal in action

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jannik Lehmann

Merge request reports

Loading