[Search][Onboarding] Start page code view (elastic#192642)

## Summary

Introduces the elasticsearch start page code view.

### Screenshots

![image](https://github.com/user-attachments/assets/429404f6-ac58-415d-ad5b-a91a73e9e043)

![image](https://github.com/user-attachments/assets/2ab65939-8da1-4e8c-a843-b0eeddad9bcb)


### 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)
- [x] [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
- [x] [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/))
- [x] 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))

---------

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

x-pack/plugins/search_indices/public/analytics/constants.ts

@@ -7,5 +7,7 @@
 
 export enum AnalyticsEvents {
   startPageOpened = 'start_page_opened',
+  startPageShowCodeClick = 'start_page_show_code',
+  startPageShowCreateIndexUIClick = 'start_page_show_create_index_ui',
   startCreateIndexClick = 'start_create_index',
 }

x-pack/plugins/search_indices/public/code_examples/create_index.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { CreateIndexCodeExamples } from '../types';
+
+import { CurlExamples } from './curl';
+import { JavascriptServerlessExamples } from './javascript';
+import { PythonServerlessExamples } from './python';
+import { ConsoleExamples } from './sense';
+
+export const DefaultServerlessCodeExamples: CreateIndexCodeExamples = {
+  sense: ConsoleExamples.default,
+  curl: CurlExamples.default,
+  python: PythonServerlessExamples.default,
+  javascript: JavascriptServerlessExamples.default,
+};
+
+export const DenseVectorSeverlessCodeExamples: CreateIndexCodeExamples = {
+  sense: ConsoleExamples.dense_vector,
+  curl: CurlExamples.dense_vector,
+  python: PythonServerlessExamples.dense_vector,
+  javascript: JavascriptServerlessExamples.dense_vector,
+};

x-pack/plugins/search_indices/public/code_examples/curl.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
+import { CodeLanguage, CreateIndexLanguageExamples } from '../types';
+
+export const CURL_INFO: CodeLanguage = {
+  id: 'curl',
+  title: i18n.translate('xpack.searchIndices.codingLanguages.curl', { defaultMessage: 'cURL' }),
+  icon: 'curl.svg',
+  codeBlockLanguage: 'shell',
+};
+
+export const CurlExamples: CreateIndexLanguageExamples = {
+  default: {
+    createIndex: ({ elasticsearchURL, apiKey, indexName }) => `curl PUT '${elasticsearchURL}/${
+      indexName ?? INDEX_PLACEHOLDER
+    }' \
+--header 'Authorization: ApiKey ${apiKey ?? API_KEY_PLACEHOLDER}' \
+--header 'Content-Type: application/json'`,
+  },
+  dense_vector: {
+    createIndex: ({ elasticsearchURL, apiKey, indexName }) => `curl PUT '${elasticsearchURL}/${
+      indexName ?? INDEX_PLACEHOLDER
+    }' \
+--header 'Authorization: ApiKey ${apiKey ?? API_KEY_PLACEHOLDER}' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+  "mappings": {
+    "properties":{
+      "vector":{
+        "type": "dense_vector",
+        "dims": 3
+      },
+      "text":{
+        "type":"text"
+      }
+    }
+  }
+}'`,
+  },
+};

x-pack/plugins/search_indices/public/code_examples/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { CURL_INFO } from './curl';
+import { JAVASCRIPT_INFO } from './javascript';
+import { PYTHON_INFO } from './python';
+
+export const Languages = {
+  curl: CURL_INFO,
+  python: PYTHON_INFO,
+  javascript: JAVASCRIPT_INFO,
+};
+
+export const LanguageOptions = Object.values(Languages);
+
+export type AvailableLanguages = keyof typeof Languages;

x-pack/plugins/search_indices/public/code_examples/javascript.ts

@@ -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 { i18n } from '@kbn/i18n';
+import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
+import { CodeLanguage, CreateIndexLanguageExamples } from '../types';
+
+export const JAVASCRIPT_INFO: CodeLanguage = {
+  id: 'javascript',
+  title: i18n.translate('xpack.searchIndices.codingLanguages.javascript', {
+    defaultMessage: 'Javascript',
+  }),
+  icon: 'javascript.svg',
+  codeBlockLanguage: 'javascript',
+};
+
+const SERVERLESS_INSTALL_CMD = `npm install @elastic/elasticsearch-serverless`;
+
+export const JavascriptServerlessExamples: CreateIndexLanguageExamples = {
+  default: {
+    installCommand: SERVERLESS_INSTALL_CMD,
+    createIndex: ({
+      elasticsearchURL,
+      apiKey,
+      indexName,
+    }) => `import { Client } from "@elastic/elasticsearch-serverless"
+
+const client = new Client({
+  node: '${elasticsearchURL}',
+  auth: {
+    apiKey: "${apiKey ?? API_KEY_PLACEHOLDER}"
+  }
+});
+
+client.indices.create({
+  index: "${indexName ?? INDEX_PLACEHOLDER}",
+});`,
+  },
+  dense_vector: {
+    installCommand: SERVERLESS_INSTALL_CMD,
+    createIndex: ({
+      elasticsearchURL,
+      apiKey,
+      indexName,
+    }) => `import { Client } from "@elastic/elasticsearch-serverless"
+
+const client = new Client({
+  node: '${elasticsearchURL}',
+  auth: {
+    apiKey: "${apiKey ?? API_KEY_PLACEHOLDER}"
+  }
+});
+
+client.indices.create({
+  index: "${indexName ?? INDEX_PLACEHOLDER}",
+  mappings: {
+    properties: {
+      vector: { type: "dense_vector", dims: 3 },
+      text: { type: "text"}
+    },
+  },
+});`,
+  },
+};

x-pack/plugins/search_indices/public/code_examples/python.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
+import { CodeLanguage, CodeSnippetParameters, CreateIndexLanguageExamples } from '../types';
+
+export const PYTHON_INFO: CodeLanguage = {
+  id: 'python',
+  title: i18n.translate('xpack.searchIndices.codingLanguages.python', { defaultMessage: 'Python' }),
+  icon: 'python.svg',
+  codeBlockLanguage: 'python',
+};
+
+const SERVERLESS_PYTHON_INSTALL_CMD = 'pip install elasticsearch-serverless';
+
+export const PythonServerlessExamples: CreateIndexLanguageExamples = {
+  default: {
+    installCommand: SERVERLESS_PYTHON_INSTALL_CMD,
+    createIndex: ({
+      elasticsearchURL,
+      apiKey,
+      indexName,
+    }: CodeSnippetParameters) => `from elasticsearch-serverless import Elasticsearch
+
+client = Elasticsearch(
+  "${elasticsearchURL}",
+  api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+)
+
+client.indices.create(
+  index="${indexName ?? INDEX_PLACEHOLDER}"
+)`,
+  },
+  dense_vector: {
+    installCommand: SERVERLESS_PYTHON_INSTALL_CMD,
+    createIndex: ({
+      elasticsearchURL,
+      apiKey,
+      indexName,
+    }: CodeSnippetParameters) => `from elasticsearch-serverless import Elasticsearch
+
+client = Elasticsearch(
+  "${elasticsearchURL}",
+  api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+)
+
+client.indices.create(
+  index="${indexName ?? INDEX_PLACEHOLDER}"
+  mappings={
+      "properties": {
+          "vector": {"type": "dense_vector", "dims": 3 },
+          "text": {"type": "text"}
+      }
+  }
+)`,
+  },
+};

x-pack/plugins/search_indices/public/code_examples/sense.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { INDEX_PLACEHOLDER } from '../constants';
+import { CreateIndexLanguageExamples } from '../types';
+
+export const ConsoleExamples: CreateIndexLanguageExamples = {
+  default: {
+    createIndex: ({ indexName }) => `PUT /${indexName ?? INDEX_PLACEHOLDER}`,
+  },
+  dense_vector: {
+    createIndex: ({ indexName }) => `PUT /${indexName ?? INDEX_PLACEHOLDER}
+{
+  "mappings": {
+    "properties":{
+      "vector":{
+        "type": "dense_vector",
+        "dims": 3
+      },
+      "text":{
+        "type":"text"
+      }
+    }
+  }
+}`,
+  },
+};

x-pack/plugins/search_indices/public/components/shared/language_selector.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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, { useMemo } from 'react';
+import { EuiIcon, EuiSuperSelect, EuiText, EuiFlexGroup } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { useAssetBasePath } from '../../hooks/use_asset_base_path';
+import { AvailableLanguages } from '../../code_examples';
+import { CodeLanguage } from '../../types';
+
+export interface LanguageSelectorProps {
+  selectedLanguage: AvailableLanguages;
+  options: CodeLanguage[];
+  onSelectLanguage: (value: AvailableLanguages) => void;
+}
+
+export const LanguageSelector = ({
+  selectedLanguage,
+  options,
+  onSelectLanguage,
+}: LanguageSelectorProps) => {
+  const assetBasePath = useAssetBasePath();
+  const languageOptions = useMemo(
+    () =>
+      options.map((lang) => ({
+        value: lang.id as AvailableLanguages,
+        'aria-label': i18n.translate('xpack.searchIndices.codeLanguage.selectChangeAriaLabel', {
+          defaultMessage:
+            'Change language of code examples to {language} for every instance on this page',
+          values: {
+            language: lang.title,
+          },
+        }),
+        'data-test-subj': `lang-option-${lang.id}`,
+        inputDisplay: (
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiIcon type={`${assetBasePath}/${lang.icon}`} />
+            <EuiText>{lang.title}</EuiText>
+          </EuiFlexGroup>
+        ),
+      })),
+    [assetBasePath, options]
+  );
+  return (
+    <EuiSuperSelect<AvailableLanguages>
+      options={languageOptions}
+      valueOfSelected={selectedLanguage}
+      onChange={(value) => onSelectLanguage(value)}
+    />
+  );
+};