Fix: Unable to approve follower requests from notifications

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/account.tsx

@@ -47,7 +47,7 @@ interface IAccount {
   actionIcon?: string,
   actionTitle?: string,
   /** Override other actions for specificity like mute/unmute.  */
-  actionType?: 'muting' | 'blocking',
+  actionType?: 'muting' | 'blocking' | 'follow_request',
   avatarSize?: number,
   hidden?: boolean,
   hideActions?: boolean,

app/soapbox/features/follow_requests/components/account_authorize.tsx

@@ -7,6 +7,7 @@ import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import IconButton from 'soapbox/components/icon_button';
 import Permalink from 'soapbox/components/permalink';
+import { Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -42,12 +43,12 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
   return (
     <div className='account-authorize__wrapper'>
       <div className='account-authorize'>
-        <Permalink href={`/@${account.acct}`} to={`/@${account.acct}`} className='detailed-status__display-name'>
+        <Permalink href={`/@${account.acct}`} to={`/@${account.acct}`}>
           <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
           <DisplayName account={account} />
         </Permalink>
 
-        <div className='account__header__content' dangerouslySetInnerHTML={content} />
+        <Text className='account__header__content' dangerouslySetInnerHTML={content} />
       </div>
 
       <div className='account--panel'>

app/soapbox/features/notifications/components/notification.tsx

@@ -271,6 +271,14 @@ const Notification: React.FC<INotificaton> = (props) => {
     switch (type) {
       case 'follow':
       case 'follow_request':
+        return account && typeof account === 'object' ? (
+          <AccountContainer
+            id={account.id}
+            hidden={hidden}
+            avatarSize={48}
+            actionType='follow_request'
+          />
+        ) : null;
       case 'user_approved':
         return account && typeof account === 'object' ? (
           <AccountContainer

app/soapbox/features/ui/components/action-button.tsx

@@ -9,9 +9,11 @@ import {
   unblockAccount,
   muteAccount,
   unmuteAccount,
+  authorizeFollowRequest,
+  rejectFollowRequest,
 } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
+import { Button, HStack } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -28,13 +30,15 @@ const messages = defineMessages({
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
+  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
+  reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
 });
 
 interface IActionButton {
   /** Target account for the action. */
   account: AccountEntity
   /** Type of action to prioritize, eg on Blocks and Mutes pages. */
-  actionType?: 'muting' | 'blocking'
+  actionType?: 'muting' | 'blocking' | 'follow_request'
   /** Displays shorter text on the "Awaiting approval" button. */
   small?: boolean
 }
@@ -75,6 +79,14 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     }
   };
 
+  const handleAuthorize = () => {
+    dispatch(authorizeFollowRequest(account.id));
+  };
+
+  const handleReject = () => {
+    dispatch(rejectFollowRequest(account.id));
+  };
+
   const handleRemoteFollow = () => {
     dispatch(openModal('UNAUTHORIZED', {
       action: 'FOLLOW',
@@ -115,6 +127,27 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     );
   };
 
+  const followRequestAction = () => {
+    if (account.relationship?.followed_by) return null;
+
+    return (
+      <HStack space={2}>
+        <Button
+          theme='secondary'
+          size='sm'
+          text={intl.formatMessage(messages.authorize)}
+          onClick={handleAuthorize}
+        />
+        <Button
+          theme='danger'
+          size='sm'
+          text={intl.formatMessage(messages.reject)}
+          onClick={handleReject}
+        />
+      </HStack>
+    );
+  };
+
   /** Render a remote follow button, depending on features. */
   const renderRemoteFollow = () => {
     // Remote follow through the API.
@@ -162,6 +195,8 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
         return mutingAction();
       } else if (actionType === 'blocking') {
         return blockingAction();
+      } else if (actionType === 'follow_request') {
+        return followRequestAction();
       }
     }