From dd704579df43b0dd835f8bb618c4b4412561a888 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 4 Feb 2024 20:40:38 +0200
Subject: [PATCH] Improve add/loading error notices

---
 frontend/src/Organize/OrganizePreviewModalContent.js   |  2 +-
 .../CustomFormats/CustomFormats/CustomFormats.js       |  2 +-
 .../CustomFormats/EditCustomFormatModalContent.js      |  5 +++--
 .../CustomFormats/ExportCustomFormatModalContent.js    |  5 +++--
 .../CustomFormats/ImportCustomFormatModalContent.js    |  7 ++++---
 .../Specifications/AddSpecificationModalContent.js     |  4 ++--
 .../DownloadClients/AddDownloadClientModalContent.js   |  4 ++--
 .../DownloadClients/DownloadClients/DownloadClient.js  |  2 +-
 .../DownloadClients/EditDownloadClientModalContent.js  |  4 ++--
 .../Manage/ManageDownloadClientsModalContent.tsx       |  2 +-
 .../EditRemotePathMappingModalContent.js               |  5 +++--
 .../EditRemotePathMappingModalContentConnector.js      |  3 +--
 .../RemotePathMappings/RemotePathMappings.js           |  2 +-
 .../EditImportListExclusionModalContent.js             |  5 +++--
 .../EditImportListExclusionModalContentConnector.js    |  3 +--
 .../ImportLists/AddImportListModalContent.js           |  4 ++--
 .../ImportLists/EditImportListModalContent.js          |  4 ++--
 .../src/Settings/ImportLists/ImportLists/ImportList.js |  2 +-
 .../Settings/ImportLists/ImportLists/ImportLists.js    |  3 +--
 .../ImportLists/ImportLists/ImportListsConnector.js    | 10 ++++------
 .../ImportLists/Manage/ManageImportListsModal.tsx      |  3 ++-
 .../Settings/ImportLists/Options/ImportListOptions.tsx |  5 +++--
 .../Indexers/Indexers/AddIndexerModalContent.js        |  4 ++--
 .../Indexers/Indexers/EditIndexerModalContent.js       |  5 +++--
 frontend/src/Settings/Indexers/Indexers/Indexer.js     |  2 +-
 .../Notifications/AddNotificationModalContent.js       |  6 ++++--
 .../Notifications/EditNotificationModalContent.js      |  4 ++--
 .../Profiles/Delay/EditDelayProfileModalContent.js     |  4 ++--
 .../Delay/EditDelayProfileModalContentConnector.js     |  3 +--
 .../Profiles/Quality/EditQualityProfileModalContent.js |  5 +++--
 .../src/Settings/Profiles/Quality/QualityProfiles.js   |  2 +-
 .../Profiles/Release/EditReleaseProfileModalContent.js |  2 +-
 .../Release/EditReleaseProfileModalContentConnector.js |  4 +---
 .../src/Settings/Profiles/Release/ReleaseProfile.js    |  5 ++---
 .../Tags/AutoTagging/EditAutoTaggingModalContent.js    |  5 +++--
 .../Specifications/AddSpecificationModalContent.js     |  4 ++--
 frontend/src/Settings/Tags/Tag.js                      |  2 +-
 src/NzbDrone.Core/Localization/Core/en.json            |  1 -
 38 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/frontend/src/Organize/OrganizePreviewModalContent.js b/frontend/src/Organize/OrganizePreviewModalContent.js
