[8.16] Confirmation Modal - show warning message when nothing has bee…

…n changed in modal. (#199523) (#200691) # Backport This will backport the following commits from `main` to `8.16`: - [Confirmation Modal - show warning message when nothing has been changed in modal. (#199523)](#199523)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n\n\nCo-authored-by: Charlotte Alexandra Wilson <[email protected]>"}}]}] BACKPORT-->
elastic · Nov 19, 2024 · 24efe79 · 24efe79
1 parent 44bfa2d
commit 24efe79
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 7 deletions.
diff --git a/...tion/public/entity_analytics/components/entity_store/components/enablement_modal.test.tsx b/...tion/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(<EntityStoreEnablementModal {...props} />, { 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/..._solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx b/..._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,18 +61,31 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
   riskScore,
   entityStore,
 }) => {
+  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;
   }
   const hasRiskEnginePrivileges =
     !riskEnginePrivileges.isLoading && riskEnginePrivileges?.hasAllRequiredPrivileges;
 
+  const proceedWarning = (
+    <EuiCallOut
+      size="s"
+      color="danger"
+      css={css`
+        border-radius: ${euiTheme.border.radius.medium};
+      `}
+    >
+      <p>{ENABLEMENT_WARNING_SELECT_TO_PROCEED}</p>
+    </EuiCallOut>
+  );
   return (
     <EuiModal onClose={() => toggle(false)}>
       <EuiModalHeader>
@@ -131,13 +148,25 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={() => toggle(false)}>{'Cancel'}</EuiButtonEmpty>
-        <EuiButton onClick={enableStore(enablements)} fill>
-          <FormattedMessage
-            id="xpack.securitySolution.entityAnalytics.enablements.modal.enable"
-            defaultMessage="Enable"
-          />
-        </EuiButton>
+        <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
+          {!enablementOptions ? <EuiFlexItem>{proceedWarning}</EuiFlexItem> : null}
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup direction="row" justifyContent="flexEnd">
+              <EuiButtonEmpty onClick={() => toggle(false)}>{'Cancel'}</EuiButtonEmpty>
+              <EuiButton
+                onClick={enableStore(enablements)}
+                fill
+                isDisabled={!enablementOptions}
+                aria-disabled={!enablementOptions}
+              >
+                <FormattedMessage
+                  id="xpack.securitySolution.entityAnalytics.enablements.modal.enable"
+                  defaultMessage="Enable"
+                />
+              </EuiButton>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiModalFooter>
     </EuiModal>
   );

diff --git a/...plugins/security_solution/public/entity_analytics/components/entity_store/translations.ts b/...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.',
+  }
+);