From b2ed15d3f4eee69322bf046484df4deec96ea455 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 30 Jan 2024 14:00:53 +0100 Subject: [PATCH] console: Fix browser console errors --- .../console/components/notifications/index.js | 15 ++++++++++++--- .../notifications/templates/template.js | 6 +++--- .../console/containers/notifications/index.js | 6 +----- .../notifications/notification-list/list-item.js | 11 ++++++++--- .../containers/notifications/notifications.styl | 4 ++++ pkg/webui/lib/prop-types.js | 5 ----- 6 files changed, 28 insertions(+), 19 deletions(-) diff --git a/pkg/webui/console/components/notifications/index.js b/pkg/webui/console/components/notifications/index.js index f5c4ede5dcf..8f032963140 100644 --- a/pkg/webui/console/components/notifications/index.js +++ b/pkg/webui/console/components/notifications/index.js @@ -36,7 +36,10 @@ const NotificationTitle = ({ notificationType, data }) => { return } -NotificationTitle.propTypes = PropTypes.notification +NotificationTitle.propTypes = { + data: PropTypes.shape({}).isRequired, + notificationType: PropTypes.string.isRequired, +} const NotificationPreview = ({ notificationType, data }) => { const Notification = useMemo(() => getNotification(notificationType), [notificationType]) @@ -44,7 +47,10 @@ const NotificationPreview = ({ notificationType, data }) => { return } -NotificationPreview.propTypes = PropTypes.notification +NotificationPreview.propTypes = { + data: PropTypes.shape({}).isRequired, + notificationType: PropTypes.string.isRequired, +} const NotificationIcon = ({ notificationType, data }) => { const Notification = useMemo(() => getNotification(notificationType), [notificationType]) @@ -52,7 +58,10 @@ const NotificationIcon = ({ notificationType, data }) => { return } -NotificationIcon.propTypes = PropTypes.notification +NotificationIcon.propTypes = { + data: PropTypes.shape({}).isRequired, + notificationType: PropTypes.string.isRequired, +} Notification.Content = NotificationContent Notification.Title = NotificationTitle diff --git a/pkg/webui/console/components/notifications/templates/template.js b/pkg/webui/console/components/notifications/templates/template.js index dd48b1a2349..7ff39444c45 100644 --- a/pkg/webui/console/components/notifications/templates/template.js +++ b/pkg/webui/console/components/notifications/templates/template.js @@ -46,10 +46,10 @@ const ContentTemplate = ({ messages, values, withList, listTitle, listElement })

    - {listElement.map(el => ( + {listElement.map((el, index) => ( <> - - + + ))}
diff --git a/pkg/webui/console/containers/notifications/index.js b/pkg/webui/console/containers/notifications/index.js index f7b48e005a8..8ccf00b8308 100644 --- a/pkg/webui/console/containers/notifications/index.js +++ b/pkg/webui/console/containers/notifications/index.js @@ -160,11 +160,7 @@ const Notifications = () => { // unless there is only one item in the list. const previousNotification = totalCount === 1 ? undefined : items[Math.max(0, index - 1)] const path = `/${previousNotification?.id}` - if (isSmallScreen) { - navigate('/notifications') - } else { - navigate(`/notifications${path}`) - } + navigate(`/notifications${isSmallScreen ? '' : path}`) // Reload notifications starting from the archived one. await loadNextPage( diff --git a/pkg/webui/console/containers/notifications/notification-list/list-item.js b/pkg/webui/console/containers/notifications/notification-list/list-item.js index 06d6c28b5e8..0b805914ebc 100644 --- a/pkg/webui/console/containers/notifications/notification-list/list-item.js +++ b/pkg/webui/console/containers/notifications/notification-list/list-item.js @@ -33,7 +33,7 @@ import style from '../notifications.styl' export const NotificationListItem = ({ notification, isSelected, isNextSelected, handleClick }) => { const unseenIds = useSelector(selectUnseenIds) const showUnseenStatus = unseenIds.includes(notification.id) - const classes = classNames(style.notificationPreview, 'm-0 d-flex p-cs-m', { + const classes = classNames(style.notificationPreview, { [style.notificationSelected]: isSelected, [style.notificationNextSelected]: isNextSelected, }) @@ -87,8 +87,8 @@ export const NotificationListItem = ({ notification, isSelected, isNextSelected, NotificationListItem.propTypes = { handleClick: PropTypes.func.isRequired, - isNextSelected: PropTypes.bool.isRequired, - isSelected: PropTypes.bool.isRequired, + isNextSelected: PropTypes.bool, + isSelected: PropTypes.bool, notification: PropTypes.shape({ id: PropTypes.string, created_at: PropTypes.string, @@ -97,6 +97,11 @@ NotificationListItem.propTypes = { }).isRequired, } +NotificationListItem.defaultProps = { + isSelected: false, + isNextSelected: false, +} + export const NotificationListSpinner = () => { const classes = classNames(style.notificationPreview, 'm-0', 'p-0') diff --git a/pkg/webui/console/containers/notifications/notifications.styl b/pkg/webui/console/containers/notifications/notifications.styl index 71f1949d961..6b24d3d1608 100644 --- a/pkg/webui/console/containers/notifications/notifications.styl +++ b/pkg/webui/console/containers/notifications/notifications.styl @@ -99,6 +99,10 @@ .notification-preview height: 100% width: 100% + margin: 0 + display: flex + align-items: center + padding: $cs.m border-bottom: 1px solid var(--c-border-neutral-light) &.notification-selected diff --git a/pkg/webui/lib/prop-types.js b/pkg/webui/lib/prop-types.js index 57c7dae3d88..451d1cb10af 100644 --- a/pkg/webui/lib/prop-types.js +++ b/pkg/webui/lib/prop-types.js @@ -431,9 +431,4 @@ PropTypes.notificationData = PropTypes.shape({ entity_ids: PropTypes.shape({}).isRequired, }) -PropTypes.notification = PropTypes.shape({ - data: PropTypes.shape({}).isRequired, - notificationType: PropTypes.string.isRequired, -}) - export default PropTypes