From c0fabc1a5434a70165b15f8e1a3bfa32890eacb8 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Wed, 3 Jun 2020 22:31:06 -0400
Subject: [PATCH] [Uptime] Add loading message for monitor list no items
 (#67378) (#68186)

* Add loading message for monitor list no items.

* Add tests.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../__tests__/monitor_list.test.tsx           | 22 ++++++++++++++++++-
 .../overview/monitor_list/monitor_list.tsx    |  7 +++++-
 .../overview/monitor_list/translations.ts     |  5 +++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
index cf6d137e8692b..29e24a83cfa15 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx
@@ -10,7 +10,7 @@ import {
   CursorDirection,
   SortOrder,
 } from '../../../../../common/runtime_types';
-import { MonitorListComponent } from '../monitor_list';
+import { MonitorListComponent, noItemsMessage } from '../monitor_list';
 import { renderWithRouter, shallowWithRouter } from '../../../../lib';
 import * as redux from 'react-redux';
 
@@ -288,4 +288,24 @@ describe('MonitorList component', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('noItemsMessage', () => {
+    it('returns loading message while loading', () => {
+      expect(noItemsMessage(true)).toEqual(`Loading...`);
+    });
+
+    it('returns loading message when filters are defined and loading', () => {
+      expect(noItemsMessage(true, 'filters')).toEqual(`Loading...`);
+    });
+
+    it('returns no monitors selected when filters are defined and not loading', () => {
+      expect(noItemsMessage(false, 'filters')).toEqual(
+        `No monitors found for selected filter criteria`
+      );
+    });
+
+    it('returns no data message when no filters and not loading', () => {
+      expect(noItemsMessage(false)).toEqual(`No uptime monitors found`);
+    });
+  });
 });
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index c1095f6ec71f0..1526838460957 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -43,6 +43,11 @@ const TruncatedEuiLink = styled(EuiLink)`
   text-overflow: ellipsis;
 `;
 
+export const noItemsMessage = (loading: boolean, filters?: string) => {
+  if (loading) return labels.LOADING;
+  return !!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE;
+};
+
 export const MonitorListComponent: React.FC<Props> = ({
   filters,
   monitorList: { list, error, loading },
@@ -164,7 +169,7 @@ export const MonitorListComponent: React.FC<Props> = ({
         itemId="monitor_id"
         itemIdToExpandedRowMap={getExpandedRowMap()}
         items={items}
-        noItemsMessage={!!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE}
+        noItemsMessage={noItemsMessage(loading, filters)}
         columns={columns}
       />
       <EuiSpacer size="m" />
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts
index 90dc854cc6904..e70eef1d91161 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts
@@ -52,6 +52,11 @@ export const NO_MONITOR_ITEM_SELECTED = i18n.translate(
   }
 );
 
+export const LOADING = i18n.translate('xpack.uptime.monitorList.loading', {
+  defaultMessage: 'Loading...',
+  description: 'Shown when the monitor list is waiting for a server response',
+});
+
 export const NO_DATA_MESSAGE = i18n.translate('xpack.uptime.monitorList.noItemMessage', {
   defaultMessage: 'No uptime monitors found',
   description: 'This message is shown if the monitors table is rendered but has no items.',