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);