Add implementation of the Elasticsearch JavaScript client integration

Co-authored-by: Cristina Amico <criamico@users.noreply.github.com>

src/plugins/custom_integrations/common/language_integrations.ts

@@ -37,9 +37,9 @@ export const languageIntegrations: LanguageIntegration[] = [
     description: i18n.translate('customIntegrations.languageclients.JavascriptDescription', {
       defaultMessage: 'Index data to Elasticsearch with the JavaScript client.',
     }),
-    docUrlTemplate: `${ELASTICSEARCH_CLIENT_URL}/javascript-api/{branch}/introduction.html`,
+    docUrlTemplate: '',
     integrationsAppUrl: `/app/integrations/language_clients/javascript/overview`,
-    exportLanguageUiComponent: false,
+    exportLanguageUiComponent: true,
   },
   {
     id: 'ruby',

src/plugins/custom_integrations/public/components/fleet_integration/elasticsearch_js/elasticsearch_js_readme.tsx

@@ -0,0 +1,204 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState } from 'react';
+
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+import cuid from 'cuid';
+
+import {
+  EuiButton,
+  EuiCode,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageSection,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiPanel,
+  EuiImage,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import icon from '../../../assets/language_clients/nodejs.svg';
+
+const CenterColumn = styled(EuiFlexItem)`
+  max-width: 740px;
+`;
+
+const FixedHeader = styled.div`
+  width: 100%;
+  height: 196px;
+  border-bottom: 1px solid ${euiThemeVars.euiColorLightShade};
+`;
+
+const IconPanel = styled(EuiPanel)`
+  padding: ${(props) => props.theme.eui.euiSizeXL};
+  width: ${(props) =>
+    parseFloat(props.theme.eui.euiSize) * 6 + parseFloat(props.theme.eui.euiSizeXL) * 2}px;
+  svg,
+  img {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    width: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+  }
+  .euiFlexItem {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    justify-content: center;
+  }
+`;
+
+const TopFlexGroup = styled(EuiFlexGroup)`
+  max-width: 1150px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: calc(${euiThemeVars.euiSizeXL} * 2) ${euiThemeVars.euiSizeM} 0 ${euiThemeVars.euiSizeM};
+`;
+
+export const ElasticsearchJsClientReadme = () => {
+  const [apiKey, setApiKey] = useState<string | null>(null);
+
+  return (
+    <>
+      <FixedHeader>
+        <TopFlexGroup alignItems="center" justifyContent="flexStart">
+          <EuiFlexItem grow={false}>
+            <IconPanel>
+              <EuiImage size="fullWidth" src={icon} alt="icon" />
+            </IconPanel>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>
+                <FormattedMessage
+                  id="customIntegrations.languageClients.JavascriptElasticsearch.readme.title"
+                  defaultMessage="Elasticsearch JavaScript Client"
+                />
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </TopFlexGroup>
+      </FixedHeader>
+
+      <EuiFlexGroup alignItems="flexStart" justifyContent="center">
+        <CenterColumn>
+          <EuiPage paddingSize="m">
+            <EuiPageBody panelled>
+              <EuiPageSection>
+                <EuiPageHeader
+                  description={
+                    <EuiText>
+                      <FormattedMessage
+                        id="customIntegrations.languageClients.JavascriptElasticsearch.readme.intro"
+                        defaultMessage="Getting started with the Elasticsearch JavaScript Client requires a few steps."
+                      />
+                    </EuiText>
+                  }
+                />
+              </EuiPageSection>
+
+              <EuiPageSection>
+                <EuiTitle>
+                  <h2>
+                    <FormattedMessage
+                      id="customIntegrations.languageClients.JavascriptElasticsearch.readme.install"
+                      defaultMessage="Install the Elasticsearch JavaScript Client"
+                    />
+                  </h2>
+                </EuiTitle>
+
+                <EuiSpacer size="s" />
+
+                <EuiCodeBlock language="shell" isCopyable>
+                  {`# Grab the Elasticsearch JavaScript client from NPM and install it in your project \n`}
+                  {`$ npm install @elastic/elasticsearch@<major>`}
+                </EuiCodeBlock>
+              </EuiPageSection>
+
+              <EuiPageSection>
+                <EuiTitle>
+                  <h2>
+                    <FormattedMessage
+                      id="customIntegrations.languageClients.JavascriptElasticsearch.readme.createApiKey"
+                      defaultMessage="Create an API key"
+                    />
+                  </h2>
+                </EuiTitle>
+
+                <EuiText>
+                  <FormattedMessage
+                    id="customIntegrations.languageClients.JavascriptElasticsearch.readme.apiKey"
+                    defaultMessage="Use the button bellow to generate an API key. You'll need this set up your client in the next step."
+                  />
+                </EuiText>
+
+                <EuiSpacer size="m" />
+
+                <EuiFlexGroup alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton onClick={() => setApiKey(cuid())} disabled={!!apiKey}>
+                      Generate API key
+                    </EuiButton>
+                  </EuiFlexItem>
+
+                  {apiKey && (
+                    <EuiFlexItem grow={false}>
+                      <EuiCodeBlock paddingSize="s" isCopyable className="eui-displayInline">
+                        {apiKey}
+                      </EuiCodeBlock>
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGroup>
+              </EuiPageSection>
+
+              <EuiPageSection>
+                <EuiTitle>
+                  <h2>
+                    <FormattedMessage
+                      id="customIntegrations.languageClients.JavascriptElasticsearch.readme.configure"
+                      defaultMessage="Configure the Elasticsearch JavaScript Client"
+                    />
+                  </h2>
+                </EuiTitle>
+
+                <EuiText>
+                  <FormattedMessage
+                    id="customIntegrations.languageClients.JavascriptElasticsearch.readme.configureText"
+                    defaultMessage="Create an {filename} file in the root of your project, and add the following options."
+                    values={{
+                      filename: <EuiCode>index.js</EuiCode>,
+                    }}
+                  />
+                </EuiText>
+
+                <EuiSpacer size="s" />
+
+                <EuiCodeBlock isCopyable language="javascript">
+                  {`
+// Import the client
+const { Client } = require('@elastic/elasticsearch');
+
+// Instantiate the client with an API key
+const client = new Client({
+  auth: { apiKey: '${apiKey || 'YOUR_API_KEY'}' }
+})
+
+          `}
+                </EuiCodeBlock>
+              </EuiPageSection>
+            </EuiPageBody>
+          </EuiPage>
+        </CenterColumn>
+      </EuiFlexGroup>
+    </>
+  );
+};

src/plugins/custom_integrations/public/components/fleet_integration/sample/sample_client_readme.tsx

@@ -81,7 +81,7 @@ export const SampleClientReadme = () => {
               <h1>
                 <FormattedMessage
                   id="customIntegrations.languageClients.sample.readme.title"
-                  defaultMessage="ElasticSearch Sample Client"
+                  defaultMessage="Elasticsearch Sample Client"
                 />
               </h1>
             </EuiTitle>

src/plugins/custom_integrations/public/plugin.tsx

@@ -23,6 +23,7 @@ import {
 import { CustomIntegrationsServicesProvider } from './services';
 import { servicesFactory } from './services/kibana';
 import { SampleClientReadme } from './components/fleet_integration/sample/sample_client_readme';
+import { ElasticsearchJsClientReadme } from './components/fleet_integration/elasticsearch_js/elasticsearch_js_readme';
 
 export class CustomIntegrationsPlugin
   implements Plugin<CustomIntegrationsSetup, CustomIntegrationsStart>
@@ -46,7 +47,10 @@ export class CustomIntegrationsPlugin
   ): CustomIntegrationsStart {
     const services = servicesFactory({ coreStart, startPlugins });
 
-    const languageClientsUiComponents = { sample: SampleClientReadme };
+    const languageClientsUiComponents = {
+      sample: SampleClientReadme,
+      javascript: ElasticsearchJsClientReadme,
+    };
 
     const ContextProvider: React.FC = ({ children }) => (
       <CustomIntegrationsServicesProvider {...services}>

src/plugins/custom_integrations/server/plugin.test.ts

@@ -37,8 +37,7 @@ describe('CustomIntegrationsPlugin', () => {
           description: 'Index data to Elasticsearch with the JavaScript client.',
           type: 'ui_link',
           shipper: 'language_clients',
-          uiInternalPath:
-            'https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/branch/introduction.html',
+          uiInternalPath: '/app/integrations/language_clients/javascript/overview',
           isBeta: false,
           icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
@@ -150,7 +149,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiExternalLink:
             'https://serverlessrepo.aws.amazon.com/applications/eu-central-1/267093732750/elastic-serverless-forwarder',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['aws', 'custom'],
         },
       ]);