From 55922cb9a083007f7f14775d18873478ac09d1ae Mon Sep 17 00:00:00 2001
From: patrykkopycinski <patryk.kopycinski@elastic.co>
Date: Thu, 2 Jul 2020 17:37:29 +0200
Subject: [PATCH] [Security Solution] Reposition EuiPopovers on scroll (#69433)

* [Security Solution] Reposition EuiPopovers on scroll

* update snapshots

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/plugins/data/public/ui/filter_bar/filter_bar.tsx            | 1 +
 src/plugins/data/public/ui/filter_bar/filter_options.tsx        | 1 +
 .../data/public/ui/query_string_input/language_switcher.tsx     | 1 +
 .../saved_query_management/saved_query_management_component.tsx | 1 +
 .../rule_actions_overflow/__snapshots__/index.test.tsx.snap     | 1 +
 .../alerts/components/rules/rule_actions_overflow/index.tsx     | 1 +
 .../rules/all/rules_table_filters/tags_filter_popover.tsx       | 1 +
 .../public/cases/components/filter_popover/index.tsx            | 1 +
 .../public/cases/components/property_actions/index.tsx          | 1 +
 .../components/exceptions/viewer/exceptions_pagination.tsx      | 1 +
 .../ml/score/__snapshots__/anomaly_score.test.tsx.snap          | 1 +
 .../public/common/components/ml/score/anomaly_score.tsx         | 1 +
 .../filters/__snapshots__/groups_filter_popover.test.tsx.snap   | 1 +
 .../ml_popover/jobs_table/filters/groups_filter_popover.tsx     | 1 +
 .../public/common/components/ml_popover/ml_popover.tsx          | 2 ++
 .../public/common/components/paginated_table/index.tsx          | 1 +
 .../public/common/components/tables/helpers.tsx                 | 1 +
 .../public/common/components/utility_bar/utility_bar_action.tsx | 1 +
 .../public/management/pages/policy/view/policy_list.tsx         | 1 +
 .../plugins/security_solution/public/resolver/view/submenu.tsx  | 1 +
 .../timelines/components/field_renderers/field_renderers.tsx    | 1 +
 .../components/timeline/body/events/event_column_view.tsx       | 1 +
 .../components/timeline/insert_timeline_popover/index.tsx       | 1 +
 .../components/timeline/properties/properties_right.tsx         | 1 +
 24 files changed, 25 insertions(+)

diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 43dba150bf8d..fdd952e2207d 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -109,6 +109,7 @@ function FilterBarUI(props: Props) {
           panelPaddingSize="none"
           ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
+          repositionOnScroll
         >
           <EuiFlexItem grow={false}>
             <div style={{ width: 400 }}>
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
index 3fb7f198d546..b97e0e33f240 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -167,6 +167,7 @@ class FilterOptionsUI extends Component<Props, State> {
         anchorPosition="rightUp"
         panelPaddingSize="none"
         withTitle
+        repositionOnScroll
       >
         <EuiPopoverTitle>
           <FormattedMessage
diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
index ded48d462722..a4c93d0044c9 100644
--- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
+++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -77,6 +77,7 @@ export function QueryLanguageSwitcher(props: Props) {
       isOpen={isPopoverOpen}
       closePopover={() => setIsPopoverOpen(false)}
       withTitle
+      repositionOnScroll
     >
       <EuiPopoverTitle>
         <FormattedMessage
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 6108de028018..87f53e1c7207 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -182,6 +182,7 @@ export function SavedQueryManagementComponent({
         panelPaddingSize="none"
         buffer={-8}
         ownFocus
+        repositionOnScroll
       >
         <div
           className="kbnSavedQueryManagement__popover"
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
index 549f0590681b..1ed55774f935 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
     isOpen={false}
     ownFocus={true}
     panelPaddingSize="none"
+    repositionOnScroll={true}
   >
     <EuiContextMenuPanel
       data-test-subj="rules-details-menu-panel"
diff --git a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
index 7be50552c34d..a5d0382ef8c8 100644
--- a/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/components/rules/rule_actions_overflow/index.tsx
@@ -135,6 +135,7 @@ const RuleActionsOverflowComponent = ({
         data-test-subj="rules-details-popover"
         ownFocus={true}
         panelPaddingSize="none"
+        repositionOnScroll
       >
         <EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
       </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
index b453125223c3..fd75c229d479 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
@@ -61,6 +61,7 @@ export const TagsFilterPopoverComponent = ({
       isOpen={isTagPopoverOpen}
       closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       <ScrollableDiv>
         {tags.map((tag, index) => (
diff --git a/x-pack/plugins/security_solution/public/cases/components/filter_popover/index.tsx b/x-pack/plugins/security_solution/public/cases/components/filter_popover/index.tsx
index 7b66bcffc89a..4c16a8c0f324 100644
--- a/x-pack/plugins/security_solution/public/cases/components/filter_popover/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/filter_popover/index.tsx
@@ -84,6 +84,7 @@ export const FilterPopoverComponent = ({
       isOpen={isPopoverOpen}
       closePopover={setIsPopoverOpenCb}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       <ScrollableDiv>
         {options.map((option, index) => (
diff --git a/x-pack/plugins/security_solution/public/cases/components/property_actions/index.tsx b/x-pack/plugins/security_solution/public/cases/components/property_actions/index.tsx
index 6b8e00921abc..29f1a2c5a149 100644
--- a/x-pack/plugins/security_solution/public/cases/components/property_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/property_actions/index.tsx
@@ -71,6 +71,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
           id="settingsPopover"
           isOpen={showActions}
           closePopover={onClosePopover}
+          repositionOnScroll
         >
           <EuiFlexGroup
             alignItems="flexStart"
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
index 2920f1a85eee..afc6d55de364 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
@@ -100,6 +100,7 @@ const ExceptionsViewerPaginationComponent = ({
           isOpen={isOpen}
           closePopover={handleClosePerPageMenu}
           panelPaddingSize="none"
+          repositionOnScroll
         >
           <EuiContextMenuPanel items={items} />
         </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index a9ec474a7b68..6694cec53987 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -95,6 +95,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
       onClick={[Function]}
       ownFocus={false}
       panelPaddingSize="m"
+      repositionOnScroll={true}
     >
       <EuiDescriptionList
         data-test-subj="anomaly-description-list"
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.tsx
index 06c4f61abf23..c02352fdc848 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.tsx
@@ -56,6 +56,7 @@ export const AnomalyScoreComponent = ({
           onClick={() => setIsOpen(!isOpen)}
           closePopover={() => setIsOpen(!isOpen)}
           button={<Icon type="iInCircle" />}
+          repositionOnScroll
         >
           <EuiDescriptionList
             data-test-subj="anomaly-description-list"
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
index 8f40d0203afd..22805d34d2ee 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
   isOpen={false}
   ownFocus={true}
   panelPaddingSize="none"
+  repositionOnScroll={true}
 >
   <EuiFilterSelectItem
     key="0-auditbeat"
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
index de4185c8644a..1aa3ad630306 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
@@ -67,6 +67,7 @@ export const GroupsFilterPopoverComponent = ({
       isOpen={isGroupPopoverOpen}
       closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       {uniqueGroups.map((group, index) => (
         <EuiFilterSelectItem
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx
index 61417aabb7ff..a34dfb5753d9 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx
@@ -122,6 +122,7 @@ export const MlPopover = React.memo(() => {
         }
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
+        repositionOnScroll
       >
         <UpgradeContents />
       </EuiPopover>
@@ -147,6 +148,7 @@ export const MlPopover = React.memo(() => {
         }
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
+        repositionOnScroll
       >
         <PopoverContentsDiv data-test-subj="ml-popover-contents">
           <EuiPopoverTitle>{i18n.ML_JOB_SETTINGS}</EuiPopoverTitle>
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx b/x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx
index 3b3130af77cf..9f95284d989a 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/index.tsx
@@ -273,6 +273,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
                     isOpen={isPopoverOpen}
                     closePopover={closePopover}
                     panelPaddingSize="none"
+                    repositionOnScroll
                   >
                     <EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
                   </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/common/components/tables/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/tables/helpers.tsx
index b8ea32969c01..55e575877550 100644
--- a/x-pack/plugins/security_solution/public/common/components/tables/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/tables/helpers.tsx
@@ -195,6 +195,7 @@ export const PopoverComponent = ({
         closePopover={() => setIsOpen(!isOpen)}
         id={`${idPrefix}-popover`}
         isOpen={isOpen}
+        repositionOnScroll
       >
         {children}
       </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_action.tsx b/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_action.tsx
index 250ed75f134c..f072b27274ed 100644
--- a/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_action.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_action.tsx
@@ -33,6 +33,7 @@ const Popover = React.memo<UtilityBarActionProps>(
         }
         closePopover={() => setPopoverState(false)}
         isOpen={popoverState}
+        repositionOnScroll
       >
         {popoverContent?.(closePopover)}
       </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index 08c6ec89ff05..447a70ef998a 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -92,6 +92,7 @@ export const TableRowActions = React.memo<{ items: EuiContextMenuPanelProps['ite
         }
         isOpen={isOpen}
         closePopover={handleCloseMenu}
+        repositionOnScroll
       >
         <EuiContextMenuPanel items={items} data-test-subj="policyActionsMenu" />
       </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
index d3bb6123ce04..ce126bf69555 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx
@@ -215,6 +215,7 @@ const NodeSubMenuComponents = React.memo(
           button={submenuPopoverButton}
           isOpen={menuIsOpen}
           closePopover={closePopover}
+          repositionOnScroll
         >
           {menuIsOpen && typeof optionsWithActions === 'object' && (
             <OptionList isLoading={isMenuLoading} subMenuOptions={optionsWithActions} />
diff --git a/x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx b/x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx
index 7296e0ee4b97..80fe7cb33779 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/field_renderers/field_renderers.tsx
@@ -274,6 +274,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
             }
             isOpen={isOpen}
             closePopover={() => setIsOpen(!isOpen)}
+            repositionOnScroll
           >
             <MoreContainer
               idPrefix={idPrefix}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
index 03a964bbd444..8855cba7a4c8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
@@ -187,6 +187,7 @@ export const EventColumnView = React.memo<Props>(
                 closePopover={closePopover}
                 panelPaddingSize="none"
                 anchorPosition="downLeft"
+                repositionOnScroll
               >
                 <ContextMenuPanel items={grouped.contextMenu} />
               </EuiPopover>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx
index 83417cdb51b6..0adf76730826 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx
@@ -100,6 +100,7 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
       button={insertTimelineButton}
       isOpen={isPopoverOpen}
       closePopover={handleClosePopover}
+      repositionOnScroll
     >
       <SelectableTimeline
         hideUntitled={hideUntitled}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx
index 7a9fe85ae402..8a1bf0a842cb 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx
@@ -138,6 +138,7 @@ const PropertiesRightComponent: React.FC<PropertiesRightComponentProps> = ({
             id="timelineSettingsPopover"
             isOpen={showActions}
             closePopover={onClosePopover}
+            repositionOnScroll
           >
             <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
               {capabilitiesCanUserCRUD && (