[8.x] [Onboarding] Small fixes from QA (#196178) (#196276)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Onboarding] Small fixes from QA
(#196178)](#196178)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Joe
McElroy","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T10:44:17Z","message":"[Onboarding]
Small fixes from QA (#196178)\n\n## Summary\r\n\r\n- update the code
examples to use the normal client, not the\r\nelasticsearch client. The
devtools team wants us to use the\r\nelasticsearch client here\r\n-
update the code samples highlighting component so you can
see\r\nhighlighting","sha":"422cad5c2dca04ed121544079be255ac85f9e479","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor"],"title":"[Onboarding]
Small fixes from
QA","number":196178,"url":"https://github.com/elastic/kibana/pull/196178","mergeCommit":{"message":"[Onboarding]
Small fixes from QA (#196178)\n\n## Summary\r\n\r\n- update the code
examples to use the normal client, not the\r\nelasticsearch client. The
devtools team wants us to use the\r\nelasticsearch client here\r\n-
update the code samples highlighting component so you can
see\r\nhighlighting","sha":"422cad5c2dca04ed121544079be255ac85f9e479"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196178","number":196178,"mergeCommit":{"message":"[Onboarding]
Small fixes from QA (#196178)\n\n## Summary\r\n\r\n- update the code
examples to use the normal client, not the\r\nelasticsearch client. The
devtools team wants us to use the\r\nelasticsearch client here\r\n-
update the code samples highlighting component so you can
see\r\nhighlighting","sha":"422cad5c2dca04ed121544079be255ac85f9e479"}}]}]
BACKPORT-->

Co-authored-by: Joe McElroy <[email protected]>

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}',

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,

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>