Add ability to report, block and mute from notification requests list (#31309)

Co-authored-by: Renaud Chaput <renchap@gmail.com>

app/javascript/mastodon/features/notifications/components/notification_request.jsx

@@ -3,15 +3,21 @@ import { useCallback } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import { Link, useHistory } from 'react-router-dom';
 
 import { useSelector, useDispatch } from 'react-redux';
 
 import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
-import DoneIcon from '@/material-icons/400-24px/done.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import { initBlockModal } from 'mastodon/actions/blocks';
+import { initMuteModal } from 'mastodon/actions/mutes';
 import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
+import { initReport } from 'mastodon/actions/reports';
 import { Avatar } from 'mastodon/components/avatar';
+import { CheckBox } from 'mastodon/components/check_box';
 import { IconButton } from 'mastodon/components/icon_button';
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import { makeGetAccount } from 'mastodon/selectors';
 import { toCappedNumber } from 'mastodon/utils/numbers';
 
@@ -20,12 +26,18 @@ const getAccount = makeGetAccount();
 const messages = defineMessages({
   accept: { id: 'notification_requests.accept', defaultMessage: 'Accept' },
   dismiss: { id: 'notification_requests.dismiss', defaultMessage: 'Dismiss' },
+  view: { id: 'notification_requests.view', defaultMessage: 'View notifications' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
+  more: { id: 'status.more', defaultMessage: 'More' },
 });
 
-export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
+export const NotificationRequest = ({ id, accountId, notificationsCount, checked, showCheckbox, toggleCheck }) => {
   const dispatch = useDispatch();
   const account = useSelector(state => getAccount(state, accountId));
   const intl = useIntl();
+  const { push: historyPush } = useHistory();
 
   const handleDismiss = useCallback(() => {
     dispatch(dismissNotificationRequest(id));
@@ -35,9 +47,51 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
     dispatch(acceptNotificationRequest(id));
   }, [dispatch, id]);
 
+  const handleMute = useCallback(() => {
+    dispatch(initMuteModal(account));
+  }, [dispatch, account]);
+
+  const handleBlock = useCallback(() => {
+    dispatch(initBlockModal(account));
+  }, [dispatch, account]);
+
+  const handleReport = useCallback(() => {
+    dispatch(initReport(account));
+  }, [dispatch, account]);
+
+  const handleView = useCallback(() => {
+    historyPush(`/notifications/requests/${id}`);
+  }, [historyPush, id]);
+
+  const menu = [
+    { text: intl.formatMessage(messages.view), action: handleView },
+    null,
+    { text: intl.formatMessage(messages.accept), action: handleAccept },
+    null,
+    { text: intl.formatMessage(messages.mute, { name: account.username }), action: handleMute, dangerous: true },
+    { text: intl.formatMessage(messages.block, { name: account.username }), action: handleBlock, dangerous: true },
+    { text: intl.formatMessage(messages.report, { name: account.username }), action: handleReport, dangerous: true },
+  ];
+
+  const handleCheck = useCallback(() => {
+    toggleCheck(id);
+  }, [toggleCheck, id]);
+
+  const handleClick = useCallback((e) => {
+    if (showCheckbox) {
+      toggleCheck(id);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [toggleCheck, id, showCheckbox]);
+
   return (
-    <div className='notification-request'>
-      <Link to={`/notifications/requests/${id}`} className='notification-request__link'>
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- this is just a minor affordance, but we will need a comprehensive accessibility pass */
+    <div className={classNames('notification-request', showCheckbox && 'notification-request--forced-checkbox')} onClick={handleClick}>
+      <div className='notification-request__checkbox' aria-hidden={!showCheckbox}>
+        <CheckBox checked={checked} onChange={handleCheck} />
+      </div>
+      <Link to={`/notifications/requests/${id}`} className='notification-request__link' onClick={handleClick} title={account?.acct}>
         <Avatar account={account} size={40} counter={toCappedNumber(notificationsCount)} />
 
         <div className='notification-request__name'>
@@ -51,7 +105,13 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
 
       <div className='notification-request__actions'>
         <IconButton iconComponent={DeleteIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
-        <IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} />
+        <DropdownMenuContainer
+          items={menu}
+          icons='ellipsis-h'
+          iconComponent={MoreHorizIcon}
+          direction='right'
+          title={intl.formatMessage(messages.more)}
+        />
       </div>
     </div>
   );
@@ -61,4 +121,7 @@ NotificationRequest.propTypes = {
   id: PropTypes.string.isRequired,
   accountId: PropTypes.string.isRequired,
   notificationsCount: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  showCheckbox: PropTypes.bool,
+  toggleCheck: PropTypes.func,
 };