diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx index d6d8859b280b85..a12611ea270357 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx @@ -5,10 +5,10 @@ */ import React, { memo, MouseEventHandler } from 'react'; -import { EuiLink, EuiLinkProps } from '@elastic/eui'; +import { EuiLink, EuiLinkProps, EuiButton, EuiButtonProps } from '@elastic/eui'; import { useNavigateToAppEventHandler } from '../../hooks/endpoint/use_navigate_to_app_event_handler'; -type LinkToAppProps = EuiLinkProps & { +type LinkToAppProps = (EuiLinkProps | EuiButtonProps) & { /** the app id - normally the value of the `id` in that plugin's `kibana.json` */ appId: string; /** Any app specific path (route) */ @@ -16,6 +16,8 @@ type LinkToAppProps = EuiLinkProps & { // eslint-disable-next-line @typescript-eslint/no-explicit-any appState?: any; onClick?: MouseEventHandler; + /** Uses an EuiButton element for styling */ + asButton?: boolean; }; /** @@ -23,13 +25,22 @@ type LinkToAppProps = EuiLinkProps & { * a given app without causing a full browser refresh */ export const LinkToApp = memo( - ({ appId, appPath: path, appState: state, onClick, children, ...otherProps }) => { + ({ appId, appPath: path, appState: state, onClick, asButton, children, ...otherProps }) => { const handleOnClick = useNavigateToAppEventHandler(appId, { path, state, onClick }); + return ( - // eslint-disable-next-line @elastic/eui/href-or-on-click - - {children} - + <> + {asButton && asButton === true ? ( + + {children} + + ) : ( + // eslint-disable-next-line @elastic/eui/href-or-on-click + + {children} + + )} + ); } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx index 7b4dc36def1335..df1591bf78778a 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx @@ -6,8 +6,8 @@ import React, { memo } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiEmptyPrompt, EuiText } from '@elastic/eui'; -import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public'; +import { EuiCallOut, EuiText, EuiTitle, EuiSpacer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app'; import { CustomConfigureDatasourceContent, @@ -21,43 +21,65 @@ import { getPolicyDetailPath } from '../../../../common/routing'; */ export const ConfigureEndpointDatasource = memo( ({ from, datasourceId }: CustomConfigureDatasourceProps) => { - const { services } = useKibana(); let policyUrl = ''; if (from === 'edit' && datasourceId) { policyUrl = getPolicyDetailPath(datasourceId); } return ( - + <> + +

+ +

+
+ + +

{from === 'edit' ? ( - + <> - + + + + + ) : ( )}

- } - /> +
+ ); } );