From 1f785dd30ddf6f1ae61b171afc12ce691c100ee2 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 16 Jun 2023 20:49:08 +0300
Subject: [PATCH] Show loading errors as Alerts (#5736)

New: Improved page loading errors
---
 frontend/src/Activity/Blocklist/Blocklist.js          |  7 ++++---
 frontend/src/Activity/History/History.js              |  9 +++++----
 frontend/src/Activity/Queue/Queue.js                  | 11 ++++++-----
 .../src/AddSeries/ImportSeries/Import/ImportSeries.js | 10 +++++++---
 .../SelectFolder/ImportSeriesSelectFolder.js          |  2 +-
 frontend/src/Calendar/Calendar.js                     |  4 +++-
 frontend/src/Components/Page/PageSectionContent.js    |  4 +++-
 frontend/src/Episode/History/EpisodeHistory.js        |  7 ++++---
 .../Language/SelectLanguageModalContent.tsx           |  5 ++++-
 .../Quality/SelectQualityModalContent.tsx             |  5 ++++-
 .../SelectDownloadClientModalContent.tsx              |  4 +++-
 frontend/src/RootFolder/RootFolders.js                |  2 +-
 .../src/Series/History/SeriesHistoryModalContent.js   |  2 +-
 frontend/src/Series/Index/SeriesIndex.tsx             |  7 +++++--
 .../DownloadClients/Options/DownloadClientOptions.js  |  2 +-
 frontend/src/Settings/General/GeneralSettings.js      |  2 +-
 .../src/Settings/Indexers/Options/IndexerOptions.js   |  2 +-
 .../src/Settings/MediaManagement/MediaManagement.js   |  2 +-
 .../src/Settings/MediaManagement/Naming/Naming.js     |  2 +-
 frontend/src/Settings/UI/UISettings.js                |  5 +++--
 frontend/src/System/Backup/Backups.js                 | 11 ++++++++---
 21 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/frontend/src/Activity/Blocklist/Blocklist.js b/frontend/src/Activity/Blocklist/Blocklist.js
index 4bc7ca385..81e0199f0 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';
@@ -155,14 +156,14 @@ class Blocklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load blocklist</div>
+              <Alert kind={kinds.DANGER}>Unable to load blocklist</Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 No history blocklist
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Activity/History/History.js b/frontend/src/Activity/History/History.js
index 6297babad..c44fe2284 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 HistoryRowConnector from './HistoryRowConnector';
 
@@ -104,7 +105,7 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>Unable to load history</div>
+              <Alert kind={kinds.DANGER}>Unable to load history</Alert>
           }
 
           {
@@ -112,9 +113,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
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Activity/Queue/Queue.js b/frontend/src/Activity/Queue/Queue.js
index cd030a166..c76f8bb56 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 getSelectedIds from 'Utilities/Table/getSelectedIds';
@@ -228,17 +229,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 Failed to load Queue
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 Queue is empty
-              </div> :
+              </Alert> :
               null
           }
 
diff --git a/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js b/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
index d576cee0f..1b5d40256 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
+++ b/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
@@ -1,9 +1,11 @@
 import { reduce } 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';
+import { kinds } from 'Helpers/Props';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';
@@ -103,7 +105,9 @@ class ImportSeries extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>Unable to load root folders</div> :
+              <Alert kind={kinds.DANGER}>
+                Unable to load root folders
+              </Alert> :
               null
           }
 
@@ -112,9 +116,9 @@ class ImportSeries extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 All series in {path} have been imported
-              </div> :
+              </Alert> :
               null
           }
 
