diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-01 18:11:58 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-01 18:11:58 +0300 |
commit | 7b9eeda4329ef633e287ac69f1b0399c0dc7d64a (patch) | |
tree | c88aac94cf19e24ea5fa04010cef7a78ff6ef174 /app/assets/javascripts/vue_shared/components/confirm_danger | |
parent | 41876b483a9973c70657941b8d3217a327c1b58a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/confirm_danger')
3 files changed, 50 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js new file mode 100644 index 00000000000..18fa297da87 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js @@ -0,0 +1,28 @@ +/* eslint-disable @gitlab/require-i18n-strings */ +import ConfirmDanger from './confirm_danger.vue'; + +export default { + component: ConfirmDanger, + title: 'vue_shared/components/modals/confirm_danger_modal', +}; + +const Template = (args, { argTypes }) => ({ + components: { ConfirmDanger }, + props: Object.keys(argTypes), + template: '<confirm-danger v-bind="$props" />', + provide: { + confirmDangerMessage: 'You require more Vespene Gas', + }, +}); + +export const Default = Template.bind({}); +Default.args = { + phrase: 'You must construct additional pylons', + buttonText: 'Confirm button text', +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + ...Default.args, + disabled: 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 ebb1506895e..445fb5404a2 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,15 +1,17 @@ <script> -import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; import { CONFIRM_DANGER_MODAL_BUTTON, CONFIRM_DANGER_MODAL_TITLE, CONFIRM_DANGER_PHRASE_TEXT, CONFIRM_DANGER_WARNING, + CONFIRM_DANGER_MODAL_ERROR, } from './constants'; export default { name: 'ConfirmDangerModal', components: { + GlAlert, GlModal, GlFormGroup, GlFormInput, @@ -38,8 +40,8 @@ export default { }, computed: { isValid() { - return ( - this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase) + return Boolean( + this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase), ); }, actionPrimary() { @@ -59,6 +61,7 @@ export default { CONFIRM_DANGER_MODAL_TITLE, CONFIRM_DANGER_WARNING, CONFIRM_DANGER_PHRASE_TEXT, + CONFIRM_DANGER_MODAL_ERROR, }, }; </script> @@ -71,9 +74,15 @@ export default { :action-primary="actionPrimary" @primary="$emit('confirm')" > - <p v-if="confirmDangerMessage" class="text-danger" data-testid="confirm-danger-message"> + <gl-alert + v-if="confirmDangerMessage" + variant="danger" + data-testid="confirm-danger-message" + :dismissible="false" + class="gl-mb-4" + > {{ confirmDangerMessage }} - </p> + </gl-alert> <p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p> <p data-testid="confirm-danger-phrase"> <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT"> @@ -82,8 +91,13 @@ export default { </template> </gl-sprintf> </p> - <gl-form-group class="form-control" :state="isValid"> - <gl-form-input v-model="confirmationPhrase" data-testid="confirm-danger-input" type="text" /> + <gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR"> + <gl-form-input + v-model="confirmationPhrase" + class="form-control" + data-testid="confirm-danger-input" + type="text" + /> </gl-form-group> </gl-modal> </template> diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js b/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js index ddb381e87a3..fa44a9be411 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js @@ -2,6 +2,7 @@ import { __ } from '~/locale'; export const CONFIRM_DANGER_MODAL_ID = 'confirm-danger-modal'; export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required'); +export const CONFIRM_DANGER_MODAL_ERROR = __('Confirmation required'); export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm'); export const CONFIRM_DANGER_WARNING = __( 'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.', |