feat(ui): allow admins to edit & approve request from advanced request modal (#2067)

* feat(ui): allow admins to edit & accept request from request modal

This changes the "Edit Request" button in the advanced request modal to "Edit & Accept Request"
since the only thing an admin would do next is to accept the request.
The button would stay the same for users without the manage request permissions;
users who are editing their own requests or requesting content.

* feat(ui): suggested changes

src/components/RequestModal/MovieRequestModal.tsx

@@ -23,12 +23,14 @@ const messages = defineMessages({
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',
   edit: 'Edit Request',
+  approve: 'Approve Request',
   cancel: 'Cancel Request',
   pendingrequest: 'Pending Request for {title}',
   pending4krequest: 'Pending 4K Request for {title}',
   requestfrom: "{username}'s request is pending approval.",
   errorediting: 'Something went wrong while editing the request.',
   requestedited: 'Request for <strong>{title}</strong> edited successfully!',
+  requestApproved: 'Request for <strong>{title}</strong> approved!',
   requesterror: 'Something went wrong while submitting the request.',
   pendingapproval: 'Your request is pending approval.',
 });
@@ -159,7 +161,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
     }
   };
 
-  const updateRequest = async () => {
+  const updateRequest = async (alsoApproveRequest = false) => {
     setIsUpdating(true);
 
     try {
@@ -172,14 +174,23 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         tags: requestOverrides?.tags,
       });
 
+      if (alsoApproveRequest) {
+        await axios.post(`/api/v1/request/${editRequest?.id}/approve`);
+      }
+
       addToast(
         <span>
-          {intl.formatMessage(messages.requestedited, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
+          {intl.formatMessage(
+            alsoApproveRequest
+              ? messages.requestApproved
+              : messages.requestedited,
+            {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            }
+          )}
         </span>,
         {
           appearance: 'success',
@@ -202,12 +213,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   if (editRequest) {
     const isOwner = editRequest.requestedBy.id === user?.id;
-    const showEditButton = hasPermission(
-      [Permission.MANAGE_REQUESTS, Permission.REQUEST_ADVANCED],
-      {
-        type: 'or',
-      }
-    );
 
     return (
       <Modal
@@ -218,20 +223,44 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
           is4k ? messages.pending4krequest : messages.pendingrequest,
           { title: data?.title }
         )}
-        onOk={() => (showEditButton ? updateRequest() : cancelRequest())}
+        onOk={() =>
+          hasPermission(Permission.MANAGE_REQUESTS)
+            ? updateRequest(true)
+            : hasPermission(Permission.REQUEST_ADVANCED)
+            ? updateRequest()
+            : cancelRequest()
+        }
         okDisabled={isUpdating}
         okText={
-          showEditButton
+          hasPermission(Permission.MANAGE_REQUESTS)
+            ? intl.formatMessage(messages.approve)
+            : hasPermission(Permission.REQUEST_ADVANCED)
             ? intl.formatMessage(messages.edit)
             : intl.formatMessage(messages.cancel)
         }
-        okButtonType={showEditButton ? 'primary' : 'danger'}
+        okButtonType={
+          hasPermission(Permission.MANAGE_REQUESTS)
+            ? 'success'
+            : hasPermission(Permission.REQUEST_ADVANCED)
+            ? 'primary'
+            : 'danger'
+        }
         onSecondary={
-          isOwner && showEditButton ? () => cancelRequest() : undefined
+          isOwner &&
+          hasPermission(
+            [Permission.REQUEST_ADVANCED, Permission.MANAGE_REQUESTS],
+            { type: 'or' }
+          )
+            ? () => cancelRequest()
+            : undefined
         }
         secondaryDisabled={isUpdating}
         secondaryText={
-          isOwner && showEditButton
+          isOwner &&
+          hasPermission(
+            [Permission.REQUEST_ADVANCED, Permission.MANAGE_REQUESTS],
+            { type: 'or' }
+          )
             ? intl.formatMessage(messages.cancel)
             : undefined
         }