[8.10] [Enterprise Search] use asset path instead of http & plugin id (#164781) (#164884)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Enterprise Search] use asset path instead of http & plugin id
(#164781)](https://github.com/elastic/kibana/pull/164781)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Rodney
Norris","email":"rodney.norris@elastic.co"},"sourceCommit":{"committedDate":"2023-08-25T17:54:54Z","message":"[Enterprise
Search] use asset path instead of http & plugin id (#164781)\n\n##
Summary\r\n\r\nUpdated the search api panels shared code to use
`assetBasePath` instead\r\nof building it from `http` & `pluginId` since
the assets are in\r\ndifferent folders between `serverless_search` &
`enterprise_search`.\r\nBecause of this several components we're failing
to load icons in\r\nenterprise
search.","sha":"b5b2c36d9595d5a28b075343be84439f0d19900f","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":164781,"url":"https://github.com/elastic/kibana/pull/164781","mergeCommit":{"message":"[Enterprise
Search] use asset path instead of http & plugin id (#164781)\n\n##
Summary\r\n\r\nUpdated the search api panels shared code to use
`assetBasePath` instead\r\nof building it from `http` & `pluginId` since
the assets are in\r\ndifferent folders between `serverless_search` &
`enterprise_search`.\r\nBecause of this several components we're failing
to load icons in\r\nenterprise
search.","sha":"b5b2c36d9595d5a28b075343be84439f0d19900f"}},"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/164781","number":164781,"mergeCommit":{"message":"[Enterprise
Search] use asset path instead of http & plugin id (#164781)\n\n##
Summary\r\n\r\nUpdated the search api panels shared code to use
`assetBasePath` instead\r\nof building it from `http` & `pluginId` since
the assets are in\r\ndifferent folders between `serverless_search` &
`enterprise_search`.\r\nBecause of this several components we're failing
to load icons in\r\nenterprise
search.","sha":"b5b2c36d9595d5a28b075343be84439f0d19900f"}}]}]
BACKPORT-->

Co-authored-by: Rodney Norris <rodney.norris@elastic.co>
This commit is contained in:
Kibana Machine 2023-08-25 15:13:10 -04:00 committed by GitHub
parent 52c006b577
commit 5b5bf94d40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 42 additions and 79 deletions

View file

@ -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);

View file

@ -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">

View file

@ -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={[

View file

@ -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,8 +22,7 @@ interface InstallClientProps {
consoleRequest?: string;
language: LanguageDefinition;
setSelectedLanguage: (language: LanguageDefinition) => void;
http: HttpStart;
pluginId: string;
assetBasePath: string;
application?: ApplicationStart;
sharePlugin: SharePluginStart;
isPanelLeft?: boolean;
@ -32,18 +30,16 @@ interface InstallClientProps {
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"

View file

@ -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>

View file

@ -18,8 +18,6 @@ import {
useEuiTheme,
} from '@elastic/eui';
import type { HttpStart } from '@kbn/core-http-browser';
import { LanguageDefinition } from '../types';
import './select_client.scss';
@ -27,8 +25,7 @@ interface SelectClientProps {
language: LanguageDefinition;
setSelectedLanguage: (language: LanguageDefinition) => void;
isSelectedLanguage: boolean;
http: HttpStart;
pluginId?: string;
assetBasePath?: string;
src?: string;
}
@ -36,8 +33,7 @@ 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}
/>

View file

@ -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';

View file

@ -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}
/>

View file

@ -140,6 +140,7 @@ export const ElasticsearchIndexingApi = () => {
return result;
},
});
const assetBasePath = http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/`);
const codeSnippetArguments: LanguageDefinitionSnippetArguments = {
url: elasticsearchURL,
@ -207,8 +208,7 @@ export const ElasticsearchIndexingApi = () => {
language={language}
setSelectedLanguage={setSelectedLanguage}
isSelectedLanguage={selectedLanguage === language}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
/>
</EuiFlexItem>
))}
@ -223,8 +223,7 @@ export const ElasticsearchIndexingApi = () => {
)}
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
sharePlugin={share}
consoleRequest={getConsoleRequest('ingestDataIndex')}
/>

View file

@ -76,8 +76,7 @@ export const ElasticsearchOverview = () => {
language={language}
setSelectedLanguage={setSelectedLanguage}
isSelectedLanguage={selectedLanguage === language}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
/>
</EuiFlexItem>
))}
@ -95,8 +94,7 @@ export const ElasticsearchOverview = () => {
languages={languageDefinitions}
language={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
application={application}
sharePlugin={share}
/>
@ -137,8 +135,7 @@ export const ElasticsearchOverview = () => {
consoleRequest={getConsoleRequest('configureClient')}
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
application={application}
sharePlugin={share}
/>
@ -180,8 +177,7 @@ export const ElasticsearchOverview = () => {
consoleRequest={getConsoleRequest('testConnection')}
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
application={application}
sharePlugin={share}
/>
@ -203,9 +199,8 @@ export const ElasticsearchOverview = () => {
languages={languageDefinitions}
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
assetBasePath={assetBasePath}
docLinks={docLinks}
pluginId={PLUGIN_ID}
application={application}
sharePlugin={share}
/>
@ -227,8 +222,7 @@ export const ElasticsearchOverview = () => {
consoleRequest={getConsoleRequest('buildSearchQuery')}
selectedLanguage={selectedLanguage}
setSelectedLanguage={setSelectedLanguage}
http={http}
pluginId={PLUGIN_ID}
assetBasePath={assetBasePath}
application={application}
sharePlugin={share}
/>