fix: [ES Serverless home] home page 'Console' button looks like a link (#188518)

Closes: https://github.com/elastic/search-team/issues/7637

## Description

In the 'Select your client' section, 'Console' is a button but it looks
like a link. Screen reader user only hears "Console, button" without
context as to what the user should expect when acting on it. It would be
less confusing if it looked like a button and informed the user that it
will expand the console.

## What was changed?:

1. `TryInConsoleButton` API was slightly updated to support 3 modes of
visualisation: as `link` | `button` | `emptyButton`
2. `ES Serverless home` -> `Console` is now a button

## Screen 

<img width="1219" alt="image"
src="https://github.com/user-attachments/assets/ca1a6be4-2cc5-4a0c-bed9-cf6a1ddeec07">

packages/kbn-search-api-panels/components/select_client.tsx

@@ -97,26 +97,23 @@ export const SelectClientPanel: FC<PropsWithChildren<SelectClientPanelProps>> =
   return (
     <OverviewPanel
       description={
-        <FormattedMessage
-          id="searchApiPanels.welcomeBanner.selectClient.description"
-          defaultMessage="Elastic builds and maintains clients in several popular languages and our community has contributed many more. Select your favorite language client or dive into the {console} to get started."
-          values={{
-            console: (
-              <TryInConsoleButton
-                application={application}
-                consolePlugin={consolePlugin}
-                sharePlugin={sharePlugin}
-                content={i18n.translate(
-                  'searchApiPanels.welcomeBanner.selectClient.description.console.link',
-                  {
-                    defaultMessage: 'Console',
-                  }
-                )}
-                link
-              />
-            ),
-          }}
-        />
+        <EuiFlexGroup direction="column" alignItems="flexStart" justifyContent="flexStart">
+          <EuiFlexItem>
+            <FormattedMessage
+              id="searchApiPanels.welcomeBanner.selectClient.description"
+              defaultMessage="Elastic builds and maintains clients in several popular languages and our community has contributed many more. Select your favorite language client or dive into the console to get started."
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <TryInConsoleButton
+              application={application}
+              consolePlugin={consolePlugin}
+              sharePlugin={sharePlugin}
+              type="button"
+              showIcon={false}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       }
       leftPanelContent={isPanelLeft ? panelContent : undefined}
       rightPanelContent={!isPanelLeft ? panelContent : undefined}

packages/kbn-try-in-console/components/try_in_console_button.test.tsx

@@ -45,7 +45,7 @@ describe('TryInConsoleButton', () => {
     sharePlugin,
     content,
     showIcon,
-    link,
+    type,
   }: Partial<TryInConsoleButtonProps>) => ({
     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<TryInConsoleButtonProps> = { request: 'GET /_stats', link: true };
+    const props: Partial<TryInConsoleButtonProps> = { request: 'GET /_stats', type: 'link' };
     const wrapper = render(<TryInConsoleButton {...defaultProps(props)} />);
 
     expect(wrapper.getByTestId('tryInConsoleLink')).toBeTruthy();
@@ -142,7 +142,7 @@ describe('TryInConsoleButton', () => {
     const props: Partial<TryInConsoleButtonProps> = {
       request: 'GET /_stats',
       content: 'Try my console!!',
-      link: true,
+      type: 'link',
     };
     const wrapper = render(<TryInConsoleButton {...defaultProps(props)} />);
 

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 (
-      <EuiLink data-test-subj="tryInConsoleLink" onClick={onClick}>
-        {content ?? TRY_IN_CONSOLE}
-      </EuiLink>
-    );
-  }
-
   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 (
-    <EuiButtonEmpty
-      data-test-subj="tryInConsoleButton"
-      onClick={onClick}
-      iconType={showIcon ? 'popout' : undefined}
-      size="s"
-      aria-label={getAriaLabel()}
-    >
-      {content ?? TRY_IN_CONSOLE}
-    </EuiButtonEmpty>
-  );
+  const commonProps = {
+    'data-test-subj': type === 'link' ? 'tryInConsoleLink' : 'tryInConsoleButton',
+    'aria-label': getAriaLabel(),
+    onClick,
+  };
+  const iconType = showIcon ? 'popout' : undefined;
+
+  switch (type) {
+    case 'link':
+      return <EuiLink {...commonProps}>{content}</EuiLink>;
+    case 'button':
+      return (
+        <EuiButton color="primary" iconType={iconType} size="s" {...commonProps}>
+          {content}
+        </EuiButton>
+      );
+    case 'emptyButton':
+    default:
+      return (
+        <EuiButtonEmpty iconType={iconType} size="s" {...commonProps}>
+          {content}
+        </EuiButtonEmpty>
+      );
+  }
 };

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",

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": "クライアントを選択",

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": "选择客户端",