[Serverless Search] getting started: update connection details section (#172320)

## Summary

Updating the cloud details section per the updated design:

<img width="1428" alt="image"
src="51b11320-7abf-466b-a05c-10a72ebec4f1">

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Liam Thompson <32779855+leemthompo@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/serverless_search/public/application/components/overview.tsx

@@ -9,17 +9,13 @@ import {
   EuiAvatar,
   EuiButtonEmpty,
   EuiCard,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiPageTemplate,
   EuiPanel,
-  EuiSpacer,
   EuiText,
-  EuiThemeProvider,
-  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -57,6 +53,7 @@ import { ConnectorsCallout } from './connectors_callout';
 import { ConnectorIngestionPanel } from './connectors_ingestion';
 import { PipelineButtonOverview } from './pipeline_button_overview';
 import { PipelinePanel } from './pipeline_panel';
+import { CloudDetailsPanel } from './overview/cloud_details';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] = useState<LanguageDefinition>(javaDefinition);
@@ -152,63 +149,7 @@ export const ElasticsearchOverview = () => {
         bottomBorder="extended"
         data-test-subj="cloud-details-section"
       >
-        <OverviewPanel
-          description={i18n.translate('xpack.serverlessSearch.cloudIdDetails.description', {
-            defaultMessage:
-              "You'll need your Cloud ID and Elasticsearch endpoint to identify and connect to your project.",
-          })}
-          leftPanelContent={
-            <EuiFlexGroup direction="column" gutterSize="xl">
-              <EuiFlexItem>
-                <EuiTitle size="xxxs">
-                  <h6>
-                    {i18n.translate('xpack.serverlessSearch.cloudIdDetails.id.title', {
-                      defaultMessage: 'Cloud ID',
-                    })}
-                  </h6>
-                </EuiTitle>
-                <EuiSpacer size="xs" />
-                <EuiThemeProvider colorMode="dark">
-                  <EuiPanel paddingSize="xs">
-                    <EuiCodeBlock
-                      isCopyable
-                      fontSize="m"
-                      className="serverlessSearchCloudDetailsCopyPanel"
-                    >
-                      {cloud.cloudId}
-                    </EuiCodeBlock>
-                  </EuiPanel>
-                </EuiThemeProvider>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiTitle size="xxxs">
-                  <h6>
-                    {i18n.translate('xpack.serverlessSearch.cloudIdDetails.url.title', {
-                      defaultMessage: 'Elasticsearch Endpoint',
-                    })}
-                  </h6>
-                </EuiTitle>
-                <EuiSpacer size="xs" />
-                <EuiThemeProvider colorMode="dark">
-                  <EuiPanel paddingSize="xs">
-                    <EuiCodeBlock
-                      isCopyable
-                      transparentBackground
-                      fontSize="m"
-                      className="serverlessSearchCloudDetailsCopyPanel"
-                    >
-                      {cloud.elasticsearchUrl}
-                    </EuiCodeBlock>
-                  </EuiPanel>
-                </EuiThemeProvider>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          }
-          links={[]}
-          title={i18n.translate('xpack.serverlessSearch.cloudIdDetails.title', {
-            defaultMessage: 'Copy your connection details',
-          })}
-        />
+        <CloudDetailsPanel cloudId={cloud.cloudId} elasticsearchUrl={cloud.elasticsearchUrl} />
       </EuiPageTemplate.Section>
       <EuiPageTemplate.Section
         color="subdued"

x-pack/plugins/serverless_search/public/application/components/overview/cloud_details.tsx

@@ -0,0 +1,127 @@
+/*
+ * 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, { useState } from 'react';
+import {
+  EuiCheckableCard,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiThemeProvider,
+  EuiTitle,
+  EuiBadge,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { OverviewPanel } from '@kbn/search-api-panels';
+
+export interface CloudDetailsPanelProps {
+  cloudId?: string;
+  elasticsearchUrl?: string;
+}
+
+enum CloudDetail {
+  ElasticsearchEndpoint = 'es_url',
+  CloudId = 'cloud_id',
+}
+
+export const CloudDetailsPanel = ({ cloudId, elasticsearchUrl }: CloudDetailsPanelProps) => {
+  const [selectedDetail, setSelectedCloudDetail] = useState<CloudDetail>(
+    CloudDetail.ElasticsearchEndpoint
+  );
+  return (
+    <OverviewPanel
+      description={i18n.translate('xpack.serverlessSearch.cloudIdDetails.description', {
+        defaultMessage: 'Get ready to ingest and query your data by choosing a connection option:',
+      })}
+      leftPanelContent={
+        <EuiThemeProvider colorMode="dark">
+          <EuiPanel paddingSize="xs">
+            <EuiCodeBlock isCopyable fontSize="m" className="serverlessSearchCloudDetailsCopyPanel">
+              {selectedDetail === CloudDetail.CloudId && cloudId}
+              {selectedDetail === CloudDetail.ElasticsearchEndpoint && elasticsearchUrl}
+            </EuiCodeBlock>
+          </EuiPanel>
+        </EuiThemeProvider>
+      }
+      links={[]}
+      title={i18n.translate('xpack.serverlessSearch.cloudIdDetails.title', {
+        defaultMessage: 'Copy your connection details',
+      })}
+    >
+      <EuiSpacer size="l" />
+      <EuiCheckableCard
+        id={CloudDetail.ElasticsearchEndpoint}
+        name={CloudDetail.ElasticsearchEndpoint}
+        label={
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="xxs">
+                <h5>
+                  <FormattedMessage
+                    id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.title"
+                    defaultMessage="Elasticsearch endpoint"
+                  />
+                </h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiBadge color="success">
+                  <FormattedMessage
+                    id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.recommendedBadge"
+                    defaultMessage="Recommended"
+                  />
+                </EuiBadge>
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        checked={selectedDetail === CloudDetail.ElasticsearchEndpoint}
+        onChange={() => setSelectedCloudDetail(CloudDetail.ElasticsearchEndpoint)}
+      >
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.description"
+              defaultMessage="The most common method for establishing an Elasticsearch connection."
+            />
+          </p>
+        </EuiText>
+      </EuiCheckableCard>
+      <EuiSpacer />
+      <EuiCheckableCard
+        id={CloudDetail.CloudId}
+        name={CloudDetail.CloudId}
+        label={
+          <EuiTitle size="xxs">
+            <h5>
+              <FormattedMessage
+                id="xpack.serverlessSearch.cloudIdDetails.cloudId.title"
+                defaultMessage="Cloud ID"
+              />
+            </h5>
+          </EuiTitle>
+        }
+        checked={selectedDetail === CloudDetail.CloudId}
+        onChange={() => setSelectedCloudDetail(CloudDetail.CloudId)}
+      >
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.serverlessSearch.cloudIdDetails.cloudId.description"
+              defaultMessage="Specific client libraries and connectors can use this unique identifier specific to Elastic Cloud."
+            />
+          </p>
+        </EuiText>
+      </EuiCheckableCard>
+    </OverviewPanel>
+  );
+};

x-pack/plugins/translations/translations/fr-FR.json

@@ -36905,9 +36905,7 @@
     "xpack.serverlessSearch.back": "Retour",
     "xpack.serverlessSearch.cancel": "Annuler",
     "xpack.serverlessSearch.cloudIdDetails.description": "Il vous faut l'identifiant et l'URL du cloud pour identifier votre projet et vous y connecter.",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "Identifiant du cloud",
     "xpack.serverlessSearch.cloudIdDetails.title": "Copiez vos informations de connexion",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Point de terminaison Elasticsearch",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "Configuration de base",
     "xpack.serverlessSearch.configureClient.description": "Initialiser votre client avec votre clé d’API et votre identifiant de cloud uniques",
     "xpack.serverlessSearch.configureClient.title": "Configurer votre client",

x-pack/plugins/translations/translations/ja-JP.json

@@ -36904,9 +36904,7 @@
     "xpack.serverlessSearch.back": "戻る",
     "xpack.serverlessSearch.cancel": "キャンセル",
     "xpack.serverlessSearch.cloudIdDetails.description": "プロジェクトを識別して、それに接続するには、クラウドIDとクラウドURLが必要です。",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "クラウドID",
     "xpack.serverlessSearch.cloudIdDetails.title": "接続詳細情報をコピー",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Elasticsearchエンドポイント",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "基本構成",
     "xpack.serverlessSearch.configureClient.description": "一意のAPIキーとCloud IDでクライアントを初期化",
     "xpack.serverlessSearch.configureClient.title": "クライアントを構成",

x-pack/plugins/translations/translations/zh-CN.json

@@ -36899,9 +36899,7 @@
     "xpack.serverlessSearch.back": "返回",
     "xpack.serverlessSearch.cancel": "取消",
     "xpack.serverlessSearch.cloudIdDetails.description": "您需要云 ID 和云 URL 以标识并连接到您的项目。",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "云 ID",
     "xpack.serverlessSearch.cloudIdDetails.title": "复制连接详情",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Elasticsearch 终端",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "基本配置",
     "xpack.serverlessSearch.configureClient.description": "使用唯一 API 密钥和云 ID 对客户端进行初始化",
     "xpack.serverlessSearch.configureClient.title": "配置客户端",