feat: override rules (#945)

* feat: create the basis for the override rules

* feat: add support for sonarr and keywords to override rules

* feat: apply override rules in the media request

* feat: add users to override rules

* fix: save the settings modified by the override rules

* fix: resolve type errors

* style: run prettier

* fix: add missing migration

* fix: correct sonarr override rules

* fix: create PostgreSQL migration and fix SQLite migration

* fix: resolve type naming and fix i18n issue

* fix: remove unrelated changes to the PR

src/components/Settings/SonarrModal/index.tsx

@@ -1,8 +1,17 @@
+import Button from '@app/components/Common/Button';
 import Modal from '@app/components/Common/Modal';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
+import OverrideRuleTile from '@app/components/Settings/OverrideRule/OverrideRuleTile';
+import type {
+  DVRTestResponse,
+  SonarrTestResponse,
+} from '@app/components/Settings/SettingsServices';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
+import { PlusIcon } from '@heroicons/react/24/solid';
+import type OverrideRule from '@server/entity/OverrideRule';
+import type { OverrideRuleResultsResponse } from '@server/interfaces/api/overrideRuleInterfaces';
 import type { SonarrSettings } from '@server/lib/settings';
 import { Field, Formik } from 'formik';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -10,6 +19,7 @@ import { useIntl } from 'react-intl';
 import type { OnChangeValue } from 'react-select';
 import Select from 'react-select';
 import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
 import * as Yup from 'yup';
 
 type OptionType = {
@@ -75,48 +85,47 @@ const messages = defineMessages('components.Settings.SonarrModal', {
   animeTags: 'Anime Tags',
   notagoptions: 'No tags.',
   selecttags: 'Select tags',
+  overrideRules: 'Override Rules',
+  addrule: 'New Override Rule',
 });
 
-interface TestResponse {
-  profiles: {
-    id: number;
-    name: string;
-  }[];
-  rootFolders: {
-    id: number;
-    path: string;
-  }[];
-  languageProfiles:
-    | {
-        id: number;
-        name: string;
-      }[]
-    | null;
-  tags: {
-    id: number;
-    label: string;
-  }[];
-  urlBase?: string;
-}
-
 interface SonarrModalProps {
   sonarr: SonarrSettings | null;
   onClose: () => void;
   onSave: () => void;
+  overrideRuleModal: { open: boolean; rule: OverrideRule | null };
+  setOverrideRuleModal: ({
+    open,
+    rule,
+    testResponse,
+  }: {
+    open: boolean;
+    rule: OverrideRule | null;
+    testResponse: DVRTestResponse;
+  }) => void;
 }
 
-const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
+const SonarrModal = ({
+  onClose,
+  sonarr,
+  onSave,
+  overrideRuleModal,
+  setOverrideRuleModal,
+}: SonarrModalProps) => {
   const intl = useIntl();
+  const { data: rules, mutate: revalidate } =
+    useSWR<OverrideRuleResultsResponse>('/api/v1/overrideRule');
   const initialLoad = useRef(false);
   const { addToast } = useToasts();
   const [isValidated, setIsValidated] = useState(sonarr ? true : false);
   const [isTesting, setIsTesting] = useState(false);
-  const [testResponse, setTestResponse] = useState<TestResponse>({
+  const [testResponse, setTestResponse] = useState<SonarrTestResponse>({
     profiles: [],
     rootFolders: [],
     languageProfiles: null,
     tags: [],
   });
+
   const SonarrSettingsSchema = Yup.object().shape({
     name: Yup.string().required(
       intl.formatMessage(messages.validationNameRequired)
@@ -197,7 +206,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
           }),
         });
         if (!res.ok) throw new Error();
-        const data: TestResponse = await res.json();
+        const data: SonarrTestResponse = await res.json();
 
         setIsValidated(true);
         setTestResponse(data);
@@ -235,6 +244,10 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
     }
   }, [sonarr, testConnection]);
 
+  useEffect(() => {
+    revalidate();
+  }, [overrideRuleModal, revalidate]);
+
   return (
     <Transition
       as="div"
@@ -402,6 +415,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                       values.is4k ? messages.edit4ksonarr : messages.editsonarr
                     )
               }
+              backgroundClickable={!overrideRuleModal.open}
             >
               <div className="mb-6">
                 <div className="form-row">
@@ -1056,6 +1070,38 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                   </div>
                 </div>
               </div>
+              <h3 className="mb-4 text-xl font-bold leading-8 text-gray-100">
+                {intl.formatMessage(messages.overrideRules)}
+              </h3>
+              <ul className="grid grid-cols-2 gap-6">
+                {rules && (
+                  <OverrideRuleTile
+                    rules={rules}
+                    setOverrideRuleModal={setOverrideRuleModal}
+                    testResponse={testResponse}
+                    sonarr={sonarr}
+                    revalidate={revalidate}
+                  />
+                )}
+                <li className="min-h-[8rem] rounded-lg border-2 border-dashed border-gray-400 shadow sm:min-h-[11rem]">
+                  <div className="flex h-full w-full items-center justify-center">
+                    <Button
+                      buttonType="ghost"
+                      onClick={() =>
+                        setOverrideRuleModal({
+                          open: true,
+                          rule: null,
+                          testResponse,
+                        })
+                      }
+                      disabled={!isValidated}
+                    >
+                      <PlusIcon />
+                      <span>{intl.formatMessage(messages.addrule)}</span>
+                    </Button>
+                  </div>
+                </li>
+              </ul>
             </Modal>
           );
         }}