feat(requests): Request Overrides & Request Editing (#653)

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -0,0 +1,312 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';
+import type {
+  ServiceCommonServer,
+  ServiceCommonServerWithDetails,
+} from '../../../../server/interfaces/api/serviceInterfaces';
+import { defineMessages, useIntl } from 'react-intl';
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+const messages = defineMessages({
+  advancedoptions: 'Advanced Options',
+  destinationserver: 'Destination Server',
+  qualityprofile: 'Quality Profile',
+  rootfolder: 'Root Folder',
+  animenote: '* This series is an anime.',
+  default: '(Default)',
+  loadingprofiles: 'Loading profiles…',
+  loadingfolders: 'Loading folders…',
+});
+
+export type RequestOverrides = {
+  server?: number;
+  profile?: number;
+  folder?: string;
+};
+
+interface AdvancedRequesterProps {
+  type: 'movie' | 'tv';
+  is4k: boolean;
+  isAnime?: boolean;
+  defaultOverrides?: RequestOverrides;
+  onChange: (overrides: RequestOverrides) => void;
+}
+
+const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
+  type,
+  is4k = false,
+  isAnime = false,
+  defaultOverrides,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const { data, error } = useSWR<ServiceCommonServer[]>(
+    `/api/v1/service/${type === 'movie' ? 'radarr' : 'sonarr'}`,
+    {
+      refreshInterval: 0,
+      refreshWhenHidden: false,
+      revalidateOnFocus: false,
+      revalidateOnMount: true,
+    }
+  );
+  const [selectedServer, setSelectedServer] = useState<number | null>(
+    defaultOverrides?.server !== undefined && defaultOverrides?.server >= 0
+      ? defaultOverrides?.server
+      : null
+  );
+  const [selectedProfile, setSelectedProfile] = useState<number>(
+    defaultOverrides?.profile ?? -1
+  );
+  const [selectedFolder, setSelectedFolder] = useState<string>(
+    defaultOverrides?.folder ?? ''
+  );
+  const {
+    data: serverData,
+    isValidating,
+  } = useSWR<ServiceCommonServerWithDetails>(
+    selectedServer !== null
+      ? `/api/v1/service/${
+          type === 'movie' ? 'radarr' : 'sonarr'
+        }/${selectedServer}`
+      : null,
+    {
+      refreshInterval: 0,
+      refreshWhenHidden: false,
+      revalidateOnFocus: false,
+    }
+  );
+
+  useEffect(() => {
+    let defaultServer = data?.find(
+      (server) => server.isDefault && is4k === server.is4k
+    );
+
+    if (!defaultServer && (data ?? []).length > 0) {
+      defaultServer = data?.[0];
+    }
+
+    if (
+      defaultServer &&
+      defaultServer.id !== selectedServer &&
+      (!defaultOverrides || defaultOverrides.server === null)
+    ) {
+      setSelectedServer(defaultServer.id);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (serverData) {
+      const defaultProfile = serverData.profiles.find(
+        (profile) =>
+          profile.id ===
+          (isAnime
+            ? serverData.server.activeAnimeProfileId
+            : serverData.server.activeProfileId)
+      );
+      const defaultFolder = serverData.rootFolders.find(
+        (folder) =>
+          folder.path ===
+          (isAnime
+            ? serverData.server.activeAnimeDirectory
+            : serverData.server.activeDirectory)
+      );
+
+      if (
+        defaultProfile &&
+        defaultProfile.id !== selectedProfile &&
+        (!defaultOverrides || defaultOverrides.profile === null)
+      ) {
+        setSelectedProfile(defaultProfile.id);
+      }
+
+      if (
+        defaultFolder &&
+        defaultFolder.path !== selectedFolder &&
+        (!defaultOverrides || defaultOverrides.folder === null)
+      ) {
+        setSelectedFolder(defaultFolder?.path ?? '');
+      }
+    }
+  }, [serverData]);
+
+  useEffect(() => {
+    if (
+      defaultOverrides &&
+      defaultOverrides.server !== null &&
+      defaultOverrides.server !== undefined
+    ) {
+      setSelectedServer(defaultOverrides.server);
+    }
+
+    if (
+      defaultOverrides &&
+      defaultOverrides.profile !== null &&
+      defaultOverrides.profile !== undefined
+    ) {
+      setSelectedProfile(defaultOverrides.profile);
+    }
+
+    if (
+      defaultOverrides &&
+      defaultOverrides.folder !== null &&
+      defaultOverrides.folder !== undefined
+    ) {
+      setSelectedFolder(defaultOverrides.folder);
+    }
+  }, [
+    defaultOverrides?.server,
+    defaultOverrides?.folder,
+    defaultOverrides?.profile,
+  ]);
+
+  useEffect(() => {
+    if (selectedServer !== null) {
+      onChange({
+        folder: selectedFolder !== '' ? selectedFolder : undefined,
+        profile: selectedProfile !== -1 ? selectedProfile : undefined,
+        server: selectedServer ?? undefined,
+      });
+    }
+  }, [selectedFolder, selectedServer, selectedProfile]);
+
+  if (!data && !error) {
+    return (
+      <div className="w-full mb-2">
+        <SmallLoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!data || selectedServer === null) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex items-center mb-2 font-bold tracking-wider">
+        <svg
+          className="w-4 h-4 mr-1"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9.707 7.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L13 8.586V5h3a2 2 0 012 2v5a2 2 0 01-2 2H8a2 2 0 01-2-2V7a2 2 0 012-2h3v3.586L9.707 7.293zM11 3a1 1 0 112 0v2h-2V3z" />
+          <path d="M4 9a2 2 0 00-2 2v5a2 2 0 002 2h8a2 2 0 002-2H4V9z" />
+        </svg>
+        {intl.formatMessage(messages.advancedoptions)}
+      </div>
+      <div className="p-4 bg-gray-600 rounded-md shadow">
+        <div className="flex flex-col items-center justify-between md:flex-row">
+          <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/3 md:pr-4 md:mb-0">
+            <label htmlFor="server" className="block text-sm font-medium">
+              {intl.formatMessage(messages.destinationserver)}
+            </label>
+            <select
+              id="server"
+              name="server"
+              onChange={(e) => setSelectedServer(Number(e.target.value))}
+              onBlur={(e) => setSelectedServer(Number(e.target.value))}
+              value={selectedServer}
+              className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+            >
+              {data.map((server) => (
+                <option key={`server-list-${server.id}`} value={server.id}>
+                  {server.name}
+                  {server.isDefault && server.is4k === is4k
+                    ? ` ${intl.formatMessage(messages.default)}`
+                    : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/3 md:pr-4 md:mb-0">
+            <label htmlFor="server" className="block text-sm font-medium">
+              {intl.formatMessage(messages.qualityprofile)}
+            </label>
+            <select
+              id="profile"
+              name="profile"
+              value={selectedProfile}
+              onChange={(e) => setSelectedProfile(Number(e.target.value))}
+              onBlur={(e) => setSelectedProfile(Number(e.target.value))}
+              className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+            >
+              {isValidating && (
+                <option value="">
+                  {intl.formatMessage(messages.loadingprofiles)}
+                </option>
+              )}
+              {!isValidating &&
+                serverData &&
+                serverData.profiles.map((profile) => (
+                  <option key={`profile-list${profile.id}`} value={profile.id}>
+                    {profile.name}
+                    {isAnime &&
+                    serverData.server.activeAnimeProfileId === profile.id
+                      ? ` ${intl.formatMessage(messages.default)}`
+                      : !isAnime &&
+                        serverData.server.activeProfileId === profile.id
+                      ? ` ${intl.formatMessage(messages.default)}`
+                      : ''}
+                  </option>
+                ))}
+            </select>
+          </div>
+          <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/3 md:mb-0">
+            <label htmlFor="server" className="block text-sm font-medium">
+              {intl.formatMessage(messages.rootfolder)}
+            </label>
+            <select
+              id="folder"
+              name="folder"
+              value={selectedFolder}
+              onChange={(e) => setSelectedFolder(e.target.value)}
+              onBlur={(e) => setSelectedFolder(e.target.value)}
+              className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+            >
+              {isValidating && (
+                <option value="">
+                  {intl.formatMessage(messages.loadingfolders)}
+                </option>
+              )}
+              {!isValidating &&
+                serverData &&
+                serverData.rootFolders.map((folder) => (
+                  <option key={`folder-list${folder.id}`} value={folder.path}>
+                    {folder.path} ({formatBytes(folder.freeSpace ?? 0)})
+                    {isAnime &&
+                    serverData.server.activeAnimeDirectory === folder.path
+                      ? ` ${intl.formatMessage(messages.default)}`
+                      : !isAnime &&
+                        serverData.server.activeDirectory === folder.path
+                      ? ` ${intl.formatMessage(messages.default)}`
+                      : ''}
+                  </option>
+                ))}
+            </select>
+          </div>
+        </div>
+        {isAnime && (
+          <div className="mt-4 italic">
+            {intl.formatMessage(messages.animenote)}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default AdvancedRequester;

src/components/RequestModal/MovieRequestModal.tsx

@@ -13,6 +13,9 @@ import {
   MediaRequestStatus,
 } from '../../../server/constants/media';
 import DownloadIcon from '../../assets/download.svg';
+import Alert from '../Common/Alert';
+import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
   requestadmin:
@@ -33,11 +36,14 @@ const messages = defineMessages({
   request4k: 'Request 4K',
   requestfrom: 'There is currently a pending request from {username}',
   request4kfrom: 'There is currently a pending 4K request from {username}',
+  errorediting: 'Something went wrong editing the request.',
+  requestedited: 'Request edited.',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
   tmdbId: number;
   is4k?: boolean;
+  editRequest?: MediaRequest;
   onCancel?: () => void;
   onComplete?: (newStatus: MediaStatus) => void;
   onUpdating?: (isUpdating: boolean) => void;
@@ -48,9 +54,14 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   onComplete,
   tmdbId,
   onUpdating,
-  is4k,
+  editRequest,
+  is4k = false,
 }) => {
   const [isUpdating, setIsUpdating] = useState(false);
+  const [
+    requestOverrides,
+    setRequestOverrides,
+  ] = useState<RequestOverrides | null>(null);
   const { addToast } = useToasts();
   const { data, error } = useSWR<MovieDetails>(`/api/v1/movie/${tmdbId}`, {
     revalidateOnMount: true,
@@ -66,10 +77,19 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   const sendRequest = useCallback(async () => {
     setIsUpdating(true);
+    let overrideParams = {};
+    if (requestOverrides) {
+      overrideParams = {
+        serverId: requestOverrides.server,
+        profileId: requestOverrides.profile,
+        rootFolder: requestOverrides.folder,
+      };
+    }
     const response = await axios.post<MediaRequest>('/api/v1/request', {
       mediaId: data?.id,
       mediaType: 'movie',
       is4k,
+      ...overrideParams,
     });
 
     if (response.data) {
@@ -94,7 +114,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       );
       setIsUpdating(false);
     }
-  }, [data, onComplete, addToast]);
+  }, [data, onComplete, addToast, requestOverrides]);
 
   const activeRequest = data?.mediaInfo?.requests?.find(
     (request) => request.is4k === !!is4k
@@ -125,35 +145,64 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
     }
   };
 
+  const updateRequest = async () => {
+    setIsUpdating(true);
+
+    try {
+      await axios.put(`/api/v1/request/${editRequest?.id}`, {
+        mediaType: 'movie',
+        serverId: requestOverrides?.server,
+        profileId: requestOverrides?.profile,
+        rootFolder: requestOverrides?.folder,
+      });
+
+      addToast(<span>{intl.formatMessage(messages.requestedited)}</span>, {
+        appearance: 'success',
+        autoDismiss: true,
+      });
+
+      if (onComplete) {
+        onComplete(MediaStatus.PENDING);
+      }
+    } catch (e) {
+      addToast(<span>{intl.formatMessage(messages.errorediting)}</span>, {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
   const isOwner = activeRequest
     ? activeRequest.requestedBy.id === user?.id ||
       hasPermission(Permission.MANAGE_REQUESTS)
     : false;
 
-  const text = hasPermission(Permission.MANAGE_REQUESTS)
-    ? intl.formatMessage(messages.requestadmin)
-    : undefined;
-
   if (activeRequest?.status === MediaRequestStatus.PENDING) {
     return (
       <Modal
         loading={!data && !error}
         backgroundClickable
         onCancel={onCancel}
-        onOk={isOwner ? () => cancelRequest() : undefined}
-        okDisabled={isUpdating}
         title={intl.formatMessage(
           is4k ? messages.pending4krequest : messages.pendingrequest,
           {
             title: data?.title,
           }
         )}
-        okText={
+        onOk={() => updateRequest()}
+        okDisabled={isUpdating}
+        okText={intl.formatMessage(globalMessages.edit)}
+        okButtonType="primary"
+        onSecondary={isOwner ? () => cancelRequest() : undefined}
+        secondaryDisabled={isUpdating}
+        secondaryText={
           isUpdating
             ? intl.formatMessage(messages.cancelling)
             : intl.formatMessage(messages.cancel)
         }
-        okButtonType={'danger'}
+        secondaryButtonType="danger"
         cancelText={intl.formatMessage(messages.close)}
         iconSvg={<DownloadIcon className="w-6 h-6" />}
       >
@@ -163,6 +212,26 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
             username: activeRequest.requestedBy.username,
           }
         )}
+        {hasPermission(Permission.REQUEST_ADVANCED) && (
+          <div className="mt-4">
+            <AdvancedRequester
+              type="movie"
+              is4k={is4k}
+              defaultOverrides={
+                editRequest
+                  ? {
+                      folder: editRequest.rootFolder,
+                      profile: editRequest.profileId,
+                      server: editRequest.serverId,
+                    }
+                  : undefined
+              }
+              onChange={(overrides) => {
+                setRequestOverrides(overrides);
+              }}
+            />
+          </div>
+        )}
       </Modal>
     );
   }
@@ -186,7 +255,24 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       okButtonType={'primary'}
       iconSvg={<DownloadIcon className="w-6 h-6" />}
     >
-      <p className="text-center md:text-left">{text}</p>
+      {(hasPermission(Permission.MANAGE_REQUESTS) ||
+        hasPermission(Permission.AUTO_APPROVE) ||
+        hasPermission(Permission.AUTO_APPROVE_MOVIE)) && (
+        <p className="mt-6">
+          <Alert title="Auto Approval" type="info">
+            {intl.formatMessage(messages.requestadmin)}
+          </Alert>
+        </p>
+      )}
+      {hasPermission(Permission.REQUEST_ADVANCED) && (
+        <AdvancedRequester
+          type="movie"
+          is4k={is4k}
+          onChange={(overrides) => {
+            setRequestOverrides(overrides);
+          }}
+        />
+      )}
     </Modal>
   );
 };

src/components/RequestModal/TvRequestModal.tsx

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
 import useSWR from 'swr';
 import { useToasts } from 'react-toast-notifications';
+import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb';
 import axios from 'axios';
 import {
   MediaStatus,
@@ -15,13 +16,14 @@ import { TvDetails } from '../../../server/models/Tv';
 import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
 import SeasonRequest from '../../../server/entity/SeasonRequest';
+import Alert from '../Common/Alert';
+import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
 
 const messages = defineMessages({
   requestadmin: 'Your request will be immediately approved.',
   cancelrequest:
     'This will remove your request. Are you sure you want to continue?',
   requestSuccess: '<strong>{title}</strong> successfully requested!',
-  requestCancel: 'Request for <strong>{title}</strong> cancelled',
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',
   requesting: 'Requesting...',
@@ -34,6 +36,9 @@ const messages = defineMessages({
   seasonnumber: 'Season {number}',
   extras: 'Extras',
   notrequested: 'Not Requested',
+  errorediting: 'Something went wrong editing the request.',
+  requestedited: 'Request edited.',
+  requestcancelled: 'Request cancelled.',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -42,6 +47,7 @@ interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
   onComplete?: (newStatus: MediaStatus) => void;
   onUpdating?: (isUpdating: boolean) => void;
   is4k?: boolean;
+  editRequest?: MediaRequest;
 }
 
 const TvRequestModal: React.FC<RequestModalProps> = ({
@@ -49,14 +55,72 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
   onComplete,
   tmdbId,
   onUpdating,
+  editRequest,
   is4k = false,
 }) => {
   const { addToast } = useToasts();
+  const editingSeasons: number[] = (editRequest?.seasons ?? []).map(
+    (season) => season.seasonNumber
+  );
   const { data, error } = useSWR<TvDetails>(`/api/v1/tv/${tmdbId}`);
-  const [selectedSeasons, setSelectedSeasons] = useState<number[]>([]);
+  const [
+    requestOverrides,
+    setRequestOverrides,
+  ] = useState<RequestOverrides | null>(null);
+  const [selectedSeasons, setSelectedSeasons] = useState<number[]>(
+    editRequest ? editingSeasons : []
+  );
   const intl = useIntl();
   const { hasPermission } = useUser();
 
+  const updateRequest = async () => {
+    if (!editRequest) {
+      return;
+    }
+
+    if (onUpdating) {
+      onUpdating(true);
+    }
+
+    try {
+      if (selectedSeasons.length > 0) {
+        await axios.put(`/api/v1/request/${editRequest.id}`, {
+          mediaType: 'tv',
+          serverId: requestOverrides?.server,
+          profileId: requestOverrides?.profile,
+          rootFolder: requestOverrides?.folder,
+          seasons: selectedSeasons,
+        });
+      } else {
+        await axios.delete(`/api/v1/request/${editRequest.id}`);
+      }
+
+      addToast(
+        <span>
+          {selectedSeasons.length > 0
+            ? intl.formatMessage(messages.requestedited)
+            : intl.formatMessage(messages.requestcancelled)}
+        </span>,
+        {
+          appearance: 'success',
+          autoDismiss: true,
+        }
+      );
+      if (onComplete) {
+        onComplete(MediaStatus.PENDING);
+      }
+    } catch (e) {
+      addToast(<span>{intl.formatMessage(messages.errorediting)}</span>, {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      if (onUpdating) {
+        onUpdating(false);
+      }
+    }
+  };
+
   const sendRequest = async () => {
     if (selectedSeasons.length === 0) {
       return;
@@ -64,12 +128,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     if (onUpdating) {
       onUpdating(true);
     }
+    let overrideParams = {};
+    if (requestOverrides) {
+      overrideParams = {
+        serverId: requestOverrides.server,
+        profileId: requestOverrides.profile,
+        rootFolder: requestOverrides.folder,
+      };
+    }
     const response = await axios.post<MediaRequest>('/api/v1/request', {
       mediaId: data?.id,
       tvdbId: data?.externalIds.tvdbId,
       mediaType: 'tv',
       is4k,
       seasons: selectedSeasons,
+      ...overrideParams,
     });
 
     if (response.data) {
@@ -99,7 +172,9 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       .reduce((requestedSeasons, request) => {
         return [
           ...requestedSeasons,
-          ...request.seasons.map((sr) => sr.seasonNumber),
+          ...request.seasons
+            .filter((season) => !editingSeasons.includes(season.seasonNumber))
+            .map((sr) => sr.seasonNumber),
         ];
       }, [] as number[]);
 
@@ -172,10 +247,6 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     );
   };
 
-  const text = hasPermission(Permission.MANAGE_REQUESTS)
-    ? intl.formatMessage(messages.requestadmin)
-    : undefined;
-
   const getSeasonRequest = (
     seasonNumber: number
   ): SeasonRequest | undefined => {
@@ -205,20 +276,24 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       loading={!data && !error}
       backgroundClickable
       onCancel={onCancel}
-      onOk={() => sendRequest()}
+      onOk={() => (editRequest ? updateRequest() : sendRequest())}
       title={intl.formatMessage(
         is4k ? messages.request4ktitle : messages.requesttitle,
         { title: data?.name }
       )}
       okText={
-        selectedSeasons.length === 0
+        editRequest && selectedSeasons.length === 0
+          ? 'Cancel Request'
+          : selectedSeasons.length === 0
           ? intl.formatMessage(messages.selectseason)
           : intl.formatMessage(messages.requestseasons, {
               seasonCount: selectedSeasons.length,
             })
       }
-      okDisabled={selectedSeasons.length === 0}
-      okButtonType="primary"
+      okDisabled={editRequest ? false : selectedSeasons.length === 0}
+      okButtonType={
+        editRequest && selectedSeasons.length === 0 ? 'danger' : `primary`
+      }
       iconSvg={
         <svg
           className="w-6 h-6"
@@ -236,8 +311,18 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
         </svg>
       }
     >
+      {(hasPermission(Permission.MANAGE_REQUESTS) ||
+        hasPermission(Permission.AUTO_APPROVE) ||
+        hasPermission(Permission.AUTO_APPROVE_MOVIE)) &&
+        !editRequest && (
+          <p className="mt-6">
+            <Alert title="Auto Approval" type="info">
+              {intl.formatMessage(messages.requestadmin)}
+            </Alert>
+          </p>
+        )}
       <div className="flex flex-col">
-        <div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
+        <div className="-mx-4 sm:mx-0">
           <div className="inline-block min-w-full py-2 align-middle">
             <div className="overflow-hidden shadow sm:rounded-lg">
               <table className="min-w-full">
@@ -281,7 +366,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-gray-600 divide-y">
+                <tbody className="bg-gray-600 divide-y divide-gray-700">
                   {data?.seasons
                     .filter((season) => season.seasonNumber !== 0)
                     .map((season) => {
@@ -302,7 +387,10 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                               tabIndex={0}
                               aria-checked={
                                 !!mediaSeason ||
-                                !!seasonRequest ||
+                                (!!seasonRequest &&
+                                  !editingSeasons.includes(
+                                    season.seasonNumber
+                                  )) ||
                                 isSelectedSeason(season.seasonNumber)
                               }
                               onClick={() => toggleSeason(season.seasonNumber)}
@@ -312,14 +400,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                 }
                               }}
                               className={`group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
-                                mediaSeason || seasonRequest ? 'opacity-50' : ''
+                                mediaSeason ||
+                                (!!seasonRequest &&
+                                  !editingSeasons.includes(season.seasonNumber))
+                                  ? 'opacity-50'
+                                  : ''
                               }`}
                             >
                               <span
                                 aria-hidden="true"
                                 className={`${
                                   !!mediaSeason ||
-                                  !!seasonRequest ||
+                                  (!!seasonRequest &&
+                                    !editingSeasons.includes(
+                                      season.seasonNumber
+                                    )) ||
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-800'
@@ -329,7 +424,10 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                 aria-hidden="true"
                                 className={`${
                                   !!mediaSeason ||
-                                  !!seasonRequest ||
+                                  (!!seasonRequest &&
+                                    !editingSeasons.includes(
+                                      season.seasonNumber
+                                    )) ||
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
@@ -398,7 +496,27 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           </div>
         </div>
       </div>
-      <p className="mt-4">{text}</p>
+      {hasPermission(Permission.REQUEST_ADVANCED) && (
+        <div className="mt-4">
+          <AdvancedRequester
+            type="tv"
+            is4k={is4k}
+            isAnime={data?.keywords.some(
+              (keyword) => keyword.id === ANIME_KEYWORD_ID
+            )}
+            onChange={(overrides) => setRequestOverrides(overrides)}
+            defaultOverrides={
+              editRequest
+                ? {
+                    folder: editRequest.rootFolder,
+                    profile: editRequest.profileId,
+                    server: editRequest.serverId,
+                  }
+                : undefined
+            }
+          />
+        </div>
+      )}
     </Modal>
   );
 };

src/components/RequestModal/index.tsx

@@ -3,14 +3,15 @@ import MovieRequestModal from './MovieRequestModal';
 import type { MediaStatus } from '../../../server/constants/media';
 import TvRequestModal from './TvRequestModal';
 import Transition from '../Transition';
+import { MediaRequest } from '../../../server/entity/MediaRequest';
 
 interface RequestModalProps {
   show: boolean;
   type: 'movie' | 'tv';
   tmdbId: number;
   is4k?: boolean;
+  editRequest?: MediaRequest;
   onComplete?: (newStatus: MediaStatus) => void;
-  onError?: (error: string) => void;
   onCancel?: () => void;
   onUpdating?: (isUpdating: boolean) => void;
 }
@@ -20,6 +21,7 @@ const RequestModal: React.FC<RequestModalProps> = ({
   show,
   tmdbId,
   is4k,
+  editRequest,
   onComplete,
   onUpdating,
   onCancel,
@@ -41,6 +43,7 @@ const RequestModal: React.FC<RequestModalProps> = ({
           tmdbId={tmdbId}
           onUpdating={onUpdating}
           is4k={is4k}
+          editRequest={editRequest}
         />
       </Transition>
     );
@@ -62,6 +65,7 @@ const RequestModal: React.FC<RequestModalProps> = ({
         tmdbId={tmdbId}
         onUpdating={onUpdating}
         is4k={is4k}
+        editRequest={editRequest}
       />
     </Transition>
   );