From ee843259bca2d9764a3919b123524a51a3a16cce Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Tue, 27 Jun 2023 01:18:03 +0300
Subject: [PATCH] New: Improve empty list messaging

---
 frontend/src/Settings/Tags/Tags.js             | 6 +++++-
 frontend/src/System/Events/LogsTable.js        | 7 ++++---
 frontend/src/System/Logs/Files/LogFiles.js     | 6 ++++--
 frontend/src/System/Updates/Updates.js         | 5 ++++-
 frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js | 9 +++++----
 frontend/src/Wanted/Missing/Missing.js         | 9 +++++----
 6 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Settings/Tags/Tags.js b/frontend/src/Settings/Tags/Tags.js
index e1375ba76..04d8e91e5 100644
--- a/frontend/src/Settings/Tags/Tags.js
+++ b/frontend/src/Settings/Tags/Tags.js
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
+import { kinds } from 'Helpers/Props';
 import TagConnector from './TagConnector';
 import styles from './Tags.css';
 
@@ -13,7 +15,9 @@ function Tags(props) {
 
   if (!items.length) {
     return (
-      <div>No tags have been added yet</div>
+      <Alert kind={kinds.INFO}>
+        No tags have been added yet
+      </Alert>
     );
   }
 
diff --git a/frontend/src/System/Events/LogsTable.js b/frontend/src/System/Events/LogsTable.js
index 5b78d2521..5d4bc8513 100644
--- a/frontend/src/System/Events/LogsTable.js
+++ b/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 LogsTableRow from './LogsTableRow';
 
 function LogsTable(props) {
@@ -81,9 +82,9 @@ function LogsTable(props) {
 
         {
           isPopulated && !error && !items.length &&
-            <div>
+            <Alert kind={kinds.INFO}>
               No events found
-            </div>
+            </Alert>
         }
 
         {
diff --git a/frontend/src/System/Logs/Files/LogFiles.js b/frontend/src/System/Logs/Files/LogFiles.js
index 619f92072..3d7f708aa 100644
--- a/frontend/src/System/Logs/Files/LogFiles.js
+++ b/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 LogsNavMenu from '../LogsNavMenu';
 import LogFilesTableRow from './LogFilesTableRow';
 
@@ -117,7 +117,9 @@ class LogFiles extends Component {
 
           {
             !isFetching && !items.length &&
-              <div>No log files</div>
+              <Alert kind={kinds.INFO}>
+                No log files
+              </Alert>
           }
         </PageContentBody>
       </PageContent>
diff --git a/frontend/src/System/Updates/Updates.js b/frontend/src/System/Updates/Updates.js
index 017bca856..cb032dd7f 100644
--- a/frontend/src/System/Updates/Updates.js
+++ b/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';
@@ -59,7 +60,9 @@ class Updates extends Component {
 
           {
             noUpdates &&
-              <div>No updates are available</div>
+              <Alert kind={kinds.INFO}>
+                No updates are available
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
index 055a1b609..05162d8b4 100644
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.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';
@@ -196,16 +197,16 @@ class CutoffUnmet extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 Error fetching cutoff unmet
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 No cutoff unmet items
-              </div>
+              </Alert>
           }
 
           {
diff --git a/frontend/src/Wanted/Missing/Missing.js b/frontend/src/Wanted/Missing/Missing.js
index 717a63c1b..d4909b54b 100644
--- a/frontend/src/Wanted/Missing/Missing.js
+++ b/frontend/src/Wanted/Missing/Missing.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';
@@ -209,16 +210,16 @@ class Missing extends Component {
 
           {
             !isFetching && error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 Error fetching missing items
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 No missing items
-              </div>
+              </Alert>
           }
 
           {