diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx new file mode 100644 index 0000000000000..bc41b1d38ecae --- /dev/null +++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx @@ -0,0 +1,74 @@ +/* + * 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. + */ + +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { EntityStoreEnablementModal } from './enablement_modal'; +import { TestProviders } from '../../../../common/mock'; + +const mockToggle = jest.fn(); +const mockEnableStore = jest.fn(() => jest.fn()); + +const defaultProps = { + visible: true, + toggle: mockToggle, + enableStore: mockEnableStore, + riskScore: { disabled: false, checked: false }, + entityStore: { disabled: false, checked: false }, +}; + +const renderComponent = (props = defaultProps) => { + return render(, { wrapper: TestProviders }); +}; + +describe('EntityStoreEnablementModal', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('should render the modal when visible is true', () => { + renderComponent(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + }); + + it('should not render the modal when visible is false', () => { + renderComponent({ ...defaultProps, visible: false }); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + }); + + it('should call toggle function when cancel button is clicked', () => { + renderComponent(); + fireEvent.click(screen.getByText('Cancel')); + expect(mockToggle).toHaveBeenCalledWith(false); + }); + + it('should call enableStore function when enable button is clicked', () => { + renderComponent({ + ...defaultProps, + riskScore: { ...defaultProps.riskScore, checked: true }, + entityStore: { ...defaultProps.entityStore, checked: true }, + }); + fireEvent.click(screen.getByText('Enable')); + expect(mockEnableStore).toHaveBeenCalledWith({ riskScore: true, entityStore: true }); + }); + + it('should display proceed warning when no enablement options are selected', () => { + renderComponent(); + expect(screen.getByText('Please enable at least one option to proceed.')).toBeInTheDocument(); + }); + + it('should disable the enable button when enablementOptions are false', () => { + renderComponent({ + ...defaultProps, + riskScore: { ...defaultProps.riskScore, checked: false }, + entityStore: { ...defaultProps.entityStore, checked: false }, + }); + + const enableButton = screen.getByRole('button', { name: /Enable/i }); + expect(enableButton).toBeDisabled(); + }); +}); diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx index bff0fabb3522d..043925f5e5778 100644 --- a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx +++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx @@ -20,13 +20,17 @@ import { EuiButtonEmpty, EuiBetaBadge, EuiToolTip, + EuiCallOut, + useEuiTheme, } from '@elastic/eui'; +import { css } from '@emotion/react'; import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { TECHNICAL_PREVIEW, TECHNICAL_PREVIEW_TOOLTIP } from '../../../../common/translations'; import { ENABLEMENT_DESCRIPTION_RISK_ENGINE_ONLY, ENABLEMENT_DESCRIPTION_ENTITY_STORE_ONLY, + ENABLEMENT_WARNING_SELECT_TO_PROCEED, } from '../translations'; import { useMissingRiskEnginePrivileges } from '../../../hooks/use_missing_risk_engine_privileges'; import { RiskEnginePrivilegesCallOut } from '../../risk_engine_privileges_callout'; @@ -57,11 +61,13 @@ export const EntityStoreEnablementModal: React.FC { + const { euiTheme } = useEuiTheme(); const [enablements, setEnablements] = useState({ riskScore: !!riskScore.checked, entityStore: !!entityStore.checked, }); const riskEnginePrivileges = useMissingRiskEnginePrivileges(); + const enablementOptions = enablements.riskScore || enablements.entityStore; if (!visible) { return null; @@ -69,6 +75,17 @@ export const EntityStoreEnablementModal: React.FC +

{ENABLEMENT_WARNING_SELECT_TO_PROCEED}

+ + ); return ( toggle(false)}> @@ -131,13 +148,25 @@ export const EntityStoreEnablementModal: React.FC - toggle(false)}>{'Cancel'} - - - + + {!enablementOptions ? {proceedWarning} : null} + + + toggle(false)}>{'Cancel'} + + + + + + ); diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/translations.ts b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/translations.ts index 4c113dd533acb..f2920612543d9 100644 --- a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/translations.ts +++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/translations.ts @@ -62,3 +62,10 @@ export const ENABLEMENT_DESCRIPTION_BOTH = i18n.translate( 'Your entity store is currently empty. Add information about your entities directly from your logs, or import them using a text file.', } ); + +export const ENABLEMENT_WARNING_SELECT_TO_PROCEED = i18n.translate( + 'xpack.securitySolution.entityAnalytics.entityStore.enablement.description.enablementWarningMessage', + { + defaultMessage: 'Please enable at least one option to proceed.', + } +);