Add ability to dismiss or accept all displayed notification request at once

Fixes #29721

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -179,6 +179,7 @@ class Dropdown extends PureComponent {
     renderItem: PropTypes.func,
     renderHeader: PropTypes.func,
     onItemClick: PropTypes.func,
+    className: PropTypes.string,
     ...WithRouterPropTypes
   };
 
@@ -284,6 +285,7 @@ class Dropdown extends PureComponent {
       children,
       renderItem,
       renderHeader,
+      className,
     } = this.props;
 
     const open = this.state.id === openDropdownId;
@@ -296,6 +298,7 @@ class Dropdown extends PureComponent {
       ref: this.setTargetRef,
     }) : (
       <IconButton
+        className={className}
         icon={!open ? icon : 'close'}
         iconComponent={iconComponent}
         title={title}

app/javascript/mastodon/features/notifications/requests.jsx

@@ -8,15 +8,26 @@ import { Helmet } from 'react-helmet';
 import { useSelector, useDispatch } from 'react-redux';
 
 import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
-import { fetchNotificationRequests, expandNotificationRequests } from 'mastodon/actions/notifications';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import { openModal } from 'mastodon/actions/modal';
+import { fetchNotificationRequests, expandNotificationRequests, acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
 import ScrollableList from 'mastodon/components/scrollable_list';
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 
 import { NotificationRequest } from './components/notification_request';
 
 const messages = defineMessages({
   title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' },
+  accept_all: { id: 'notification_requests.accept_all', defaultMessage: 'Accept all notification requests' },
+  dismiss_all: { id: 'notification_requests.dismiss_all', defaultMessage: 'Dismiss all notification requests' },
+  confirm_accept_all_title: { id: 'notification_requests.confirm_accept_all.title', defaultMessage: 'Accept notification requests?' },
+  confirm_accept_all_message: { id: 'notification_requests.confirm_accept_all.message', defaultMessage: 'You are about to accept {count, plural, one {one notification request} other {# notification requests}}. Are you sure you want to proceed?' },
+  confirm_accept_all_button: { id: 'notification_requests.confirm_accept_all.button', defaultMessage: 'Accept all' },
+  confirm_dismiss_all_title: { id: 'notification_requests.confirm_dismiss_all.title', defaultMessage: 'Dismiss notification requests?' },
+  confirm_dismiss_all_message: { id: 'notification_requests.confirm_dismiss_all.message', defaultMessage: "You are about to dismiss {count, plural, one {one notification request} other {# notification requests}}. You won't be able to easily access {count, plural, one {it} other {them}} again. Are you sure you want to proceed?" },
+  confirm_dismiss_all_button: { id: 'notification_requests.confirm_dismiss_all.button', defaultMessage: 'Dismiss all' },
 });
 
 export const NotificationRequests = ({ multiColumn }) => {
@@ -39,6 +50,54 @@ export const NotificationRequests = ({ multiColumn }) => {
     dispatch(fetchNotificationRequests());
   }, [dispatch]);
 
+  const handleAcceptAll = useCallback(() => {
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        title: intl.formatMessage(messages.confirm_accept_all_title),
+        message: intl.formatMessage(messages.confirm_accept_all_message, { count: notificationRequests.size }),
+        confirm: intl.formatMessage(messages.confirm_accept_all_button),
+        onConfirm: () => {
+          notificationRequests.forEach((request) =>
+            dispatch(acceptNotificationRequest(request.get('id')))
+          );
+        },
+      },
+    }));
+  }, [dispatch, notificationRequests, intl]);
+
+  const handleDismissAll = useCallback(() => {
+    dispatch(openModal({
+      modalType: 'CONFIRM',
+      modalProps: {
+        title: intl.formatMessage(messages.confirm_dismiss_all_title),
+        message: intl.formatMessage(messages.confirm_dismiss_all_message, { count: notificationRequests.size }),
+        confirm: intl.formatMessage(messages.confirm_dismiss_all_button),
+        onConfirm: () => {
+          notificationRequests.forEach((request) =>
+            dispatch(dismissNotificationRequest(request.get('id')))
+          );
+        },
+      }
+    }));
+  }, [dispatch, notificationRequests, intl]);
+
+  const menu = [
+    { text: intl.formatMessage(messages.accept_all), action: handleAcceptAll },
+    { text: intl.formatMessage(messages.dismiss_all), action: handleDismissAll, dangerous: true },
+  ];
+
+  const dropDownMenu = (
+    <DropdownMenuContainer
+      className='column-header__button'
+      items={menu}
+      icon='ellipsis-v'
+      iconComponent={MoreHorizIcon}
+      size={24}
+      direction='right'
+    />
+  );
+
   return (
     <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
       <ColumnHeader
@@ -47,6 +106,7 @@ export const NotificationRequests = ({ multiColumn }) => {
         title={intl.formatMessage(messages.title)}
         onClick={handleHeaderClick}
         multiColumn={multiColumn}
+        extraButton={dropDownMenu}
         showBackButton
       />