From a75c158d01dc60b44d794a20ad5d7ed10910034a Mon Sep 17 00:00:00 2001
From: saarikabhasi <nairsaarika.bhasi@elastic.co>
Date: Wed, 17 May 2023 13:22:09 -0400
Subject: [PATCH] Select language clients

---
 .../serverless_search/common/doc_links.ts     |   4 +
 .../application/components/overview.tsx       |   9 +
 .../overview_panels/select_client.tsx         | 187 ++++++++++++++++++
 3 files changed, 200 insertions(+)
 create mode 100644 x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.tsx

diff --git a/x-pack/plugins/serverless_search/common/doc_links.ts b/x-pack/plugins/serverless_search/common/doc_links.ts
index 32e4670ed06655..28d90d01db97a5 100644
--- a/x-pack/plugins/serverless_search/common/doc_links.ts
+++ b/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 rubyAdvancedConfig: string = '';
   public rubyBasicConfig: string = '';
@@ -26,11 +28,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.rubyAdvancedConfig = newDocLinks.clients.rubyAdvancedConfig;
     this.rubyBasicConfig = newDocLinks.clients.rubyBasicConfig;
     this.rubyExamples = newDocLinks.clients.rubyExamples;
diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.tsx b/x-pack/plugins/serverless_search/public/application/components/overview.tsx
index c039c0d1a0a666..cdf63573a8bbde 100644
--- a/x-pack/plugins/serverless_search/public/application/components/overview.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/overview.tsx
@@ -26,6 +26,7 @@ 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';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] =
@@ -68,6 +69,14 @@ export const ElasticsearchOverview = () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPageTemplate.Section>
+      <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
+        <SelectClientPanel
+          setSelectedLanguage={setSelectedLanguage}
+          languages={languageDefinitions}
+          selectedLanguage={selectedLanguage}
+        />
+      </EuiPageTemplate.Section>
+
       <EuiPageTemplate.Section color="subdued" bottomBorder="extended">
         <InstallClientPanel language={selectedLanguage} setSelectedLanguage={setSelectedLanguage} />
       </EuiPageTemplate.Section>
diff --git a/x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.tsx b/x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.tsx
new file mode 100644
index 00000000000000..e37fe77ba9621a
--- /dev/null
+++ b/x-pack/plugins/serverless_search/public/application/components/overview_panels/select_client.tsx
@@ -0,0 +1,187 @@
+/*
+ * 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,
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiImage,
+  EuiLink,
+  EuiPanel,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { PLUGIN_ID } from '../../../../common';
+
+import { useKibanaServices } from '../../hooks/use_kibana';
+import { LanguageDefinition, Languages } from '../languages/types';
+import { OverviewPanel } from './overview_panel';
+import { docLinks } from '../../../../common/doc_links';
+interface SelectClientProps {
+  setSelectedLanguage: (language: LanguageDefinition) => void;
+  languages: LanguageDefinition[];
+  selectedLanguage: LanguageDefinition;
+}
+export const SelectClientPanel: React.FC<SelectClientProps> = ({
+  setSelectedLanguage,
+  languages,
+  selectedLanguage,
+}) => {
+  const { http } = useKibanaServices();
+  const { euiTheme } = useEuiTheme();
+  const panelItems = languages.map((language) => (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiPanel
+          hasBorder
+          borderRadius="m"
+          onClick={() => setSelectedLanguage(language)}
+          grow={false}
+          paddingSize="m"
+          css={
+            selectedLanguage === language
+              ? css`
+                  border: 1px solid ${euiTheme.colors.primary};
+                `
+              : css`
+                  border: 1px solid ${euiTheme.colors.lightShade};
+                `
+          }
+          color={selectedLanguage === language ? 'primary' : 'plain'}
+        >
+          <EuiFlexGroup direction="column" gutterSize="l" justifyContent="center">
+            <EuiFlexItem>
+              <EuiImage
+                alt=""
+                src={http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/${language.iconType}`)}
+                height="100px"
+                width="128px"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText
+                textAlign="center"
+                color={selectedLanguage === language ? 'default' : 'subdued'}
+              >
+                <h5>
+                  <FormattedMessage
+                    id="xpack.serverlessSearch.selectClient.language.name"
+                    defaultMessage="{languageName}"
+                    values={{
+                      languageName: language.name === Languages.CURL ? 'cURL' : `${language.name}`,
+                    }}
+                  />
+                </h5>
+
+                {/* <h5>
+                  {i18n.translate('xpack.serverlessSearch.selectClient.language.name', {
+                    defaultMessage: language.name === Languages.CURL ? 'cURL' : `${language.name}`,
+                  })}
+                </h5> */}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ));
+
+  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="../app/dev_tools#/console">
+                {i18n.translate('xpack.serverlessSearch.selectClient.description.console.link', {
+                  defaultMessage: 'Console',
+                })}
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+      leftPanelContent={
+        <>
+          <EuiFlexGroup gutterSize="l" direction="column">
+            <EuiFlexItem>
+              <EuiText size="s">
+                <strong>
+                  {i18n.translate('xpack.serverlessSearch.selectClient.heading', {
+                    defaultMessage: 'Choose one',
+                  })}
+                </strong>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGrid gutterSize="l" direction="row" columns={3} alignItems="center">
+                <EuiFlexItem>
+                  <EuiFlexGrid direction="column" gutterSize="s">
+                    <EuiFlexItem>{panelItems[0]}</EuiFlexItem>
+                  </EuiFlexGrid>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGrid direction="column" gutterSize="s">
+                    <EuiFlexItem>{panelItems[1]}</EuiFlexItem>
+                  </EuiFlexGrid>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFlexGrid direction="column" gutterSize="s">
+                    <EuiFlexItem>{panelItems[2]}</EuiFlexItem>
+                  </EuiFlexGrid>
+                </EuiFlexItem>
+              </EuiFlexGrid>
+            </EuiFlexItem>
+
+            <EuiFlexItem>
+              <EuiCallOut title="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="../app/dev_tools#/console">
+                      {i18n.translate('xpack.serverlessSearch.selectClient.callout.link', {
+                        defaultMessage: 'Try Console now',
+                      })}
+                    </EuiLink>
+                  </span>
+                </p>
+              </EuiCallOut>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      }
+      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',
+      })}
+    />
+  );
+};