feat: add support for sonarr and keywords to override rules

server/entity/OverrideRule.ts

@@ -26,6 +26,9 @@ class OverrideRule {
   @Column({ nullable: true })
   public language?: string;
 
+  @Column({ nullable: true })
+  public keywords?: string;
+
   @ManyToMany(() => User)
   @JoinTable()
   public users: User[];

server/routes/overrideRule.ts

@@ -29,6 +29,7 @@ overrideRuleRoutes.post<
   {
     genre?: string;
     language?: string;
+    keywords?: string;
     profileId?: number;
     rootFolder?: string;
     tags?: number[];
@@ -42,6 +43,7 @@ overrideRuleRoutes.post<
     const rule = new OverrideRule({
       genre: req.body.genre,
       language: req.body.language,
+      keywords: req.body.keywords,
       profileId: req.body.profileId,
       rootFolder: req.body.rootFolder,
       tags: req.body.tags,
@@ -49,9 +51,9 @@ overrideRuleRoutes.post<
       sonarrServiceId: req.body.sonarrServiceId,
     });
 
-    const newIssue = await overrideRuleRepository.save(rule);
+    const newRule = await overrideRuleRepository.save(rule);
 
-    return res.status(200).json(newIssue);
+    return res.status(200).json(newRule);
   } catch (e) {
     next({ status: 404, message: e.message });
   }
@@ -63,6 +65,7 @@ overrideRuleRoutes.put<
   {
     genre?: string;
     language?: string;
+    keywords?: string;
     profileId?: number;
     rootFolder?: string;
     tags?: number[];
@@ -85,18 +88,45 @@ overrideRuleRoutes.put<
 
     rule.genre = req.body.genre;
     rule.language = req.body.language;
+    rule.keywords = req.body.keywords;
     rule.profileId = req.body.profileId;
     rule.rootFolder = req.body.rootFolder;
     rule.tags = req.body.tags;
     rule.radarrServiceId = req.body.radarrServiceId;
     rule.sonarrServiceId = req.body.sonarrServiceId;
 
-    const newIssue = await overrideRuleRepository.save(rule);
+    const newRule = await overrideRuleRepository.save(rule);
 
-    return res.status(200).json(newIssue);
+    return res.status(200).json(newRule);
   } catch (e) {
     next({ status: 404, message: e.message });
   }
 });
 
+overrideRuleRoutes.delete<{ ruleId: string }, OverrideRule>(
+  '/:ruleId',
+  isAuthenticated(Permission.ADMIN),
+  async (req, res, next) => {
+    const overrideRuleRepository = getRepository(OverrideRule);
+
+    try {
+      const rule = await overrideRuleRepository.findOne({
+        where: {
+          id: Number(req.params.ruleId),
+        },
+      });
+
+      if (!rule) {
+        return next({ status: 404, message: 'Override Rule not found.' });
+      }
+
+      await overrideRuleRepository.remove(rule);
+
+      return res.status(200).json(rule);
+    } catch (e) {
+      next({ status: 404, message: e.message });
+    }
+  }
+);
+
 export default overrideRuleRoutes;

src/components/Settings/OverrideRule/OverrideRuleModal.tsx

@@ -1,6 +1,6 @@
 import Modal from '@app/components/Common/Modal';
 import LanguageSelector from '@app/components/LanguageSelector';
-import { GenreSelector } from '@app/components/Selector';
+import { GenreSelector, KeywordSelector } from '@app/components/Selector';
 import type { DVRTestResponse } from '@app/components/Settings/SettingsServices';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