diff --git a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js
index 742cb2c4f..a8d683fe5 100644
--- a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js
+++ b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js
@@ -67,7 +67,7 @@ class ImportSeriesSelectFolder extends Component {
 
           {
             !isFetching && error ?
-              <div>Unable to load root folders</div> :
+              <Alert kind={kinds.DANGER}>Unable to load root folders</Alert> :
               null
           }
 
diff --git a/frontend/src/Calendar/Calendar.js b/frontend/src/Calendar/Calendar.js
index 734de3121..a9996d7f5 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 AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
 import CalendarDaysConnector from './Day/CalendarDaysConnector';
@@ -30,7 +32,7 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>Unable to load the calendar</div>
+            <Alert kind={kinds.DANGER}>Unable to load the calendar</Alert>
         }
 
         {
diff --git a/frontend/src/Components/Page/PageSectionContent.js b/frontend/src/Components/Page/PageSectionContent.js
index 774b88669..2cef9eef1 100644
--- a/frontend/src/Components/Page/PageSectionContent.js
+++ b/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 (
diff --git a/frontend/src/Episode/History/EpisodeHistory.js b/frontend/src/Episode/History/EpisodeHistory.js
index ebf6eaaff..fafb4db4c 100644
--- a/frontend/src/Episode/History/EpisodeHistory.js
+++ b/frontend/src/Episode/History/EpisodeHistory.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import EpisodeHistoryRow from './EpisodeHistoryRow';
 
 const columns = [
@@ -77,13 +78,13 @@ class EpisodeHistory extends Component {
 
     if (!isFetching && !!error) {
       return (
-        <div>Unable to load episode history.</div>
+        <Alert kind={kinds.DANGER}>Unable to load episode history.</Alert>
       );
     }
 
     if (isPopulated && !hasItems && !error) {
       return (
-        <div>No episode history.</div>
+        <Alert kind={kinds.INFO}>No episode history.</Alert>
       );
     }
 
diff --git a/frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx b/frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx
index 844f4daa9..42f21aa68 100644
--- a/frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx
+++ b/frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { LanguageSettingsAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -82,7 +83,9 @@ function SelectLanguageModalContent(props: SelectLanguageModalContentProps) {
       <ModalBody>
         {isFetching ? <LoadingIndicator /> : null}
 
-        {!isFetching && error ? <div>Unable To Load Languages</div> : null}
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>Unable to load Languages</Alert>
+        ) : null}
 
         {isPopulated && !error ? (
           <Form>
diff --git a/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx b/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx
index 20fc10d67..87d5e0e14 100644
--- a/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx
+++ b/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.tsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Error } from 'App/State/AppSectionState';
 import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -126,7 +127,9 @@ function SelectQualityModalContent(props: SelectQualityModalContentProps) {
       <ModalBody>
         {isFetching && <LoadingIndicator />}
 
-        {!isFetching && error ? <div>Unable to load qualities</div> : null}
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>Unable to load qualities</Alert>
+        ) : null}
 
         {isPopulated && !error ? (
           <Form>
diff --git a/frontend/src/InteractiveSearch/OverrideMatch/DownloadClient/SelectDownloadClientModalContent.tsx b/frontend/src/InteractiveSearch/OverrideMatch/DownloadClient/SelectDownloadClientModalContent.tsx
index 87a6541c5..95f3ba139 100644
--- a/frontend/src/InteractiveSearch/OverrideMatch/DownloadClient/SelectDownloadClientModalContent.tsx
+++ b/frontend/src/InteractiveSearch/OverrideMatch/DownloadClient/SelectDownloadClientModalContent.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -8,6 +9,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import DownloadProtocol from 'DownloadClient/DownloadProtocol';
+import { kinds } from 'Helpers/Props';
 import createEnabledDownloadClientsSelector from 'Store/Selectors/createEnabledDownloadClientsSelector';
 import translate from 'Utilities/String/translate';
 import SelectDownloadClientRow from './SelectDownloadClientRow';
@@ -36,7 +38,7 @@ function SelectDownloadClientModalContent(
         {isFetching ? <LoadingIndicator /> : null}
 
         {!isFetching && error ? (
-          <div>Unable to load download clients</div>
+          <Alert kind={kinds.DANGER}>Unable to load download clients</Alert>
         ) : null}
 
         {isPopulated && !error ? (
diff --git a/frontend/src/RootFolder/RootFolders.js b/frontend/src/RootFolder/RootFolders.js
index a07209ecc..d2fc14cf7 100644
--- a/frontend/src/RootFolder/RootFolders.js
+++ b/frontend/src/RootFolder/RootFolders.js
@@ -43,7 +43,7 @@ function RootFolders(props) {
 
   if (!isFetching && !!error) {
     return (
-      <div>Unable to load root folders</div>
+      <Alert kind={kinds.DANGER}>Unable to load root folders</Alert>
     );
   }
 
diff --git a/frontend/src/Series/History/SeriesHistoryModalContent.js b/frontend/src/Series/History/SeriesHistoryModalContent.js
index 3bc19b857..47336fe86 100644
--- a/frontend/src/Series/History/SeriesHistoryModalContent.js
+++ b/frontend/src/Series/History/SeriesHistoryModalContent.js
@@ -97,7 +97,7 @@ class SeriesHistoryModalContent extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load history.</div>
+              <Alert kind={kinds.DANGER}>Unable to load history.</Alert>
           }
 
           {
diff --git a/frontend/src/Series/Index/SeriesIndex.tsx b/frontend/src/Series/Index/SeriesIndex.tsx
index 43bef9a64..9c54ba97e 100644
--- a/frontend/src/Series/Index/SeriesIndex.tsx
+++ b/frontend/src/Series/Index/SeriesIndex.tsx
@@ -10,6 +10,7 @@ import { SelectProvider } from 'App/SelectContext';
 import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import SeriesAppState, { SeriesIndexAppState } from 'App/State/SeriesAppState';
 import { RSS_SYNC } from 'Commands/commandNames';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -20,7 +21,7 @@ import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import withScrollPosition from 'Components/withScrollPosition';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import SortDirection from 'Helpers/Props/SortDirection';
 import NoSeries from 'Series/NoSeries';
 import { executeCommand } from 'Store/Actions/commandActions';
@@ -304,7 +305,9 @@ const SeriesIndex = withScrollPosition((props: SeriesIndexProps) => {
           >
             {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
-            {!isFetching && !!error ? <div>Unable to load series</div> : null}
+            {!isFetching && !!error ? (
+              <Alert kind={kinds.DANGER}>Unable to load series</Alert>
+            ) : null}
 
             {isLoaded ? (
               <div className={styles.contentBodyContainer}>
diff --git a/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js b/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
index ea2ac0e07..f3bb181d7 100644
--- a/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
+++ b/frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.js
@@ -28,7 +28,7 @@ function DownloadClientOptions(props) {
 
       {
         !isFetching && error &&
-          <div>Unable to load download client options</div>
+          <Alert kind={kinds.DANGER}>Unable to load download client options</Alert>
       }
 
       {
diff --git a/frontend/src/Settings/General/GeneralSettings.js b/frontend/src/Settings/General/GeneralSettings.js
index 1e9d56515..afbd7c7b3 100644
--- a/frontend/src/Settings/General/GeneralSettings.js
+++ b/frontend/src/Settings/General/GeneralSettings.js
@@ -123,7 +123,7 @@ class GeneralSettings extends Component {
 
           {
             !isFetching && error &&
-              <div>Unable to load General settings</div>
+              <Alert kind={kinds.DANGER}>Unable to load General settings</Alert>
           }
 
           {
diff --git a/frontend/src/Settings/Indexers/Options/IndexerOptions.js b/frontend/src/Settings/Indexers/Options/IndexerOptions.js
index 3812fe981..478dd5855 100644
--- a/frontend/src/Settings/Indexers/Options/IndexerOptions.js
+++ b/frontend/src/Settings/Indexers/Options/IndexerOptions.js
@@ -27,7 +27,7 @@ function IndexerOptions(props) {
 
       {
         !isFetching && error &&
-          <div>Unable to load indexer options</div>
+          <Alert kind={kinds.DANGER}>Unable to load indexer options</Alert>
       }
 
       {
diff --git a/frontend/src/Settings/MediaManagement/MediaManagement.js b/frontend/src/Settings/MediaManagement/MediaManagement.js
index a5f9a0aa3..c23fa2576 100644
--- a/frontend/src/Settings/MediaManagement/MediaManagement.js
+++ b/frontend/src/Settings/MediaManagement/MediaManagement.js
@@ -77,7 +77,7 @@ class MediaManagement extends Component {
           {
             !isFetching && error ?
               <FieldSet legend="Naming Settings">
-                <div>Unable to load Media Management settings</div>
+                <Alert kind={kinds.DANGER}>Unable to load Media Management settings</Alert>
               </FieldSet> : null
           }
 
diff --git a/frontend/src/Settings/MediaManagement/Naming/Naming.js b/frontend/src/Settings/MediaManagement/Naming/Naming.js
index 5f7ccf19a..4c7ddf16a 100644
--- a/frontend/src/Settings/MediaManagement/Naming/Naming.js
+++ b/frontend/src/Settings/MediaManagement/Naming/Naming.js
@@ -211,7 +211,7 @@ class Naming extends Component {
 
         {
           !isFetching && error &&
-            <div>Unable to load Naming settings</div>
+            <Alert kind={kinds.DANGER}>Unable to load Naming settings</Alert>
         }
 
         {
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index bb426d05e..e9d4ce400 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';
@@ -81,7 +82,7 @@ class UISettings extends Component {
 
           {
             !isFetching && error ?
-              <div>Unable to load UI settings</div> :
+              <Alert kind={kinds.DANGER}>Unable to load UI settings</Alert> :
               null
           }
 
diff --git a/frontend/src/System/Backup/Backups.js b/frontend/src/System/Backup/Backups.js
index 0c7d6a544..c4adfbf50 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 BackupRow from './BackupRow';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
 
@@ -106,12 +107,16 @@ class Backups extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load backups</div>
+              <Alert kind={kinds.DANGER}>
+                Unable to load backups
+              </Alert>
           }
 
           {
             noBackups &&
-              <div>No backups are available</div>
+              <Alert kind={kinds.INFO}>
+                No backups are available
+              </Alert>
           }
 
           {