debian-mirror-gitlab/app/assets/javascripts/flash.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

281 lines
8.6 KiB
JavaScript
Raw Normal View History

2021-04-17 20:07:23 +05:30
import * as Sentry from '@sentry/browser';
2020-05-24 23:13:21 +05:30
import { escape } from 'lodash';
2022-03-02 08:16:31 +05:30
import Vue from 'vue';
import { GlAlert } from '@gitlab/ui';
import { __ } from '~/locale';
2019-12-04 20:38:33 +05:30
import { spriteIcon } from './lib/utils/common_utils';
2018-03-17 18:26:18 +05:30
2020-03-13 15:44:24 +05:30
const FLASH_TYPES = {
ALERT: 'alert',
NOTICE: 'notice',
SUCCESS: 'success',
WARNING: 'warning',
};
2022-03-02 08:16:31 +05:30
const VARIANT_SUCCESS = 'success';
const VARIANT_WARNING = 'warning';
const VARIANT_DANGER = 'danger';
const VARIANT_INFO = 'info';
const VARIANT_TIP = 'tip';
2022-04-04 11:22:00 +05:30
const TYPE_TO_VARIANT = {
[FLASH_TYPES.ALERT]: VARIANT_DANGER,
[FLASH_TYPES.NOTICE]: VARIANT_INFO,
[FLASH_TYPES.SUCCESS]: VARIANT_SUCCESS,
[FLASH_TYPES.WARNING]: VARIANT_WARNING,
};
2021-12-11 22:18:48 +05:30
const FLASH_CLOSED_EVENT = 'flashClosed';
2021-06-08 01:23:25 +05:30
const getCloseEl = (flashEl) => {
return flashEl.querySelector('.js-close-icon');
};
2018-03-17 18:26:18 +05:30
const hideFlash = (flashEl, fadeTransition = true) => {
if (fadeTransition) {
Object.assign(flashEl.style, {
2020-03-13 15:44:24 +05:30
transition: 'opacity 0.15s',
2018-03-17 18:26:18 +05:30
opacity: '0',
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
flashEl.addEventListener(
'transitionend',
() => {
flashEl.remove();
window.dispatchEvent(new Event('resize'));
2021-12-11 22:18:48 +05:30
flashEl.dispatchEvent(new Event(FLASH_CLOSED_EVENT));
2018-12-13 13:39:08 +05:30
if (document.body.classList.contains('flash-shown'))
document.body.classList.remove('flash-shown');
},
{
once: true,
passive: true,
},
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
};
2017-09-10 17:25:29 +05:30
2021-03-08 18:12:59 +05:30
const createAction = (config) => `
2018-03-17 18:26:18 +05:30
<a
href="${config.href || '#'}"
class="flash-action"
${config.href ? '' : 'role="button"'}
>
2020-05-24 23:13:21 +05:30
${escape(config.title)}
2018-03-17 18:26:18 +05:30
</a>
`;
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
const createFlashEl = (message, type) => `
2022-04-04 11:22:00 +05:30
<div class="flash-${type}" data-testid="alert-${TYPE_TO_VARIANT[type]}">
2019-12-04 20:38:33 +05:30
<div class="flash-text">
2020-05-24 23:13:21 +05:30
${escape(message)}
2019-12-21 20:55:43 +05:30
<div class="close-icon-wrapper js-close-icon">
${spriteIcon('close', 'close-icon')}
</div>
2018-03-17 18:26:18 +05:30
</div>
</div>
`;
2022-01-26 12:08:38 +05:30
const addDismissFlashClickListener = (flashEl, fadeTransition) => {
2021-09-04 01:27:46 +05:30
// There are some flash elements which do not have a closeEl.
// https://gitlab.com/gitlab-org/gitlab/blob/763426ef344488972eb63ea5be8744e0f8459e6b/ee/app/views/layouts/header/_read_only_banner.html.haml
getCloseEl(flashEl)?.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
2018-03-17 18:26:18 +05:30
};
2022-03-02 08:16:31 +05:30
/**
* Render an alert at the top of the page, or, optionally an
2022-07-16 23:28:13 +05:30
* arbitrary existing container. This alert is always dismissible.
2022-03-02 08:16:31 +05:30
*
2022-07-16 23:28:13 +05:30
* @example
* // Render a new alert
2022-06-21 17:19:12 +05:30
* import { createAlert, VARIANT_WARNING } from '~/flash';
2022-03-02 08:16:31 +05:30
*
* createAlert({ message: 'My error message' });
2022-06-21 17:19:12 +05:30
* createAlert({ message: 'My warning message', variant: VARIANT_WARNING });
2022-03-02 08:16:31 +05:30
*
2022-07-16 23:28:13 +05:30
* @example
* // Dismiss this alert programmatically
2022-03-02 08:16:31 +05:30
* const alert = createAlert({ message: 'Message' });
*
* // ...
*
* alert.dismiss();
*
2022-07-16 23:28:13 +05:30
* @example
* // Respond to the alert being dismissed
* createAlert({ message: 'Message', onDismiss: () => {} });
2022-03-02 08:16:31 +05:30
*
2022-07-16 23:28:13 +05:30
* @param {object} options - Options to control the flash message
* @param {string} options.message - Alert message text
* @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 {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
2022-03-02 08:16:31 +05:30
*/
const createAlert = function createAlert({
message,
variant = VARIANT_DANGER,
parent = document,
containerSelector = '.flash-container',
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');
alertContainer.appendChild(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: {
dismissible: true,
dismissLabel: __('Dismiss'),
variant,
primaryButtonLink: primaryButton?.link,
primaryButtonText: primaryButton?.text,
secondaryButtonLink: secondaryButton?.link,
secondaryButtonText: secondaryButton?.text,
},
2022-04-04 11:22:00 +05:30
attrs: {
'data-testid': `alert-${variant}`,
},
2022-03-02 08:16:31 +05:30
on,
},
message,
);
},
});
};
2022-07-16 23:28:13 +05:30
/**
* @deprecated use `createAlert` instead
*
* Flash banner supports different types of Flash configurations
* along with ability to provide actionConfig which can be used to show
* additional action or link on banner next to message
2020-10-24 23:57:45 +05:30
*
2022-07-16 23:28:13 +05:30
* @param {object} options - Options to control the flash message
* @param {string} options.message - Flash message text
* @param {'alert'|'notice'|'success'|'warning'} [options.type] - Type of Flash; it defaults to 'alert'
* @param {Element|Document} [options.parent] - Reference to parent element under which Flash needs to appear
* @param {object} [options.actionConfig] - Map of config to show action on banner
* @param {string} [options.actionConfig.href] - URL to which action config should point to (default: '#')
* @param {string} [options.actionConfig.title] - Title of action
* @param {Function} [options.actionConfig.clickHandler] - Method to call when action is clicked on
* @param {boolean} [options.fadeTransition] - Boolean to determine whether to fade the alert out
* @param {boolean} [options.addBodyClass] - Adds `flash-shown` class to the `body` element
* @param {boolean} [options.captureError] - Boolean to determine whether to send error to Sentry
* @param {object} [options.error] - Error to be captured in Sentry
2020-10-24 23:57:45 +05:30
*/
const createFlash = function createFlash({
message,
type = FLASH_TYPES.ALERT,
parent = document,
actionConfig = null,
fadeTransition = true,
addBodyClass = false,
captureError = false,
error = null,
}) {
const flashContainer = parent.querySelector('.flash-container');
if (!flashContainer) return null;
flashContainer.innerHTML = createFlashEl(message, type);
const flashEl = flashContainer.querySelector(`.flash-${type}`);
if (actionConfig) {
flashEl.insertAdjacentHTML('beforeend', createAction(actionConfig));
if (actionConfig.clickHandler) {
flashEl
.querySelector('.flash-action')
2021-03-08 18:12:59 +05:30
.addEventListener('click', (e) => actionConfig.clickHandler(e));
2020-10-24 23:57:45 +05:30
}
}
2022-01-26 12:08:38 +05:30
addDismissFlashClickListener(flashEl, fadeTransition);
2020-10-24 23:57:45 +05:30
flashContainer.classList.add('gl-display-block');
if (addBodyClass) document.body.classList.add('flash-shown');
if (captureError && error) Sentry.captureException(error);
2021-06-08 01:23:25 +05:30
flashContainer.close = () => {
getCloseEl(flashEl).click();
};
2020-10-24 23:57:45 +05:30
return flashContainer;
};
2020-03-13 15:44:24 +05:30
export {
createFlash as default,
hideFlash,
2022-01-26 12:08:38 +05:30
addDismissFlashClickListener,
2020-03-13 15:44:24 +05:30
FLASH_TYPES,
2021-12-11 22:18:48 +05:30
FLASH_CLOSED_EVENT,
2022-03-02 08:16:31 +05:30
createAlert,
VARIANT_SUCCESS,
VARIANT_WARNING,
VARIANT_DANGER,
VARIANT_INFO,
VARIANT_TIP,
2020-03-13 15:44:24 +05:30
};