index bb1ab3355..6bb35bc79 100644
--- a/frontend/src/Organize/OrganizePreviewModalContent.js
+++ b/frontend/src/Organize/OrganizePreviewModalContent.js
@@ -109,7 +109,7 @@ class OrganizePreviewModalContent extends Component {
 
           {
             !isFetching && error &&
-              <div>{translate('OrganizeLoadError')}</div>
+              <Alert kind={kinds.DANGER}>{translate('OrganizeLoadError')}</Alert>
           }
 
           {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
index 188df61d9..8036a4a25 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js
@@ -62,7 +62,7 @@ class CustomFormats extends Component {
       <FieldSet legend={translate('CustomFormats')}>
         <PageSectionContent
           errorMessage={translate('CustomFormatsLoadError')}
-          {...otherProps}c={true}
+          {...otherProps}
         >
           <div className={styles.customFormats}>
             {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
index a57a38a7e..33497ce44 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Card from 'Components/Card';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
@@ -112,9 +113,9 @@ class EditCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('AddCustomFormatError')}
-                </div>
+                </Alert>
             }
 
             {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js b/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js
index c6f0a64c5..4527cf662 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import ClipboardButton from 'Components/Link/ClipboardButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -41,9 +42,9 @@ class ExportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('CustomFormatsLoadError')}
-                </div>
+                </Alert>
             }
 
             {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js b/frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js
index 4dc7641e2..b9c0590d1 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -11,7 +12,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ImportCustomFormatModalContent.css';
 
@@ -95,9 +96,9 @@ class ImportCustomFormatModalContent extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('CustomFormatsLoadError')}
-                </div>
+                </Alert>
             }
 
             {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js b/frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js
index 3b38e9666..f06764719 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js
@@ -42,9 +42,9 @@ class AddSpecificationModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddConditionError')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js
index 40f78f35f..7578314d9 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js
@@ -43,9 +43,9 @@ class AddDownloadClientModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddDownloadClientError')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js
index fceaeda65..4e5063382 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js
@@ -41,7 +41,7 @@ class DownloadClient extends Component {
     });
   };
 
