From 3c576a3dcae908a9eff02908424c1374e2faac3d Mon Sep 17 00:00:00 2001
From: Angela Chuang <yi-chun.chuang@elastic.co>
Date: Thu, 12 Aug 2021 23:17:34 +0100
Subject: [PATCH] fix tests

---
 .../cypress/screens/timeline.ts                 |  4 ++++
 .../security_solution/cypress/tasks/timeline.ts | 17 +++++++++++++++++
 .../__snapshots__/index.test.tsx.snap           | 12 ++++++------
 .../hover_actions/actions/overflow.tsx          | 14 +++++++++++---
 .../public/mock/mock_hover_actions.tsx          |  1 +
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/security_solution/cypress/screens/timeline.ts b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
index 63c4c1364fcd0..c641e8f541f39 100644
--- a/x-pack/plugins/security_solution/cypress/screens/timeline.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
@@ -52,6 +52,8 @@ export const ID_FIELD = '[data-test-subj="timeline"] [data-test-subj="field-name
 
 export const ID_TOGGLE_FIELD = '[data-test-subj="toggle-field-_id"]';
 
+export const ID_HOVER_ACTION_OVERFLOW_BTN = '[data-test-subj="more-actions-_id"]';
+
 export const LOCKED_ICON = '[data-test-subj="timeline-date-picker-lock-button"]';
 
 export const UNLOCKED_ICON = '[data-test-subj="timeline-date-picker-unlock-button"]';
@@ -266,3 +268,5 @@ export const TIMELINE_TAB_CONTENT_PINNED = '[data-test-subj="timeline-tab-conten
 
 export const TIMELINE_TAB_CONTENT_GRAPHS_NOTES =
   '[data-test-subj="timeline-tab-content-graph-notes"]';
