1 files changed, 30 insertions, 4 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 733d0f69f5d..f3380b7b4ba 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
@@ -1,13 +1,21 @@
 <script>
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   cancelAction: { text: __('Cancel') },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   components: {
     GlModal,
   },
   props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
     primaryText: {
       type: String,
       required: false,
@@ -18,11 +26,27 @@ export default {
       required: false,
       default: 'confirm',
     },
+    modalHtmlMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    hideCancel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     primaryAction() {
       return { text: this.primaryText, attributes: { variant: this.primaryVariant } };
     },
+    cancelAction() {
+      return this.hideCancel ? null : this.$options.cancelAction;
+    },
+    shouldShowHeader() {
+      return Boolean(this.title?.length);
+    },
   },
   mounted() {
     this.$refs.modal.show();
@@ -36,12 +60,14 @@ export default {
     size="sm"
     modal-id="confirmationModal"
     body-class="gl-display-flex"
+    :title="title"
     :action-primary="primaryAction"
-    :action-cancel="$options.cancelAction"
-    hide-header
+    :action-cancel="cancelAction"
+    :hide-header="!shouldShowHeader"
     @primary="$emit('confirmed')"
     @hidden="$emit('closed')"
   >
-    <div class="gl-align-self-center"><slot></slot></div>
+    <div v-if="!modalHtmlMessage" class="gl-align-self-center"><slot></slot></div>
+    <div v-else v-safe-html="modalHtmlMessage" class="gl-align-self-center"></div>
   </gl-modal>
 </template>