Commit 0565b69f authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '3895-mlunoe-migrate-away-from-deprecated-create-flash-2' into 'master'

Refactor(createFlash): call original from deprecated

See merge request gitlab-org/gitlab!56223
parents 779e4b4b 136c3113
......@@ -61,55 +61,6 @@ const removeFlashClickListener = (flashEl, fadeTransition) => {
.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
};
/*
* 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
*
* @param {String} message Flash message text
* @param {String} type Type of Flash, it can be `notice`, `success`, `warning` or `alert` (default)
* @param {Object} parent Reference to parent element under which Flash needs to appear
* @param {Object} actionConfig Map of config to show action on banner
* @param {String} href URL to which action config should point to (default: '#')
* @param {String} title Title of action
* @param {Function} clickHandler Method to call when action is clicked on
* @param {Boolean} fadeTransition Boolean to determine whether to fade the alert out
*/
const deprecatedCreateFlash = function deprecatedCreateFlash(
message,
type = FLASH_TYPES.ALERT,
parent = document,
actionConfig = null,
fadeTransition = true,
addBodyClass = false,
) {
const flashContainer = parent.querySelector('.flash-container');
if (!flashContainer) return null;
flashContainer.innerHTML = createFlashEl(message, type);
const flashEl = flashContainer.querySelector(`.flash-${type}`);
if (actionConfig) {
flashEl.innerHTML += createAction(actionConfig);
if (actionConfig.clickHandler) {
flashEl
.querySelector('.flash-action')
.addEventListener('click', (e) => actionConfig.clickHandler(e));
}
}
removeFlashClickListener(flashEl, fadeTransition);
flashContainer.style.display = 'block';
if (addBodyClass) document.body.classList.add('flash-shown');
return flashContainer;
};
/*
* Flash banner supports different types of Flash configurations
* along with ability to provide actionConfig which can be used to show
......@@ -166,6 +117,31 @@ const createFlash = function createFlash({
return flashContainer;
};
/*
* 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
*
* @param {String} message Flash message text
* @param {String} type Type of Flash, it can be `notice`, `success`, `warning` or `alert` (default)
* @param {Object} parent Reference to parent element under which Flash needs to appear
* @param {Object} actionConfig Map of config to show action on banner
* @param {String} href URL to which action config should point to (default: '#')
* @param {String} title Title of action
* @param {Function} clickHandler Method to call when action is clicked on
* @param {Boolean} fadeTransition Boolean to determine whether to fade the alert out
*/
const deprecatedCreateFlash = function deprecatedCreateFlash(
message,
type,
parent,
actionConfig,
fadeTransition,
addBodyClass,
) {
return createFlash({ message, type, parent, actionConfig, fadeTransition, addBodyClass });
};
export {
createFlash as default,
deprecatedCreateFlash,
......
......@@ -126,9 +126,17 @@ describe('Flash', () => {
});
describe('deprecatedCreateFlash', () => {
const message = 'test';
const type = 'alert';
const parent = document;
const actionConfig = null;
const fadeTransition = false;
const addBodyClass = true;
const defaultParams = [message, type, parent, actionConfig, fadeTransition, addBodyClass];
describe('no flash-container', () => {
it('does not add to the DOM', () => {
const flashEl = deprecatedCreateFlash('testing');
const flashEl = deprecatedCreateFlash(message);
expect(flashEl).toBeNull();
......@@ -138,11 +146,9 @@ describe('Flash', () => {
describe('with flash-container', () => {
beforeEach(() => {
document.body.innerHTML += `
<div class="content-wrapper js-content-wrapper">
<div class="flash-container"></div>
</div>
`;
setFixtures(
'<div class="content-wrapper js-content-wrapper"><div class="flash-container"></div></div>',
);
});
afterEach(() => {
......@@ -150,7 +156,7 @@ describe('Flash', () => {
});
it('adds flash element into container', () => {
deprecatedCreateFlash('test', 'alert', document, null, false, true);
deprecatedCreateFlash(...defaultParams);
expect(document.querySelector('.flash-alert')).not.toBeNull();
......@@ -158,26 +164,35 @@ describe('Flash', () => {
});
it('adds flash into specified parent', () => {
deprecatedCreateFlash('test', 'alert', document.querySelector('.content-wrapper'));
deprecatedCreateFlash(
message,
type,
document.querySelector('.content-wrapper'),
actionConfig,
fadeTransition,
addBodyClass,
);
expect(document.querySelector('.content-wrapper .flash-alert')).not.toBeNull();
expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
});
it('adds container classes when inside content-wrapper', () => {
deprecatedCreateFlash('test');
deprecatedCreateFlash(...defaultParams);
expect(document.querySelector('.flash-text').className).toBe('flash-text');
expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
});
it('does not add container when outside of content-wrapper', () => {
document.querySelector('.content-wrapper').className = 'js-content-wrapper';
deprecatedCreateFlash('test');
deprecatedCreateFlash(...defaultParams);
expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text');
});
it('removes element after clicking', () => {
deprecatedCreateFlash('test', 'alert', document, null, false, true);
deprecatedCreateFlash(...defaultParams);
document.querySelector('.flash-alert .js-close-icon').click();
......@@ -188,24 +203,37 @@ describe('Flash', () => {
describe('with actionConfig', () => {
it('adds action link', () => {
deprecatedCreateFlash('test', 'alert', document, {
title: 'test',
});
const newActionConfig = { title: 'test' };
deprecatedCreateFlash(
message,
type,
parent,
newActionConfig,
fadeTransition,
addBodyClass,
);
expect(document.querySelector('.flash-action')).not.toBeNull();
});
it('calls actionConfig clickHandler on click', () => {
const actionConfig = {
const newActionConfig = {
title: 'test',
clickHandler: jest.fn(),
};
deprecatedCreateFlash('test', 'alert', document, actionConfig);
deprecatedCreateFlash(
message,
type,
parent,
newActionConfig,
fadeTransition,
addBodyClass,
);
document.querySelector('.flash-action').click();
expect(actionConfig.clickHandler).toHaveBeenCalled();
expect(newActionConfig.clickHandler).toHaveBeenCalled();
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment