From 422cad5c2dca04ed121544079be255ac85f9e479 Mon Sep 17 00:00:00 2001
From: Joe McElroy <joseph.mcelroy@elastic.co>
Date: Tue, 15 Oct 2024 11:44:17 +0100
Subject: [PATCH] [Onboarding] Small fixes from QA (#196178)

## Summary

- update the code examples to use the normal client, not the
elasticsearch client. The devtools team wants us to use the
elasticsearch client here
- update the code samples highlighting component so you can see
highlighting
---
 .../public/code_examples/javascript.ts        |  6 +--
 .../public/code_examples/python.ts            | 43 ++++++++-----------
 .../public/components/shared/code_sample.tsx  |  5 +++
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/x-pack/plugins/search_indices/public/code_examples/javascript.ts b/x-pack/plugins/search_indices/public/code_examples/javascript.ts
index 3e91cb99301a7..a819b973388f4 100644
--- a/x-pack/plugins/search_indices/public/code_examples/javascript.ts
+++ b/x-pack/plugins/search_indices/public/code_examples/javascript.ts
@@ -19,7 +19,7 @@ export const JAVASCRIPT_INFO: CodeLanguage = {
   codeBlockLanguage: 'javascript',
 };
 
-const SERVERLESS_INSTALL_CMD = `npm install @elastic/elasticsearch-serverless`;
+const SERVERLESS_INSTALL_CMD = `npm install @elastic/elasticsearch`;
 
 export const JavascriptServerlessCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
@@ -28,7 +28,7 @@ export const JavascriptServerlessCreateIndexExamples: CreateIndexLanguageExample
       elasticsearchURL,
       apiKey,
       indexName,
-    }) => `import { Client } from "@elastic/elasticsearch-serverless"
+    }) => `import { Client } from "@elastic/elasticsearch"
 
 const client = new Client({
   node: '${elasticsearchURL}',
@@ -47,7 +47,7 @@ client.indices.create({
       elasticsearchURL,
       apiKey,
       indexName,
-    }) => `import { Client } from "@elastic/elasticsearch-serverless"
+    }) => `import { Client } from "@elastic/elasticsearch"
 
 const client = new Client({
   node: '${elasticsearchURL}',
diff --git a/x-pack/plugins/search_indices/public/code_examples/python.ts b/x-pack/plugins/search_indices/public/code_examples/python.ts
index e41e542456e72..ac405cfecd1e9 100644
--- a/x-pack/plugins/search_indices/public/code_examples/python.ts
+++ b/x-pack/plugins/search_indices/public/code_examples/python.ts
@@ -23,7 +23,7 @@ export const PYTHON_INFO: CodeLanguage = {
   codeBlockLanguage: 'python',
 };
 
-const SERVERLESS_PYTHON_INSTALL_CMD = 'pip install elasticsearch-serverless';
+const SERVERLESS_PYTHON_INSTALL_CMD = 'pip install elasticsearch';
 
 export const PythonServerlessCreateIndexExamples: CreateIndexLanguageExamples = {
   default: {
@@ -32,7 +32,7 @@ export const PythonServerlessCreateIndexExamples: CreateIndexLanguageExamples =
       elasticsearchURL,
       apiKey,
       indexName,
-    }: CodeSnippetParameters) => `from elasticsearch-serverless import Elasticsearch
+    }: CodeSnippetParameters) => `from elasticsearch import Elasticsearch
 
 client = Elasticsearch(
   "${elasticsearchURL}",
@@ -49,21 +49,21 @@ client.indices.create(
       elasticsearchURL,
       apiKey,
       indexName,
-    }: CodeSnippetParameters) => `from elasticsearch-serverless import Elasticsearch
+    }: CodeSnippetParameters) => `from elasticsearch import Elasticsearch
 
 client = Elasticsearch(
-  "${elasticsearchURL}",
-  api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+    "${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"}
-      }
-  }
+    index="${indexName ?? INDEX_PLACEHOLDER}",
+    mappings={
+        "properties": {
+            "vector": {"type": "dense_vector", "dims": 3 },
+            "text": {"type": "text"}
+        }
+    }
 )`,
   },
 };
@@ -72,7 +72,7 @@ const serverlessIngestionCommand: IngestCodeSnippetFunction = ({
   apiKey,
   indexName,
   sampleDocument,
-}) => `from elasticsearch-serverless import Elasticsearch, helpers
+}) => `from elasticsearch import Elasticsearch, helpers
 
 client = Elasticsearch(
     "${elasticsearchURL}",
@@ -93,25 +93,20 @@ const serverlessUpdateMappingsCommand: IngestCodeSnippetFunction = ({
   apiKey,
   indexName,
   mappingProperties,
-}) => `from elasticsearch-serverless import Elasticsearch
+}) => `from elasticsearch import Elasticsearch
 
 client = Elasticsearch(
-"${elasticsearchURL}",
-api_key="${apiKey ?? API_KEY_PLACEHOLDER}"
+    "${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)`;
+mapping_response = client.indices.put_mapping(index=index_name, body=mappings)
+print(mapping_response)
+`;
 
 export const PythonServerlessVectorsIngestDataExample: IngestDataCodeDefinition = {
   installCommand: SERVERLESS_PYTHON_INSTALL_CMD,
diff --git a/x-pack/plugins/search_indices/public/components/shared/code_sample.tsx b/x-pack/plugins/search_indices/public/components/shared/code_sample.tsx
index 4ddce94d685b0..fc233e498ea10 100644
--- a/x-pack/plugins/search_indices/public/components/shared/code_sample.tsx
+++ b/x-pack/plugins/search_indices/public/components/shared/code_sample.tsx
@@ -54,6 +54,11 @@ export const CodeSample = ({ id, title, language, code, onCodeCopyClick }: CodeS
               paddingSize="m"
               isCopyable
               transparentBackground
+              css={{
+                '*::selection': {
+                  backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                },
+              }}
             >
               {code}
             </EuiCodeBlock>