From fc02b21daf52cbe6c8d9abdea85a91a02d26a77a Mon Sep 17 00:00:00 2001 From: Sergi Massaneda Date: Mon, 1 Jul 2024 13:58:27 +0200 Subject: [PATCH] [SecuritySolution] Create integration link added to Security onboarding page (#187201) ## Summary Link panel to go to create integrations added. It is a compressed version of the link card displayed on the integrations page. The integration creation feature is not enabled by default, to enable the feature: ``` xpack.integration_assistant.enabled: true ``` ![link](https://github.com/elastic/kibana/assets/17747913/2532819e-da6e-4d2f-ab07-45042d6a069f) When the integrationAssistant plugin is not enabled (default) the link does not appear. ![no_link](https://github.com/elastic/kibana/assets/17747913/82cc67b1-ce16-4fd8-ad59-f8a4d4cd31fb) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../integrations/layouts/default.tsx | 2 +- .../create_integration_card_button.tsx | 62 +++++++++++------ x-pack/plugins/security_solution/kibana.jsonc | 3 +- .../step_links/add_integration_buttons.tsx | 66 +++++++++++-------- .../plugins/security_solution/public/types.ts | 2 + .../plugins/security_solution/tsconfig.json | 1 + 6 files changed, 85 insertions(+), 51 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx index 5b1105762dd5..7f49cae5979c 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx @@ -81,7 +81,7 @@ export const DefaultLayout: React.FC = memo( rightColumn={ CreateIntegrationCardButton ? ( - + ) : undefined } diff --git a/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx b/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx index cb6e64a1aa55..55baee561bb4 100644 --- a/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx +++ b/x-pack/plugins/integration_assistant/public/components/create_integration_card_button/create_integration_card_button.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { useCallback, useMemo } from 'react'; import { EuiLink, EuiPanel, @@ -15,41 +15,53 @@ import { EuiIcon, EuiText, EuiTitle, - useEuiTheme, + useEuiPaddingCSS, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; import integrationsImage from '../../common/images/integrations_light.svg'; +import { useKibana } from '../../common/hooks/use_kibana'; -const useStyles = () => { - const { euiTheme } = useEuiTheme(); +const useStyles = (compressed: boolean) => { + const paddings = useEuiPaddingCSS(); return { image: css` - width: 160px; - height: 155px; + width: ${compressed ? '140px' : '160px'}; + height: ${compressed ? '90px' : '155px'}; object-fit: cover; object-position: left center; `, container: css` - height: 135px; + height: ${compressed ? '80px' : '135px'}; `, textContainer: css` height: 100%; - padding: ${euiTheme.size.l} 0 ${euiTheme.size.l} ${euiTheme.size.l}; + ${compressed ? `${paddings.m.styles}` : `${paddings.l.styles} padding-right: 0;`} `, }; }; export interface CreateIntegrationCardButtonProps { - href: string; + compressed?: boolean; } export const CreateIntegrationCardButton = React.memo( - ({ href }) => { - const styles = useStyles(); + ({ compressed = false }) => { + const { getUrlForApp, navigateToUrl } = useKibana().services.application; + const styles = useStyles(compressed); + + const href = useMemo(() => getUrlForApp('integrations', { path: '/create' }), [getUrlForApp]); + const navigate = useCallback( + (ev) => { + ev.preventDefault(); + navigateToUrl(href); + }, + [href, navigateToUrl] + ); + return ( - - - + {!compressed && ( + + + + )} - - + {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} + + - + ( - - - - - - - - - - - -)); +export const AddIntegrationButtons: React.FC = React.memo(() => { + const { integrationAssistant } = useKibana().services; + const CreateIntegrationCardButton = integrationAssistant?.CreateIntegrationCardButton; + return ( + + + + + + + + + + + {CreateIntegrationCardButton && ( + + + + )} + + ); +}); AddIntegrationButtons.displayName = 'AddIntegrationButtons'; diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index 1eb944143c0f..129f3e7728f9 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -60,6 +60,7 @@ import type { ChartsPluginStart } from '@kbn/charts-plugin/public'; import type { SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public'; import type { PluginStartContract } from '@kbn/alerting-plugin/public/plugin'; import type { MapsStartApi } from '@kbn/maps-plugin/public'; +import type { IntegrationAssistantPluginStart } from '@kbn/integration-assistant-plugin/public'; import type { ResolverPluginSetup } from './resolver/types'; import type { Inspect } from '../common/search_strategy'; import type { Detections } from './detections'; @@ -152,6 +153,7 @@ export interface StartPlugins { savedSearch: SavedSearchPublicPluginStart; alerting: PluginStartContract; core: CoreStart; + integrationAssistant?: IntegrationAssistantPluginStart; } export interface StartPluginsDependencies extends StartPlugins { diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json index f1320dc3205b..400efb61ae0a 100644 --- a/x-pack/plugins/security_solution/tsconfig.json +++ b/x-pack/plugins/security_solution/tsconfig.json @@ -209,5 +209,6 @@ "@kbn/core-analytics-browser", "@kbn/core-i18n-browser", "@kbn/core-theme-browser", + "@kbn/integration-assistant-plugin", ] }