From 39fc2be6f27c51954a704843705700d6e8facf68 Mon Sep 17 00:00:00 2001
From: patrykkopycinski <patryk.kopycinski@elastic.co>
Date: Thu, 2 Jul 2020 20:02:11 +0200
Subject: [PATCH] [Security Solution] Reposition EuiPopovers on scroll (#69433)
 (#70620)

* [Security Solution] Reposition EuiPopovers on scroll

* update snapshots

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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 +
 .../siem/public/components/field_renderers/field_renderers.tsx  | 1 +
 x-pack/plugins/siem/public/components/filter_popover/index.tsx  | 1 +
 .../ml/score/__snapshots__/anomaly_score.test.tsx.snap          | 1 +
 .../plugins/siem/public/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 +
 x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx | 2 ++
 x-pack/plugins/siem/public/components/paginated_table/index.tsx | 1 +
 x-pack/plugins/siem/public/components/tables/helpers.tsx        | 1 +
 .../components/timeline/insert_timeline_popover/index.tsx       | 1 +
 .../public/components/timeline/properties/properties_right.tsx  | 1 +
 .../siem/public/components/utility_bar/utility_bar_action.tsx   | 1 +
 .../public/pages/case/components/property_actions/index.tsx     | 1 +
 .../rules/all/rules_table_filters/tags_filter_popover.tsx       | 1 +
 .../rule_actions_overflow/__snapshots__/index.test.tsx.snap     | 1 +
 .../rules/components/rule_actions_overflow/index.tsx            | 1 +
 20 files changed, 21 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 d89cf01eedd439..6281bfc29f1502 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -107,6 +107,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 3fb7f198d5466a..b97e0e33f2400b 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 ded48d462722dc..a4c93d0044c9a7 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 6108de02801830..87f53e1c72079e 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/siem/public/components/field_renderers/field_renderers.tsx b/x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx
index 6e1fef21f95a2e..520db264065c85 100644
--- a/x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx
+++ b/x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx
@@ -264,6 +264,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
             }
             isOpen={isOpen}
             closePopover={() => setIsOpen(!isOpen)}
+            repositionOnScroll
           >
             <MoreContainer
               idPrefix={idPrefix}
diff --git a/x-pack/plugins/siem/public/components/filter_popover/index.tsx b/x-pack/plugins/siem/public/components/filter_popover/index.tsx
index 7b66bcffc89a12..4c16a8c0f3243d 100644
--- a/x-pack/plugins/siem/public/components/filter_popover/index.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 1cf35aac19043c..ac03638300ccb5 100644
--- a/x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/siem/public/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/siem/public/components/ml/score/anomaly_score.tsx b/x-pack/plugins/siem/public/components/ml/score/anomaly_score.tsx
index 06c4f61abf231a..c02352fdc84862 100644
--- a/x-pack/plugins/siem/public/components/ml/score/anomaly_score.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap b/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
index 8f40d0203afd43..22805d34d2ee1e 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
+++ b/x-pack/plugins/siem/public/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/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx b/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
index dd6e2d3f471100..e1ad24e316aedf 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
+++ b/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
@@ -66,6 +66,7 @@ export const GroupsFilterPopoverComponent = ({
       isOpen={isGroupPopoverOpen}
       closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
       panelPaddingSize="none"
+      repositionOnScroll
     >
       {uniqueGroups.map((group, index) => (
         <EuiFilterSelectItem
diff --git a/x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx b/x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx
index 21ef04457c51d5..1724b77c723d3d 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/components/paginated_table/index.tsx b/x-pack/plugins/siem/public/components/paginated_table/index.tsx
index 0d17bc8f65674a..3fa8efcb39c142 100644
--- a/x-pack/plugins/siem/public/components/paginated_table/index.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/components/tables/helpers.tsx b/x-pack/plugins/siem/public/components/tables/helpers.tsx
index 652e475bcefaf3..dae4e0a8c466fb 100644
--- a/x-pack/plugins/siem/public/components/tables/helpers.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
index 030236ddec63af..c77745b0e1b748 100644
--- a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
+++ b/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
@@ -104,6 +104,7 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
       button={insertTimelineButton}
       isOpen={isPopoverOpen}
       closePopover={handleClosePopover}
+      repositionOnScroll
     >
       <SelectableTimeline
         hideUntitled={hideUntitled}
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx b/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx
index f91d1c544ce43a..21e0adfe5941e3 100644
--- a/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx
+++ b/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx
@@ -126,6 +126,7 @@ const PropertiesRightComponent: React.FC<Props> = ({
           id="timelineSettingsPopover"
           isOpen={showActions}
           closePopover={onClosePopover}
+          repositionOnScroll
         >
           <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
             <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx b/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx
index 330e7f83b5b286..94b00d531bb5b5 100644
--- a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx
+++ b/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx
@@ -32,6 +32,7 @@ const Popover = React.memo<UtilityBarActionProps>(
         }
         closePopover={() => setPopoverState(false)}
         isOpen={popoverState}
+        repositionOnScroll
       >
         {popoverContent?.(closePopover)}
       </EuiPopover>
diff --git a/x-pack/plugins/siem/public/pages/case/components/property_actions/index.tsx b/x-pack/plugins/siem/public/pages/case/components/property_actions/index.tsx
index 6b8e00921abcb7..29f1a2c5a14955 100644
--- a/x-pack/plugins/siem/public/pages/case/components/property_actions/index.tsx
+++ b/x-pack/plugins/siem/public/pages/case/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/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
index 44149a072f5c1e..31cdb54b1c0861 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
+++ b/x-pack/plugins/siem/public/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/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap
index 1bee36ed9e1850..50a257371c1edf 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/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/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx
index 415d74c1583c0b..9a33e9d3d2aa32 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx
+++ b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx
@@ -131,6 +131,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>