Improved page loading errors

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/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 ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -121,9 +122,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -131,9 +132,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
-                No history found
+                {translate('NoHistoryFound')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Indexer/Stats/Stats.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import BarChart from 'Components/Chart/BarChart';
 import DoughnutChart from 'Components/Chart/DoughnutChart';
 import StackedBarChart from 'Components/Chart/StackedBarChart';
@@ -178,9 +179,9 @@ function Stats(props) {
 
         {
           !isFetching && !!error &&
-            <div className={styles.errorMessage}>
+            <Alert kind={kinds.DANGER}>
               {getErrorMessage(error, 'Failed to load indexer stats from API')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Search/SearchIndex.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';
@@ -10,7 +11,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import NoIndexer from 'Indexer/NoIndexer';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
@@ -309,9 +310,9 @@ class SearchIndex extends Component {
 
             {
               !isFetching && !!error &&
-                <div className={styles.errorMessage}>
+                <Alert kind={kinds.DANGER}>
                   {getErrorMessage(error, 'Failed to load search results from API')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Settings/Development/DevelopmentSettings.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 translate from 'Utilities/String/translate';
 
@@ -49,9 +50,9 @@ class DevelopmentSettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadDevelopmentSettings')}
-              </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';
@@ -123,9 +124,9 @@ class GeneralSettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadGeneralSettings')}
-              </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';
@@ -80,9 +81,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>
           }
 
           {

frontend/src/System/Events/LogsTable.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React 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 LogsTableRow from './LogsTableRow';
 
@@ -82,9 +83,9 @@ function LogsTable(props) {
 
         {
           isPopulated && !error && !items.length &&
-            <div>
+            <Alert kind={kinds.INFO}>
               No events found
-            </div>
+            </Alert>
         }
 
         {

frontend/src/System/Logs/Files/LogFiles.js

@@ -11,7 +11,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 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 LogsNavMenu from '../LogsNavMenu';
 import LogFilesTableRow from './LogFilesTableRow';
@@ -118,9 +118,9 @@ class LogFiles extends Component {
 
           {
             !isFetching && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoLogFiles')}
-              </div>
+              </Alert>
           }
         </PageContentBody>
       </PageContent>

frontend/src/System/Updates/Updates.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
+import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -61,9 +62,9 @@ class Updates extends Component {
 
           {
             noUpdates &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoUpdatesAreAvailable')}
-              </div>
+              </Alert>
           }
 
           {

src/NzbDrone.Core/Localization/Core/en.json

@@ -276,6 +276,7 @@
   "NoBackupsAreAvailable": "No backups are available",
   "NoChange": "No Change",
   "NoChanges": "No Changes",
+  "NoHistoryFound": "No history found",
   "NoLeaveIt": "No, Leave It",
   "NoLinks": "No Links",
   "NoLogFiles": "No log files",