diff --git a/packages/core/admin/admin/src/components/Notifications/Notification/index.js b/packages/core/admin/admin/src/components/Notifications/Notification/index.js index a57a57a489..3dc2376fba 100644 --- a/packages/core/admin/admin/src/components/Notifications/Notification/index.js +++ b/packages/core/admin/admin/src/components/Notifications/Notification/index.js @@ -6,7 +6,7 @@ import { Link } from '@strapi/design-system/v2/Link'; const Notification = ({ dispatch, notification }) => { const { formatMessage } = useIntl(); - const { message, link, type, id, onClose, timeout, blockTransition } = notification; + const { message, link, type, id, onClose, timeout, blockTransition, title } = notification; const formattedMessage = (msg) => typeof msg === 'string' ? msg : formatMessage(msg, msg.values); @@ -37,6 +37,7 @@ const Notification = ({ dispatch, notification }) => { let variant; let alertTitle; + // TODO break out this logic into separate file if (type === 'info') { variant = 'default'; alertTitle = formatMessage({ @@ -44,17 +45,29 @@ const Notification = ({ dispatch, notification }) => { defaultMessage: 'Information:', }); } else if (type === 'warning') { + // type should be renamed to danger in the future, but it might introduce changes if done now + variant = 'danger'; + alertTitle = formatMessage({ + id: 'notification.warning.title', + defaultMessage: 'Warning:', + }); + } else if (type === 'softWarning') { + // type should be renamed to just warning in the future + variant = 'warning'; alertTitle = formatMessage({ id: 'notification.warning.title', defaultMessage: 'Warning:', }); - variant = 'danger'; } else { + variant = 'success'; alertTitle = formatMessage({ id: 'notification.success.title', defaultMessage: 'Success:', }); - variant = 'success'; + } + + if (title) { + alertTitle = typeof title === 'string' ? title : formatMessage(title); } return ( @@ -125,6 +138,14 @@ Notification.propTypes = { onClose: PropTypes.func, timeout: PropTypes.number, blockTransition: PropTypes.bool, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.shape({ + id: PropTypes.string.isRequired, + defaultMessage: PropTypes.string, + values: PropTypes.object, + }), + ]), }), }; diff --git a/packages/core/admin/admin/src/components/Notifications/reducer.js b/packages/core/admin/admin/src/components/Notifications/reducer.js index fbbd816df5..318aaf0ea3 100644 --- a/packages/core/admin/admin/src/components/Notifications/reducer.js +++ b/packages/core/admin/admin/src/components/Notifications/reducer.js @@ -23,6 +23,7 @@ const notificationReducer = (state = initialState, action) => timeout: get(action, ['config', 'timeout'], 2500), blockTransition: get(action, ['config', 'blockTransition'], false), onClose: get(action, ['config', 'onClose'], null), + title: get(action, ['config', 'title'], null), }); draftState.notifId = state.notifId + 1; break; diff --git a/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js b/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js index bf3a348814..e638dfe958 100644 --- a/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js +++ b/packages/core/admin/admin/src/components/Notifications/tests/reducer.test.js @@ -36,6 +36,7 @@ describe('ADMIN | COMPONENTS | NOTIFICATIONS | reducer', () => { timeout: 2500, blockTransition: false, onClose: null, + title: null, }, ], notifId: 1, diff --git a/packages/core/helper-plugin/lib/src/hooks/useNotification/useNotification.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useNotification/useNotification.stories.mdx index 62c58e106f..14904a0237 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useNotification/useNotification.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useNotification/useNotification.stories.mdx @@ -20,7 +20,7 @@ const HomePage = () => { const handleClick = () => { toggleNotification({ // required - type: 'info|success|warning', + type: 'info|success|warning|softWarning', // required message: { id: 'notification.version.update.message', defaultMessage: 'A new version is available' }, // optional @@ -35,6 +35,8 @@ const HomePage = () => { blockTransition: true, // optional onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true), + // optional + title: { id: 'notification.default.title, defaultMessage: 'Warning: '} }); }