diff --git a/packages/kbn-search-api-panels/components/select_client.tsx b/packages/kbn-search-api-panels/components/select_client.tsx index e8a596db21d31..548e9d14b58e8 100644 --- a/packages/kbn-search-api-panels/components/select_client.tsx +++ b/packages/kbn-search-api-panels/components/select_client.tsx @@ -97,26 +97,23 @@ export const SelectClientPanel: FC> = return ( - ), - }} - /> + + + + + + + + } leftPanelContent={isPanelLeft ? panelContent : undefined} rightPanelContent={!isPanelLeft ? panelContent : undefined} diff --git a/packages/kbn-try-in-console/components/try_in_console_button.test.tsx b/packages/kbn-try-in-console/components/try_in_console_button.test.tsx index 8f7ed793fc7a4..fb4cce16d6134 100644 --- a/packages/kbn-try-in-console/components/try_in_console_button.test.tsx +++ b/packages/kbn-try-in-console/components/try_in_console_button.test.tsx @@ -45,7 +45,7 @@ describe('TryInConsoleButton', () => { sharePlugin, content, showIcon, - link, + type, }: Partial) => ({ application: (application ?? mockApplication) as ApplicationStart, sharePlugin: (sharePlugin ?? mockShare) as SharePluginStart | undefined, @@ -53,7 +53,7 @@ describe('TryInConsoleButton', () => { consolePlugin, content, showIcon, - link, + type, }); beforeEach(() => { jest.resetAllMocks(); @@ -83,7 +83,7 @@ describe('TryInConsoleButton', () => { ); }); it('can render as a link', async () => { - const props: Partial = { request: 'GET /_stats', link: true }; + const props: Partial = { request: 'GET /_stats', type: 'link' }; const wrapper = render(); expect(wrapper.getByTestId('tryInConsoleLink')).toBeTruthy(); @@ -142,7 +142,7 @@ describe('TryInConsoleButton', () => { const props: Partial = { request: 'GET /_stats', content: 'Try my console!!', - link: true, + type: 'link', }; const wrapper = render(); diff --git a/packages/kbn-try-in-console/components/try_in_console_button.tsx b/packages/kbn-try-in-console/components/try_in_console_button.tsx index e54b139fe6734..077c87ca66ed0 100644 --- a/packages/kbn-try-in-console/components/try_in_console_button.tsx +++ b/packages/kbn-try-in-console/components/try_in_console_button.tsx @@ -8,7 +8,7 @@ import React from 'react'; -import { EuiButtonEmpty, EuiLink } from '@elastic/eui'; +import { EuiLink, EuiButton, EuiButtonEmpty } from '@elastic/eui'; import type { ApplicationStart } from '@kbn/core-application-browser'; import type { SharePluginStart } from '@kbn/share-plugin/public'; import type { ConsolePluginStart } from '@kbn/console-plugin/public'; @@ -25,16 +25,16 @@ export interface TryInConsoleButtonProps { sharePlugin?: SharePluginStart; content?: string | React.ReactElement; showIcon?: boolean; - link?: boolean; + type?: 'link' | 'button' | 'emptyButton'; } export const TryInConsoleButton = ({ request, application, consolePlugin, sharePlugin, - content, + content = TRY_IN_CONSOLE, showIcon = true, - link = false, + type = 'emptyButton', }: TryInConsoleButtonProps) => { const url = sharePlugin?.url; const canShowDevtools = !!application?.capabilities?.dev_tools?.show; @@ -64,37 +64,42 @@ export const TryInConsoleButton = ({ } }; - if (link) { - return ( - - {content ?? TRY_IN_CONSOLE} - - ); - } - const getAriaLabel = () => { if ( consolePlugin?.openEmbeddedConsole !== undefined && consolePlugin?.isEmbeddedConsoleAvailable?.() ) { - return i18n.translate('tryInConsole.embeddedConsoleButton', { - defaultMessage: 'Try the snipped in the Console - opens in embedded console', + return i18n.translate('tryInConsole.embeddedConsoleButton.ariaLabel', { + defaultMessage: 'Try in Console - opens in embedded console', }); } - return i18n.translate('tryInConsole.inNewTab.button', { - defaultMessage: 'Try the below snippet in Console - opens in a new tab', + return i18n.translate('tryInConsole.inNewTab.button.ariaLabel', { + defaultMessage: 'Try in Console - opens in a new tab', }); }; - return ( - - {content ?? TRY_IN_CONSOLE} - - ); + const commonProps = { + 'data-test-subj': type === 'link' ? 'tryInConsoleLink' : 'tryInConsoleButton', + 'aria-label': getAriaLabel(), + onClick, + }; + const iconType = showIcon ? 'popout' : undefined; + + switch (type) { + case 'link': + return {content}; + case 'button': + return ( + + {content} + + ); + case 'emptyButton': + default: + return ( + + {content} + + ); + } }; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index fb25264d69991..51785dde3f293 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -5831,8 +5831,6 @@ "searchApiPanels.welcomeBanner.selectClient.callout.description": "Avec la console, vous pouvez directement commencer à utiliser nos API REST. Aucune installation n’est requise.", "searchApiPanels.welcomeBanner.selectClient.callout.link": "Essayez la console maintenant", "searchApiPanels.welcomeBanner.selectClient.callout.title": "Lancez-vous dans la console", - "searchApiPanels.welcomeBanner.selectClient.description": "Elastic construit et assure la maintenance des clients dans plusieurs langues populaires et notre communauté a contribué à beaucoup d'autres. Sélectionnez votre client de langage favori ou explorez la {console} pour commencer.", - "searchApiPanels.welcomeBanner.selectClient.description.console.link": "Console", "searchApiPanels.welcomeBanner.selectClient.elasticsearchClientDocLink": "Clients d'Elasticsearch ", "searchApiPanels.welcomeBanner.selectClient.heading": "Choisissez-en un", "searchApiPanels.welcomeBanner.selectClient.title": "Sélectionner votre client", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 4fce19db67ccb..41412d079f1b2 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -5811,8 +5811,6 @@ "searchApiPanels.welcomeBanner.selectClient.callout.description": "コンソールでは、REST APIを使用してすぐに開始できます。インストールは不要です。", "searchApiPanels.welcomeBanner.selectClient.callout.link": "今すぐコンソールを試す", "searchApiPanels.welcomeBanner.selectClient.callout.title": "今すぐコンソールで試す", - "searchApiPanels.welcomeBanner.selectClient.description": "Elasticは複数の一般的な言語でクライアントを構築および保守します。Elasticのコミュニティはさらに多くを提供しています。お気に入りの言語クライアントを選択するか、{console}起動して開始します。", - "searchApiPanels.welcomeBanner.selectClient.description.console.link": "コンソール", "searchApiPanels.welcomeBanner.selectClient.elasticsearchClientDocLink": "Elasticsearchクライアント ", "searchApiPanels.welcomeBanner.selectClient.heading": "1つ選択", "searchApiPanels.welcomeBanner.selectClient.title": "クライアントを選択", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 6247d48ff08de..53aa217398065 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -5840,8 +5840,6 @@ "searchApiPanels.welcomeBanner.selectClient.callout.description": "借助 Console,您可以立即开始使用我们的 REST API。无需进行安装。", "searchApiPanels.welcomeBanner.selectClient.callout.link": "立即试用 Console", "searchApiPanels.welcomeBanner.selectClient.callout.title": "立即在 Console 中试用", - "searchApiPanels.welcomeBanner.selectClient.description": "Elastic 以几种流行语言构建和维护客户端,我们的社区也做出了许多贡献。选择您常用的语言客户端或深入分析 {console} 以开始使用。", - "searchApiPanels.welcomeBanner.selectClient.description.console.link": "控制台", "searchApiPanels.welcomeBanner.selectClient.elasticsearchClientDocLink": "Elasticsearch 客户端 ", "searchApiPanels.welcomeBanner.selectClient.heading": "选择一个", "searchApiPanels.welcomeBanner.selectClient.title": "选择客户端",