Confirmation Modal - show warning message when nothing has been changed in modal.

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 { useEntityEnginePrivileges } from '../hooks/use_entity_engine_privileges';
 import { MissingPrivilegesCallout } from './missing_privileges_callout';
@@ -57,6 +61,7 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
   riskScore,
   entityStore,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const [enablements, setEnablements] = useState({
     riskScore: !!riskScore.checked,
     entityStore: !!entityStore.checked,
@@ -131,13 +136,29 @@ 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="spaceBetween" alignItems="center">
+          <EuiFlexItem>
+            <EuiCallOut
+              color="danger"
+              css={css`
+                border-radius: ${euiTheme.border.radius.medium};
+              `}
+            >
+              <p>{ENABLEMENT_WARNING_SELECT_TO_PROCEED}</p>
+            </EuiCallOut>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup direction="row">
+              <EuiButtonEmpty onClick={() => toggle(false)}>{'Cancel'}</EuiButtonEmpty>
+              <EuiButton onClick={enableStore(enablements)} fill>
+                <FormattedMessage
+                  id="xpack.securitySolution.entityAnalytics.enablements.modal.enable"
+                  defaultMessage="Enable"
+                />
+              </EuiButton>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiModalFooter>
     </EuiModal>
   );

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.both',
+  {
+    defaultMessage: 'Please enable at least one option to proceed.',
+  }
+);