diff --git a/x-pack/plugins/search_indices/public/components/start/api_key_callout.tsx b/x-pack/plugins/search_indices/public/components/start/api_key_callout.tsx new file mode 100644 index 0000000000000..65363e9f73225 --- /dev/null +++ b/x-pack/plugins/search_indices/public/components/start/api_key_callout.tsx @@ -0,0 +1,62 @@ +/* + * 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 { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +import { ApiKeyForm } from '@kbn/search-api-keys-components'; + +interface APIKeyCalloutProps { + apiKey: string | null; +} + +export const APIKeyCallout = ({ apiKey }: APIKeyCalloutProps) => { + const title = apiKey + ? i18n.translate('xpack.searchIndices.startPage.codeView.apiKeyTitle', { + defaultMessage: 'Copy your API key', + }) + : i18n.translate('xpack.searchIndices.startPage.codeView.explicitGenerate.apiKeyTitle', { + defaultMessage: 'Create an API key', + }); + + const description = apiKey + ? i18n.translate('xpack.searchIndices.startPage.codeView.apiKeyDescription', { + defaultMessage: + 'Make sure you keep it somewhere safe. You won’t be able to retrieve it later.', + }) + : i18n.translate('xpack.searchIndices.startPage.codeView.explicitGenerate.apiKeyDescription', { + defaultMessage: 'Create an API key to connect to Elasticsearch.', + }); + + const dataTestSubj = apiKey ? 'apiKeyHasBeenGenerated' : 'apiKeyHasNotBeenGenerated'; + + return ( + + + + +
{title}
+ + + + +

{description}

+ + + + + + + ); +}; diff --git a/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx b/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx index 401173fecc0da..0c18610f44d9e 100644 --- a/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx +++ b/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx @@ -5,11 +5,11 @@ * 2.0. */ import React, { useCallback, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TryInConsoleButton } from '@kbn/try-in-console'; -import { ApiKeyForm, useSearchApiKey } from '@kbn/search-api-keys-components'; +import { useSearchApiKey } from '@kbn/search-api-keys-components'; import { AnalyticsEvents } from '../../analytics/constants'; import { Languages, AvailableLanguages, LanguageOptions } from '../../code_examples'; @@ -22,15 +22,18 @@ import { LanguageSelector } from '../shared/language_selector'; import { CreateIndexFormState } from './types'; import { useStartPageCodingExamples } from './hooks/use_coding_examples'; +import { APIKeyCallout } from './api_key_callout'; export interface CreateIndexCodeViewProps { createIndexForm: CreateIndexFormState; changeCodingLanguage: (language: AvailableLanguages) => void; + canCreateApiKey?: boolean; } export const CreateIndexCodeView = ({ createIndexForm, changeCodingLanguage, + canCreateApiKey, }: CreateIndexCodeViewProps) => { const { application, share, console: consolePlugin } = useKibana().services; const usageTracker = useUsageTracker(); @@ -63,33 +66,11 @@ export const CreateIndexCodeView = ({ return ( - - - - - -
- {i18n.translate('xpack.searchIndices.startPage.codeView.apiKeyTitle', { - defaultMessage: 'Copy your API key', - })} -
- - - - -

- {i18n.translate('xpack.searchIndices.startPage.codeView.apiKeyDescription', { - defaultMessage: - 'Make sure you keep it somewhere safe. You won’t be able to retrieve it later.', - })} -

- - - - - - - + {canCreateApiKey && ( + + + + )} )} diff --git a/x-pack/test_serverless/functional/page_objects/svl_api_keys.ts b/x-pack/test_serverless/functional/page_objects/svl_api_keys.ts index 2dc65cc97cd3e..217a17263b1f8 100644 --- a/x-pack/test_serverless/functional/page_objects/svl_api_keys.ts +++ b/x-pack/test_serverless/functional/page_objects/svl_api_keys.ts @@ -101,8 +101,8 @@ export function SvlApiKeysProvider({ getService, getPageObjects }: FtrProviderCo await pageObjects.apiKeys.clickSubmitButtonOnApiKeyFlyout(); }, - async expectNoPermissionsMessage() { - await testSubjects.existOrFail('apiKeyFormNoUserPrivileges'); + async expectAPIKeyNotAvailable() { + await testSubjects.missingOrFail('apiKeyFormAPIKey'); }, }; } diff --git a/x-pack/test_serverless/functional/page_objects/svl_search_elasticsearch_start_page.ts b/x-pack/test_serverless/functional/page_objects/svl_search_elasticsearch_start_page.ts index 4c6822c420fdb..0e3bc4b82a298 100644 --- a/x-pack/test_serverless/functional/page_objects/svl_search_elasticsearch_start_page.ts +++ b/x-pack/test_serverless/functional/page_objects/svl_search_elasticsearch_start_page.ts @@ -96,5 +96,18 @@ export function SvlSearchElasticsearchStartPageProvider({ getService }: FtrProvi expect(await testSubjects.getVisibleText('createIndex-code-block')).to.contain(apiKey); }); }, + + async expectAPIKeyPreGenerated() { + await testSubjects.existOrFail('apiKeyHasBeenGenerated'); + }, + + async expectAPIKeyNotPreGenerated() { + await testSubjects.existOrFail('apiKeyHasNotBeenGenerated'); + }, + + async expectAPIKeyFormNotAvailable() { + await testSubjects.missingOrFail('apiKeyHasNotBeenGenerated'); + await testSubjects.missingOrFail('apiKeyHasBeenGenerated'); + }, }; } diff --git a/x-pack/test_serverless/functional/test_suites/search/elasticsearch_start.ts b/x-pack/test_serverless/functional/test_suites/search/elasticsearch_start.ts index 8c98dcabdedc1..9a4b72cf5126f 100644 --- a/x-pack/test_serverless/functional/test_suites/search/elasticsearch_start.ts +++ b/x-pack/test_serverless/functional/test_suites/search/elasticsearch_start.ts @@ -100,6 +100,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await browser.refresh(); await pageObjects.svlSearchElasticsearchStartPage.clickCodeViewButton(); await pageObjects.svlApiKeys.expectAPIKeyAvailable(); + await pageObjects.svlSearchElasticsearchStartPage.expectAPIKeyPreGenerated(); const refreshBrowserApiKeyUI = await pageObjects.svlApiKeys.getAPIKeyFromUI(); expect(refreshBrowserApiKeyUI).to.eql(apiKeyUI); @@ -174,7 +175,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { it('should not create an API key if the user only has viewer permissions', async () => { await pageObjects.svlSearchElasticsearchStartPage.expectToBeOnStartPage(); await pageObjects.svlSearchElasticsearchStartPage.clickCodeViewButton(); - await pageObjects.svlApiKeys.expectNoPermissionsMessage(); + await pageObjects.svlSearchElasticsearchStartPage.expectAPIKeyFormNotAvailable(); const apiKey = await pageObjects.svlApiKeys.getAPIKeyFromSessionStorage(); expect(apiKey).to.be(null); });