feat: ✨ show a notification item in the settings page

ui/pages/notifications-settings/notifications-settings.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import type { InternalAccount } from '@metamask/keyring-api';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { NOTIFICATIONS_ROUTE } from '../../helpers/constants/routes';
@@ -47,6 +47,7 @@ type AccountType = InternalAccount & {
 
 export default function NotificationsSettings() {
   const history = useHistory();
+  const location = useLocation();
   const t = useI18nContext();
 
   // Selectors
@@ -74,6 +75,9 @@ export default function NotificationsSettings() {
     await accountSettingsProps.update(accountAddresses);
   };
 
+  // Previous page
+  const previousPage = location.state?.fromPage;
+
   return (
     <NotificationsPage>
       <Header
@@ -82,7 +86,11 @@ export default function NotificationsSettings() {
             ariaLabel="Back"
             iconName={IconName.ArrowLeft}
             size={ButtonIconSize.Sm}
-            onClick={() => history.push(NOTIFICATIONS_ROUTE)}
+            onClick={() =>
+              previousPage
+                ? history.push(previousPage)
+                : history.push(NOTIFICATIONS_ROUTE)
+            }
           />
         }
         endAccessory={null}

ui/pages/settings/settings.component.js

@@ -20,6 +20,7 @@ import {
   ADD_NETWORK_ROUTE,
   ADD_POPULAR_CUSTOM_NETWORK,
   DEFAULT_ROUTE,
+  NOTIFICATIONS_SETTINGS_ROUTE,
 } from '../../helpers/constants/routes';
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
@@ -69,6 +70,7 @@ class SettingsPage extends PureComponent {
     mostRecentOverviewPage: PropTypes.string.isRequired,
     pathnameI18nKey: PropTypes.string,
     toggleNetworkMenu: PropTypes.func.isRequired,
+    useExternalServices: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -290,7 +292,7 @@ class SettingsPage extends PureComponent {
   }
 
   renderTabs() {
-    const { history, currentPath } = this.props;
+    const { history, currentPath, useExternalServices } = this.props;
     const { t } = this.context;
 
     const tabs = [
@@ -326,6 +328,14 @@ class SettingsPage extends PureComponent {
       },
     ];
 
+    if (useExternalServices) {
+      tabs.splice(4, 0, {
+        content: t('notifications'),
+        icon: <Icon name={IconName.Notification} />,
+        key: NOTIFICATIONS_SETTINGS_ROUTE,
+      });
+    }
+
     if (process.env.ENABLE_SETTINGS_PAGE_DEV_OPTIONS) {
       tabs.splice(-1, 0, {
         content: t('developerOptions'),
@@ -349,7 +359,12 @@ class SettingsPage extends PureComponent {
           }
           return matchPath(currentPath, { exact: true, path: key });
         }}
-        onSelect={(key) => history.push(key)}
+        onSelect={(key) =>
+          history.push({
+            pathname: key,
+            state: { fromPage: currentPath },
+          })
+        }
       />
     );
   }

ui/pages/settings/settings.container.js

@@ -1,7 +1,10 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { getAddressBookEntryOrAccountName } from '../../selectors';
+import {
+  getAddressBookEntryOrAccountName,
+  getUseExternalServices,
+} from '../../selectors';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../shared/constants/app';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
@@ -96,6 +99,7 @@ const mapStateToProps = (state, ownProps) => {
       ? pathNameTail
       : '',
   );
+  const useExternalServices = getUseExternalServices(state);
 
   return {
     addNewNetwork,
@@ -109,6 +113,7 @@ const mapStateToProps = (state, ownProps) => {
     isPopup,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
     pathnameI18nKey,
+    useExternalServices,
   };
 };