feat(frontend): radarr delete modal

src/components/Settings/RadarrModal.tsx

@@ -129,6 +129,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           baseUrl: radarr?.baseUrl,
           activeProfileId: radarr?.activeProfileId,
           rootFolder: radarr?.activeDirectory,
+          minimumAvailability: radarr?.minimumAvailability,
           isDefault: radarr?.isDefault ?? false,
           is4k: radarr?.is4k ?? false,
         }}
@@ -150,7 +151,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
               activeProfileName: profileName,
               activeDirectory: values.rootFolder,
               is4k: values.is4k,
-              minimumAvailability: 'In Cinema',
+              minimumAvailability: values.minimumAvailability,
               isDefault: values.isDefault,
             };
             if (!radarr) {
@@ -206,13 +207,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
               okDisabled={!isValidated || isSubmitting || isTesting}
               onOk={() => handleSubmit()}
               title={
-                !radarr ? 'Create New Radarr Instance' : 'Edit Radarr Instance'
+                !radarr ? 'Create New Radarr Server' : 'Edit Radarr Server'
               }
             >
               <div className="mb-6">
                 <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
-                    htmlFor="port"
+                    htmlFor="isDefault"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     Default Server
@@ -304,7 +305,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
-                    htmlFor="port"
+                    htmlFor="ssl"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     SSL
@@ -324,7 +325,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
-                    htmlFor="name"
+                    htmlFor="apiKey"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     API Key
@@ -350,7 +351,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
-                    htmlFor="name"
+                    htmlFor="baseUrl"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     Base URL
@@ -361,7 +362,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         id="baseUrl"
                         name="baseUrl"
                         type="input"
-                        placeholder="Example: /sonarr"
+                        placeholder="Example: /radarr"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('baseUrl', e.target.value);
@@ -376,7 +377,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
-                    htmlFor="name"
+                    htmlFor="activeProfileId"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     Quality Profile
@@ -400,14 +401,16 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                           ))}
                       </Field>
                     </div>
-                    {errors.baseUrl && touched.baseUrl && (
+                    {errors.activeProfileId && touched.activeProfileId && (
-                      <div className="text-red-500 mt-2">{errors.baseUrl}</div>
+                      <div className="text-red-500 mt-2">
+                        {errors.activeProfileId}
+                      </div>
                     )}
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
-                    htmlFor="name"
+                    htmlFor="rootFolder"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     Root Folder
@@ -431,14 +434,44 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                           ))}
                       </Field>
                     </div>
-                    {errors.baseUrl && touched.baseUrl && (
+                    {errors.rootFolder && touched.rootFolder && (
-                      <div className="text-red-500 mt-2">{errors.baseUrl}</div>
+                      <div className="text-red-500 mt-2">
+                        {errors.rootFolder}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                  <label
+                    htmlFor="minimumAvailability"
+                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                  >
+                    Minimum Availability
+                  </label>
+                  <div className="mt-1 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg flex rounded-md shadow-sm">
+                      <Field
+                        as="select"
+                        id="minimumAvailability"
+                        name="minimumAvailability"
+                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                      >
+                        <option value="announced">Announced</option>
+                        <option value="inCinemas">In Cinemas</option>
+                        <option value="released">Released</option>
+                        <option value="preDB">PreDB</option>
+                      </Field>
+                    </div>
+                    {errors.rootFolder && touched.rootFolder && (
+                      <div className="text-red-500 mt-2">
+                        {errors.rootFolder}
+                      </div>
                     )}
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
-                    htmlFor="port"
+                    htmlFor="is4k"
                     className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
                   >
                     Ultra HD Server

src/components/Settings/SettingsServices.tsx

@@ -9,6 +9,9 @@ import type {
 } from '../../../server/lib/settings';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import RadarrModal from './RadarrModal';
+import Modal from '../Common/Modal';
+import Transition from '../Transition';
+import axios from 'axios';
 
 interface ServerInstanceProps {
   name: string;
@@ -119,6 +122,19 @@ const SettingsServices: React.FC = () => {
     open: false,
     radarr: null,
   });
+  const [deleteRadarrModal, setDeleteRadarrModal] = useState<{
+    open: boolean;
+    radarrId: number | null;
+  }>({
+    open: false,
+    radarrId: null,
+  });
+
+  const deleteServer = async (radarrId: number) => {
+    await axios.delete(`/api/v1/settings/radarr/${radarrId}`);
+    setDeleteRadarrModal({ open: false, radarrId: null });
+    revalidateRadarr();
+  };
 
   return (
     <>
@@ -143,6 +159,25 @@ const SettingsServices: React.FC = () => {
           }}
         />
       )}
+      <Transition
+        show={deleteRadarrModal.open}
+        enter="transition ease-in-out duration-300 transform opacity-0"
+        enterFrom="opacity-0"
+        enterTo="opacuty-100"
+        leave="transition ease-in-out duration-300 transform opacity-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <Modal
+          okText="Delete"
+          okButtonType="danger"
+          onOk={() => deleteServer(deleteRadarrModal.radarrId ?? 0)}
+          onCancel={() => setDeleteRadarrModal({ open: false, radarrId: null })}
+          title="Delete Server"
+        >
+          Are you sure you want to delete this Radarr server?
+        </Modal>
+      </Transition>
       <div className="mt-6 sm:mt-5">
         {!radarrData && !radarrError && <LoadingSpinner />}
         {radarrData && !radarrError && (
@@ -157,7 +192,9 @@ const SettingsServices: React.FC = () => {
                 isDefault={radarr.isDefault && !radarr.is4k}
                 isDefault4K={radarr.is4k && radarr.isDefault}
                 onEdit={() => setEditRadarrModal({ open: true, radarr })}
-                onDelete={() => console.log('delete clicked')}
+                onDelete={() =>
+                  setDeleteRadarrModal({ open: true, radarrId: radarr.id })
+                }
               />
             ))}
             <li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">