Add no data for newly created rules, add unit tests

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx

@@ -662,7 +662,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
       },
       {
         id: 'ruleExecutionStatus',
-        field: 'executionStatus.status',
+        field: 'lastRun.outcome',
         name: i18n.translate(
           'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastResponseTitle',
           { defaultMessage: 'Last response' }

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.test.tsx

@@ -0,0 +1,162 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import {
+  RulesListTableStatusCell,
+  RulesListTableStatusCellProps,
+} from './rules_list_table_status_cell';
+import { RuleTableItem } from '../../../../types';
+import { getIsExperimentalFeatureEnabled } from '../../../../common/get_experimental_features';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+jest.mock('../../../../common/get_experimental_features', () => ({
+  getIsExperimentalFeatureEnabled: jest.fn(),
+}));
+
+const mockRule: RuleTableItem = {
+  id: '1',
+  enabled: true,
+  executionStatus: {
+    status: 'ok',
+  },
+  lastRun: {
+    outcome: 'succeeded',
+  },
+  nextRun: new Date('2020-08-20T19:23:38Z'),
+} as RuleTableItem;
+
+const onManageLicenseClickMock = jest.fn();
+
+const ComponentWithLocale = (props: RulesListTableStatusCellProps) => {
+  return (
+    <IntlProvider locale="en">
+      <RulesListTableStatusCell {...props} />
+    </IntlProvider>
+  );
+};
+
+describe('RulesListTableStatusCell', () => {
+  beforeEach(() => {
+    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
+  });
+
+  afterEach(() => {
+    onManageLicenseClickMock.mockClear();
+  });
+
+  it('should render successful rule outcome', async () => {
+    const { getByTestId } = render(
+      <ComponentWithLocale rule={mockRule} onManageLicenseClick={onManageLicenseClickMock} />
+    );
+    expect(getByTestId('ruleStatus-succeeded')).not.toBe(null);
+  });
+
+  it('should render failed rule outcome', async () => {
+    const { getByTestId } = render(
+      <ComponentWithLocale
+        rule={
+          {
+            ...mockRule,
+            executionStatus: {
+              status: 'error',
+            },
+            lastRun: {
+              outcome: 'failed',
+            },
+          } as RuleTableItem
+        }
+        onManageLicenseClick={onManageLicenseClickMock}
+      />
+    );
+    expect(getByTestId('ruleStatus-failed')).not.toBe(null);
+  });
+
+  it('should render warning rule outcome', async () => {
+    const { getByTestId } = render(
+      <ComponentWithLocale
+        rule={
+          {
+            ...mockRule,
+            executionStatus: {
+              status: 'warning',
+            },
+            lastRun: {
+              outcome: 'warning',
+            },
+          } as RuleTableItem
+        }
+        onManageLicenseClick={onManageLicenseClickMock}
+      />
+    );
+    expect(getByTestId('ruleStatus-warning')).not.toBe(null);
+  });
+
+  it('should render license errors', async () => {
+    const { getByTestId, getByText } = render(
+      <ComponentWithLocale
+        rule={
+          {
+            ...mockRule,
+            executionStatus: {
+              status: 'warning',
+            },
+            lastRun: {
+              outcome: 'warning',
+              warning: 'license',
+            },
+          } as RuleTableItem
+        }
+        onManageLicenseClick={onManageLicenseClickMock}
+      />
+    );
+    expect(getByTestId('ruleStatus-warning')).not.toBe(null);
+    expect(getByText('License Error')).not.toBe(null);
+  });
+
+  it('should render loading indicator for new rules', async () => {
+    const { getByText } = render(
+      <ComponentWithLocale
+        rule={
+          {
+            ...mockRule,
+            executionStatus: {
+              status: 'pending',
+            },
+            lastRun: null,
+            nextRun: null,
+          } as RuleTableItem
+        }
+        onManageLicenseClick={onManageLicenseClickMock}
+      />
+    );
+
+    expect(getByText('Statistic is loading')).not.toBe(null);
+  });
+
+  it('should render rule with no last run', async () => {
+    const { queryByText, getAllByText } = render(
+      <ComponentWithLocale
+        rule={
+          {
+            ...mockRule,
+            executionStatus: {
+              status: 'unknown',
+            },
+            lastRun: null,
+          } as RuleTableItem
+        }
+        onManageLicenseClick={onManageLicenseClickMock}
+      />
+    );
+
+    expect(queryByText('Statistic is loading')).toBe(null);
+    expect(getAllByText('--')).not.toBe(null);
+  });
+});

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx

@@ -7,15 +7,22 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiHealth, EuiToolTip } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiHealth,
+  EuiToolTip,
+  EuiStat,
+} from '@elastic/eui';
 import { RuleTableItem } from '../../../../types';
 import {
   getRuleHealthColor,
   getIsLicenseError,
   getRuleStatusMessage,
 } from '../../../../common/lib/rule_status_helpers';
 
-interface RulesListTableStatusCellProps {
+export interface RulesListTableStatusCellProps {
   rule: RuleTableItem;
   onManageLicenseClick: (rule: RuleTableItem) => void;
 }
@@ -30,11 +37,21 @@ export const RulesListTableStatusCell = (props: RulesListTableStatusCellProps) =
   const tooltipMessage = lastRun?.outcome === 'failed' ? `Error: ${lastRun?.outcomeMsg}` : null;
 
   if (!statusMessage) {
-    return null;
+    return (
+      <EuiStat
+        titleSize="xs"
+        title="--"
+        description=""
+        isLoading={!lastRun?.outcome && !rule.nextRun}
+      />
+    );
   }
 
   const health = (
-    <EuiHealth data-test-subj={`ruleStatus-${lastRun?.outcome}`} color={healthColor || 'default'}>
+    <EuiHealth
+      data-test-subj={`ruleStatus-${lastRun?.outcome || 'pending'}`}
+      color={healthColor || 'default'}
+    >
       {statusMessage}
     </EuiHealth>
   );