diff --git a/app/assets/javascripts/init_confirm_danger.js b/app/assets/javascripts/init_confirm_danger.js index a8833a17467..98bfa48740c 100644 --- a/app/assets/javascripts/init_confirm_danger.js +++ b/app/assets/javascripts/init_confirm_danger.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { pickBy } from 'lodash'; import { parseBoolean } from './lib/utils/common_utils'; import ConfirmDanger from './vue_shared/components/confirm_danger/confirm_danger.vue'; @@ -12,21 +13,32 @@ export default () => { buttonText, buttonClass = '', buttonTestid = null, + buttonVariant = null, confirmDangerMessage, + confirmButtonText = null, disabled = false, + additionalInformation, + htmlConfirmationMessage, } = el.dataset; return new Vue({ el, - provide: { - confirmDangerMessage, - }, + provide: pickBy( + { + htmlConfirmationMessage, + confirmDangerMessage, + additionalInformation, + confirmButtonText, + }, + (v) => Boolean(v), + ), render: (createElement) => createElement(ConfirmDanger, { props: { phrase, buttonText, buttonClass, + buttonVariant, buttonTestid, disabled: parseBoolean(disabled), }, diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue index f93415ced45..e12e06a2454 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue @@ -36,6 +36,11 @@ export default { required: false, default: 'confirm-danger-button', }, + buttonVariant: { + type: String, + required: false, + default: 'danger', + }, }, modalId: CONFIRM_DANGER_MODAL_ID, }; @@ -45,7 +50,7 @@ export default { {{ buttonText }} ({ props: Object.keys(argTypes), template: '', provide: { - confirmDangerMessage: 'You require more Vespene Gas', + additionalInformation: args.additionalInformation || null, + confirmDangerMessage: args.confirmDangerMessage || 'You require more Vespene Gas', + htmlConfirmationMessage: args.confirmDangerMessage || false, }, }); @@ -26,3 +28,16 @@ Disabled.args = { ...Default.args, disabled: true, }; + +export const AdditionalInformation = Template.bind({}); +AdditionalInformation.args = { + ...Default.args, + additionalInformation: 'This replaces the default warning information', +}; + +export const HtmlMessage = Template.bind({}); +HtmlMessage.args = { + ...Default.args, + confirmDangerMessage: 'You strongly require more Vespene Gas', + htmlConfirmationMessage: true, +}; diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue index 5bbe44b20b3..88890b3332d 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -1,5 +1,12 @@