Improve add/loading error notices

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>
           }
 
           {

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}>
             {

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>
             }
 
             {

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>
             }
 
             {

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>
             }
 
             {

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>
           }
 
           {

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>
           }
 
           {

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.js

@@ -41,7 +41,7 @@ class DownloadClient extends Component {
     });
   };
 
-  onDeleteDownloadClientModalClose= () => {
+  onDeleteDownloadClientModalClose = () => {
     this.setState({ isDeleteDownloadClientModalOpen: false });
   };
 

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>
           }
 
           {

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -277,7 +277,7 @@ function ManageDownloadClientsModalContent(
             isDisabled={!anySelected}
             onPress={onTagsPress}
           >
-            Set Tags
+            {translate('SetTags')}
           </SpinnerButton>
         </div>
 

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>
         }
 
         {

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 {

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}

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>
         }
 
         {

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 {

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
           }
 

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
         }
 

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -41,7 +41,7 @@ class ImportList extends Component {
     });
   };
 
-  onDeleteImportListModalClose= () => {
+  onDeleteImportListModalClose = () => {
     this.setState({ isDeleteImportListModalOpen: false });
   };
 

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}

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,
+    createSortedSectionSelector('settings.importLists', sortByName),
-    (importLists) => {
+    (importLists) => importLists
-      return {
-        ...importLists
-      };
-    }
   );
 }
 

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>
   );

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 ? (

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>
           }
 
           {

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>
         }
 
         {

frontend/src/Settings/Indexers/Indexers/Indexer.js

@@ -42,7 +42,7 @@ class Indexer extends Component {
     });
   };
 
-  onDeleteIndexerModalClose= () => {
+  onDeleteIndexerModalClose = () => {
     this.setState({ isDeleteIndexerModalOpen: false });
   };
 

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>
           }
 
           {

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>
         }
 
         {

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
         }
 

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 {

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>
               }
 
               {

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}>
             {

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}

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 {

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

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
           }
 

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
         }
 

frontend/src/Settings/Tags/Tag.js

@@ -40,7 +40,7 @@ class Tag extends Component {
     });
   };
 
-  onDeleteTagModalClose= () => {
+  onDeleteTagModalClose = () => {
     this.setState({ isDeleteTagModalOpen: false });
   };
 

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",