@@ -16,6 +16,15 @@ const messages = defineMessages('components.Settings.RadarrModal', {
   createrule: 'New Override Rule',
   editrule: 'Edit Override Rule',
   create: 'Create rule',
+  conditions: 'Conditions',
+  conditionsDescription:
+    'Specifies conditions before applying parameter changes. Each field must be validated for the rules to be applied (AND operation). A field is considered verified if any of its properties match (OR operation).',
+  settings: 'Settings',
+  settingsDescription:
+    'Specifies which settings will be changed when the above conditions are met.',
+  genres: 'Genres',
+  languages: 'Languages',
+  keywords: 'Keywords',
   rootfolder: 'Root Folder',
   selectRootFolder: 'Select root folder',
   qualityprofile: 'Quality Profile',
@@ -67,7 +76,7 @@ const OverrideRuleModal = ({
         initialValues={{
           genre: rule?.genre,
           language: rule?.language,
-          // keywords: [],
+          keywords: rule?.keywords,
           profileId: rule?.profileId,
           rootFolder: rule?.rootFolder,
           tags: rule?.tags,
@@ -77,6 +86,7 @@ const OverrideRuleModal = ({
             const submission = {
               genre: values.genre || null,
               language: values.language || null,
+              keywords: values.keywords || null,
               profileId: Number(values.profileId) || null,
               rootFolder: values.rootFolder || null,
               tags: values.tags || null,
@@ -151,11 +161,14 @@ const OverrideRuleModal = ({
             >
               <div className="mb-6">
                 <h3 className="text-lg font-bold leading-8 text-gray-100">
-                  Condition
+                  {intl.formatMessage(messages.conditions)}
                 </h3>
+                <p className="description">
+                  {intl.formatMessage(messages.conditionsDescription)}
+                </p>
                 <div className="form-row">
                   <label htmlFor="genre" className="text-label">
-                    Genres
+                    {intl.formatMessage(messages.genres)}
                   </label>
                   <div className="form-input-area">
                     <div className="form-input-field">
@@ -180,7 +193,7 @@ const OverrideRuleModal = ({
                 </div>
                 <div className="form-row">
                   <label htmlFor="language" className="text-label">
-                    Language
+                    {intl.formatMessage(messages.languages)}
                   </label>
                   <div className="form-input-area">
                     <div className="form-input-field">
@@ -193,6 +206,30 @@ const OverrideRuleModal = ({
                         }}
                       />
                     </div>
+                    {errors.language &&
+                      touched.language &&
+                      typeof errors.language === 'string' && (
+                        <div className="error">{errors.language}</div>
+                      )}
+                  </div>
+                </div>
+                <div className="form-row">
+                  <label htmlFor="keywords" className="text-label">
+                    {intl.formatMessage(messages.keywords)}
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <KeywordSelector
+                        defaultValue={values.keywords}
+                        isMulti
+                        onChange={(value) => {
+                          setFieldValue(
+                            'keywords',
+                            value?.map((v) => v.value).join(',')
+                          );
+                        }}
+                      />
+                    </div>
                     {errors.genre &&
                       touched.genre &&
                       typeof errors.genre === 'string' && (
@@ -201,8 +238,11 @@ const OverrideRuleModal = ({
                   </div>
                 </div>
                 <h3 className="mt-4 text-lg font-bold leading-8 text-gray-100">
-                  Settings
+                  {intl.formatMessage(messages.settings)}
                 </h3>
+                <p className="description">
+                  {intl.formatMessage(messages.settingsDescription)}
+                </p>
                 <div className="form-row">
                   <label htmlFor="rootFolderRule" className="text-label">
                     {intl.formatMessage(messages.rootfolder)}

src/components/Settings/OverrideRule/OverrideRuleTile.tsx

@@ -0,0 +1,221 @@
+import type { DVRTestResponse } from '@app/components/Settings/SettingsServices';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/solid';
+import type { TmdbGenre } from '@server/api/themoviedb/interfaces';
+import type OverrideRule from '@server/entity/OverrideRule';
+import type {
+  Language,
+  RadarrSettings,
+  SonarrSettings,
+} from '@server/lib/settings';
+import type { Keyword } from '@server/models/common';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import useSWR from 'swr';
+
+const messages = defineMessages('components.Settings.OverrideRuleTile', {
+  qualityprofile: 'Quality Profile',
+  rootfolder: 'Root Folder',
+  tags: 'Tags',
+  genre: 'Genre',
+  language: 'Language',
+  keywords: 'Keywords',
+  conditions: 'Conditions',
+  settings: 'Settings',
+});
+
+interface OverrideRuleTileProps {
+  rules: OverrideRule[];
+  setOverrideRuleModal: ({
+    open,
+    rule,
+    testResponse,
+  }: {
+    open: boolean;
+    rule: OverrideRule | null;
+    testResponse: DVRTestResponse;
+  }) => void;
+  testResponse: DVRTestResponse;
+  radarr?: RadarrSettings | null;
+  sonarr?: SonarrSettings | null;
+}
+
+const OverrideRuleTile = ({
+  rules,
+  setOverrideRuleModal,
+  testResponse,
+  radarr,
+  sonarr,
+}: OverrideRuleTileProps) => {
+  const intl = useIntl();
+  const [keywords, setKeywords] = useState<Keyword[] | null>(null);
+  const { data: languages } = useSWR<Language[]>('/api/v1/languages');
+  const { data: genres } = useSWR<TmdbGenre[]>('/api/v1/genres/movie');
+
+  useEffect(() => {
+    (async () => {
+      const keywords = await Promise.all(
+        rules
+          .map((rule) => rule.keywords?.split(','))
+          .flat()
+          .filter((keywordId) => keywordId)
+          .map(async (keywordId) => {
+            const res = await fetch(`/api/v1/keyword/${keywordId}`);
+            if (!res.ok) throw new Error();
+            const keyword: Keyword = await res.json();
+            return keyword;
+          })
+      );
+      setKeywords(keywords);
+    })();
+  }, [rules]);
+
+  return rules
+    ?.filter(
+      (rule) =>
+        (rule.radarrServiceId !== null &&
+          rule.radarrServiceId === radarr?.id) ||
+        (rule.sonarrServiceId !== null && rule.sonarrServiceId === sonarr?.id)
+    )
+    .map((rule) => (
+      <li className="flex h-full flex-col rounded-lg bg-gray-800 text-left shadow ring-1 ring-gray-500">
+        <div className="flex w-full flex-1 items-center justify-between space-x-6 p-6">
+          <div className="flex-1 truncate">
+            <span className="text-lg">
+              {intl.formatMessage(messages.conditions)}
+            </span>
+            {rule.genre && (
+              <p className="truncate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.genre)}
+                </span>
+                <div className="inline-flex gap-2">
+                  {rule.genre.split(',').map((genreId) => (
+                    <span>
+                      {genres?.find((g) => g.id === Number(genreId))?.name}
+                    </span>
+                  ))}
+                </div>
+              </p>
+            )}
+            {rule.language && (
+              <p className="truncate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.language)}
+                </span>
+                <div className="inline-flex gap-2">
+                  {rule.language
+                    .split('|')
+                    .filter((languageId) => languageId !== 'server')
+                    .map((languageId) => {
+                      const language = languages?.find(
+                        (language) => language.iso_639_1 === languageId
+                      );
+                      if (!language) return null;
+                      const languageName =
+                        intl.formatDisplayName(language.iso_639_1, {
+                          type: 'language',
+                          fallback: 'none',
+                        }) ?? language.english_name;
+                      return <span>{languageName}</span>;
+                    })}
+                </div>
+              </p>
+            )}
+            {rule.keywords && (
+              <p className="truncate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.keywords)}
+                </span>
+                <div className="inline-flex gap-2">
+                  {rule.keywords.split(',').map((keywordId) => {
+                    return (
+                      <span>
+                        {
+                          keywords?.find(
+                            (keyword) => keyword.id === Number(keywordId)
+                          )?.name
+                        }
+                      </span>
+                    );
+                  })}
+                </div>
+              </p>
+            )}
+            <span className="text-lg">
+              {intl.formatMessage(messages.settings)}
+            </span>
+            {rule.profileId && (
+              <p className="runcate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.qualityprofile)}
+                </span>
+                {
+                  testResponse.profiles.find(
+                    (profile) => rule.profileId === profile.id
+                  )?.name
+                }
+              </p>
+            )}
+            {rule.rootFolder && (
+              <p className="truncate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.rootfolder)}
+                </span>
+                {rule.rootFolder}
+              </p>
+            )}
+            {rule.tags && rule.tags.length > 0 && (
+              <p className="truncate text-sm leading-5 text-gray-300">
+                <span className="mr-2 font-bold">
+                  {intl.formatMessage(messages.tags)}
+                </span>
+                <div className="inline-flex gap-2">
+                  {rule.tags.map((tag) => (
+                    <span>
+                      {
+                        testResponse.tags?.find((t) => t.id === Number(tag))
+                          ?.label
+                      }
+                    </span>
+                  ))}
+                </div>
+              </p>
+            )}
+          </div>
+        </div>
+        <div className="border-t border-gray-500">
+          <div className="-mt-px flex">
+            <div className="flex w-0 flex-1 border-r border-gray-500">
+              <button
+                onClick={() =>
+                  setOverrideRuleModal({ open: true, rule, testResponse })
+                }
+                className="focus:ring-blue relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
+              >
+                <PencilIcon className="mr-2 h-5 w-5" />
+                <span>{intl.formatMessage(globalMessages.edit)}</span>
+              </button>
+            </div>
+            <div className="-ml-px flex w-0 flex-1">
+              <button
+                onClick={async () => {
+                  const res = await fetch(`/api/v1/overrideRule/${rule.id}`, {
+                    method: 'DELETE',
+                  });
+                  if (!res.ok) throw new Error();
+                }}
+                className="focus:ring-blue relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
+              >
+                <TrashIcon className="mr-2 h-5 w-5" />
+                <span>{intl.formatMessage(globalMessages.delete)}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+    ));
+};
+
+export default OverrideRuleTile;

src/components/Settings/RadarrModal/index.tsx

@@ -1,15 +1,15 @@
 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 } 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 { TmdbGenre } from '@server/api/themoviedb/interfaces';
 import type OverrideRule from '@server/entity/OverrideRule';
 import type { OverrideRuleResultsResponse } from '@server/interfaces/api/overrideRuleInterfaces';
-import type { Language, RadarrSettings } from '@server/lib/settings';
+import type { RadarrSettings } from '@server/lib/settings';
 import { Field, Formik } from 'formik';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -82,7 +82,7 @@ const messages = defineMessages('components.Settings.RadarrModal', {
 
 interface RadarrModalProps {
   radarr: RadarrSettings | null;
-  onClose?: () => void;
+  onClose: () => void;
   onSave: () => void;
   overrideRuleModal: { open: boolean; rule: OverrideRule | null };
   setOverrideRuleModal: ({
@@ -773,16 +773,16 @@ const RadarrModal = ({
               <h3 className="mb-4 text-xl font-bold leading-8 text-gray-100">
                 {intl.formatMessage(messages.overrideRules)}
               </h3>
-              <ul className="flex gap-6">
+              <ul className="grid grid-cols-2 gap-6">
                 {rules && (
-                  <OverrideRules
+                  <OverrideRuleTile
                     rules={rules}
                     setOverrideRuleModal={setOverrideRuleModal}
                     testResponse={testResponse}
                     radarr={radarr}
                   />
                 )}
-                <li className="col-span-1 h-32 w-80 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
+                <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"
@@ -809,113 +809,4 @@ const RadarrModal = ({
   );
 };
 
-interface OverrideRulesProps {
-  rules: OverrideRule[];
-  setOverrideRuleModal: ({
-    open,
-    rule,
-    testResponse,
-  }: {
-    open: boolean;
-    rule: OverrideRule | null;
-    testResponse: DVRTestResponse;
-  }) => void;
-  testResponse: DVRTestResponse;
-  radarr: RadarrSettings | null;
-}
-const OverrideRules = ({
-  rules,
-  setOverrideRuleModal,
-  testResponse,
-  radarr,
-}: OverrideRulesProps) => {
-  const intl = useIntl();
-  const { data: languages } = useSWR<Language[]>('/api/v1/languages');
-  const { data: genres } = useSWR<TmdbGenre[]>('/api/v1/genres/movie');
-
-  return rules
-    ?.filter(
-      (rule) =>
-        rule.radarrServiceId !== null && rule.radarrServiceId === radarr?.id
-    )
-    .map((rule) => (
-      <button
-        className="col-span-2 h-32 w-80 rounded-lg bg-gray-800 text-left shadow ring-1 ring-gray-500 sm:h-44"
-        onClick={() => setOverrideRuleModal({ open: true, rule, testResponse })}
-      >
-        <div className="flex w-full items-center justify-between space-x-6 p-4">
-          <div className="flex-1 truncate">
-            <span className="text-lg">If</span>
-            {rule.genre && (
-              <p className="truncate text-sm leading-5 text-gray-300">
-                <span className="mr-2 font-bold">Genre</span>
-                <div className="inline-flex gap-2">
-                  {rule.genre.split(',').map((genreId) => (
-                    <span>
-                      {genres?.find((g) => g.id === Number(genreId))?.name}
-                    </span>
-                  ))}
-                </div>
-              </p>
-            )}
-            {rule.language && (
-              <p className="truncate text-sm leading-5 text-gray-300">
-                <span className="mr-2 font-bold">Language</span>
-                <div className="inline-flex gap-2">
-                  {rule.language
-                    .split('|')
-                    .filter((languageId) => languageId !== 'server')
-                    .map((languageId) => {
-                      const language = languages?.find(
-                        (language) => language.iso_639_1 === languageId
-                      );
-                      if (!language) return null;
-                      const languageName =
-                        intl.formatDisplayName(language.iso_639_1, {
-                          type: 'language',
-                          fallback: 'none',
-                        }) ?? language.english_name;
-                      return <span>{languageName}</span>;
-                    })}
-                </div>
-              </p>
-            )}
-            <span className="text-lg">Then</span>
-            {rule.profileId && (
-              <p className="runcate text-sm leading-5 text-gray-300">
-                <span className="mr-2 font-bold">Profile ID</span>
-                {
-                  testResponse.profiles.find(
-                    (profile) => rule.profileId === profile.id
-                  )?.name
-                }
-              </p>
-            )}
-            {rule.rootFolder && (
-              <p className="truncate text-sm leading-5 text-gray-300">
-                <span className="mr-2 font-bold">Root Folder</span>
-                {rule.rootFolder}
-              </p>
-            )}
-            {rule.tags && rule.tags.length > 0 && (
-              <p className="truncate text-sm leading-5 text-gray-300">
-                <span className="mr-2 font-bold">Tags</span>
-                <div className="inline-flex gap-2">
-                  {rule.tags.map((tag) => (
-                    <span>
-                      {
-                        testResponse.tags?.find((t) => t.id === Number(tag))
-                          ?.label
-                      }
-                    </span>
-                  ))}
-                </div>
-              </p>
-            )}
-          </div>
-        </div>
-      </button>
-    ));
-};
-
 export default RadarrModal;

src/components/Settings/SettingsServices.tsx

@@ -6,7 +6,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
-import OverrideRuleModal from '@app/components/Settings/OverrideRuleModal';
+import OverrideRuleModal from '@app/components/Settings/OverrideRule/OverrideRuleModal';
 import RadarrModal from '@app/components/Settings/RadarrModal';
 import SonarrModal from '@app/components/Settings/SonarrModal';
 import globalMessages from '@app/i18n/globalMessages';
@@ -288,12 +288,18 @@ const SettingsServices = () => {
       {editSonarrModal.open && (
         <SonarrModal
           sonarr={editSonarrModal.sonarr}
-          onClose={() => setEditSonarrModal({ open: false, sonarr: null })}
+          onClose={() => {
+            console.log(overrideRuleModal);
+            if (!overrideRuleModal.open)
+              setEditSonarrModal({ open: false, sonarr: null });
+          }}
           onSave={() => {
             revalidateSonarr();
             mutate('/api/v1/settings/public');
             setEditSonarrModal({ open: false, sonarr: null });
           }}
+          overrideRuleModal={overrideRuleModal}
+          setOverrideRuleModal={setOverrideRuleModal}
         />
       )}
       <Transition

src/components/Settings/SonarrModal/index.tsx

@@ -1,9 +1,14 @@
+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 } 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';
@@ -11,6 +16,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 = {
@@ -76,6 +82,8 @@ const messages = defineMessages('components.Settings.SonarrModal', {
   animeTags: 'Anime Tags',
   notagoptions: 'No tags.',
   selecttags: 'Select tags',
+  overrideRules: 'Override Rules',
+  addrule: 'New Override Rule',
 });
 
 interface SonarrTestResponse extends DVRTestResponse {
@@ -89,10 +97,28 @@ 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);
@@ -103,6 +129,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
     languageProfiles: null,
     tags: [],
   });
+
   const SonarrSettingsSchema = Yup.object().shape({
     name: Yup.string().required(
       intl.formatMessage(messages.validationNameRequired)
@@ -221,6 +248,10 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
     }
   }, [sonarr, testConnection]);
 
+  useEffect(() => {
+    revalidate();
+  }, [overrideRuleModal, revalidate]);
+
   return (
     <Transition
       as="div"
@@ -388,6 +419,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
                       values.is4k ? messages.edit4ksonarr : messages.editsonarr
                     )
               }
+              backgroundClickable={!overrideRuleModal.open}
             >
               <div className="mb-6">
                 <div className="form-row">
@@ -1042,6 +1074,37 @@ 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}
+                  />
+                )}
+                <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>
           );
         }}

src/utils/defineMessages.ts

@@ -1,18 +1,26 @@
 import { defineMessages as intlDefineMessages } from 'react-intl';
 
-export default function defineMessages(
+type Messages<T extends Record<string, string>> = {
+  [K in keyof T]: {
+    id: string;
+    defaultMessage: T[K];
+  };
+};
+
+export default function defineMessages<T extends Record<string, string>>(
   prefix: string,
-  messages: Record<string, string>
-) {
-  const modifiedMessages: Record<
-    string,
-    { id: string; defaultMessage: string }
-  > = {};
-  for (const key of Object.keys(messages)) {
-    modifiedMessages[key] = {
-      id: prefix + '.' + key,
+  messages: T
+): Messages<T> {
+  const keys: (keyof T)[] = Object.keys(messages);
+  const modifiedMessagesEntries = keys.map((key) => [
+    key,
+    {
+      id: `${prefix}.${key as string}`,
       defaultMessage: messages[key],
-    };
-  }
+    },
+  ]);
+  const modifiedMessages: Messages<T> = Object.fromEntries(
+    modifiedMessagesEntries
+  );
   return intlDefineMessages(modifiedMessages);
 }