[Search][Onboarding] Index Details - No Data view (elastic#193637)

## Summary

Introduction of the No Data view for the index details Data tab.

### Screenshots
Index without data or mapping

![image](https://github.com/user-attachments/assets/98826d3d-ea2c-434a-9648-35a2098a08e7)

Index with mappings but no Data

![image](https://github.com/user-attachments/assets/16c9f84f-868e-4ccd-9125-2fbef5c275c6)

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

(cherry picked from commit 0be74e9)

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

@@ -13,4 +13,7 @@ export enum AnalyticsEvents {
   startCreateIndexLanguageSelect = 'start_code_lang_select',
   startCreateIndexCodeCopyInstall = 'start_code_copy_install',
   startCreateIndexCodeCopy = 'start_code_copy',
+  indexDetailsInstallCodeCopy = 'index_details_code_copy_install',
+  indexDetailsAddMappingsCodeCopy = 'index_details_add_mappings_code_copy',
+  indexDetailsIngestDocumentsCodeCopy = 'index_details_ingest_documents_code_copy',
 }

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

@@ -0,0 +1,15 @@
+/*
+ * 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';
+
+export const UPLOAD_VECTORS_TITLE = i18n.translate(
+  'xpack.searchIndices.codeExamples.ingest.denseVector.title',
+  {
+    defaultMessage: 'Upload vectors',
+  }
+);

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

@@ -7,21 +7,21 @@
 
 import { CreateIndexCodeExamples } from '../types';
 
-import { CurlExamples } from './curl';
-import { JavascriptServerlessExamples } from './javascript';
-import { PythonServerlessExamples } from './python';
-import { ConsoleExamples } from './sense';
+import { CurlCreateIndexExamples } from './curl';
+import { JavascriptServerlessCreateIndexExamples } from './javascript';
+import { PythonServerlessCreateIndexExamples } from './python';
+import { ConsoleCreateIndexExamples } from './sense';
 
 export const DefaultServerlessCodeExamples: CreateIndexCodeExamples = {
-  sense: ConsoleExamples.default,
-  curl: CurlExamples.default,
-  python: PythonServerlessExamples.default,
-  javascript: JavascriptServerlessExamples.default,
+  sense: ConsoleCreateIndexExamples.default,
+  curl: CurlCreateIndexExamples.default,
+  python: PythonServerlessCreateIndexExamples.default,
+  javascript: JavascriptServerlessCreateIndexExamples.default,
 };
 
 export const DenseVectorSeverlessCodeExamples: CreateIndexCodeExamples = {
-  sense: ConsoleExamples.dense_vector,
-  curl: CurlExamples.dense_vector,
-  python: PythonServerlessExamples.dense_vector,
-  javascript: JavascriptServerlessExamples.dense_vector,
+  sense: ConsoleCreateIndexExamples.dense_vector,
+  curl: CurlCreateIndexExamples.dense_vector,
+  python: PythonServerlessCreateIndexExamples.dense_vector,
+  javascript: JavascriptServerlessCreateIndexExamples.dense_vector,
 };

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

@@ -7,7 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
-import { CodeLanguage, CreateIndexLanguageExamples } from '../types';
+import { CodeLanguage, IngestDataCodeDefinition } from '../types';
+import { CreateIndexLanguageExamples } from './types';
 
 export const CURL_INFO: CodeLanguage = {
   id: 'curl',
@@ -16,7 +17,7 @@ export const CURL_INFO: CodeLanguage = {
   codeBlockLanguage: 'shell',
 };
 
-export const CurlExamples: CreateIndexLanguageExamples = {
+export const CurlCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
     createIndex: ({ elasticsearchURL, apiKey, indexName }) => `curl PUT '${elasticsearchURL}/${
       indexName ?? INDEX_PLACEHOLDER
@@ -45,3 +46,27 @@ export const CurlExamples: CreateIndexLanguageExamples = {
 }'`,
   },
 };
+
+export const CurlVectorsIngestDataExample: IngestDataCodeDefinition = {
+  ingestCommand: ({
+    elasticsearchURL,
+    apiKey,
+    indexName,
+    sampleDocument,
+  }) => `curl -X POST "${elasticsearchURL}/_bulk?pretty" \
+--header 'Authorization: ApiKey ${apiKey ?? API_KEY_PLACEHOLDER}' \
+--header 'Content-Type: application/json' \
+-d'
+{ "index": { "_index": "${indexName}" } }
+${JSON.stringify(sampleDocument)}
+`,
+  updateMappingsCommand: ({
+    elasticsearchURL,
+    apiKey,
+    indexName,
+    mappingProperties,
+  }) => `curl -X PUT "${elasticsearchURL}/${indexName}/_mapping" \
+--header 'Authorization: ApiKey ${apiKey ?? API_KEY_PLACEHOLDER}' \
+--header 'Content-Type: application/json' \
+--data-raw '${JSON.stringify({ properties: mappingProperties })}'`,
+};

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { IngestDataCodeExamples } from '../types';
+import { UPLOAD_VECTORS_TITLE } from './constants';
+
+import { JSServerlessIngestVectorDataExample } from './javascript';
+import { PythonServerlessVectorsIngestDataExample } from './python';
+import { ConsoleVectorsIngestDataExample } from './sense';
+import { CurlVectorsIngestDataExample } from './curl';
+
+export const DenseVectorServerlessCodeExamples: IngestDataCodeExamples = {
+  title: UPLOAD_VECTORS_TITLE,
+  ingestTitle: UPLOAD_VECTORS_TITLE,
+  description: i18n.translate(
+    'xpack.searchIndices.codeExamples.serverless.denseVector.description',
+    {
+      defaultMessage:
+        'The following example connects to your Elasticsearch endpoint and uploads vectors to the index.',
+    }
+  ),
+  defaultMapping: {
+    vector: { type: 'dense_vector', dims: 3 },
+    text: { type: 'text' },
+  },
+  sense: ConsoleVectorsIngestDataExample,
+  curl: CurlVectorsIngestDataExample,
+  python: PythonServerlessVectorsIngestDataExample,
+  javascript: JSServerlessIngestVectorDataExample,
+};

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

@@ -7,7 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
-import { CodeLanguage, CreateIndexLanguageExamples } from '../types';
+import { CodeLanguage, IngestDataCodeDefinition } from '../types';
+import { CreateIndexLanguageExamples } from './types';
 
 export const JAVASCRIPT_INFO: CodeLanguage = {
   id: 'javascript',
@@ -20,7 +21,7 @@ export const JAVASCRIPT_INFO: CodeLanguage = {
 
 const SERVERLESS_INSTALL_CMD = `npm install @elastic/elasticsearch-serverless`;
 
-export const JavascriptServerlessExamples: CreateIndexLanguageExamples = {
+export const JavascriptServerlessCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
     installCommand: SERVERLESS_INSTALL_CMD,
     createIndex: ({
@@ -66,3 +67,58 @@ client.indices.create({
 });`,
   },
 };
+
+export const JSServerlessIngestVectorDataExample: IngestDataCodeDefinition = {
+  installCommand: SERVERLESS_INSTALL_CMD,
+  ingestCommand: ({
+    apiKey,
+    elasticsearchURL,
+    sampleDocument,
+    indexName,
+  }) => `import { Client } from "@elastic/elasticsearch";
+
+const client = new Client({
+  node: '${elasticsearchURL}',
+  auth: {
+    apiKey: "${apiKey ?? API_KEY_PLACEHOLDER}"
+  },
+});
+
+const index = "${indexName}";
+const docs = [
+${JSON.stringify(sampleDocument, null, 2)},
+]
+
+const bulkIngestResponse = await client.helpers.bulk({
+  index,
+  datasource: docs,
+  onDocument() {
+    return {
+      index: {},
+    };
+  }
+});
+console.log(bulkIngestResponse);`,
+  updateMappingsCommand: ({
+    apiKey,
+    elasticsearchURL,
+    indexName,
+    mappingProperties,
+  }) => `import { Client } from "@elastic/elasticsearch";
+
+const client = new Client({
+node: '${elasticsearchURL}',
+auth: {
+  apiKey: "${apiKey ?? API_KEY_PLACEHOLDER}"
+}
+});
+
+const index = "${indexName}";
+const mapping = ${JSON.stringify(mappingProperties, null, 2)};
+
+const updateMappingResponse = await client.indices.putMapping({
+  index,
+  properties: mapping,
+});
+console.log(updateMappingResponse);`,
+};

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

@@ -7,7 +7,14 @@
 
 import { i18n } from '@kbn/i18n';
 import { API_KEY_PLACEHOLDER, INDEX_PLACEHOLDER } from '../constants';
-import { CodeLanguage, CodeSnippetParameters, CreateIndexLanguageExamples } from '../types';
+import {
+  CodeLanguage,
+  CodeSnippetParameters,
+  IngestCodeSnippetFunction,
+  IngestDataCodeDefinition,
+} from '../types';
+
+import { CreateIndexLanguageExamples } from './types';
 
 export const PYTHON_INFO: CodeLanguage = {
   id: 'python',
@@ -18,7 +25,7 @@ export const PYTHON_INFO: CodeLanguage = {
 
 const SERVERLESS_PYTHON_INSTALL_CMD = 'pip install elasticsearch-serverless';
 
-export const PythonServerlessExamples: CreateIndexLanguageExamples = {
+export const PythonServerlessCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
     installCommand: SERVERLESS_PYTHON_INSTALL_CMD,
     createIndex: ({
@@ -60,3 +67,54 @@ client.indices.create(
 )`,
   },
 };
+const serverlessIngestionCommand: IngestCodeSnippetFunction = ({
+  elasticsearchURL,
+  apiKey,
+  indexName,
+  sampleDocument,
+}) => `from elasticsearch-serverless import Elasticsearch, helpers
+
+client = Elasticsearch(
+    "${elasticsearchURL}",
+    api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+)
+
+index_name = "${indexName}"
+
+docs = [
+${JSON.stringify(sampleDocument, null, 4)},
+]
+
+bulk_response = helpers.bulk(client, docs, index=index_name)
+print(bulk_response)`;
+
+const serverlessUpdateMappingsCommand: IngestCodeSnippetFunction = ({
+  elasticsearchURL,
+  apiKey,
+  indexName,
+  mappingProperties,
+}) => `from elasticsearch-serverless import Elasticsearch
+
+client = Elasticsearch(
+"${elasticsearchURL}",
+api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+)
+
+index_name = "${indexName}"
+
+mappings = ${JSON.stringify({ properties: mappingProperties }, null, 4)}
+
+update_mapping_response = client.indices.put_mapping(index=index_name, body=mappings)
+
+# Print the response
+print(update_mapping_response)
+
+# Verify the mapping
+mapping = client.indices.get_mapping(index=index_name)
+print(mapping)`;
+
+export const PythonServerlessVectorsIngestDataExample: IngestDataCodeDefinition = {
+  installCommand: SERVERLESS_PYTHON_INSTALL_CMD,
+  ingestCommand: serverlessIngestionCommand,
+  updateMappingsCommand: serverlessUpdateMappingsCommand,
+};

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

@@ -6,9 +6,10 @@
  */
 
 import { INDEX_PLACEHOLDER } from '../constants';
-import { CreateIndexLanguageExamples } from '../types';
+import { IngestDataCodeDefinition } from '../types';
+import { CreateIndexLanguageExamples } from './types';
 
-export const ConsoleExamples: CreateIndexLanguageExamples = {
+export const ConsoleCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
     createIndex: ({ indexName }) => `PUT /${indexName ?? INDEX_PLACEHOLDER}`,
   },
@@ -29,3 +30,12 @@ export const ConsoleExamples: CreateIndexLanguageExamples = {
 }`,
   },
 };
+
+export const ConsoleVectorsIngestDataExample: IngestDataCodeDefinition = {
+  ingestCommand: ({ indexName, sampleDocument }) => `POST /_bulk?pretty
+{ "index": { "_index": "${indexName}" } }
+${JSON.stringify(sampleDocument)}
+`,
+  updateMappingsCommand: ({ indexName, mappingProperties }) => `PUT /${indexName}/_mapping
+${JSON.stringify({ properties: mappingProperties }, null, 2)}`,
+};

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

@@ -0,0 +1,17 @@
+/*
+ * 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 { CreateIndexCodeDefinition, IngestDataCodeDefinition } from '../types';
+
+export interface CreateIndexLanguageExamples {
+  default: CreateIndexCodeDefinition;
+  dense_vector: CreateIndexCodeDefinition;
+}
+
+export interface IngestDataLanguageExamples {
+  dense_vector: IngestDataCodeDefinition;
+}