New: Improved page loading errors

Closes #2605

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -161,16 +162,16 @@ class Blocklist extends Component {
 
           {
             !isAnyFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isAllPopulated && !error && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistoryBlocklist')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -85,9 +86,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -95,9 +96,9 @@ class History extends Component {
             // wait for the books to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
-                No history found
+                {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -233,17 +234,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Author/History/AuthorHistoryTableContent.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AuthorHistoryRowConnector from './AuthorHistoryRowConnector';
 
@@ -70,9 +72,9 @@ class AuthorHistoryTableContent extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadHistory')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Components/Page/PageSectionContent.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 
 function PageSectionContent(props) {
   const {
@@ -17,7 +19,7 @@ function PageSectionContent(props) {
     );
   } else if (!isFetching && !!error) {
     return (
-      <div>{errorMessage}</div>
+      <Alert kind={kinds.DANGER}>{errorMessage}</Alert>
     );
   } else if (isPopulated && !error) {
     return (

frontend/src/InteractiveImport/Quality/SelectQualityModalContent.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';
@@ -92,9 +93,9 @@ class SelectQualityModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadQualities')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+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, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
 function DownloadClientOptions(props) {
@@ -28,9 +29,9 @@ function DownloadClientOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadDownloadClientOptions')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/General/GeneralSettings.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -124,9 +125,9 @@ class GeneralSettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadGeneralSettings')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Settings/Indexers/Options/IndexerOptions.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+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 translate from 'Utilities/String/translate';
 
 function IndexerOptions(props) {
@@ -28,9 +29,9 @@ function IndexerOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadIndexerOptions')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -8,7 +9,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import RemotePathMappingsConnector from 'Settings/DownloadClients/RemotePathMappings/RemotePathMappingsConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
@@ -79,9 +80,9 @@ class MediaManagement extends Component {
           {
             !isFetching && error &&
               <FieldSet legend={translate('NamingSettings')}>
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMediaManagementSettings')}
-                </div>
+                </Alert>
               </FieldSet>
           }
 

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -7,7 +8,7 @@ import FormInputButton from 'Components/Form/FormInputButton';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes, sizes } from 'Helpers/Props';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import NamingModal from './NamingModal';
 import styles from './Naming.css';
@@ -118,9 +119,9 @@ class Naming extends Component {
 
         {
           !isFetching && error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadNamingSettings')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Settings/Metadata/MetadataProvider/MetadataProvider.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+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 translate from 'Utilities/String/translate';
 
 const writeAudioTagOptions = [
@@ -41,9 +42,9 @@ function MetadataProvider(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadMetadataProviderSettings')}
-          </div>
+          </Alert>
       }
 
       {

frontend/src/Settings/UI/UISettings.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -8,7 +9,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import { inputTypes } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import themes from 'Styles/Themes';
 import titleCase from 'Utilities/String/titleCase';
@@ -81,9 +82,9 @@ class UISettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadUISettings')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/System/Backup/Backups.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -8,7 +9,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import BackupRow from './BackupRow';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
@@ -107,16 +108,16 @@ class Backups extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBackups')}
-              </div>
+              </Alert>
           }
 
           {
             noBackups &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoBackupsAreAvailable')}
-              </div>
+              </Alert>
           }
 
           {