fix: improve mark as read (#31824)

## **Description**

Improves notification mark as read performance by not passing down all
notifications to our API. Now we only send up notifications that have
not been read yet.

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

## **Related issues**

Tentative Fix For:
#31422
I still need to investigate to see if there are still issues related to
this.


## **Manual testing steps**

1. Have unread notifications
2. Press "Mark All As Read" button
3. See unread notifications become marked as read.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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/main/.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/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

Author: Prithpal-Sooriya

ui/pages/notifications/notifications-list-read-all-button.test.tsx

@@ -1,26 +1,57 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
+import { fireEvent } from '@testing-library/react';
+import { createMockNotificationEthSent } from '@metamask/notification-services-controller/notification-services/mocks';
+import { processNotification } from '@metamask/notification-services-controller/notification-services';
+
+import * as UseNotificationModule from '../../hooks/metamask-notifications/useNotifications';
+import { renderWithProvider } from '../../../test/lib/render-helpers';
+import configureStore from '../../store/store';
+import mockState from '../../../test/data/mock-state.json';
 import { NotificationsListReadAllButton } from './notifications-list-read-all-button';
 
-const mockStore = configureStore([thunk]);
-const store = mockStore({
-  metamask: {
-    metamaskNotificationsList: [],
-  },
-});
+const mockNotification = (isRead: boolean) => {
+  const n = processNotification(createMockNotificationEthSent());
+  n.isRead = isRead;
+  return n;
+};
 
 describe('NotificationsListReadAllButton', () => {
+  const store = configureStore(mockState);
+
   it('renders correctly and handles click', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <NotificationsListReadAllButton notifications={[]} />
-      </Provider>,
+    const { getByTestId } = renderWithProvider(
+      <NotificationsListReadAllButton notifications={[]} />,
+      store,
     );
 
     const button = getByTestId('notifications-list-read-all-button');
     expect(button).toBeInTheDocument();
   });
+
+  it('presses and marks all unread notifications as read', async () => {
+    const mockMarkAsReadCallback = jest.fn();
+    jest
+      .spyOn(UseNotificationModule, 'useMarkNotificationAsRead')
+      .mockReturnValue({ markNotificationAsRead: mockMarkAsReadCallback });
+
+    const notificationList = [
+      mockNotification(true),
+      mockNotification(false),
+      mockNotification(false),
+      mockNotification(false),
+      mockNotification(true),
+    ];
+
+    const { getByTestId } = renderWithProvider(
+      <NotificationsListReadAllButton notifications={notificationList} />,
+      store,
+    );
+
+    const button = getByTestId('notifications-list-read-all-button');
+    fireEvent.click(button);
+
+    expect(mockMarkAsReadCallback).toHaveBeenCalled();
+    const mockCall = mockMarkAsReadCallback.mock.lastCall[0];
+    expect(mockCall.length).toBe(3); // 3 unread notifications sent
+  });
 });

ui/pages/notifications/notifications-list-read-all-button.tsx

@@ -34,8 +34,8 @@ export const NotificationsListReadAllButton = ({
     if (notifications && notifications.length > 0) {
       notificationsRead = notifications
         .filter(
-          (notification): notification is Notification =>
-            (notification as Notification).id !== undefined,
+          (notification) =>
+            notification?.id !== undefined && !notification.isRead,
         )
         .map((notification: Notification) => ({
           id: notification.id,