[Serverless Search] Select language clients in Overview page

x-pack/plugins/serverless_search/common/doc_links.ts

@@ -11,11 +11,13 @@ class ESDocLinks {
   public apiIntro: string = '';
   public beats: string = '';
   public connectors: string = '';
+  public elasticsearchClients: string = '';
   public integrations: string = '';
   public jsApiReference: string = '';
   public jsAdvancedConfig: string = '';
   public jsBasicConfig: string = '';
   public jsClient: string = '';
+  public kibanaRunApiInConsole: string = '';
   public logStash: string = '';
   public metadata: string = '';
   public roleDescriptors: string = '';
@@ -28,11 +30,13 @@ class ESDocLinks {
 
   setDocLinks(newDocLinks: DocLinks) {
     this.apiIntro = newDocLinks.apis.restApis;
+    this.elasticsearchClients = newDocLinks.clients.guide;
     this.integrations = newDocLinks.serverlessSearch.integrations;
     this.jsAdvancedConfig = newDocLinks.clients.jsAdvancedConfig;
     this.jsApiReference = newDocLinks.clients.jsApiReference;
     this.jsBasicConfig = newDocLinks.clients.jsBasicConfig;
     this.jsClient = newDocLinks.clients.jsIntro;
+    this.kibanaRunApiInConsole = newDocLinks.console.guide;
     this.metadata = newDocLinks.security.mappingRoles;
     this.roleDescriptors = newDocLinks.security.mappingRoles;
     this.rubyAdvancedConfig = newDocLinks.clients.rubyAdvancedConfig;

x-pack/plugins/serverless_search/public/application/components/languages/curl.ts

@@ -13,12 +13,12 @@ export const curlDefinition: LanguageDefinition = {
   buildSearchQuery: `TBD`,
   configureClient: `TBD`,
   docLink: docLinks.apiIntro,
-  iconType: 'curl.svg',
+  iconType: 'cURL.svg',
   id: Languages.CURL,
   ingestData: `TBD`,
   installClient: `TBD`,
-  name: i18n.translate('xpack.serverlessSearch.languages.curl', {
-    defaultMessage: 'curl',
+  name: i18n.translate('xpack.serverlessSearch.languages.cURL', {
+    defaultMessage: 'cURL',
   }),
   languageStyling: 'shell',
   testConnection: `TBD`,

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

@@ -27,7 +27,9 @@ import { InstallClientPanel } from './overview_panels/install_client';
 import { OverviewPanel } from './overview_panels/overview_panel';
 import './overview.scss';
 import { IngestData } from './overview_panels/ingest_data';
+import { SelectClientPanel } from './overview_panels/select_client';
 import { ApiKeyPanel } from './api_key/api_key';
+import { LanguageClientPanel } from './overview_panels/language_client_panel';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] =
@@ -82,6 +84,20 @@ export const ElasticsearchOverview = () => {
           </EuiFlexGroup>
         </EuiText>
       </EuiPageTemplate.Section>
+      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+        <SelectClientPanel>
+          {languageDefinitions.map((language, index) => (
+            <EuiFlexItem key={`panelItem.${index}`}>
+              <LanguageClientPanel
+                language={language}
+                setSelectedLanguage={setSelectedLanguage}
+                isSelectedLanguage={selectedLanguage === language}
+              />
+            </EuiFlexItem>
+          ))}
+        </SelectClientPanel>
+      </EuiPageTemplate.Section>
+
       <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
         <InstallClientPanel language={selectedLanguage} setSelectedLanguage={setSelectedLanguage} />
       </EuiPageTemplate.Section>

x-pack/plugins/serverless_search/public/application/components/overview_panels/language_client_panel.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiImage,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
+
+import React from 'react';
+import { PLUGIN_ID } from '../../../../common';
+import { useKibanaServices } from '../../hooks/use_kibana';
+import { LanguageDefinition } from '../languages/types';
+import './select_client.scss';
+interface SelectClientProps {
+  language: LanguageDefinition;
+  setSelectedLanguage: (language: LanguageDefinition) => void;
+  isSelectedLanguage: boolean;
+}
+
+export const LanguageClientPanel: React.FC<SelectClientProps> = ({
+  language,
+  setSelectedLanguage,
+  isSelectedLanguage,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const { http } = useKibanaServices();
+
+  return (
+    <EuiFlexGroup gutterSize="xs" direction="row">
+      <EuiFlexItem>
+        <EuiPanel
+          hasBorder
+          borderRadius="m"
+          className={
+            isSelectedLanguage
+              ? 'serverlessSearchSelectClientPanelSelectedBorder'
+              : 'serverlessSearchSelectClientPanelBorder'
+          }
+          onClick={() => setSelectedLanguage(language)}
+          color={isSelectedLanguage ? 'primary' : 'plain'}
+        >
+          <EuiFlexGroup direction="column" justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiImage
+                alt=""
+                src={http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/${language.iconType}`)}
+                height={euiTheme.size.xl}
+                width={euiTheme.size.xl}
+              />
+              <EuiSpacer size="s" />
+              <EuiText textAlign="center" color={isSelectedLanguage ? 'default' : 'subdued'}>
+                <h5>{language.name}</h5>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.scss

@@ -0,0 +1,6 @@
+.serverlessSearchSelectClientPanelSelectedBorder {
+  border: 1px solid $euiColorPrimary;
+}
+.serverlessSearchSelectClientPanelBorder {
+  border: 1px solid $euiColorLightShade;
+}

x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+import { useKibanaServices } from '../../hooks/use_kibana';
+import { OverviewPanel } from './overview_panel';
+import { docLinks } from '../../../../common/doc_links';
+import './select_client.scss';
+
+export const SelectClientPanel: React.FC = ({ children }) => {
+  const { http } = useKibanaServices();
+
+  return (
+    <OverviewPanel
+      description={
+        <FormattedMessage
+          id="xpack.serverlessSearch.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: (
+              <EuiLink href={http.basePath.prepend(`/app/dev_tools#/console`)}>
+                {i18n.translate('xpack.serverlessSearch.selectClient.description.console.link', {
+                  defaultMessage: 'Console',
+                })}
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+      leftPanelContent={
+        <>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem>
+              <EuiText size="s">
+                <strong>
+                  {i18n.translate('xpack.serverlessSearch.selectClient.heading', {
+                    defaultMessage: 'Choose one',
+                  })}
+                </strong>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup gutterSize="xs" direction="row">
+            {children}
+          </EuiFlexGroup>
+          <EuiSpacer size="l" />
+          <EuiCallOut
+            title={i18n.translate('xpack.serverlessSearch.selectClient.callout.title', {
+              defaultMessage: 'Try it now in Console',
+            })}
+            size="m"
+            iconType="iInCircle"
+          >
+            <p>
+              {i18n.translate('xpack.serverlessSearch.selectClient.callout.description', {
+                defaultMessage:
+                  'With Console, you can get started right away with our REST API’s. No installation required. ',
+              })}
+
+              <span>
+                <EuiLink target="_blank" href={http.basePath.prepend(`/app/dev_tools#/console`)}>
+                  {i18n.translate('xpack.serverlessSearch.selectClient.callout.link', {
+                    defaultMessage: 'Try Console now',
+                  })}
+                </EuiLink>
+              </span>
+            </p>
+          </EuiCallOut>
+        </>
+      }
+      links={[
+        {
+          href: docLinks.elasticsearchClients,
+          label: i18n.translate('xpack.serverlessSearch.selectClient.elasticsearchClientDocLink', {
+            defaultMessage: 'Elasticsearch clients ',
+          }),
+        },
+        {
+          href: docLinks.kibanaRunApiInConsole,
+          label: i18n.translate('xpack.serverlessSearch.selectClient.apiRequestConsoleDocLink', {
+            defaultMessage: 'Run API requests in Console ',
+          }),
+        },
+      ]}
+      title={i18n.translate('xpack.serverlessSearch.selectClient.title', {
+        defaultMessage: 'Select your client',
+      })}
+    />
+  );
+};