Notification-popup patch

- Rename components per filename changes.
- Fix missing React key.
- Add new strings.

static/app-strings.json

@@ -1289,6 +1289,7 @@
   "No notifications": "No notifications",
   "Try selecting another filter.": "Try selecting another filter.",
   "You don't have any notifications yet, but they will be here when you do!": "You don't have any notifications yet, but they will be here when you do!",
+  "View all": "View all",
   "I like this": "I like this",
   "I dislike this": "I dislike this",
   "Not interested": "Not interested",

ui/component/headerNotificationButton/view.jsx

@@ -163,35 +163,31 @@ export default function NotificationHeaderButton(props: Props) {
     }
 
     return (
-      <>
+      <a onClick={() => handleNotificationClick(notification)} key={id}>
-        <a onClick={() => handleNotificationClick(notification)}>
+        <div
-          <div
+          className={is_read ? 'menu__list--notification' : 'menu__list--notification menu__list--notification-unread'}
-            className={
+          key={id}
-              is_read ? 'menu__list--notification' : 'menu__list--notification menu__list--notification-unread'
+        >
-            }
+          <div className="notification__icon">{icon}</div>
-            key={id}
+          <div className="menu__list--notification-info">
-          >
+            <div className="menu__list--notification-type">
-            <div className="notification__icon">{icon}</div>
+              {generateNotificationTitle(notification_rule, notification_parameters, channelName)}
-            <div className="menu__list--notification-info">
-              <div className="menu__list--notification-type">
-                {generateNotificationTitle(notification_rule, notification_parameters, channelName)}
-              </div>
-              <div
-                className={
-                  type === 'comments' ? 'menu__list--notification-title blockquote' : 'menu__list--notification-title'
-                }
-              >
-                {generateNotificationText(notification_rule, notification_parameters)}
-              </div>
-              {!is_read && <span>•</span>}
-              <DateTime timeAgo date={active_at} />
             </div>
-            <div className="delete-notification" onClick={(e) => handleNotificationDelete(e, id)}>
+            <div
-              <Icon icon={ICONS.DELETE} sectionIcon />
+              className={
+                type === 'comments' ? 'menu__list--notification-title blockquote' : 'menu__list--notification-title'
+              }
+            >
+              {generateNotificationText(notification_rule, notification_parameters)}
             </div>
+            {!is_read && <span>•</span>}
+            <DateTime timeAgo date={active_at} />
           </div>
-        </a>
+          <div className="delete-notification" onClick={(e) => handleNotificationDelete(e, id)}>
-      </>
+            <Icon icon={ICONS.DELETE} sectionIcon />
+          </div>
+        </div>
+      </a>
     );
   }
 

ui/component/notificationBubble/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
 import { selectUser } from 'redux/selectors/user';
-import NotificationHeaderButton from './view';
+import NotificationButton from './view';
 
 const select = (state) => ({
   unseenCount: selectUnseenNotificationCount(state),
   user: selectUser(state),
 });
 
-export default connect(select)(NotificationHeaderButton);
+export default connect(select)(NotificationButton);

ui/component/notificationBubble/view.jsx

@@ -10,7 +10,7 @@ type Props = {
   user: ?User,
 };
 
-export default function NotificationHeaderButton(props: Props) {
+export default function NotificationBubble(props: Props) {
   const { unseenCount, inline = false, user } = props;
   const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);