From 95cb5b4ce78a23d0ad44384f5970c2f584f00956 Mon Sep 17 00:00:00 2001 From: ivanThePleasant Date: Mon, 16 Jan 2023 16:46:37 +0200 Subject: [PATCH 1/2] Add new notification variant to notification component, add 'title' prop to the notification, bump up design system to 1.4.2 to use new Alert variant --- .../Notifications/Notification/index.js | 27 ++++++++++++++++--- .../src/components/Notifications/reducer.js | 1 + packages/core/admin/package.json | 2 +- .../useNotification.stories.mdx | 4 ++- packages/core/helper-plugin/package.json | 2 +- 5 files changed, 30 insertions(+), 6 deletions(-) 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 38b8138830..28d41b1cec 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 ( @@ -124,6 +137,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/package.json b/packages/core/admin/package.json index f21da2cb58..edf91a6770 100644 --- a/packages/core/admin/package.json +++ b/packages/core/admin/package.json @@ -47,7 +47,7 @@ "@fingerprintjs/fingerprintjs": "3.3.3", "@pmmmwh/react-refresh-webpack-plugin": "0.5.7", "@strapi/babel-plugin-switch-ee-ce": "4.5.6", - "@strapi/design-system": "1.4.1", + "@strapi/design-system": "1.4.2", "@strapi/helper-plugin": "4.5.6", "@strapi/icons": "1.4.1", "@strapi/permissions": "4.5.6", 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: '} }); } diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json index 3340b9ec92..b0436bb974 100644 --- a/packages/core/helper-plugin/package.json +++ b/packages/core/helper-plugin/package.json @@ -64,7 +64,7 @@ "@storybook/builder-webpack5": "6.5.15", "@storybook/manager-webpack5": "6.5.15", "@storybook/react": "^6.5.10", - "@strapi/design-system": "1.4.1", + "@strapi/design-system": "1.4.2", "@strapi/icons": "1.4.1", "@testing-library/react": "12.1.4", "@testing-library/react-hooks": "8.0.1", From 67d4391604b39d8cc418736f23c5dea4cfad140d Mon Sep 17 00:00:00 2001 From: ivanThePleasant Date: Mon, 16 Jan 2023 20:31:01 +0200 Subject: [PATCH 2/2] Fix failing test --- .../admin/src/components/Notifications/tests/reducer.test.js | 1 + 1 file changed, 1 insertion(+) 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,