[9.3] [Entity Analytics] Add ability to access anonymization modal in entity highlight component (#247887) (#248266)

kibanamachine · ymao1 · stephmilovic · web-flow · commit f81b8490caff · 2026-01-08T17:39:17.000+01:00
# Backport This will backport the following commits from `main` to `9.3`: - [[Entity Analytics] Add ability to access anonymization modal in entity highlight component (#247887)](#247887)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Ying Mao <ying.mao@elastic.co> Co-authored-by: Steph Milovic <stephanie.milovic@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_details_flyout/components/entity_highlights_settings.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_details_flyout/components/entity_highlights_settings.test.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { EntityHighlightsSettings } from './entity_highlights_settings';
 import { TestProviders } from '../../../../common/mock';
 
@@ -34,6 +35,19 @@ jest.mock('../../../../agent_builder/hooks/use_agent_builder_attachment', () =>
   }),
 }));
 
+jest.mock(
+  '@kbn/elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management',
+  () => ({
+    AnonymizationSettingsManagement: ({ onClose }: { onClose: () => void }) => (
+      <div data-test-subj="anonymizationSettingsModal">
+        <button type="button" data-test-subj="closeAnonymizationSettingsModal" onClick={onClose}>
+          {'Close'}
+        </button>
+      </div>
+    ),
+  })
+);
+
 describe('EntityHighlightsSettings', () => {
   const defaultProps = {
     showAnonymizedValues: false,
@@ -225,4 +239,37 @@ describe('EntityHighlightsSettings', () => {
 
     expect(screen.getByRole('switch')).not.toBeChecked();
   });
+
+  it('renders the anonymization settings button', () => {
+    render(<EntityHighlightsSettings {...defaultProps} />, {
+      wrapper: TestProviders,
+    });
+
+    expect(screen.getByTestId('anonymizationSettings')).toBeInTheDocument();
+  });
+
+  it('opens the anonymization settings modal when the settings button is clicked', async () => {
+    render(<EntityHighlightsSettings {...defaultProps} />, {
+      wrapper: TestProviders,
+    });
+
+    await userEvent.click(screen.getByTestId('anonymizationSettings'));
+    await waitFor(() =>
+      expect(screen.getByTestId('anonymizationSettingsModal')).toBeInTheDocument()
+    );
+  });
+
+  it('closes the anonymization settings modal when onClose is triggered', async () => {
+    render(<EntityHighlightsSettings {...defaultProps} />, {
+      wrapper: TestProviders,
+    });
+
+    await userEvent.click(screen.getByTestId('anonymizationSettings'));
+    await waitFor(() => expect(screen.getByTestId('anonymizationSettingsModal')).toBeVisible());
+
+    await userEvent.click(screen.getByTestId('closeAnonymizationSettingsModal'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('anonymizationSettingsModal')).not.toBeInTheDocument()
+    );
+  });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_details_flyout/components/entity_highlights_settings.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_details_flyout/components/entity_highlights_settings.tsx
@@ -16,14 +16,15 @@ import {
   EuiPopover,
   EuiButtonIcon,
 } from '@elastic/eui';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { noop } from 'lodash';
 import { ConnectorSelectorInline } from '@kbn/elastic-assistant';
 import { css } from '@emotion/react';
 import { isEmpty } from 'lodash/fp';
+import { AnonymizationSettingsManagement } from '@kbn/elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management';
 import { useAgentBuilderAvailability } from '../../../../agent_builder/hooks/use_agent_builder_availability';
 import { ENTITY_PROMPT } from '../../../../agent_builder/components/prompts';
 import { NewAgentBuilderAttachment } from '../../../../agent_builder/components/new_agent_builder_attachment';
@@ -78,6 +79,10 @@ export const EntityHighlightsSettings: React.FC<EntityHighlightsSettingsProps> =
     [entityIdentifier, assistantResult?.replacements]
   );
 
+  const [isAnonymizationModalVisible, setIsAnonymizationModalVisible] = useState(false);
+  const closeAnonymizationModal = useCallback(() => setIsAnonymizationModalVisible(false), []);
+  const showAnonymizationModal = useCallback(() => setIsAnonymizationModalVisible(true), []);
+
   const getPromptContext = useCallback(
     async () =>
       `### The following entity is under investigation:\nType: ${entityType}\nIdentifier: ${`\`${anonymizedEntityIdentifier}\``}\n#### Context:\n\`\`\`json\n${
@@ -128,18 +133,44 @@ export const EntityHighlightsSettings: React.FC<EntityHighlightsSettingsProps> =
         >
           <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>
-              <EuiSwitch
-                label={i18n.translate(
-                  'xpack.securitySolution.flyout.entityDetails.highlights.showAnonymizedValues',
-                  {
-                    defaultMessage: 'Show anonymized values',
-                  }
-                )}
-                checked={showAnonymizedValues}
-                onChange={onChangeShowAnonymizedValues}
-                compressed
-                disabled={!selectedConversationHasAnonymizedValues}
-              />
+              <EuiFlexGroup
+                alignItems="center"
+                data-test-subj="anonymizationGroup"
+                gutterSize="s"
+                responsive={false}
+                wrap={false}
+              >
+                <EuiFlexItem grow={false}>
+                  <EuiSwitch
+                    label={i18n.translate(
+                      'xpack.securitySolution.flyout.entityDetails.highlights.showAnonymizedValues',
+                      {
+                        defaultMessage: 'Show anonymized values',
+                      }
+                    )}
+                    checked={showAnonymizedValues}
+                    onChange={onChangeShowAnonymizedValues}
+                    compressed
+                    disabled={!selectedConversationHasAnonymizedValues}
+                  />
+                </EuiFlexItem>
+
+                <EuiFlexItem grow={false}>
+                  <EuiButtonIcon
+                    aria-label={i18n.translate(
+                      'xpack.securitySolution.flyout.entityDetails.highlights.anonymizationArialLabel',
+                      {
+                        defaultMessage: 'Anonymization',
+                      }
+                    )}
+                    data-test-subj="anonymizationSettings"
+                    iconType="gear"
+                    onClick={showAnonymizationModal}
+                    size="s"
+                    color="text"
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiContextMenuItem>
@@ -189,6 +220,10 @@ export const EntityHighlightsSettings: React.FC<EntityHighlightsSettingsProps> =
           )
         )}
 
+        {isAnonymizationModalVisible && (
+          <AnonymizationSettingsManagement modalMode onClose={closeAnonymizationModal} />
+        )}
+
         <EuiContextMenuItem
           aria-label={i18n.translate(
             'xpack.securitySolution.flyout.entityDetails.highlights.connectorSelectorAriaLabel',
@@ -218,6 +253,9 @@ export const EntityHighlightsSettings: React.FC<EntityHighlightsSettingsProps> =
       isAgentBuilderEnabled,
       isLoading,
       assistantResult,
+      showAnonymizationModal,
+      closeAnonymizationModal,
+      isAnonymizationModalVisible,
     ]
   );
 
