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 7b7d89164662e..b0e9b68ac839f 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();
+ expect(wrapper.exists(EuiEmptyPrompt)).toBe(true);
+ expect(wrapper.exists(EuiBasicTable)).toBe(false);
+ });
+ });
+
describe('pagination', () => {
it('derives pagination from meta object', () => {
setMockValues({
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 065601feeb4d2..1dd6fe7cd1e8d 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,24 @@ export const CredentialsList: React.FC = () => {
hidePerPageOptions: true,
};
+ if (items.length < 1) {
+ return (
+
+ {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.empty.title', {
+ defaultMessage: 'No API Keys have been created yet.',
+ })}
+
+ }
+ body={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.empty.body', {
+ defaultMessage: 'Click Create a key to make your first one.',
+ })}
+ />
+ );
+ }
+
const onTableChange = ({ page }: CriteriaWithPagination) => {
const { index: current } = page;
fetchCredentials(current + 1);