fix(ui): allow canceling from request list & hide edit button for own requests (#1401)

* fix(ui): allow canceling from request list & hide edit button for own requests

* fix(ui): hide 'Cancel Request' button on request list for admins

src/components/Discover/index.tsx

@@ -21,7 +21,7 @@ const messages = defineMessages({
   populartv: 'Popular Series',
   upcomingtv: 'Upcoming Series',
   recentlyAdded: 'Recently Added',
-  nopending: 'No Pending Requests',
+  noRequests: 'No requests.',
   upcoming: 'Upcoming Movies',
   trending: 'Trending',
 });
@@ -94,7 +94,7 @@ const Discover: React.FC = () => {
           />
         ))}
         placeholder={<RequestCard.Placeholder />}
-        emptyMessage={intl.formatMessage(messages.nopending)}
+        emptyMessage={intl.formatMessage(messages.noRequests)}
       />
       <MediaSlider
         sliderKey="trending"

src/components/RequestList/RequestItem/index.tsx

@@ -30,6 +30,7 @@ const messages = defineMessages({
   modifieduserdate: '{date} by {user}',
   mediaerror: 'The associated title for this request is no longer available.',
   deleterequest: 'Delete Request',
+  cancelRequest: 'Cancel Request',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -101,7 +102,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
   });
   const { addToast } = useToasts();
   const intl = useIntl();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
   const [showEditModal, setShowEditModal] = useState(false);
   const { locale } = useContext(LanguageContext);
   const url =
@@ -368,6 +369,31 @@ const RequestItem: React.FC<RequestItemProps> = ({
           </div>
         </div>
         <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">
+          {requestData.status === MediaRequestStatus.PENDING &&
+            !hasPermission(Permission.MANAGE_REQUESTS) &&
+            requestData.requestedBy.id === user?.id && (
+              <ConfirmButton
+                onClick={() => deleteRequest()}
+                confirmText={intl.formatMessage(globalMessages.areyousure)}
+                className="w-full"
+              >
+                <svg
+                  className="w-5 h-5 mr-1"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span className="block">
+                  {intl.formatMessage(messages.cancelRequest)}
+                </span>
+              </ConfirmButton>
+            )}
           {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
             MediaStatus.UNKNOWN &&
             requestData.status !== MediaRequestStatus.DECLINED &&

src/components/RequestModal/MovieRequestModal.tsx

@@ -33,6 +33,7 @@ const messages = defineMessages({
   errorediting: 'Something went wrong while editing the request.',
   requestedited: 'Request for <strong>{title}</strong> edited successfully!',
   requesterror: 'Something went wrong while submitting the request.',
+  pendingapproval: 'Your request is pending approval.',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -206,8 +207,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   };
 
   const isOwner = activeRequest
-    ? activeRequest.requestedBy.id === user?.id ||
-      hasPermission(Permission.MANAGE_REQUESTS)
+    ? activeRequest.requestedBy.id === user?.id
     : false;
 
   if (activeRequest?.status === MediaRequestStatus.PENDING) {
@@ -222,27 +222,27 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
             title: data?.title,
           }
         )}
-        onOk={() => updateRequest()}
+        onOk={() => (isOwner ? cancelRequest() : updateRequest())}
         okDisabled={isUpdating}
-        okText={intl.formatMessage(globalMessages.edit)}
-        okButtonType="primary"
-        onSecondary={isOwner ? () => cancelRequest() : undefined}
-        secondaryDisabled={isUpdating}
-        secondaryText={
-          isUpdating
-            ? intl.formatMessage(globalMessages.canceling)
-            : intl.formatMessage(messages.cancel)
+        okText={
+          isOwner
+            ? isUpdating
+              ? intl.formatMessage(globalMessages.canceling)
+              : intl.formatMessage(messages.cancel)
+            : intl.formatMessage(globalMessages.edit)
         }
-        secondaryButtonType="danger"
+        okButtonType={isOwner ? 'danger' : 'primary'}
         cancelText={intl.formatMessage(globalMessages.close)}
         iconSvg={<DownloadIcon className="w-6 h-6" />}
       >
-        {intl.formatMessage(
-          is4k ? messages.request4kfrom : messages.requestfrom,
-          {
-            username: activeRequest.requestedBy.displayName,
-          }
-        )}
+        {isOwner
+          ? intl.formatMessage(messages.pendingapproval)
+          : intl.formatMessage(
+              is4k ? messages.request4kfrom : messages.requestfrom,
+              {
+                username: activeRequest.requestedBy.displayName,
+              }
+            )}
         {(hasPermission(Permission.REQUEST_ADVANCED) ||
           hasPermission(Permission.MANAGE_REQUESTS)) && (
           <div className="mt-4">

src/i18n/locale/en.json

@@ -23,7 +23,7 @@
   "components.Discover.discover": "Discover",
   "components.Discover.discovermovies": "Popular Movies",
   "components.Discover.discovertv": "Popular Series",
-  "components.Discover.nopending": "No Pending Requests",
+  "components.Discover.noRequests": "No requests.",
   "components.Discover.popularmovies": "Popular Movies",
   "components.Discover.populartv": "Popular Series",
   "components.Discover.recentlyAdded": "Recently Added",
@@ -163,6 +163,7 @@
   "components.RequestCard.deleterequest": "Delete Request",
   "components.RequestCard.mediaerror": "The associated title for this request is no longer available.",
   "components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
+  "components.RequestList.RequestItem.cancelRequest": "Cancel Request",
   "components.RequestList.RequestItem.deleterequest": "Delete Request",
   "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
   "components.RequestList.RequestItem.mediaerror": "The associated title for this request is no longer available.",
@@ -208,6 +209,7 @@
   "components.RequestModal.extras": "Extras",
   "components.RequestModal.numberofepisodes": "# of Episodes",
   "components.RequestModal.pending4krequest": "Pending Request for {title} in 4K",
+  "components.RequestModal.pendingapproval": "Your request is pending approval.",
   "components.RequestModal.pendingrequest": "Pending Request for {title}",
   "components.RequestModal.request4kfrom": "There is currently a pending 4K request from {username}.",
   "components.RequestModal.request4ktitle": "Request {title} in 4K",