[Search] Consuming plugs and web EUI icons and removing custom ones (#211416)

## Summary

`plugs` and `web` new icons are available since `EUI 99.2.0` . As agreed
removing the custom temporary instances and consuming them from EUI
instead.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
José Luis González 2025-02-17 16:56:16 +01:00 committed by GitHub
parent aa681551b0
commit cbaddbe2b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 27 additions and 113 deletions

View file

@ -9,4 +9,3 @@ export * from './src/connector_icon';
export * from './src/decorative_horizontal_stepper';
export * from './src/form_info_field/form_info_field';
export * from './src/search_empty_prompt';
export * from './src/icons';

View file

@ -1,32 +0,0 @@
/*
* 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.
*/
// Temporary custom asset while it's available in EUI
import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}
export const EuiIconPlugs = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="m15.354 1.354-2.08 2.08a3 3 0 0 1-.324 3.859l-1.414 1.414-4.243-4.242L8.707 3.05a3 3 0 0 1 3.86-.324l2.08-2.08.707.708Zm-5.94 2.403-.707.708 2.829 2.828.707-.707a2 2 0 1 0-2.829-2.829ZM5.171 8 3.757 6.586l-.707.707.707.707-.707.707a3 3 0 0 0-.324 3.86l-2.08 2.08.708.707 2.079-2.08a3 3 0 0 0 3.86-.324l.706-.707.708.707.707-.707L8 10.829 9.768 9.06l-.707-.707-1.769 1.768-1.414-1.415L7.647 6.94l-.708-.707L5.171 8ZM3.757 9.414l.707-.707 2.828 2.829-.707.707a2 2 0 0 1-2.828-2.829Z"
clipRule="evenodd"
/>
</svg>
);

View file

@ -1,32 +0,0 @@
/*
* 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.
*/
// Temporary custom asset while it's available in EUI
import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}
export const EuiIconWeb = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="M2.208 2H1V1h13a1 1 0 0 1 1 1v13h-1v-1.207a11.437 11.437 0 0 0-5.214-1.395l-.603 1.043-.866-.5.602-1.043A11.562 11.562 0 0 0 4.102 8.08l-1.043.602-.5-.866 1.043-.603A11.438 11.438 0 0 0 2.208 2Zm1.125 0a12.429 12.429 0 0 1 1.245 4.651L6.2 5.715A8.452 8.452 0 0 0 5.206 2H3.333Zm2.99 0c.453.974.746 2.037.844 3.156l1.629-.94A5.466 5.466 0 0 0 8.203 2h-1.88Zm2.981 0a6.46 6.46 0 0 1 .446 1.665L12.634 2h-3.33Zm3.83.866-2.886 1.666c.459.35.87.761 1.22 1.22l1.666-2.886Zm-2.216 3.839a5.531 5.531 0 0 0-1.623-1.623l-1.629.94a9.55 9.55 0 0 1 2.311 2.312l.94-1.63ZM9.419 9.3a8.547 8.547 0 0 0-2.72-2.72l-1.623.937a12.566 12.566 0 0 1 3.406 3.406L9.419 9.3Zm-.07 2.121c1.66.112 3.23.547 4.651 1.244v-1.872a8.451 8.451 0 0 0-3.715-.994l-.936 1.622Zm1.495-2.59A9.442 9.442 0 0 1 14 9.678v-1.88a5.464 5.464 0 0 0-2.216-.593l-.94 1.629Zm1.49-2.582A6.457 6.457 0 0 1 14 6.696v-3.33L12.335 6.25Z"
clipRule="evenodd"
/>
</svg>
);

View file

@ -1,8 +0,0 @@
/*
* 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.
*/
export * from './EuiIconPlugs';
export * from './EuiIconWeb';

View file

