[8.10] [Enterprise Search] fix: try in console links for code box (el…

…astic#164766) (elastic#164868)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Enterprise Search] fix: try in console links for code box
(elastic#164766)](elastic#164766)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-25T14:12:17Z","message":"[Enterprise
Search] fix: try in console links for code box (elastic#164766)\n\n##
Summary\r\n\r\nFixed the Code box component to take the console request
instead of\r\nre-using the code snippet which is specific for the
language and won't\r\nwork in our dev console.\r\n\r\nSince the console
snippets are the same I moved it to the shared project\r\nso it can be
used by both dedicated and
serverless.","sha":"5136714f6fcd0992c275cd63b9b72bcb9d285008","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","Team:EnterpriseSearch","v8.10.0","v8.11.0"],"number":164766,"url":"https://github.com/elastic/kibana/pull/164766","mergeCommit":{"message":"[Enterprise
Search] fix: try in console links for code box (elastic#164766)\n\n##
Summary\r\n\r\nFixed the Code box component to take the console request
instead of\r\nre-using the code snippet which is specific for the
language and won't\r\nwork in our dev console.\r\n\r\nSince the console
snippets are the same I moved it to the shared project\r\nso it can be
used by both dedicated and
serverless.","sha":"5136714f6fcd0992c275cd63b9b72bcb9d285008"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164766","number":164766,"mergeCommit":{"message":"[Enterprise
Search] fix: try in console links for code box (elastic#164766)\n\n##
Summary\r\n\r\nFixed the Code box component to take the console request
instead of\r\nre-using the code snippet which is specific for the
language and won't\r\nwork in our dev console.\r\n\r\nSince the console
snippets are the same I moved it to the shared project\r\nso it can be
used by both dedicated and
serverless.","sha":"5136714f6fcd0992c275cd63b9b72bcb9d285008"}}]}]
BACKPORT-->

packages/kbn-search-api-panels/components/code_box.tsx

@@ -41,7 +41,7 @@ interface CodeBoxProps {
   pluginId: string;
   application?: ApplicationStart;
   sharePlugin: SharePluginStart;
-  showTryInConsole: boolean;
+  consoleRequest?: string;
 }
 
 export const CodeBox: React.FC<CodeBoxProps> = ({
@@ -54,7 +54,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
   selectedLanguage,
   setSelectedLanguage,
   sharePlugin,
-  showTryInConsole,
+  consoleRequest,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
@@ -115,10 +115,10 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
               )}
             </EuiCopy>
           </EuiFlexItem>
-          {showTryInConsole && (
+          {consoleRequest !== undefined && (
             <EuiFlexItem grow={false}>
               <TryInConsoleButton
-                request={codeSnippet}
+                request={consoleRequest}
                 application={application}
                 sharePlugin={sharePlugin}
               />

packages/kbn-search-api-panels/components/ingest_data.tsx

@@ -28,7 +28,7 @@ interface IngestDataProps {
   application?: ApplicationStart;
   sharePlugin: SharePluginStart;
   languages: LanguageDefinition[];
-  showTryInConsole: boolean;
+  consoleRequest?: string;
 }
 
 export const IngestData: React.FC<IngestDataProps> = ({
@@ -41,7 +41,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
   application,
   sharePlugin,
   languages,
-  showTryInConsole,
+  consoleRequest,
 }) => {
   const [selectedIngestMethod, setSelectedIngestMethod] = useState<
     'ingestViaApi' | 'ingestViaIntegration'
@@ -55,7 +55,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
       leftPanelContent={
         selectedIngestMethod === 'ingestViaApi' ? (
           <CodeBox
-            showTryInConsole={showTryInConsole}
+            consoleRequest={consoleRequest}
             codeSnippet={codeSnippet}
             languages={languages}
             selectedLanguage={selectedLanguage}

packages/kbn-search-api-panels/components/install_client.tsx

@@ -20,7 +20,7 @@ import { GithubLink } from './github_link';
 
 interface InstallClientProps {
   codeSnippet: string;
-  showTryInConsole: boolean;
+  consoleRequest?: string;
   language: LanguageDefinition;
   setSelectedLanguage: (language: LanguageDefinition) => void;
   http: HttpStart;
@@ -52,7 +52,7 @@ const Link: React.FC<{ language: LanguageDefinition; http: HttpStart; pluginId:
 
 export const InstallClientPanel: React.FC<InstallClientProps> = ({
   codeSnippet,
-  showTryInConsole,
+  consoleRequest,
   language,
   languages,
   setSelectedLanguage,
@@ -66,7 +66,7 @@ export const InstallClientPanel: React.FC<InstallClientProps> = ({
   const panelContent = (
     <>
       <CodeBox
-        showTryInConsole={showTryInConsole}
+        consoleRequest={consoleRequest}
         codeSnippet={codeSnippet}
         languageType="shell"
         languages={languages}

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/getting_started/languages/console.ts → packages/kbn-search-api-panels/languages/console.ts

@@ -1,11 +1,12 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import { LanguageDefinition } from '@kbn/search-api-panels';
+import { LanguageDefinition } from '../types';
 
 export const consoleDefinition: Partial<LanguageDefinition> = {
   buildSearchQuery: `POST /books/_search?pretty

packages/kbn-search-api-panels/utils.ts

@@ -7,6 +7,7 @@
  */
 
 import { LanguageDefinition, LanguageDefinitionSnippetArguments } from './types';
+import { consoleDefinition } from './languages/console';
 
 export const getLanguageDefinitionCodeSnippet = (
   language: Partial<LanguageDefinition>,
@@ -24,3 +25,8 @@ export const getLanguageDefinitionCodeSnippet = (
       return '';
   }
 };
+
+export const getConsoleRequest = (code: keyof LanguageDefinition): string | undefined =>
+  code in consoleDefinition && typeof consoleDefinition[code] === 'string'
+    ? (consoleDefinition[code] as string)
+    : undefined;

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/getting_started/getting_started.tsx

@@ -32,6 +32,7 @@ import {
   OverviewPanel,
   CodeBox,
   getLanguageDefinitionCodeSnippet,
+  getConsoleRequest,
 } from '@kbn/search-api-panels';
 
 import { LanguageDefinition } from '@kbn/search-api-panels';
@@ -50,7 +51,6 @@ import { GenerateApiKeyModal } from '../generate_api_key_modal/modal';
 
 import { javascriptDefinition } from './languages/javascript';
 import { languageDefinitions } from './languages/languages';
-import { showTryInConsole } from './languages/utils';
 
 const DEFAULT_URL = 'https://localhost:9200';
 
@@ -106,7 +106,7 @@ export const APIGettingStarted = () => {
       </SelectClientPanel>
       <InstallClientPanel
         codeSnippet={getLanguageDefinitionCodeSnippet(selectedLanguage, 'installClient', codeArgs)}
-        showTryInConsole={showTryInConsole('installClient')}
+        consoleRequest={getConsoleRequest('installClient')}
         languages={languageDefinitions}
         language={selectedLanguage}
         setSelectedLanguage={setSelectedLanguage}
@@ -301,7 +301,7 @@ export const APIGettingStarted = () => {
               'configureClient',
               codeArgs
             )}
-            showTryInConsole={showTryInConsole('configureClient')}
+            consoleRequest={getConsoleRequest('configureClient')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
             http={http}
@@ -336,7 +336,7 @@ export const APIGettingStarted = () => {
               'testConnection',
               codeArgs
             )}
-            showTryInConsole={showTryInConsole('testConnection')}
+            consoleRequest={getConsoleRequest('testConnection')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
             http={http}
@@ -365,7 +365,7 @@ export const APIGettingStarted = () => {
           <CodeBox
             languages={languageDefinitions}
             codeSnippet={getLanguageDefinitionCodeSnippet(selectedLanguage, 'ingestData', codeArgs)}
-            showTryInConsole={showTryInConsole('ingestData')}
+            consoleRequest={getConsoleRequest('ingestData')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
             http={http}
@@ -397,7 +397,7 @@ export const APIGettingStarted = () => {
               'buildSearchQuery',
               codeArgs
             )}
-            showTryInConsole={showTryInConsole('buildSearchQuery')}
+            consoleRequest={getConsoleRequest('buildSearchQuery')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
             http={http}

x-pack/plugins/serverless_search/public/application/components/indexing_api.tsx

@@ -28,6 +28,7 @@ import {
   LanguageClientPanel,
   CodeBox,
   getLanguageDefinitionCodeSnippet,
+  getConsoleRequest,
 } from '@kbn/search-api-panels';
 import type {
   LanguageDefinition,
@@ -42,7 +43,6 @@ import { API_KEY_PLACEHOLDER, ELASTICSEARCH_URL_PLACEHOLDER } from '../constants
 import { useKibanaServices } from '../hooks/use_kibana';
 import { javascriptDefinition } from './languages/javascript';
 import { languageDefinitions } from './languages/languages';
-import { showTryInConsole } from './languages/utils';
 
 const NoIndicesContent = () => (
   <>
@@ -226,7 +226,7 @@ export const ElasticsearchIndexingApi = () => {
                 http={http}
                 pluginId={PLUGIN_ID}
                 sharePlugin={share}
-                showTryInConsole={showTryInConsole('ingestDataIndex')}
+                consoleRequest={getConsoleRequest('ingestDataIndex')}
               />
             </>
           }

x-pack/plugins/serverless_search/public/application/components/overview.tsx

@@ -28,6 +28,7 @@ import {
   LanguageClientPanel,
   InstallClientPanel,
   getLanguageDefinitionCodeSnippet,
+  getConsoleRequest,
 } from '@kbn/search-api-panels';
 
 import React, { useMemo, useState } from 'react';
@@ -43,7 +44,6 @@ import { javascriptDefinition } from './languages/javascript';
 import { languageDefinitions } from './languages/languages';
 import './overview.scss';
 import { ApiKeyPanel } from './api_key/api_key';
-import { showTryInConsole } from './languages/utils';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] =
@@ -91,7 +91,7 @@ export const ElasticsearchOverview = () => {
             'installClient',
             codeSnippetArguments
           )}
-          showTryInConsole={showTryInConsole('installClient')}
+          consoleRequest={getConsoleRequest('installClient')}
           languages={languageDefinitions}
           language={selectedLanguage}
           setSelectedLanguage={setSelectedLanguage}
@@ -134,7 +134,7 @@ export const ElasticsearchOverview = () => {
                 'configureClient',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('configureClient')}
+              consoleRequest={getConsoleRequest('configureClient')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}
@@ -177,7 +177,7 @@ export const ElasticsearchOverview = () => {
                 'testConnection',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('testConnection')}
+              consoleRequest={getConsoleRequest('testConnection')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}
@@ -199,7 +199,7 @@ export const ElasticsearchOverview = () => {
             'ingestData',
             codeSnippetArguments
           )}
-          showTryInConsole={showTryInConsole('ingestData')}
+          showTryInConsole={getConsoleRequest('ingestData')}
           languages={languageDefinitions}
           selectedLanguage={selectedLanguage}
           setSelectedLanguage={setSelectedLanguage}
@@ -224,7 +224,7 @@ export const ElasticsearchOverview = () => {
                 'buildSearchQuery',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('buildSearchQuery')}
+              consoleRequest={getConsoleRequest('buildSearchQuery')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}