From 964a4884e26b7aebb0aab9024c9029c7368d608b Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Mon, 5 Oct 2020 10:32:39 -0400
Subject: [PATCH] Added an EuiEmptyState to Credentials

---
 .../credentials_list.test.tsx                 | 20 +++++++++++--
 .../credentials_list/credentials_list.tsx     | 30 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx
index 7b7d89164662e19..58db31f9ef1c494 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { CredentialsList } from './credentials_list';
-import { EuiBasicTable, EuiCopy } from '@elastic/eui';
+import { EuiBasicTable, EuiCopy, EuiEmptyPrompt } from '@elastic/eui';
 import { IApiToken } from '../types';
 import { ApiTokenTypes } from '../constants';
 
@@ -26,7 +26,7 @@ describe('Credentials', () => {
 
   // Kea mocks
   const values = {
-    apiTokens: [],
+    apiTokens: [apiToken],
     meta: {
       page: {
         current: 1,
@@ -78,6 +78,19 @@ describe('Credentials', () => {
     });
   });
 
+  describe('empty state', () => {
+    it('renders an EuiEmptyState when no credentials are available', () => {
+      setMockValues({
+        ...values,
+        apiTokens: [],
+      });
+
+      const wrapper = shallow(<CredentialsList />);
+      expect(wrapper.exists(EuiEmptyPrompt)).toBe(true);
+      expect(wrapper.exists(EuiBasicTable)).toBe(false);
+    });
+  });
+
   describe('pagination', () => {
     it('derives pagination from meta object', () => {
       setMockValues({
@@ -103,6 +116,7 @@ describe('Credentials', () => {
 
     it('will default pagination values if `page` is not available', () => {
       setMockValues({ ...values, meta: {} });
+
       const wrapper = shallow(<CredentialsList />);
       const { pagination } = wrapper.find(EuiBasicTable).props();
       expect(pagination).toEqual({
@@ -117,7 +131,7 @@ describe('Credentials', () => {
   describe('columns', () => {
     let columns: any[];
 
-    beforeAll(() => {
+    beforeEach(() => {
       const wrapper = shallow(<CredentialsList />);
       columns = wrapper.find(EuiBasicTable).props().columns;
     });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.tsx
index 065601feeb4d261..c55a077d46b5758 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_list/credentials_list.tsx
@@ -5,7 +5,13 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiBasicTable, EuiBasicTableColumn, EuiButtonIcon, EuiCopy } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiButtonIcon,
+  EuiCopy,
+  EuiEmptyPrompt,
+} from '@elastic/eui';
 import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
 import { useActions, useValues } from 'kea';
 
@@ -113,6 +119,28 @@ export const CredentialsList: React.FC = () => {
     hidePerPageOptions: true,
   };
 
+  if (items.length < 1) {
+    return (
+      <EuiEmptyPrompt
+        iconType="editorStrike"
+        title={
+          <h2>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.empty.title', {
+              defaultMessage: 'No API Keys have been created yet.',
+            })}
+          </h2>
+        }
+        body={
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.empty.body', {
+              defaultMessage: 'Click Create a key to make your first one.',
+            })}
+          </p>
+        }
+      />
+    );
+  }
+
   const onTableChange = ({ page }: CriteriaWithPagination<IApiToken>) => {
     const { index: current } = page;
     fetchCredentials(current + 1);