@ -28,7 +28,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { Connector, ConnectorStatus, ElasticsearchIndex } from '@kbn/search-connectors';
import { EuiIconPlugs } from '@kbn/search-shared-ui';
import { KibanaDeps } from '../../../../../common/types';
import { generateEncodedPath } from '../../../shared/encode_path_params';
@ -403,7 +402,7 @@ export const ConnectorStats: React.FC<ConnectorStatsProps> = ({
<EuiFlexItem grow={false}>
<EuiButtonEmpty
isDisabled={!connector.service_type}
iconType={EuiIconPlugs}
iconType="plugs"
color="text"
href={http.basePath.prepend(
generateEncodedPath(CONNECTOR_INTEGRATION_DETAIL_PATH, {

View file

@ -24,7 +24,6 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EuiIconPlugs } from '@kbn/search-shared-ui';
import {
BETA_LABEL,
@ -151,7 +150,7 @@ export const ChooseConnector: React.FC<ChooseConnectorSelectableProps> = ({
'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.euiComboBox.accessibleScreenReaderLabelLabel',
{ defaultMessage: 'Select a data source for your connector to use.' }
)}
prepend={<EuiIcon type={selectedConnector?.iconPath ?? EuiIconPlugs} size="l" />}
prepend={<EuiIcon type={selectedConnector?.iconPath ?? 'plugs'} size="l" />}
singleSelection
fullWidth
placeholder={i18n.translate(

View file

@ -23,8 +23,6 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EuiIconPlugs } from '@kbn/search-shared-ui';
import { KibanaLogic } from '../../../../../shared/kibana';
const nativePopoverPanels = [
@ -41,7 +39,7 @@ const nativePopoverPanels = [
'xpack.enterpriseSearch.connectorDescriptionPopover.connectorDescriptionBadge.native.configureConnectorLabel',
{ defaultMessage: 'Configure your connector using our Kibana UI' }
),
icons: [<EuiIcon size="l" type={EuiIconPlugs} />, <EuiIcon size="l" type="logoElastic" />],
icons: [<EuiIcon size="l" type="plugs" />, <EuiIcon size="l" type="logoElastic" />],
id: 'native-configure-connector',
},
];
@ -64,7 +62,7 @@ const connectorClientPopoverPanels = [
}
),
icons: [
<EuiIcon size="l" type={EuiIconPlugs} />,
<EuiIcon size="l" type="plugs" />,
<EuiIcon size="l" type="sortRight" />,
<EuiIcon size="l" type="launch" />,
],
@ -80,7 +78,7 @@ const connectorClientPopoverPanels = [
icons: [
<EuiIcon size="l" type="documents" />,
<EuiIcon size="l" type="sortRight" />,
<EuiIcon size="l" type={EuiIconPlugs} />,
<EuiIcon size="l" type="plugs" />,
<EuiIcon size="l" type="sortRight" />,
<EuiIcon size="l" type="logoElastic" />,
],

View file

@ -8,7 +8,7 @@ import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SearchEmptyPrompt, DecorativeHorizontalStepper, EuiIconWeb } from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { BACK_BUTTON_LABEL, COMING_SOON_LABEL } from '../../../shared/constants';
import { KibanaLogic } from '../../../shared/kibana';
@ -21,7 +21,7 @@ export const ElasticManagedWebCrawlerEmptyPrompt: React.FC = () => {
label: BACK_BUTTON_LABEL,
onClickBack: () => KibanaLogic.values.navigateToUrl(CRAWLERS_PATH),
}}
icon={EuiIconWeb}
icon="web"
title={i18n.translate('xpack.enterpriseSearch.elasticManagedWebCrawlerEmpty.title', {
defaultMessage: 'Elastic managed web crawlers',
})}
@ -85,7 +85,7 @@ export const ElasticManagedWebCrawlerEmptyPrompt: React.FC = () => {
justifyContent="center"
>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type="logoElastic" />

View file

@ -17,14 +17,14 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { SearchEmptyPrompt, DecorativeHorizontalStepper, EuiIconWeb } from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { GithubIcon } from '../../../shared/icons/github_icon';
export const SelfManagedWebCrawlerEmptyPrompt: React.FC = () => {
return (
<SearchEmptyPrompt
icon={EuiIconWeb}
icon="web"
title={i18n.translate('xpack.enterpriseSearch.webCrawlersEmpty.title', {
defaultMessage: 'Set up a web crawler',
})}
@ -54,7 +54,7 @@ export const SelfManagedWebCrawlerEmptyPrompt: React.FC = () => {
justifyContent="center"
>
<EuiFlexItem grow={false}>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />
@ -148,7 +148,7 @@ export const SelfManagedWebCrawlerEmptyPrompt: React.FC = () => {
<EuiIcon size="m" type="sortRight" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />

View file

@ -20,7 +20,6 @@ import {
EuiTextTruncate,
EuiBadgeGroup,
} from '@elastic/eui';
import { EuiIconPlugs } from '@kbn/search-shared-ui';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Connector as BaseConnector } from '@kbn/search-connectors';
import { css } from '@emotion/react';
@ -233,7 +232,7 @@ export const EditServiceType: React.FC<EditServiceTypeProps> = ({ connector, isD
connector.service_type
? connectorTypes.find((conn) => conn.serviceType === connector.service_type)
?.iconPath ?? ''
: EuiIconPlugs
: 'plugs'
}
size="l"
/>

View file

@ -9,11 +9,7 @@ import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiIcon, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ConnectorIcon } from '@kbn/search-shared-ui';
import {
SearchEmptyPrompt,
DecorativeHorizontalStepper,
EuiIconPlugs,
} from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { SERVERLESS_ES_CONNECTORS_ID } from '@kbn/deeplinks-search/constants';
import { BACK_LABEL, COMING_SOON_LABEL } from '../../../../common/i18n_string';
import { useKibanaServices } from '../../hooks/use_kibana';
@ -35,7 +31,7 @@ export const ElasticManagedConnectorsEmptyPrompt: React.FC = () => {
label: BACK_LABEL,
onClickBack: () => navigateToApp(SERVERLESS_ES_CONNECTORS_ID),
}}
icon={EuiIconPlugs}
icon="plugs"
title={i18n.translate('xpack.serverlessSearch.elasticManagedConnectorEmpty.title', {
defaultMessage: 'Elastic managed connectors',
})}
@ -114,7 +110,7 @@ export const ElasticManagedConnectorsEmptyPrompt: React.FC = () => {
justifyContent="center"
>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconPlugs} />
<EuiIcon color="primary" size="l" type="plugs" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type="logoElastic" />

View file

@ -18,11 +18,7 @@ import { i18n } from '@kbn/i18n';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { ConnectorIcon } from '@kbn/search-shared-ui';
import {
SearchEmptyPrompt,
DecorativeHorizontalStepper,
EuiIconPlugs,
} from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { docLinks } from '../../../../common/doc_links';
import { useConnectorTypes } from '../../hooks/api/use_connector_types';
import { useCreateConnector } from '../../hooks/api/use_create_connector';
@ -38,7 +34,7 @@ export const SelfManagedConnectorsEmptyPrompt: React.FC = () => {
return (
<SearchEmptyPrompt
icon={EuiIconPlugs}
icon="plugs"
title={i18n.translate('xpack.serverlessSearch.elasticManagedConnectorEmpty.title', {
defaultMessage: 'Elastic managed connectors',
})}
@ -114,7 +110,7 @@ export const SelfManagedConnectorsEmptyPrompt: React.FC = () => {
justifyContent="center"
>
<EuiFlexItem grow={false}>
<EuiIcon color="primary" size="l" type={EuiIconPlugs} />
<EuiIcon color="primary" size="l" type="plugs" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />
@ -177,7 +173,7 @@ export const SelfManagedConnectorsEmptyPrompt: React.FC = () => {
<EuiIcon size="m" type="sortRight" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconPlugs} />
<EuiIcon color="primary" size="l" type="plugs" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />

View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SearchEmptyPrompt, DecorativeHorizontalStepper, EuiIconWeb } from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { SERVERLESS_ES_WEB_CRAWLERS_ID } from '@kbn/deeplinks-search/constants';
import { BACK_LABEL, COMING_SOON_LABEL } from '../../../../common/i18n_string';
import { useKibanaServices } from '../../hooks/use_kibana';
@ -23,7 +23,7 @@ export const ElasticManagedWebCrawlersEmptyPrompt = () => {
label: BACK_LABEL,
onClickBack: () => navigateToApp(SERVERLESS_ES_WEB_CRAWLERS_ID),
}}
icon={EuiIconWeb}
icon="web"
title={i18n.translate('xpack.serverlessSearch.elasticManagedWebCrawlerEmpty.title', {
defaultMessage: 'Elastic managed web crawlers',
})}
@ -87,7 +87,7 @@ export const ElasticManagedWebCrawlersEmptyPrompt = () => {
justifyContent="center"
>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type="logoElastic" />

View file

@ -15,7 +15,7 @@ import {
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SearchEmptyPrompt, DecorativeHorizontalStepper, EuiIconWeb } from '@kbn/search-shared-ui';
import { SearchEmptyPrompt, DecorativeHorizontalStepper } from '@kbn/search-shared-ui';
import { FormattedMessage } from '@kbn/i18n-react';
import { useAssetBasePath } from '../../hooks/use_asset_base_path';
@ -25,7 +25,7 @@ export const SelfManagedWebCrawlersEmptyPrompt = () => {
return (
<SearchEmptyPrompt
icon={EuiIconWeb}
icon="web"
title={i18n.translate('xpack.serverlessSearch.webCrawlersEmpty.title', {
defaultMessage: 'Set up a web crawler',
})}
@ -55,7 +55,7 @@ export const SelfManagedWebCrawlersEmptyPrompt = () => {
justifyContent="center"
>
<EuiFlexItem grow={false}>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />
@ -149,7 +149,7 @@ export const SelfManagedWebCrawlersEmptyPrompt = () => {
<EuiIcon size="m" type="sortRight" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon color="primary" size="l" type={EuiIconWeb} />
<EuiIcon color="primary" size="l" type="web" />
</EuiFlexItem>
<EuiFlexItem>
<EuiIcon size="m" type="sortRight" />