[Search][Onboarding] Start page code view

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)}
+    />
+  );
+};