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
         }

src/components/RequestModal/TvRequestModal.tsx

@@ -30,6 +30,7 @@ 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}',
@@ -46,6 +47,7 @@ const messages = defineMessages({
   extras: 'Extras',
   errorediting: 'Something went wrong while editing the request.',
   requestedited: 'Request for <strong>{title}</strong> edited successfully!',
+  requestApproved: 'Request for <strong>{title}</strong> approved!',
   requestcancelled: 'Request for <strong>{title}</strong> canceled.',
   autoapproval: 'Automatic Approval',
   requesterror: 'Something went wrong while submitting the request.',
@@ -100,7 +102,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     selectedSeasons.length +
     (editRequest?.seasons ?? []).length;
 
-  const updateRequest = async () => {
+  const updateRequest = async (alsoApproveRequest = false) => {
     if (!editRequest) {
       return;
     }
@@ -121,6 +123,10 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           tags: requestOverrides?.tags,
           seasons: selectedSeasons,
         });
+
+        if (alsoApproveRequest) {
+          await axios.post(`/api/v1/request/${editRequest.id}/approve`);
+        }
       } else {
         await axios.delete(`/api/v1/request/${editRequest.id}`);
       }
@@ -128,12 +134,17 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       addToast(
         <span>
           {selectedSeasons.length > 0
-            ? intl.formatMessage(messages.requestedited, {
-                title: data?.name,
-                strong: function strong(msg) {
-                  return <strong>{msg}</strong>;
-                },
-              })
+            ? intl.formatMessage(
+                alsoApproveRequest
+                  ? messages.requestApproved
+                  : messages.requestedited,
+                {
+                  title: data?.name,
+                  strong: function strong(msg) {
+                    return <strong>{msg}</strong>;
+                  },
+                }
+              )
             : intl.formatMessage(messages.requestcancelled, {
                 title: data?.name,
                 strong: function strong(msg) {
@@ -372,7 +383,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       loading={!data && !error}
       backgroundClickable
       onCancel={tvdbId ? () => setSearchModal({ show: true }) : onCancel}
-      onOk={() => (editRequest ? updateRequest() : sendRequest())}
+      onOk={() =>
+        editRequest
+          ? hasPermission(Permission.MANAGE_REQUESTS)
+            ? updateRequest(true)
+            : updateRequest()
+          : sendRequest()
+      }
       title={intl.formatMessage(
         editRequest
           ? is4k
@@ -387,6 +404,8 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
         editRequest
           ? selectedSeasons.length === 0
             ? intl.formatMessage(messages.cancel)
+            : hasPermission(Permission.MANAGE_REQUESTS)
+            ? intl.formatMessage(messages.approve)
             : intl.formatMessage(messages.edit)
           : getAllRequestedSeasons().length >= getAllSeasons().length
           ? intl.formatMessage(messages.alreadyrequested)
@@ -415,11 +434,14 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
               selectedSeasons.length === 0)
       }
       okButtonType={
-        editRequest &&
-        settings.currentSettings.partialRequestsEnabled &&
-        selectedSeasons.length === 0
-          ? 'danger'
-          : `primary`
+        editRequest
+          ? settings.currentSettings.partialRequestsEnabled &&
+            selectedSeasons.length === 0
+            ? 'danger'
+            : hasPermission(Permission.MANAGE_REQUESTS)
+            ? 'success'
+            : 'primary'
+          : 'primary'
       }
       cancelText={
         editRequest

src/i18n/locale/en.json

@@ -322,6 +322,7 @@
   "components.RequestModal.SearchByNameModal.nosummary": "No summary for this title was found.",
   "components.RequestModal.SearchByNameModal.notvdbiddescription": "We couldn't automatically match your request. Please select the correct match from the list below.",
   "components.RequestModal.alreadyrequested": "Already Requested",
+  "components.RequestModal.approve": "Approve Request",
   "components.RequestModal.autoapproval": "Automatic Approval",
   "components.RequestModal.cancel": "Cancel Request",
   "components.RequestModal.edit": "Edit Request",
@@ -332,6 +333,7 @@
   "components.RequestModal.pendingapproval": "Your request is pending approval.",
   "components.RequestModal.pendingrequest": "Pending Request for {title}",
   "components.RequestModal.request4ktitle": "Request {title} in 4K",
+  "components.RequestModal.requestApproved": "Request for <strong>{title}</strong> approved!",
   "components.RequestModal.requestCancel": "Request for <strong>{title}</strong> canceled.",
   "components.RequestModal.requestSuccess": "<strong>{title}</strong> requested successfully!",
   "components.RequestModal.requestadmin": "This request will be approved automatically.",