console: Fix browser console errors

pkg/webui/console/components/notifications/index.js

@@ -36,23 +36,32 @@ const NotificationTitle = ({ notificationType, data }) => {
   return <Notification.Title notificationData={data} />
 }
 
-NotificationTitle.propTypes = PropTypes.notification
+NotificationTitle.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+  notificationType: PropTypes.string.isRequired,
+}
 
 const NotificationPreview = ({ notificationType, data }) => {
   const Notification = useMemo(() => getNotification(notificationType), [notificationType])
 
   return <Notification.Preview notificationData={data} />
 }
 
-NotificationPreview.propTypes = PropTypes.notification
+NotificationPreview.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+  notificationType: PropTypes.string.isRequired,
+}
 
 const NotificationIcon = ({ notificationType, data }) => {
   const Notification = useMemo(() => getNotification(notificationType), [notificationType])
 
   return <Notification.Icon notificationData={data} />
 }
 
-NotificationIcon.propTypes = PropTypes.notification
+NotificationIcon.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+  notificationType: PropTypes.string.isRequired,
+}
 
 Notification.Content = NotificationContent
 Notification.Title = NotificationTitle

pkg/webui/console/components/notifications/templates/template.js

@@ -46,10 +46,10 @@ const ContentTemplate = ({ messages, values, withList, listTitle, listElement })
             <Message component="b" content={listTitle} />
           </p>
           <ul>
-            {listElement.map(el => (
+            {listElement.map((el, index) => (
               <>
-                <Message component="li" content={el} />
-                <Message content={{ id: `enum:${el}` }} firstToUpper />
+                <Message key={index} component="li" content={el} />
+                <Message key={index + 1} content={{ id: `enum:${el}` }} firstToUpper />
               </>
             ))}
           </ul>

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(

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')
 

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

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