feat: ✨ show a notification item in the settings page (#26843)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR introduces the `Notifications` option within the `settings
page`. Clicking on this option will render the user to the
`notifications/settings` page.
Specifically:
1. If basic functionalities are not active, the option disappears from
the menu
2. If notifications are not active, the user will still be redirected to
the `notifications/settings page`, where they can enable them
3. If notifications are active, the user will access the
`notifications/settings` page, where they can select their options

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26843?quickstart=1)

## **Related issues**

N/A

## **Manual testing steps**

1. Go to the settings page.
2. Find the `Notifications` option
3. Verify that the `Notifications` option links to the
`notifications/settings` page
4. Verify that the `Notifications` option is hidden if basic
functionalities are off

## **Screenshots/Recordings**

### **Before**

<img width="1624" alt="Screenshot 2024-10-23 at 16 26 12"
src="https://github.com/user-attachments/assets/c260ca28-536d-413b-862b-79deda5e70bb">

### **After**

<img width="1624" alt="Screenshot 2024-10-23 at 16 41 30"
src="https://github.com/user-attachments/assets/99fb68d6-ace1-4ddd-a863-7b4e2e125074">

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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,
   };
 };