diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-22 03:11:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-22 03:11:47 +0300 |
commit | 0bdb61ade7f12067dd524463af4f83994f1baa37 (patch) | |
tree | 987819d2a9e915df73874f66c52d1d9cdc889583 /app/assets/javascripts/alert.js | |
parent | 8746f541fbcf2b89b30c3d4a1b290f5679186400 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/alert.js')
-rw-r--r-- | app/assets/javascripts/alert.js | 54 |
1 files changed, 52 insertions, 2 deletions
diff --git a/app/assets/javascripts/alert.js b/app/assets/javascripts/alert.js index 006c4f50d09..4d724b17723 100644 --- a/app/assets/javascripts/alert.js +++ b/app/assets/javascripts/alert.js @@ -1,6 +1,7 @@ import * as Sentry from '@sentry/browser'; import Vue from 'vue'; -import { GlAlert } from '@gitlab/ui'; +import isEmpty from 'lodash/isEmpty'; +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import { __ } from '~/locale'; export const VARIANT_SUCCESS = 'success'; @@ -32,6 +33,14 @@ export const VARIANT_TIP = 'tip'; * // Respond to the alert being dismissed * createAlert({ message: 'Message', onDismiss: () => {} }); * + * @example + * // Add inline link in the message + * createAlert({ message: 'Read more at %{exampleLinkStart}example page%{exampleLinkEnd}.', messageLinks: { exampleLink: 'https://example.com' } }); + * + * @example + * // Add inline links in the message with custom GlLink props + * createAlert({ message: 'Read more at %{exampleLinkStart}example page%{exampleLinkEnd}.', messageLinks: { exampleLink: { href: 'https://example.com', target: '_blank', isUnsafeLink: true }} }); + * * @param {object} options - Options to control the flash message * @param {string} options.message - Alert message text * @param {string} [options.title] - Alert title @@ -48,6 +57,7 @@ export const VARIANT_TIP = 'tip'; * @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 {object} [options.messageLinks] - Object containing mapping of sprintf tokens to URLs, used to format links within the message. If needed, you can pass a full props object for GlLink instead of a URL string * @param {boolean} [options.captureError] - Whether to send error to Sentry * @param {object} [options.error] - Error to be captured in Sentry */ @@ -63,6 +73,7 @@ export const createAlert = ({ onDismiss = null, captureError = false, error = null, + messageLinks = null, }) => { if (captureError && error) Sentry.captureException(error); @@ -76,6 +87,45 @@ export const createAlert = ({ alertContainer.replaceChildren(el); } + const createMessageNodes = (h) => { + if (isEmpty(messageLinks)) { + return message; + } + + const normalizeLinkProps = (hrefOrProps) => { + const { href, ...otherLinkProps } = + typeof hrefOrProps === 'string' ? { href: hrefOrProps } : hrefOrProps; + + return { href, linkProps: otherLinkProps }; + }; + + return [ + h(GlSprintf, { + props: { + message, + }, + scopedSlots: Object.assign( + {}, + ...Object.entries(messageLinks).map(([slotName, hrefOrProps]) => { + const { href, linkProps } = normalizeLinkProps(hrefOrProps); + + return { + [slotName]: (props) => + h( + GlLink, + { + props: linkProps, + attrs: { href }, + }, + props.content, + ), + }; + }), + ), + }), + ]; + }; + return new Vue({ el, components: { @@ -130,7 +180,7 @@ export const createAlert = ({ }, on, }, - message, + createMessageNodes(h), ); }, }); |