From 8a88cfc466e13887085367f8332deb5f45d9ba62 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 17 Jun 2023 00:16:17 +0300
Subject: [PATCH] New: Improved page loading errors

Closes #3804
---
 frontend/src/Activity/Blocklist/Blocklist.js      |  9 +++++----
 frontend/src/Activity/History/History.js          | 13 +++++++------
 frontend/src/Activity/Queue/Queue.js              | 15 ++++++++-------
 .../Artist/History/ArtistHistoryModalContent.js   | 10 ++++++----
 frontend/src/Calendar/Calendar.js                 |  6 ++++--
 .../Quality/SelectQualityModalContent.js          |  5 +++--
 .../ExportCustomFormatModalContent.js             |  7 ++++---
 .../Options/DownloadClientOptions.js              |  4 ++--
 frontend/src/Settings/General/GeneralSettings.js  |  5 +++--
 .../Settings/Indexers/Options/IndexerOptions.js   |  7 ++++---
 .../Settings/MediaManagement/MediaManagement.js   |  7 ++++---
 .../src/Settings/MediaManagement/Naming/Naming.js |  7 ++++---
 .../Metadata/MetadataProvider/MetadataProvider.js |  7 ++++---
 frontend/src/Settings/UI/UISettings.js            |  7 ++++---
 frontend/src/System/Backup/Backups.js             | 11 ++++++-----
 15 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/frontend/src/Activity/Blocklist/Blocklist.js b/frontend/src/Activity/Blocklist/Blocklist.js
index b833a1af7..6668bee46 100644
--- a/frontend/src/Activity/Blocklist/Blocklist.js
+++ b/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>
           }
 
           {
diff --git a/frontend/src/Activity/History/History.js b/frontend/src/Activity/History/History.js
index dbd62ff5d..5c830ee1a 100644
--- a/frontend/src/Activity/History/History.js
+++ b/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 hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
@@ -107,9 +108,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -117,9 +118,9 @@ class History extends Component {
             // wait for the albums to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
-                No history found
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistory')}
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Activity/Queue/Queue.js b/frontend/src/Activity/Queue/Queue.js
index b148645d3..b73ce0ad7 100644
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/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>
-                Failed to load Queue
-              </div> :
+              <Alert kind={kinds.DANGER}>
+                {translate('FailedToLoadQueue')}
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
-                Queue is empty
-              </div> :
+              <Alert kind={kinds.INFO}>
+                {translate('QueueIsEmpty')}
+              </Alert> :
               null
           }
 
diff --git a/frontend/src/Artist/History/ArtistHistoryModalContent.js b/frontend/src/Artist/History/ArtistHistoryModalContent.js
index 5dd77ad9f..822516770 100644
--- a/frontend/src/Artist/History/ArtistHistoryModalContent.js
+++ b/frontend/src/Artist/History/ArtistHistoryModalContent.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 LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -8,6 +9,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import ArtistHistoryRowConnector from './ArtistHistoryRowConnector';
 
@@ -81,16 +83,16 @@ class ArtistHistoryModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !hasItems && !error &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Calendar/Calendar.js b/frontend/src/Calendar/Calendar.js
index fec208a00..a0b22f92f 100644
--- a/frontend/src/Calendar/Calendar.js
+++ b/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>
         }
 
         {
diff --git a/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.js b/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.js
index e7abd1184..057b757e0 100644
--- a/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.js
+++ b/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>
           }
 
           {
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js b/frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js
index 1c2e98e03..4418a90cb 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>
-                  Unable to load custom formats
-                </div>
+                <Alert kind={kinds.DANGER}>
+                  {translate('UnableToLoadCustomFormats')}
+                </Alert>
             }
 
             {
diff --git a/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js b/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
index 34320bee0..48d8f3410 100644
--- a/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
+++ b/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
@@ -29,9 +29,9 @@ function DownloadClientOptions(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadDownloadClientOptions')}
-          </div>
+          </Alert>
       }
 
       {
diff --git a/frontend/src/Settings/General/GeneralSettings.js b/frontend/src/Settings/General/GeneralSettings.js
index eb13a75e9..5ecc35356 100644
--- a/frontend/src/Settings/General/GeneralSettings.js
+++ b/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>
           }
 
           {
diff --git a/frontend/src/Settings/Indexers/Options/IndexerOptions.js b/frontend/src/Settings/Indexers/Options/IndexerOptions.js
index 82df4efac..018b8ce1d 100644
--- a/frontend/src/Settings/Indexers/Options/IndexerOptions.js
+++ b/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>
       }
 
       {
diff --git a/frontend/src/Settings/MediaManagement/MediaManagement.js b/frontend/src/Settings/MediaManagement/MediaManagement.js
index c9ec49e62..e722a1e9b 100644
--- a/frontend/src/Settings/MediaManagement/MediaManagement.js
+++ b/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 SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import NamingConnector from './Naming/NamingConnector';
@@ -77,9 +78,9 @@ class MediaManagement extends Component {
           {
             !isFetching && error &&
               <FieldSet legend={translate('NamingSettings')}>
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMediaManagementSettings')}
-                </div>
+                </Alert>
               </FieldSet>
           }
 
diff --git a/frontend/src/Settings/MediaManagement/Naming/Naming.js b/frontend/src/Settings/MediaManagement/Naming/Naming.js
index 11d48366b..533c66c6b 100644
--- a/frontend/src/Settings/MediaManagement/Naming/Naming.js
+++ b/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';
@@ -133,9 +134,9 @@ class Naming extends Component {
 
         {
           !isFetching && error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadNamingSettings')}
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/Settings/Metadata/MetadataProvider/MetadataProvider.js b/frontend/src/Settings/Metadata/MetadataProvider/MetadataProvider.js
index eda7f3305..e0bbe3ec6 100644
--- a/frontend/src/Settings/Metadata/MetadataProvider/MetadataProvider.js
+++ b/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 = [
@@ -35,9 +36,9 @@ function MetadataProvider(props) {
 
       {
         !isFetching && error &&
-          <div>
+          <Alert kind={kinds.DANGER}>
             {translate('UnableToLoadMetadataProviderSettings')}
-          </div>
+          </Alert>
       }
 
       {
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index 614ae659b..f6219406f 100644
--- a/frontend/src/Settings/UI/UISettings.js
+++ b/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';
@@ -82,9 +83,9 @@ class UISettings extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadUISettings')}
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/System/Backup/Backups.js b/frontend/src/System/Backup/Backups.js
index 7a5e399d0..4f9cd0483 100644
--- a/frontend/src/System/Backup/Backups.js
+++ b/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>
           }
 
           {