From 6eb5250ed949ccef993df831f87a9479969753f2 Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Mon, 5 Oct 2020 10:32:39 -0400 Subject: [PATCH 1/4] Added an EuiEmptyState to Credentials --- .../credentials_list.test.tsx | 17 ++++++++++-- .../credentials_list/credentials_list.tsx | 26 ++++++++++++++++++- 2 files changed, 40 insertions(+), 3 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 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); From 3d48430028b2c3c28fc7a890cd83a43136a98e34 Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Mon, 19 Oct 2020 13:21:27 -0400 Subject: [PATCH 2/4] Moved return --- .../credentials_list/credentials_list.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) 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 1dd6fe7cd1e8d..456c328c706e0 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 @@ -30,6 +30,24 @@ export const CredentialsList: React.FC = () => { const items = useMemo(() => apiTokens.slice().sort(apiTokenSort), [apiTokens]); + 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 columns: Array> = [ { name: 'Name', @@ -119,24 +137,6 @@ 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); From d52131d1eb8e5722702c9c3b7b4717b2d71ae572 Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Mon, 19 Oct 2020 13:21:53 -0400 Subject: [PATCH 3/4] Reworded message --- .../credentials/credentials_list/credentials_list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 456c328c706e0..dd87d3dfac68a 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 @@ -42,7 +42,7 @@ export const CredentialsList: React.FC = () => { } body={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.empty.body', { - defaultMessage: 'Click Create a key to make your first one.', + defaultMessage: 'Click the "Create a key" button to make your first one.', })} /> ); From a6be4b2aaaac3265ddb8792fde8c4f70ba35059f Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Mon, 19 Oct 2020 13:24:41 -0400 Subject: [PATCH 4/4] Return ternary --- .../credentials_list/credentials_list.tsx | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) 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 dd87d3dfac68a..7e754548d7a7d 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 @@ -30,24 +30,6 @@ export const CredentialsList: React.FC = () => { const items = useMemo(() => apiTokens.slice().sort(apiTokenSort), [apiTokens]); - 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 the "Create a key" button to make your first one.', - })} - /> - ); - } - const columns: Array> = [ { name: 'Name', @@ -142,7 +124,21 @@ export const CredentialsList: React.FC = () => { fetchCredentials(current + 1); }; - return ( + return items.length < 1 ? ( + + {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 the "Create a key" button to make your first one.', + })} + /> + ) : (