[RAC] Actions popovers UI unification (elastic#109221)

* popover padding size unified * remove panels from all context menus * action items order changed * cases menu items test fixed * translations and small changes * remove components not used anywhere Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Angela Chuang <yi-chun.chuang@elastic.co>
kibanamachine · Aug 23, 2021 · 93b310e · 93b310e
1 parent e818e98
commit 93b310e
Show file tree

Hide file tree

Showing 23 changed files with 209 additions and 485 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/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>
     </>
   );

diff --git a/x-pack/plugins/security_solution/public/common/mock/mock_timelines_plugin.tsx b/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>
+  ),
 };
diff --git a/...ion/public/detections/components/alerts_table/timeline_actions/add_endpoint_exception.tsx b/...ion/public/detections/components/alerts_table/timeline_actions/add_endpoint_exception.tsx
diff --git a/..._solution/public/detections/components/alerts_table/timeline_actions/add_event_filter.tsx b/..._solution/public/detections/components/alerts_table/timeline_actions/add_event_filter.tsx
diff --git a/...ity_solution/public/detections/components/alerts_table/timeline_actions/add_exception.tsx b/...ity_solution/public/detections/components/alerts_table/timeline_actions/add_exception.tsx
diff --git a/...on/public/detections/components/alerts_table/timeline_actions/alert_context_menu.test.tsx b/...on/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);
   });
 });