[Security Solution][Atack/Alerts] Flyout header: Assignees

x-pack/solutions/security/plugins/security_solution/public/flyout/attack_details/components/assignees.test.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+
+import { Assignees } from './assignees';
+import { TestProviders } from '../../../common/mock';
+import { useAttackDetailsAssignees } from '../hooks/use_attack_details_assignees';
+import { HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID } from '../constants/test_ids';
+
+import {
+  USERS_AVATARS_COUNT_BADGE_TEST_ID,
+  USERS_AVATARS_PANEL_TEST_ID,
+  USER_AVATAR_ITEM_TEST_ID,
+} from '../../../common/components/user_profiles/test_ids';
+
+jest.mock('../hooks/use_attack_details_assignees');
+jest.mock('../../../common/components/empty_value', () => ({
+  getEmptyTagValue: () => '—',
+}));
+
+const mockUseAttackDetailsAssignees = useAttackDetailsAssignees as jest.MockedFunction<
+  typeof useAttackDetailsAssignees
+>;
+
+const defaultHookReturn = {
+  assignedUserIds: ['uid-1'],
+  assignedUsers: [
+    {
+      uid: 'uid-1',
+      enabled: true,
+      user: { username: 'user1', full_name: 'User 1' },
+      data: {},
+    },
+  ],
+  onApplyAssignees: jest.fn().mockResolvedValue(undefined),
+  hasPermission: true,
+  isPlatinumPlus: true,
+  upsellingMessage: undefined,
+  isLoading: false,
+};
+
+const renderAssignees = () =>
+  render(
+    <TestProviders>
+      <Assignees />
+    </TestProviders>
+  );
+
+describe('Assignees', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAttackDetailsAssignees.mockReturnValue(
+      defaultHookReturn as ReturnType<typeof useAttackDetailsAssignees>
+    );
+  });
+
+  it('renders empty state when user has no permission', () => {
+    mockUseAttackDetailsAssignees.mockReturnValue({
+      ...defaultHookReturn,
+      hasPermission: false,
+    } as ReturnType<typeof useAttackDetailsAssignees>);
+
+    renderAssignees();
+
+    expect(screen.getByTestId('attackDetailsFlyoutHeaderAssigneesEmpty')).toBeInTheDocument();
+    expect(screen.getByTestId('attackDetailsFlyoutHeaderAssigneesEmpty')).toHaveTextContent('—');
+    expect(screen.queryByTestId('attackDetailsFlyoutHeaderAssignees')).not.toBeInTheDocument();
+  });
+
+  it('renders empty state when not platinum plus', () => {
+    mockUseAttackDetailsAssignees.mockReturnValue({
+      ...defaultHookReturn,
+      isPlatinumPlus: false,
+    } as ReturnType<typeof useAttackDetailsAssignees>);
+
+    renderAssignees();
+
+    expect(screen.getByTestId('attackDetailsFlyoutHeaderAssigneesEmpty')).toBeInTheDocument();
+    expect(screen.queryByTestId('attackDetailsFlyoutHeaderAssignees')).not.toBeInTheDocument();
+  });
+
+  it('renders assignees block with add button when has permission and platinum', () => {
+    renderAssignees();
+
+    expect(screen.getByTestId('attackDetailsFlyoutHeaderAssignees')).toBeInTheDocument();
+    expect(screen.getByTestId(HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID)).not.toBeDisabled();
+  });
+
+  it('renders avatars when assignedUsers is provided', () => {
+    renderAssignees();
+
+    expect(screen.getByTestId(USERS_AVATARS_PANEL_TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(USER_AVATAR_ITEM_TEST_ID('user1'))).toBeInTheDocument();
+  });
+
+  it('renders count badge when more than two assignees', () => {
+    mockUseAttackDetailsAssignees.mockReturnValue({
+      ...defaultHookReturn,
+      assignedUserIds: ['uid-1', 'uid-2', 'uid-3'],
+      assignedUsers: [
+        { uid: 'uid-1', enabled: true, user: { username: 'u1', full_name: 'U1' }, data: {} },
+        { uid: 'uid-2', enabled: true, user: { username: 'u2', full_name: 'U2' }, data: {} },
+        { uid: 'uid-3', enabled: true, user: { username: 'u3', full_name: 'U3' }, data: {} },
+      ],
+    } as ReturnType<typeof useAttackDetailsAssignees>);
+
+    renderAssignees();
+
+    expect(screen.getByTestId(USERS_AVATARS_COUNT_BADGE_TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(USERS_AVATARS_COUNT_BADGE_TEST_ID)).toHaveTextContent('3');
+  });
+
+  it('disables add button when loading', () => {
+    mockUseAttackDetailsAssignees.mockReturnValue({
+      ...defaultHookReturn,
+      isLoading: true,
+    } as ReturnType<typeof useAttackDetailsAssignees>);
+
+    renderAssignees();
+
+    expect(screen.getByTestId(HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID)).toBeDisabled();
+  });
+
+  it('does not render avatars when assignedUsers is empty', () => {
+    mockUseAttackDetailsAssignees.mockReturnValue({
+      ...defaultHookReturn,
+      assignedUserIds: [],
+      assignedUsers: undefined,
+    } as ReturnType<typeof useAttackDetailsAssignees>);
+
+    renderAssignees();
+
+    expect(screen.getByTestId('attackDetailsFlyoutHeaderAssignees')).toBeInTheDocument();
+    expect(screen.queryByTestId(USERS_AVATARS_PANEL_TEST_ID)).not.toBeInTheDocument();
+    expect(screen.getByTestId(HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID)).toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/flyout/attack_details/components/assignees.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 type { FC } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiToolTip,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { ASSIGNEES_PANEL_WIDTH } from '../../../common/components/assignees/constants';
+import type { AssigneesApplyPanelProps } from '../../../common/components/assignees/assignees_apply_panel';
+import { AssigneesApplyPanel } from '../../../common/components/assignees/assignees_apply_panel';
+import { UsersAvatarsPanel } from '../../../common/components/user_profiles/users_avatars_panel';
+import { useAttackDetailsAssignees } from '../hooks/use_attack_details_assignees';
+import { HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID } from '../constants/test_ids';
+
+const UpdateAssigneesButton: FC<{
+  isDisabled: boolean;
+  toolTipMessage: string;
+  togglePopover: () => void;
+}> = memo(({ togglePopover, isDisabled, toolTipMessage }) => (
+  <EuiToolTip position="bottom" content={toolTipMessage}>
+    <EuiButtonIcon
+      aria-label="Update assignees"
+      data-test-subj={HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID}
+      iconType="plusInCircle"
+      onClick={togglePopover}
+      isDisabled={isDisabled}
+    />
+  </EuiToolTip>
+));
+UpdateAssigneesButton.displayName = 'UpdateAssigneesButton';
+
+/**
+ * Assignees block for the Attack details flyout header.
+ * Matches the look of document_details assignees (avatars + popover with AssigneesApplyPanel).
+ */
+export const Assignees = memo(() => {
+  const {
+    assignedUserIds,
+    assignedUsers,
+    onApplyAssignees,
+    hasPermission,
+    isPlatinumPlus,
+    upsellingMessage,
+    isLoading,
+  } = useAttackDetailsAssignees();
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const togglePopover = useCallback(() => {
+    setIsPopoverOpen((value) => !value);
+  }, []);
+
+  const handleApplyAssignees = useCallback<AssigneesApplyPanelProps['onApply']>(
+    async (assignees) => {
+      setIsPopoverOpen(false);
+      await onApplyAssignees(assignees);
+    },
+    [onApplyAssignees]
+  );
+
+  const searchInputId = useGeneratedHtmlId({
+    prefix: 'attackDetailsAssigneesSearchInput',
+  });
+
+  const showAssignees = hasPermission && isPlatinumPlus;
+
+  const toolTipMessage =
+    upsellingMessage ??
+    i18n.translate('xpack.securitySolution.attackDetailsFlyout.header.assignees.popoverTooltip', {
+      defaultMessage: 'Assign attack',
+    });
+
+  const updateAssigneesPopover = useMemo(
+    () => (
+      <EuiPopover
+        panelPaddingSize="none"
+        initialFocus={`[id="${searchInputId}"]`}
+        button={
+          <UpdateAssigneesButton
+            togglePopover={togglePopover}
+            isDisabled={!hasPermission || !isPlatinumPlus || isLoading}
+            toolTipMessage={toolTipMessage}
+          />
+        }
+        isOpen={isPopoverOpen}
+        panelStyle={{
+          minWidth: ASSIGNEES_PANEL_WIDTH,
+        }}
+        closePopover={togglePopover}
+      >
+        <AssigneesApplyPanel
+          searchInputId={searchInputId}
+          assignedUserIds={assignedUserIds}
+          onApply={handleApplyAssignees}
+        />
+      </EuiPopover>
+    ),
+    [
+      assignedUserIds,
+      handleApplyAssignees,
+      hasPermission,
+      isPlatinumPlus,
+      isLoading,
+      isPopoverOpen,
+      searchInputId,
+      togglePopover,
+      toolTipMessage,
+    ]
+  );
+
+  if (!showAssignees) {
+    return <div data-test-subj="attackDetailsFlyoutHeaderAssigneesEmpty">{getEmptyTagValue()}</div>;
+  }
+
+  return (
+    <EuiFlexGroup
+      gutterSize="none"
+      responsive={false}
+      data-test-subj="attackDetailsFlyoutHeaderAssignees"
+    >
+      {assignedUsers && assignedUsers.length > 0 && (
+        <EuiFlexItem grow={false}>
+          <UsersAvatarsPanel userProfiles={assignedUsers} maxVisibleAvatars={2} />
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem grow={false}>{updateAssigneesPopover}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});
+
+Assignees.displayName = 'Assignees';

x-pack/solutions/security/plugins/security_solution/public/flyout/attack_details/components/header_title.test.tsx

@@ -11,7 +11,11 @@ import { render, screen } from '@testing-library/react';
 import { HeaderTitle } from './header_title';
 import { TestProviders } from '../../../common/mock';
 import { useHeaderData } from '../hooks/use_header_data';
-import { HEADER_ALERTS_BLOCK_TEST_ID, HEADER_BADGE_TEST_ID } from '../constants/test_ids';
+import {
+  HEADER_ALERTS_BLOCK_TEST_ID,
+  HEADER_ASSIGNEES_BLOCK_TEST_ID,
+  HEADER_BADGE_TEST_ID,
+} from '../constants/test_ids';
 
 jest.mock('../hooks/use_header_data', () => ({
   useHeaderData: jest.fn(),
@@ -31,6 +35,10 @@ jest.mock('./status', () => ({
   Status: () => <div data-test-subj="status" />,
 }));
 
+jest.mock('./assignees', () => ({
+  Assignees: () => <div data-test-subj="assignees" />,
+}));
+
 jest.mock('../../shared/components/alert_header_block', () => ({
   AlertHeaderBlock: ({
     children,
@@ -111,4 +119,15 @@ describe('HeaderTitle', () => {
 
     expect(screen.queryByTestId('formatted-date')).not.toBeInTheDocument();
   });
+
+  it('renders the assignees block next to the alerts block', () => {
+    render(
+      <TestProviders>
+        <HeaderTitle />
+      </TestProviders>
+    );
+
+    expect(screen.getByTestId(HEADER_ASSIGNEES_BLOCK_TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId('assignees')).toBeInTheDocument();
+  });
 });

x-pack/solutions/security/plugins/security_solution/public/flyout/attack_details/components/header_title.tsx

@@ -13,9 +13,11 @@ import { i18n } from '@kbn/i18n';
 import { FlyoutTitle } from '../../shared/components/flyout_title';
 import { PreferenceFormattedDate } from '../../../common/components/formatted_date';
 import { Status } from './status';
+import { Assignees } from './assignees';
 import { AlertHeaderBlock } from '../../shared/components/alert_header_block';
 import {
   HEADER_ALERTS_BLOCK_TEST_ID,
+  HEADER_ASSIGNEES_BLOCK_TEST_ID,
   HEADER_BADGE_TEST_ID,
   HEADER_TITLE_TEST_ID,
 } from '../constants/test_ids';
@@ -78,6 +80,20 @@ export const HeaderTitle = memo(() => {
                 {alertsCount}
               </AlertHeaderBlock>
             </EuiFlexItem>
+            <EuiFlexItem>
+              <AlertHeaderBlock
+                hasBorder
+                title={
+                  <FormattedMessage
+                    id="xpack.securitySolution.attackDetailsFlyout.header.assigneesTitle"
+                    defaultMessage="Assignees"
+                  />
+                }
+                data-test-subj={HEADER_ASSIGNEES_BLOCK_TEST_ID}
+              >
+                <Assignees />
+              </AlertHeaderBlock>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/solutions/security/plugins/security_solution/public/flyout/attack_details/constants/test_ids.ts

@@ -21,6 +21,10 @@ export const HEADER_ALERTS_BLOCK_TEST_ID =
 export const HEADER_STATUS_BLOCK_TEST_ID =
   `${ATTACK_DETAILS_FLYOUT_PREFIX}-header-status-block` as const;
 export const HEADER_BADGE_TEST_ID = `${ATTACK_DETAILS_FLYOUT_PREFIX}-header-badge` as const;
+export const HEADER_ASSIGNEES_BLOCK_TEST_ID =
+  `${ATTACK_DETAILS_FLYOUT_PREFIX}-header-assignees-block` as const;
+export const HEADER_ASSIGNEES_ADD_BUTTON_TEST_ID =
+  `${ATTACK_DETAILS_FLYOUT_PREFIX}-header-assignees-add-button` as const;
 export const INSIGHTS_SECTION_TEST_ID =
   `${ATTACK_DETAILS_FLYOUT_PREFIX}-overview-insights-section` as const;
 export const INSIGHTS_ENTITIES_TEST_ID =