+
+export const TIMESTAMP_HOVER_ACTION_OVERFLOW_BTN = '[data-test-subj="more-actions-@timestamp"]';
diff --git a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
index e6f2fb30bede8..1168cfc338381 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
@@ -24,6 +24,7 @@ import {
   ID_FIELD,
   ID_HEADER_FIELD,
   ID_TOGGLE_FIELD,
+  ID_HOVER_ACTION_OVERFLOW_BTN,
   NOTES_TAB_BUTTON,
   NOTES_TEXT_AREA,
   OPEN_TIMELINE_ICON,
@@ -64,6 +65,7 @@ import {
   TIMELINE_CREATE_TEMPLATE_FROM_TIMELINE_BTN,
   TIMELINE_COLLAPSED_ITEMS_BTN,
   TIMELINE_TAB_CONTENT_EQL,
+  TIMESTAMP_HOVER_ACTION_OVERFLOW_BTN,
 } from '../screens/timeline';
 import { REFRESH_BUTTON, TIMELINE } from '../screens/timelines';
 
@@ -189,7 +191,14 @@ export const attachTimelineToExistingCase = () => {
   cy.get(ATTACH_TIMELINE_TO_EXISTING_CASE_ICON).click({ force: true });
 };
 
+const clickIdHoverActionOverflowButton = () => {
+  cy.get(ID_HOVER_ACTION_OVERFLOW_BTN).should('exist');
+
+  cy.get(ID_HOVER_ACTION_OVERFLOW_BTN).click({ force: true });
+};
+
 export const clickIdToggleField = () => {
+  clickIdHoverActionOverflowButton();
   cy.get(ID_HEADER_FIELD).should('not.exist');
 
   cy.get(ID_TOGGLE_FIELD).click({
@@ -294,7 +303,15 @@ export const unpinFirstEvent = () => {
   cy.get(PIN_EVENT).first().click({ force: true });
 };
 
+const clickTimestampHoverActionOverflowButton = () => {
+  cy.get(TIMESTAMP_HOVER_ACTION_OVERFLOW_BTN).should('exist');
+
+  cy.get(TIMESTAMP_HOVER_ACTION_OVERFLOW_BTN).click({ force: true });
+};
+
 export const clickTimestampToggleField = () => {
+  clickTimestampHoverActionOverflowButton();
+
   cy.get(TIMESTAMP_TOGGLE_FIELD).should('exist');
 
   cy.get(TIMESTAMP_TOGGLE_FIELD).click({ force: true });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
index 3b365306447b4..65f82ba085bf8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
@@ -261,7 +261,7 @@ Array [
   -ms-flex: 1;
   flex: 1;
   overflow: hidden;
-  padding: 16px;
+  padding: 0 16px 16px;
 }
 
 <EuiFlyout
@@ -295,10 +295,10 @@ Array [
         timelineId="test"
       >
         <EuiFlyoutHeader
-          hasBorder={true}
+          hasBorder={false}
         >
           <div
-            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+            className="euiFlyoutHeader"
           >
             <ExpandableEventTitle
               isAlert={false}
@@ -527,7 +527,7 @@ Array [
   -ms-flex: 1;
   flex: 1;
   overflow: hidden;
-  padding: 16px;
+  padding: 0 16px 16px;
 }
 
 <div
@@ -555,10 +555,10 @@ Array [
       timelineId="test"
     >
       <EuiFlyoutHeader
-        hasBorder={true}
+        hasBorder={false}
       >
         <div
-          className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+          className="euiFlyoutHeader"
         >
           <ExpandableEventTitle
             isAlert={false}
diff --git a/x-pack/plugins/timelines/public/components/hover_actions/actions/overflow.tsx b/x-pack/plugins/timelines/public/components/hover_actions/actions/overflow.tsx
index e8a7e04932287..a02257d72530e 100644
--- a/x-pack/plugins/timelines/public/components/hover_actions/actions/overflow.tsx
+++ b/x-pack/plugins/timelines/public/components/hover_actions/actions/overflow.tsx
@@ -68,7 +68,7 @@ const OverflowButton: React.FC<OverflowButtonProps> = React.memo(
               <Component
                 aria-label={MORE_ACTIONS}
                 buttonRef={defaultFocusedButtonRef}
-                data-test-subj="add-to-timeline"
+                data-test-subj={`more-actions-${field}`}
                 icon="boxesHorizontal"
                 iconType="boxesHorizontal"
                 onClick={onClick}
@@ -81,7 +81,7 @@ const OverflowButton: React.FC<OverflowButtonProps> = React.memo(
                 aria-label={MORE_ACTIONS}
                 buttonRef={defaultFocusedButtonRef}
                 className="timelines__hoverActionButton"
-                data-test-subj="more-actions"
+                data-test-subj={`more-actions-${field}`}
                 iconSize="s"
                 iconType="boxesHorizontal"
                 onClick={onClick}
@@ -96,7 +96,15 @@ const OverflowButton: React.FC<OverflowButtonProps> = React.memo(
           <EuiContextMenuPanel items={items} />
         </EuiPopover>
       ),
-      [Component, defaultFocusedButtonRef, onClick, isOverflowPopoverOpen, closePopOver, items]
+      [
+        Component,
+        defaultFocusedButtonRef,
+        field,
+        onClick,
+        isOverflowPopoverOpen,
+        closePopOver,
+        items,
+      ]
     );
 
     return showTooltip ? (
diff --git a/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx b/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx
index 5a8afb2036abf..ee877d637fc8f 100644
--- a/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx
+++ b/x-pack/plugins/timelines/public/mock/mock_hover_actions.tsx
@@ -13,4 +13,5 @@ export const mockHoverActions = {
   getCopyButton: () => <>{'Copy button'}</>,
   getFilterForValueButton: () => <>{'Filter button'}</>,
   getFilterOutValueButton: () => <>{'Filter out button'}</>,
+  getOverflowButton: () => <>{'Overflow button'}</>,
 };