-  onDeleteDownloadClientModalClose= () => {
+  onDeleteDownloadClientModalClose = () => {
     this.setState({ isDeleteDownloadClientModalOpen: false });
   };
 
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js b/frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js
index 9fe0a2f25..f2509603f 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js
@@ -69,9 +69,9 @@ class EditDownloadClientModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddDownloadClientError')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
index 0db06b9eb..2722f02fa 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
@@ -277,7 +277,7 @@ function ManageDownloadClientsModalContent(
             isDisabled={!anySelected}
             onPress={onTagsPress}
           >
-            Set Tags
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 
diff --git a/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js b/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js
index 5fc2ac757..fd8ba14ec 100644
--- a/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js
+++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -52,9 +53,9 @@ function EditRemotePathMappingModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddRemotePathMappingError')}
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js b/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js
index 136a68f50..6848d8bad 100644
--- a/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js
+++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/EditRemotePathMappingModalContentConnector.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -55,7 +54,7 @@ function createRemotePathMappingSelector() {
         items
       } = remotePathMappings;
 
-      const mapping = id ? _.find(items, { id }) : newRemotePathMapping;
+      const mapping = id ? items.find((i) => i.id === id) : newRemotePathMapping;
       const settings = selectSettings(mapping, pendingChanges, saveError);
 
       return {
diff --git a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js
index 1a942a19e..8e3666ce9 100644
--- a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js
+++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.js
@@ -47,7 +47,7 @@ class RemotePathMappings extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend={translate('RemotePathMappings')} >
+      <FieldSet legend={translate('RemotePathMappings')}>
         <PageSectionContent
           errorMessage={translate('RemotePathMappingsLoadError')}
           {...otherProps}
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js b/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js
index c48e24903..284d1100c 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -50,9 +51,9 @@ function EditImportListExclusionModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddImportListExclusionError')}
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContentConnector.js b/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContentConnector.js
index 644753ec6..059223231 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContentConnector.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContentConnector.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -26,7 +25,7 @@ function createImportListExclusionSelector() {
         items
       } = importListExclusions;
 
-      const mapping = id ? _.find(items, { id }) : newImportListExclusion;
+      const mapping = id ? items.find((i) => i.id === id) : newImportListExclusion;
       const settings = selectSettings(mapping, pendingChanges, saveError);
 
       return {
diff --git a/frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js b/frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js
index b5132db42..9ed22fad2 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js
@@ -44,9 +44,9 @@ class AddImportListModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddListError')}
-              </div> :
+              </Alert> :
               null
           }
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js b/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
index c8020d975..2c1ab4bb0 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
@@ -74,9 +74,9 @@ function EditImportListModalContent(props) {
 
         {
           !isFetching && !!error ?
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddListError')}
-            </div> :
+            </Alert> :
             null
         }
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportList.js b/frontend/src/Settings/ImportLists/ImportLists/ImportList.js
index df7e34b88..75792c9ae 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportList.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportList.js
@@ -41,7 +41,7 @@ class ImportList extends Component {
     });
   };
 
-  onDeleteImportListModalClose= () => {
+  onDeleteImportListModalClose = () => {
     this.setState({ isDeleteImportListModalOpen: false });
   };
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
index 346aae650..11fcceb54 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
@@ -5,7 +5,6 @@ import FieldSet from 'Components/FieldSet';
 import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import { icons } from 'Helpers/Props';
-import sortByName from 'Utilities/Array/sortByName';
 import translate from 'Utilities/String/translate';
 import AddImportListModal from './AddImportListModal';
 import EditImportListModalConnector from './EditImportListModalConnector';
@@ -67,7 +66,7 @@ class ImportLists extends Component {
         >
           <div className={styles.lists}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 return (
                   <ImportList
                     key={item.id}
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js b/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
index 9e6f9cee5..2b29f6eb1 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
@@ -4,16 +4,14 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { deleteImportList, fetchImportLists } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByName from 'Utilities/Array/sortByName';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.settings.importLists,
-    (importLists) => {
-      return {
-        ...importLists
-      };
-    }
+    createSortedSectionSelector('settings.importLists', sortByName),
+    (importLists) => importLists
   );
 }
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx b/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx
index 67a029d85..ffe295ade 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx
+++ b/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
 import ManageImportListsModalContent from './ManageImportListsModalContent';
 
 interface ManageImportListsModalProps {
@@ -11,7 +12,7 @@ function ManageImportListsModal(props: ManageImportListsModalProps) {
   const { isOpen, onModalClose } = props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+    <Modal isOpen={isOpen} size={sizes.EXTRA_LARGE} onModalClose={onModalClose}>
       <ManageImportListsModalContent onModalClose={onModalClose} />
     </Modal>
   );
diff --git a/frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx b/frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx
index 28d06b1dc..e518e592e 100644
--- a/frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx
+++ b/frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx
@@ -2,13 +2,14 @@ import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
   fetchImportListOptions,
@@ -110,7 +111,7 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
       {isFetching ? <LoadingIndicator /> : null}
 
       {!isFetching && error ? (
-        <div>{translate('UnableToLoadListOptions')}</div>
+        <Alert kind={kinds.DANGER}>{translate('ListOptionsLoadError')}</Alert>
       ) : null}
 
       {hasSettings && !isFetching && !error ? (
diff --git a/frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.js b/frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.js
index 0eb46995e..00ebbdc55 100644
--- a/frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.js
+++ b/frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.js
@@ -43,9 +43,9 @@ class AddIndexerModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddIndexerError')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js b/frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js
index 4306aa2d9..928dcf5d7 100644
--- a/frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js
+++ b/frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -67,9 +68,9 @@ function EditIndexerModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddIndexerError')}
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/Settings/Indexers/Indexers/Indexer.js b/frontend/src/Settings/Indexers/Indexers/Indexer.js
index ab9560338..e6c24cee8 100644
--- a/frontend/src/Settings/Indexers/Indexers/Indexer.js
+++ b/frontend/src/Settings/Indexers/Indexers/Indexer.js
@@ -42,7 +42,7 @@ class Indexer extends Component {
     });
   };
 
-  onDeleteIndexerModalClose= () => {
+  onDeleteIndexerModalClose = () => {
     this.setState({ isDeleteIndexerModalOpen: false });
   };
 
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js
index b92cdc479..f254ecabf 100644
--- a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js
@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AddNotificationItem from './AddNotificationItem';
 import styles from './AddNotificationModalContent.css';
@@ -39,9 +41,9 @@ class AddNotificationModalContent extends Component {
 
           {
             !isSchemaFetching && !!schemaError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddNotificationError')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
index 5bfc9b5ae..83f5d257d 100644
--- a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
+++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
@@ -59,9 +59,9 @@ function EditNotificationModalContent(props) {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddNotificationError')}
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
index a8ecb86f7..e2799e581 100644
--- a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
@@ -87,9 +87,9 @@ function EditDelayProfileModalContent(props) {
 
         {
           !isFetching && !!error ?
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddDelayProfileError')}
-            </div> :
+            </Alert> :
             null
         }
 
diff --git a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js
index a1e3d85a1..3643bb158 100644
--- a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js
+++ b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -33,7 +32,7 @@ function createDelayProfileSelector() {
         items
       } = delayProfiles;
 
-      const profile = id ? _.find(items, { id }) : newDelayProfile;
+      const profile = id ? items.find((i) => i.id === id) : newDelayProfile;
       const settings = selectSettings(profile, pendingChanges, saveError);
 
       return {
diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
index 1c129a9b3..ece0e8728 100644
--- a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -152,9 +153,9 @@ class EditQualityProfileModalContent extends Component {
 
               {
                 !isFetching && !!error &&
-                  <div>
+                  <Alert kind={kinds.DANGER}>
                     {translate('AddQualityProfileError')}
-                  </div>
+                  </Alert>
               }
 
               {
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
index 26740b468..6e40bedad 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
@@ -55,7 +55,7 @@ class QualityProfiles extends Component {
       <FieldSet legend={translate('QualityProfiles')}>
         <PageSectionContent
           errorMessage={translate('QualityProfilesLoadError')}
-          {...otherProps}c={true}
+          {...otherProps}
         >
           <div className={styles.qualityProfiles}>
             {
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
index 64d707b5f..99442839c 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
@@ -48,7 +48,7 @@ function EditReleaseProfileModalContent(props) {
         <Form {...otherProps}>
 
           <FormGroup>
-            <FormLabel>Name</FormLabel>
+            <FormLabel>{translate('Name')}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.TEXT}
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js
index b14d72269..0371a1a7a 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -11,7 +10,6 @@ const newReleaseProfile = {
   enabled: true,
   required: [],
   ignored: [],
-  includePreferredWhenRenaming: false,
   tags: [],
   indexerId: 0
 };
@@ -30,7 +28,7 @@ function createMapStateToProps() {
         items
       } = releaseProfiles;
 
-      const profile = id ? _.find(items, { id }) : newReleaseProfile;
+      const profile = id ? items.find((i) => i.id === id) : newReleaseProfile;
       const settings = selectSettings(profile, pendingChanges, saveError);
 
       return {
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfile.js b/frontend/src/Settings/Profiles/Release/ReleaseProfile.js
index 8c277e8d9..7ec97bc80 100644
--- a/frontend/src/Settings/Profiles/Release/ReleaseProfile.js
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfile.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import MiddleTruncate from 'react-middle-truncate';
@@ -43,7 +42,7 @@ class ReleaseProfile extends Component {
     });
   };
 
-  onDeleteReleaseProfileModalClose= () => {
+  onDeleteReleaseProfileModalClose = () => {
     this.setState({ isDeleteReleaseProfileModalOpen: false });
   };
 
@@ -72,7 +71,7 @@ class ReleaseProfile extends Component {
       isDeleteReleaseProfileModalOpen
     } = this.state;
 
-    const indexer = indexerId !== 0 && _.find(indexerList, { id: indexerId });
+    const indexer = indexerId !== 0 && indexerList.find((i) => i.id === indexerId);
 
     return (
       <Card
diff --git a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js
index 01a5e846b..811c98461 100644
--- a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js
+++ b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
 import Card from 'Components/Card';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
@@ -122,9 +123,9 @@ export default function EditAutoTaggingModalContent(props) {
 
           {
             !isFetching && !!error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('AddAutoTagError')}
-              </div> :
+              </Alert> :
               null
           }
 
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js
index 454a2591a..9e06e815b 100644
--- a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js
@@ -55,9 +55,9 @@ export default function AddSpecificationModalContent(props) {
 
         {
           !isSchemaFetching && !!schemaError ?
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('AddConditionError')}
-            </div> :
+            </Alert> :
             null
         }
 
diff --git a/frontend/src/Settings/Tags/Tag.js b/frontend/src/Settings/Tags/Tag.js
index e7715364c..b74043fcd 100644
--- a/frontend/src/Settings/Tags/Tag.js
+++ b/frontend/src/Settings/Tags/Tag.js
@@ -40,7 +40,7 @@ class Tag extends Component {
     });
   };
 
-  onDeleteTagModalClose= () => {
+  onDeleteTagModalClose = () => {
     this.setState({ isDeleteTagModalOpen: false });
   };
 
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index ba55cb50c..9ca119b76 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -1955,7 +1955,6 @@
   "Umask777Description": "{octal} - Everyone write",
   "UnableToLoadAutoTagging": "Unable to load auto tagging",
   "UnableToLoadBackups": "Unable to load backups",
-  "UnableToLoadListOptions": "Unable to load list options",
   "UnableToUpdateSonarrDirectly": "Unable to update {appName} directly,",
   "Unavailable": "Unavailable",
   "Underscore": "Underscore",