[Enterprise Search] use asset path instead of http & plugin id (elast…

…ic#164781) ## Summary Updated the search api panels shared code to use `assetBasePath` instead of building it from `http` & `pluginId` since the assets are in different folders between `serverless_search` & `enterprise_search`. Because of this several components we're failing to load icons in enterprise search.
kibanamachine · Aug 25, 2023 · b5b2c36 · b5b2c36
1 parent fa6221d
commit b5b2c36
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 79 deletions.
diff --git a/packages/kbn-search-api-panels/components/code_box.tsx b/packages/kbn-search-api-panels/components/code_box.tsx
@@ -22,7 +22,6 @@ import {
   EuiThemeProvider,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { HttpStart } from '@kbn/core-http-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 
@@ -37,8 +36,7 @@ interface CodeBoxProps {
   languageType?: string;
   selectedLanguage: LanguageDefinition;
   setSelectedLanguage: (language: LanguageDefinition) => void;
-  http: HttpStart;
-  pluginId: string;
+  assetBasePath: string;
   application?: ApplicationStart;
   sharePlugin: SharePluginStart;
   consoleRequest?: string;
@@ -47,10 +45,9 @@ interface CodeBoxProps {
 export const CodeBox: React.FC<CodeBoxProps> = ({
   application,
   codeSnippet,
-  http,
   languageType,
   languages,
-  pluginId,
+  assetBasePath,
   selectedLanguage,
   setSelectedLanguage,
   sharePlugin,
@@ -61,7 +58,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
   const items = languages.map((language) => (
     <EuiContextMenuItem
       key={language.id}
-      icon={http.basePath.prepend(`/plugins/${pluginId}/assets/${language.iconType}`)}
+      icon={`${assetBasePath}/${language.iconType}`}
       onClick={() => {
         setSelectedLanguage(language);
         setIsPopoverOpen(false);

diff --git a/packages/kbn-search-api-panels/components/github_link.tsx b/packages/kbn-search-api-panels/components/github_link.tsx
@@ -9,18 +9,16 @@
 import React from 'react';
 
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiLink } from '@elastic/eui';
-import { HttpStart } from '@kbn/core-http-browser';
 
 export const GithubLink: React.FC<{
+  assetBasePath: string;
   label: string;
   href: string;
-  http: HttpStart;
-  pluginId: string;
-}> = ({ label, href, http, pluginId }) => {
+}> = ({ assetBasePath, label, href }) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="flexEnd">
       <EuiFlexItem grow={false}>
-        <EuiIcon size="s" type={http.basePath.prepend(`/plugins/${pluginId}/assets/github.svg`)} />
+        <EuiIcon size="s" type={`${assetBasePath}github.svg`} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiText size="s">

diff --git a/packages/kbn-search-api-panels/components/ingest_data.tsx b/packages/kbn-search-api-panels/components/ingest_data.tsx
@@ -10,7 +10,6 @@ import React, { useState } from 'react';
 
 import { EuiCheckableCard, EuiFormFieldset, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { HttpStart } from '@kbn/core-http-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { CodeBox } from './code_box';
@@ -23,8 +22,7 @@ interface IngestDataProps {
   selectedLanguage: LanguageDefinition;
   setSelectedLanguage: (language: LanguageDefinition) => void;
   docLinks: any;
-  http: HttpStart;
-  pluginId: string;
+  assetBasePath: string;
   application?: ApplicationStart;
   sharePlugin: SharePluginStart;
   languages: LanguageDefinition[];
@@ -36,8 +34,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
   selectedLanguage,
   setSelectedLanguage,
   docLinks,
-  http,
-  pluginId,
+  assetBasePath,
   application,
   sharePlugin,
   languages,
@@ -60,13 +57,12 @@ export const IngestData: React.FC<IngestDataProps> = ({
             languages={languages}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
-            http={http}
-            pluginId={pluginId}
+            assetBasePath={assetBasePath}
             application={application}
             sharePlugin={sharePlugin}
           />
         ) : (
-          <IntegrationsPanel docLinks={docLinks} http={http} pluginId={pluginId} />
+          <IntegrationsPanel docLinks={docLinks} assetBasePath={assetBasePath} />
         )
       }
       links={[

diff --git a/packages/kbn-search-api-panels/components/install_client.tsx b/packages/kbn-search-api-panels/components/install_client.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 
 import { EuiSpacer, EuiCallOut, EuiText, EuiPanelProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { HttpStart } from '@kbn/core-http-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { CodeBox } from './code_box';
@@ -23,27 +22,24 @@ interface InstallClientProps {
   consoleRequest?: string;
   language: LanguageDefinition;
   setSelectedLanguage: (language: LanguageDefinition) => void;
-  http: HttpStart;
-  pluginId: string;
+  assetBasePath: string;
   application?: ApplicationStart;
   sharePlugin: SharePluginStart;
   isPanelLeft?: boolean;
   languages: LanguageDefinition[];
   overviewPanelProps?: Partial<EuiPanelProps>;
 }
 
-const Link: React.FC<{ language: LanguageDefinition; http: HttpStart; pluginId: string }> = ({
+const Link: React.FC<{ language: LanguageDefinition; assetBasePath: string }> = ({
   language,
-  http,
-  pluginId,
+  assetBasePath,
 }) => {
   if (language.github) {
     return (
       <GithubLink
         href={language.github.link}
         label={language.github.label}
-        http={http}
-        pluginId={pluginId}
+        assetBasePath={assetBasePath}
       />
     );
   }
@@ -56,8 +52,7 @@ export const InstallClientPanel: React.FC<InstallClientProps> = ({
   language,
   languages,
   setSelectedLanguage,
-  http,
-  pluginId,
+  assetBasePath,
   application,
   sharePlugin,
   isPanelLeft = true,
@@ -72,13 +67,12 @@ export const InstallClientPanel: React.FC<InstallClientProps> = ({
         languages={languages}
         selectedLanguage={language}
         setSelectedLanguage={setSelectedLanguage}
-        http={http}
-        pluginId={pluginId}
+        assetBasePath={assetBasePath}
         application={application}
         sharePlugin={sharePlugin}
       />
       <EuiSpacer />
-      <Link language={language} http={http} pluginId={pluginId} />
+      <Link language={language} assetBasePath={assetBasePath} />
       <EuiSpacer />
       <EuiCallOut
         iconType="iInCircle"

diff --git a/packages/kbn-search-api-panels/components/integrations_panel.tsx b/packages/kbn-search-api-panels/components/integrations_panel.tsx
@@ -19,21 +19,18 @@ import {
   EuiText,
   EuiLink,
 } from '@elastic/eui';
-import { HttpStart } from '@kbn/core-http-browser';
 import { i18n } from '@kbn/i18n';
 import { LEARN_MORE_LABEL } from '../constants';
 import { GithubLink } from './github_link';
 
 export interface IntegrationsPanelProps {
   docLinks: any;
-  http: HttpStart;
-  pluginId: string;
+  assetBasePath: string;
 }
 
 export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
   docLinks,
-  http,
-  pluginId,
+  assetBasePath,
 }) => {
   return (
     <EuiThemeProvider colorMode="dark">
@@ -75,8 +72,7 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
                   label={i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashLink', {
                     defaultMessage: 'Logstash',
                   })}
-                  http={http}
-                  pluginId={pluginId}
+                  assetBasePath={assetBasePath}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -117,8 +113,7 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
                   label={i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsLink', {
                     defaultMessage: 'beats',
                   })}
-                  http={http}
-                  pluginId={pluginId}
+                  assetBasePath={assetBasePath}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -162,8 +157,7 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
                       defaultMessage: 'connectors-python',
                     }
                   )}
-                  http={http}
-                  pluginId={pluginId}
+                  assetBasePath={assetBasePath}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

diff --git a/packages/kbn-search-api-panels/components/language_client_panel.tsx b/packages/kbn-search-api-panels/components/language_client_panel.tsx
@@ -18,26 +18,22 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 
-import type { HttpStart } from '@kbn/core-http-browser';
-
 import { LanguageDefinition } from '../types';
 import './select_client.scss';
 
 interface SelectClientProps {
   language: LanguageDefinition;
   setSelectedLanguage: (language: LanguageDefinition) => void;
   isSelectedLanguage: boolean;
-  http: HttpStart;
-  pluginId?: string;
+  assetBasePath?: string;
   src?: string;
 }
 
 export const LanguageClientPanel: React.FC<SelectClientProps> = ({
   language,
   setSelectedLanguage,
   isSelectedLanguage,
-  http,
-  pluginId,
+  assetBasePath,
   src,
 }) => {
   const { euiTheme } = useEuiTheme();
@@ -60,9 +56,7 @@ export const LanguageClientPanel: React.FC<SelectClientProps> = ({
             <EuiFlexItem grow={false}>
               <EuiImage
                 alt=""
-                src={
-                  src || http.basePath.prepend(`/plugins/${pluginId}/assets/${language.iconType}`)
-                }
+                src={src || `${assetBasePath}${language.iconType}`}
                 height={euiTheme.size.xl}
                 width={euiTheme.size.xl}
               />

diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts
@@ -229,3 +229,4 @@ export const DEFAULT_PRODUCT_FEATURES: ProductFeatures = {
 };
 
 export const CONNECTORS_ACCESS_CONTROL_INDEX_PREFIX = '.search-acl-filter-';
+export const PLUGIN_ID = 'enterpriseSearch';
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
@@ -37,6 +37,7 @@ import {
 
 import { LanguageDefinition } from '@kbn/search-api-panels';
 
+import { PLUGIN_ID } from '../../../../../../../common/constants';
 import { KibanaDeps } from '../../../../../../../common/types';
 
 import { icons } from '../../../../../../assets/client_libraries';
@@ -68,6 +69,7 @@ export const APIGettingStarted = () => {
     apiKey,
     url: cloudContext.elasticsearchUrl || DEFAULT_URL,
   };
+  const assetBasePath = http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/client_libraries/`);
 
   const [selectedLanguage, setSelectedLanguage] =
     useState<LanguageDefinition>(javascriptDefinition);
@@ -98,7 +100,6 @@ export const APIGettingStarted = () => {
               language={language}
               setSelectedLanguage={setSelectedLanguage}
               isSelectedLanguage={selectedLanguage === language}
-              http={http}
               src={icons[language.id]}
             />
           </EuiFlexItem>
@@ -110,8 +111,7 @@ export const APIGettingStarted = () => {
         languages={languageDefinitions}
         language={selectedLanguage}
         setSelectedLanguage={setSelectedLanguage}
-        http={http}
-        pluginId={''}
+        assetBasePath={assetBasePath}
         application={services.application}
         sharePlugin={services.share}
         isPanelLeft={false}
@@ -304,8 +304,7 @@ export const APIGettingStarted = () => {
             consoleRequest={getConsoleRequest('configureClient')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
-            http={http}
-            pluginId={''}
+            assetBasePath={assetBasePath}
             application={services.application}
             sharePlugin={services.share}
           />
@@ -339,8 +338,7 @@ export const APIGettingStarted = () => {
             consoleRequest={getConsoleRequest('testConnection')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
-            http={http}
-            pluginId={''}
+            assetBasePath={assetBasePath}
             application={services.application}
             sharePlugin={services.share}
           />
@@ -368,8 +366,7 @@ export const APIGettingStarted = () => {
             consoleRequest={getConsoleRequest('ingestData')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
-            http={http}
-            pluginId={''}
+            assetBasePath={assetBasePath}
             application={services.application}
             sharePlugin={services.share}
           />
@@ -400,8 +397,7 @@ export const APIGettingStarted = () => {
             consoleRequest={getConsoleRequest('buildSearchQuery')}
             selectedLanguage={selectedLanguage}
             setSelectedLanguage={setSelectedLanguage}
-            http={http}
-            pluginId={''}
+            assetBasePath={assetBasePath}
             application={services.application}
             sharePlugin={services.share}
           />

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
@@ -140,6 +140,7 @@ export const ElasticsearchIndexingApi = () => {
       return result;
     },
   });
+  const assetBasePath = http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/`);
 
   const codeSnippetArguments: LanguageDefinitionSnippetArguments = {
     url: elasticsearchURL,
@@ -213,8 +214,7 @@ export const ElasticsearchIndexingApi = () => {
                       language={language}
                       setSelectedLanguage={setSelectedLanguage}
                       isSelectedLanguage={selectedLanguage === language}
-                      http={http}
-                      pluginId={PLUGIN_ID}
+                      assetBasePath={assetBasePath}
                     />
                   </EuiFlexItem>
                 ))}
@@ -229,8 +229,7 @@ export const ElasticsearchIndexingApi = () => {
                 )}
                 selectedLanguage={selectedLanguage}
                 setSelectedLanguage={setSelectedLanguage}
-                http={http}
-                pluginId={PLUGIN_ID}
+                assetBasePath={assetBasePath}
                 sharePlugin={share}
                 consoleRequest={getConsoleRequest('ingestDataIndex')}
               />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -229,3 +229,4 @@ export const DEFAULT_PRODUCT_FEATURES: ProductFeatures = {
		};

		export const CONNECTORS_ACCESS_CONTROL_INDEX_PREFIX = '.search-acl-filter-';
		export const PLUGIN_ID = 'enterpriseSearch';