diff options
Diffstat (limited to 'app/assets/javascripts/flash.js')
-rw-r--r-- | app/assets/javascripts/flash.js | 137 |
1 files changed, 0 insertions, 137 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js deleted file mode 100644 index 483f1d2c7a0..00000000000 --- a/app/assets/javascripts/flash.js +++ /dev/null @@ -1,137 +0,0 @@ -import * as Sentry from '@sentry/browser'; -import Vue from 'vue'; -import { GlAlert } from '@gitlab/ui'; -import { __ } from '~/locale'; - -export const VARIANT_SUCCESS = 'success'; -export const VARIANT_WARNING = 'warning'; -export const VARIANT_DANGER = 'danger'; -export const VARIANT_INFO = 'info'; -export const VARIANT_TIP = 'tip'; - -/** - * Render an alert at the top of the page, or, optionally an - * arbitrary existing container. This alert is always dismissible. - * - * @example - * // Render a new alert - * import { createAlert, VARIANT_WARNING } from '~/flash'; - * - * createAlert({ message: 'My error message' }); - * createAlert({ message: 'My warning message', variant: VARIANT_WARNING }); - * - * @example - * // Dismiss this alert programmatically - * const alert = createAlert({ message: 'Message' }); - * - * // ... - * - * alert.dismiss(); - * - * @example - * // Respond to the alert being dismissed - * createAlert({ message: 'Message', onDismiss: () => {} }); - * - * @param {object} options - Options to control the flash message - * @param {string} options.message - Alert message text - * @param {string} [options.title] - Alert title - * @param {VARIANT_SUCCESS|VARIANT_WARNING|VARIANT_DANGER|VARIANT_INFO|VARIANT_TIP} [options.variant] - Which GlAlert variant to use; it defaults to VARIANT_DANGER. - * @param {object} [options.parent] - Reference to parent element under which alert needs to appear. Defaults to `document`. - * @param {Function} [options.onDismiss] - Handler to call when this alert is dismissed. - * @param {string} [options.containerSelector] - Selector for the container of the alert - * @param {boolean} [options.preservePrevious] - Set to `true` to preserve previous alerts. Defaults to `false`. - * @param {object} [options.primaryButton] - Object describing primary button of alert - * @param {string} [options.primaryButton.link] - Href of primary button - * @param {string} [options.primaryButton.text] - Text of primary button - * @param {Function} [options.primaryButton.clickHandler] - Handler to call when primary button is clicked on. The click event is sent as an argument. - * @param {object} [options.secondaryButton] - Object describing secondary button of alert - * @param {string} [options.secondaryButton.link] - Href of secondary button - * @param {string} [options.secondaryButton.text] - Text of secondary button - * @param {Function} [options.secondaryButton.clickHandler] - Handler to call when secondary button is clicked on. The click event is sent as an argument. - * @param {boolean} [options.captureError] - Whether to send error to Sentry - * @param {object} [options.error] - Error to be captured in Sentry - */ -export const createAlert = ({ - message, - title, - variant = VARIANT_DANGER, - parent = document, - containerSelector = '.flash-container', - preservePrevious = false, - primaryButton = null, - secondaryButton = null, - onDismiss = null, - captureError = false, - error = null, -}) => { - if (captureError && error) Sentry.captureException(error); - - const alertContainer = parent.querySelector(containerSelector); - if (!alertContainer) return null; - - const el = document.createElement('div'); - if (preservePrevious) { - alertContainer.appendChild(el); - } else { - alertContainer.replaceChildren(el); - } - - return new Vue({ - el, - components: { - GlAlert, - }, - methods: { - /** - * Public method to dismiss this alert and removes - * this Vue instance. - */ - dismiss() { - if (onDismiss) { - onDismiss(); - } - this.$destroy(); - this.$el.parentNode?.removeChild(this.$el); - }, - }, - render(h) { - const on = {}; - - on.dismiss = () => { - this.dismiss(); - }; - - if (primaryButton?.clickHandler) { - on.primaryAction = (e) => { - primaryButton.clickHandler(e); - }; - } - if (secondaryButton?.clickHandler) { - on.secondaryAction = (e) => { - secondaryButton.clickHandler(e); - }; - } - - return h( - GlAlert, - { - props: { - title, - dismissible: true, - dismissLabel: __('Dismiss'), - variant, - primaryButtonLink: primaryButton?.link, - primaryButtonText: primaryButton?.text, - secondaryButtonLink: secondaryButton?.link, - secondaryButtonText: secondaryButton?.text, - }, - attrs: { - 'data-testid': `alert-${variant}`, - }, - on, - }, - message, - ); - }, - }); -}; |