[RAC] Actions popovers UI unification

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -33,7 +33,7 @@ import {
  EuiDataGridColumn,
  EuiFlexGroup,
  EuiFlexItem,
- EuiContextMenu,
+ EuiContextMenuPanel,
  EuiPopover,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -212,26 +212,21 @@ function ObservabilityActions({
  onUpdateFailure: onAlertStatusUpdated,
  });
 
- const actionsPanels = useMemo(() => {
+ const actionsMenuItems = useMemo(() => {
  return [
- {
- id: 0,
- content: [
- timelines.getAddToExistingCaseButton({
- event,
- casePermissions,
- appId: observabilityFeatureId,
- onClose: afterCaseSelection,
- }),
- timelines.getAddToNewCaseButton({
- event,
- casePermissions,
- appId: observabilityFeatureId,
- onClose: afterCaseSelection,
- }),
- ...(alertPermissions.crud ? statusActionItems : []),
- ],
- },
+ timelines.getAddToExistingCaseButton({
+ event,
+ casePermissions,
+ appId: observabilityFeatureId,
+ onClose: afterCaseSelection,
+ }),
+ timelines.getAddToNewCaseButton({
+ event,
+ casePermissions,
+ appId: observabilityFeatureId,
+ onClose: afterCaseSelection,
+ }),
+ ...(alertPermissions.crud ? statusActionItems : []),
  ];
  }, [afterCaseSelection, casePermissions, timelines, event, statusActionItems, alertPermissions]);
 
@@ -255,26 +250,28 @@ function ObservabilityActions({
  aria-label="View alert in app"
  />
  </EuiFlexItem>
- <EuiFlexItem>
- <EuiPopover
- button={
- <EuiButtonIcon
- display="empty"
- size="s"
- color="text"
- iconType="boxesHorizontal"
- aria-label="More"
- onClick={() => toggleActionsPopover(eventId)}
- />
- }
- isOpen={openActionsPopoverId === eventId}
- closePopover={closeActionsPopover}
- panelPaddingSize="none"
- anchorPosition="downLeft"
- >
- <EuiContextMenu panels={actionsPanels} initialPanelId={0} />
- </EuiPopover>
- </EuiFlexItem>
+ {actionsMenuItems.length > 0 && (
+ <EuiFlexItem>
+ <EuiPopover
+ button={
+ <EuiButtonIcon
+ display="empty"
+ size="s"
+ color="text"
+ iconType="boxesHorizontal"
+ aria-label="More"
+ onClick={() => toggleActionsPopover(eventId)}
+ />
+ }
+ isOpen={openActionsPopoverId === eventId}
+ closePopover={closeActionsPopover}
+ panelPaddingSize="none"
+ anchorPosition="downLeft"
+ >
+ <EuiContextMenuPanel size="s" items={actionsMenuItems} />
+ </EuiPopover>
+ </EuiFlexItem>
+ )}
  </EuiFlexGroup>
  </>
  );

x-pack/plugins/security_solution/public/common/mock/mock_timelines_plugin.tsx

@@ -19,6 +19,14 @@ export const mockTimelines = {
  .fn()
  .mockReturnValue(<div data-test-subj="add-to-case-action">{'Add to case'}</div>),
  getAddToCaseAction: jest.fn(),
- getAddToExistingCaseButton: jest.fn(),
- getAddToNewCaseButton: jest.fn(),
+ getAddToExistingCaseButton: jest.fn().mockReturnValue(
+ <div key="add-to-existing-case-action" data-test-subj="add-to-existing-case-action">
+ {'Add to existing case'}
+ </div>
+ ),
+ getAddToNewCaseButton: jest.fn().mockReturnValue(
+ <div key="add-to-new-case-action" data-test-subj="add-to-new-case-action">
+ {'Add to new case'}
+ </div>
+ ),
 };

x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.test.tsx

@@ -56,7 +56,8 @@ jest.mock('../../../../common/lib/kibana', () => ({
 }));
 
 const actionMenuButton = '[data-test-subj="timeline-context-menu-button"] button';
-const addToCaseButton = '[data-test-subj="attach-alert-to-case-button"]';
+const addToExistingCaseButton = '[data-test-subj="add-to-existing-case-action"]';
+const addToNewCaseButton = '[data-test-subj="add-to-new-case-action"]';
 
 describe('InvestigateInResolverAction', () => {
  test('it render AddToCase context menu item if timelineId === TimelineId.detectionsPage', () => {
@@ -65,7 +66,8 @@ describe('InvestigateInResolverAction', () => {
  });
 
  wrapper.find(actionMenuButton).simulate('click');
- expect(wrapper.find(addToCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
  });
 
  test('it render AddToCase context menu item if timelineId === TimelineId.detectionsRulesDetailsPage', () => {
@@ -77,7 +79,8 @@ describe('InvestigateInResolverAction', () => {
  );
 
  wrapper.find(actionMenuButton).simulate('click');
- expect(wrapper.find(addToCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
  });
 
  test('it render AddToCase context menu item if timelineId === TimelineId.active', () => {
@@ -86,14 +89,16 @@ describe('InvestigateInResolverAction', () => {
  });
 
  wrapper.find(actionMenuButton).simulate('click');
- expect(wrapper.find(addToCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
+ expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
  });
 
  test('it does NOT render AddToCase context menu item when timelineId is not in the allowed list', () => {
  const wrapper = mount(<AlertContextMenu {...props} timelineId="timeline-test" />, {
  wrappingComponent: TestProviders,
  });
  wrapper.find(actionMenuButton).simulate('click');
- expect(wrapper.find(addToCaseButton).first().exists()).toEqual(false);
+ expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(false);
+ expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(false);
  });
 });