diff options
Diffstat (limited to 'app/assets/javascripts')
7 files changed, 185 insertions, 8 deletions
diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js index 5b9e70e3c09..ad70d9be16f 100644 --- a/app/assets/javascripts/confirm_danger_modal.js +++ b/app/assets/javascripts/confirm_danger_modal.js @@ -3,14 +3,14 @@ import { Rails } from '~/lib/utils/rails_ujs'; import { rstrip } from './lib/utils/common_utils'; function openConfirmDangerModal($form, $modal, text) { - const $input = $('.js-confirm-danger-input', $modal); + const $input = $('.js-legacy-confirm-danger-input', $modal); $input.val(''); $('.js-confirm-text', $modal).text(text || ''); $modal.modal('show'); - const confirmTextMatch = $('.js-confirm-danger-match', $modal).text(); - const $submit = $('.js-confirm-danger-submit', $modal); + const confirmTextMatch = $('.js-legacy-confirm-danger-match', $modal).text(); + const $submit = $('.js-legacy-confirm-danger-submit', $modal); $submit.disable(); $input.focus(); @@ -25,7 +25,7 @@ function openConfirmDangerModal($form, $modal, text) { }); // eslint-disable-next-line @gitlab/no-global-event-off - $('.js-confirm-danger-submit', $modal) + $('.js-legacy-confirm-danger-submit', $modal) .off('click') .on('click', () => { if ($form.data('remote')) { @@ -47,7 +47,7 @@ function getModal($btn) { } export default function initConfirmDangerModal() { - $(document).on('click', '.js-confirm-danger', (e) => { + $(document).on('click', '.js-legacy-confirm-danger', (e) => { const $btn = $(e.target); const checkFieldName = $btn.data('checkFieldName'); const checkFieldCompareValue = $btn.data('checkCompareValue'); diff --git a/app/assets/javascripts/init_confirm_danger.js b/app/assets/javascripts/init_confirm_danger.js new file mode 100644 index 00000000000..3e7f60bc237 --- /dev/null +++ b/app/assets/javascripts/init_confirm_danger.js @@ -0,0 +1,23 @@ +import Vue from 'vue'; +import ConfirmDanger from './vue_shared/components/confirm_danger/confirm_danger.vue'; + +export default () => { + const el = document.querySelector('.js-confirm-danger'); + if (!el) return null; + + const { phrase, buttonText, confirmDangerMessage } = el.dataset; + + return new Vue({ + el, + render: (createElement) => + createElement(ConfirmDanger, { + props: { + phrase, + buttonText, + }, + provide: { + confirmDangerMessage, + }, + }), + }); +}; diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue index 4b54cffe231..ae079da0b0b 100644 --- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue +++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue @@ -1,8 +1,12 @@ <script> import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg'; +import { GlSafeHtmlDirective } from '@gitlab/ui'; import { chartHeight } from '../../constants'; export default { + directives: { + SafeHtml: GlSafeHtmlDirective, + }, data() { return { height: chartHeight, @@ -18,14 +22,15 @@ export default { created() { this.chartEmptyStateIllustration = chartEmptyStateIllustration; }, + safeHtmlConfig: { ADD_TAGS: ['use'] }, }; </script> <template> <div class="d-flex flex-column justify-content-center"> <div + v-safe-html:[$options.safeHtmlConfig]="chartEmptyStateIllustration" class="gl-mt-3 svg-w-100 d-flex align-items-center" :style="svgContainerStyle" - v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */" ></div> <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5> </div> diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index 335d8d481fc..38351d30a8d 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -1,5 +1,5 @@ import { PROJECT_BADGE } from '~/badges/constants'; -import initConfirmDangerModal from '~/confirm_danger_modal'; +import initLegacyConfirmDangerModal from '~/confirm_danger_modal'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import initFilePickers from '~/file_pickers'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; @@ -13,7 +13,7 @@ import initProjectPermissionsSettings from '../shared/permissions'; import initProjectLoadingSpinner from '../shared/save_project_loader'; initFilePickers(); -initConfirmDangerModal(); +initLegacyConfirmDangerModal(); initSettingsPanels(); initProjectDeleteButton(); mountBadgeSettings(PROJECT_BADGE); 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 new file mode 100644 index 00000000000..294450851c5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue @@ -0,0 +1,49 @@ +<script> +import { GlButton, GlModalDirective } from '@gitlab/ui'; +import { CONFIRM_DANGER_MODAL_ID } from './constants'; +import ConfirmDangerModal from './confirm_danger_modal.vue'; + +export default { + name: 'ConfirmDanger', + components: { + GlButton, + ConfirmDangerModal, + }, + directives: { + GlModal: GlModalDirective, + }, + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + phrase: { + type: String, + required: true, + }, + buttonText: { + type: String, + required: true, + }, + }, + modalId: CONFIRM_DANGER_MODAL_ID, +}; +</script> +<template> + <div> + <gl-button + v-gl-modal="$options.modalId" + class="gl-button" + variant="danger" + :disabled="disabled" + data-testid="confirm-danger-button" + >{{ buttonText }}</gl-button + > + <confirm-danger-modal + :modal-id="$options.modalId" + :phrase="phrase" + @confirm="$emit('confirm')" + /> + </div> +</template> 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 new file mode 100644 index 00000000000..ebb1506895e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -0,0 +1,89 @@ +<script> +import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { + CONFIRM_DANGER_MODAL_BUTTON, + CONFIRM_DANGER_MODAL_TITLE, + CONFIRM_DANGER_PHRASE_TEXT, + CONFIRM_DANGER_WARNING, +} from './constants'; + +export default { + name: 'ConfirmDangerModal', + components: { + GlModal, + GlFormGroup, + GlFormInput, + GlSprintf, + }, + inject: { + confirmDangerMessage: { + default: '', + }, + confirmButtonText: { + default: CONFIRM_DANGER_MODAL_BUTTON, + }, + }, + props: { + modalId: { + type: String, + required: true, + }, + phrase: { + type: String, + required: true, + }, + }, + data() { + return { confirmationPhrase: '' }; + }, + computed: { + isValid() { + return ( + this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase) + ); + }, + actionPrimary() { + return { + text: this.confirmButtonText, + attributes: [{ variant: 'danger', disabled: !this.isValid }], + }; + }, + }, + methods: { + equalString(a, b) { + return a.trim().toLowerCase() === b.trim().toLowerCase(); + }, + }, + i18n: { + CONFIRM_DANGER_MODAL_BUTTON, + CONFIRM_DANGER_MODAL_TITLE, + CONFIRM_DANGER_WARNING, + CONFIRM_DANGER_PHRASE_TEXT, + }, +}; +</script> +<template> + <gl-modal + ref="modal" + :modal-id="modalId" + :data-testid="modalId" + :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE" + :action-primary="actionPrimary" + @primary="$emit('confirm')" + > + <p v-if="confirmDangerMessage" class="text-danger" data-testid="confirm-danger-message"> + {{ confirmDangerMessage }} + </p> + <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"> + <template #phrase_code> + <code>{{ phrase }}</code> + </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> + </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 new file mode 100644 index 00000000000..ddb381e87a3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/constants.js @@ -0,0 +1,11 @@ +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_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.', +); +export const CONFIRM_DANGER_PHRASE_TEXT = __( + 'Please type %{phrase_code} to proceed or close this modal to cancel.', +); |