Update sidebar to use filters vs modes

src/pages/NotificationsRedesign/index.js

@@ -608,6 +608,7 @@ class NotificationsPage extends React.Component {
         page={this.state.currentPage}
         activeStatus={this.state.activeStatus}
         activeFilter={this.state.activeFilter}
+        onSetActiveFilter={this.onSetActiveFilter}
         onChangePage={this.onChangePage}
         onLogout={this.onLogout}
         onSetActiveStatus={this.onSetActiveStatus}
@@ -623,7 +624,6 @@ class NotificationsPage extends React.Component {
         isSearching={this.state.isSearching}
         isFetchingNotifications={isFetchingNotifications}
         fetchingNotificationsError={fetchingNotificationsError || this.state.error}
-        onSetActiveFilter={this.onSetActiveFilter}
         highestScore={highestScore}
         lowestScore={lowestScore}
         hasUnread={this.isUnreadTab}

src/pages/NotificationsRedesign/redesign/Scene.js

@@ -22,7 +22,7 @@ import {
   createColorOfScore,
   getPercentageDelta,
   prettify,
-  titleOfMode,
+  titleOfFilter,
   subtitleOfMode,
   colorOfTag,
   extractJiraTags
@@ -80,6 +80,7 @@ import {
 } from './ui';
 import {ToastProvider, useToasts} from 'react-toast-notifications';
 import {Status} from '../../../constants/status';
+import {Filters} from '../../../constants/filters';
 export const AnimatedNotificationRow = animated(NotificationRow);
 
 const hash = process.localEnv.GIT_HASH ? `#${process.localEnv.GIT_HASH}` : '';
@@ -303,7 +304,7 @@ const ToastByline = styled('div')`
   margin: 2px 0;
 `;
 
-function MenuIconItem ({children, onChange, selected, alwaysActive, noBorder, ...props}) {
+function BaseMenuIconItem ({children, onChange, selected, alwaysActive, noBorder, ...props}) {
   return (
     <IconContainer
       onClick={() => onChange(props.mode)}
@@ -316,6 +317,8 @@ function MenuIconItem ({children, onChange, selected, alwaysActive, noBorder, ..
   );
 }
 
+const MenuIconItem = withTooltip(BaseMenuIconItem);
+
 function SortingItem ({children, selected, onChange, descending, setDescending, ...props}) {
   return (
     <SortingItemComponent
@@ -553,6 +556,8 @@ function Scene ({
   onLogout,
   mode,
   setMode,
+  activeFilter,
+  onSetActiveFilter,
   getUserItem,
   setUserItem,
   addToast
@@ -749,44 +754,60 @@ function Scene ({
         `}>
           <MenuContainerItem expand={menuOpen}>
             <MenuIconItem
-              mode={Mode.ALL}
+              mode={Filters.PARTICIPATING}
               primary="#4caf50"
-              selected={mode === Mode.ALL}
-              onChange={setMode}
+              selected={activeFilter === Filters.PARTICIPATING}
+              onChange={onSetActiveFilter}
               open={menuOpen}
+              dark={darkMode}
+              tooltip="View all of your relevant notifications"
+              tooltipOffsetX={132}
+              tooltipOffsetY={-46}
             >
-              <span>{titleOfMode(Mode.ALL)}</span>
+              <span>{titleOfFilter(Filters.PARTICIPATING)}</span>
               <i className="fas fa-leaf"></i>
             </MenuIconItem>
             <MenuIconItem
-              mode={Mode.HOT}
-              primary="#e91e63"
-              selected={mode === Mode.HOT}
-              onChange={setMode}
+              mode={Filters.REVIEW_REQUESTED}
+              primary="#fab003"
+              selected={activeFilter === Filters.REVIEW_REQUESTED}
+              onChange={onSetActiveFilter}
               open={menuOpen}
+              dark={darkMode}
+              tooltip="View notifications that request your review"
+              tooltipOffsetX={148}
+              tooltipOffsetY={-46}
             >
-              <span>{titleOfMode(Mode.HOT)}</span>
-              <i className="fas fa-fire"></i>
+              <span>{titleOfFilter(Filters.REVIEW_REQUESTED)}</span>
+              <i className="fas fa-eye"></i>
             </MenuIconItem>
             <MenuIconItem
-              mode={Mode.COMMENTS}
-              primary={ThemeColor(darkMode)}
-              selected={mode === Mode.COMMENTS}
-              onChange={setMode}
+              mode={Filters.ASSIGNED}
+              primary="#e91156"
+              selected={activeFilter === Filters.ASSIGNED}
+              onChange={onSetActiveFilter}
               open={menuOpen}
+              dark={darkMode}
+              tooltip="View notifications that are assigned to you"
+              tooltipOffsetX={148}
+              tooltipOffsetY={-46}
             >
-              <span>{titleOfMode(Mode.COMMENTS)}</span>
-              <i className="fas fa-user-friends"></i>
+              <span>{titleOfFilter(Filters.ASSIGNED)}</span>
+              <i className="fas fa-tags"></i>
             </MenuIconItem>
             <MenuIconItem
-              mode={Mode.OLD}
-              primary="#fcc419"
-              selected={mode === Mode.OLD}
-              onChange={setMode}
+              mode={Filters.COMMENT}
+              primary="#1c7ed6"
+              selected={activeFilter === Filters.COMMENT}
+              onChange={onSetActiveFilter}
               open={menuOpen}
+              dark={darkMode}
+              tooltip="View notifications that you've commented on"
+              tooltipOffsetX={148}
+              tooltipOffsetY={-46}
             >
-              <span>{titleOfMode(Mode.OLD)}</span>
-              <i className="fas fa-stopwatch"></i>
+              <span>{titleOfFilter(Filters.COMMENT)}</span>
+              <i className="fas fa-comments"></i>
             </MenuIconItem>
           </MenuContainerItem>
           <ContentItem>
@@ -833,7 +854,7 @@ function Scene ({
             </CardSection>
             <NotificationsSection>
               <TitleSection>
-                <Title>{titleOfMode(mode)}</Title>
+                <Title>{titleOfFilter(activeFilter)}</Title>
                 <InteractionSection>
                   <optimized.li
                     css={css`

src/pages/NotificationsRedesign/redesign/utils.js

@@ -4,6 +4,7 @@ import React from 'react';
 import moment from 'moment';
 import {css, jsx} from '@emotion/core';
 import {Badges, Reasons} from '../../../constants/reasons';
+import {Filters} from '../../../constants/filters';
 import {Mode} from '../index';
 import {NotificationIconWrapper, ThemeColor} from './ui/ui';
 
@@ -239,6 +240,23 @@ export function titleOfMode (mode) {
   }
 }
 
+export function titleOfFilter (filter) {
+  switch (filter) {
+    case Filters.PARTICIPATING:
+      return 'All Relevent';
+    case Filters.SUBSCRIBED:
+      return 'Subscribed';
+    case Filters.COMMENT:
+      return 'Commented';
+    case Filters.ASSIGNED:
+      return 'Assigned';
+    case Filters.REVIEW_REQUESTED:
+      return 'Requested Reviews';
+    default:
+      return 'Updates';
+  }
+}
+
 export function subtitleOfMode (mode) {
   switch (mode) {
     case Mode.ALL: