[Enterprise Search] fix: try in console links for code box (#164766)

## Summary Fixed the Code box component to take the console request instead of re-using the code snippet which is specific for the language and won't work in our dev console. Since the console snippets are the same I moved it to the shared project so it can be used by both dedicated and serverless.
elastic · Aug 25, 2023 · 5136714 · 5136714
1 parent 19fdc91
commit 5136714
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 87 deletions.
diff --git a/packages/kbn-search-api-panels/components/code_box.tsx b/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}
               />

diff --git a/packages/kbn-search-api-panels/components/ingest_data.tsx b/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}

diff --git a/packages/kbn-search-api-panels/components/install_client.tsx b/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}

diff --git a/...ents/getting_started/languages/console.ts → ...bn-search-api-panels/languages/console.ts b/...ents/getting_started/languages/console.ts → ...bn-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

diff --git a/packages/kbn-search-api-panels/utils.ts b/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;
diff --git a/...ise_search_content/components/search_index/components/getting_started/getting_started.tsx b/...ise_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}

diff --git a/...rise_search_content/components/search_index/components/getting_started/languages/utils.ts b/...rise_search_content/components/search_index/components/getting_started/languages/utils.ts
diff --git a/x-pack/plugins/serverless_search/public/application/components/indexing_api.tsx b/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 = () => (
   <>
@@ -232,7 +232,7 @@ export const ElasticsearchIndexingApi = () => {
                 http={http}
                 pluginId={PLUGIN_ID}
                 sharePlugin={share}
-                showTryInConsole={showTryInConsole('ingestDataIndex')}
+                consoleRequest={getConsoleRequest('ingestDataIndex')}
               />
             </>
           }

diff --git a/x-pack/plugins/serverless_search/public/application/components/languages/console.ts b/x-pack/plugins/serverless_search/public/application/components/languages/console.ts
diff --git a/x-pack/plugins/serverless_search/public/application/components/languages/utils.ts b/x-pack/plugins/serverless_search/public/application/components/languages/utils.ts
diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.tsx b/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';
@@ -45,7 +46,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] =
@@ -99,7 +99,7 @@ export const ElasticsearchOverview = () => {
             'installClient',
             codeSnippetArguments
           )}
-          showTryInConsole={showTryInConsole('installClient')}
+          consoleRequest={getConsoleRequest('installClient')}
           languages={languageDefinitions}
           language={selectedLanguage}
           setSelectedLanguage={setSelectedLanguage}
@@ -142,7 +142,7 @@ export const ElasticsearchOverview = () => {
                 'configureClient',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('configureClient')}
+              consoleRequest={getConsoleRequest('configureClient')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}
@@ -185,7 +185,7 @@ export const ElasticsearchOverview = () => {
                 'testConnection',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('testConnection')}
+              consoleRequest={getConsoleRequest('testConnection')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}
@@ -207,7 +207,7 @@ export const ElasticsearchOverview = () => {
             'ingestData',
             codeSnippetArguments
           )}
-          showTryInConsole={showTryInConsole('ingestData')}
+          showTryInConsole={getConsoleRequest('ingestData')}
           languages={languageDefinitions}
           selectedLanguage={selectedLanguage}
           setSelectedLanguage={setSelectedLanguage}
@@ -232,7 +232,7 @@ export const ElasticsearchOverview = () => {
                 'buildSearchQuery',
                 codeSnippetArguments
               )}
-              showTryInConsole={showTryInConsole('buildSearchQuery')}
+              consoleRequest={getConsoleRequest('buildSearchQuery')}
               selectedLanguage={selectedLanguage}
               setSelectedLanguage={setSelectedLanguage}
               http={http}