[Security Solution] Reposition EuiPopovers on scroll (#69433) (#70620)

* [Security Solution] Reposition EuiPopovers on scroll * update snapshots Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 2, 2020 · 39fc2be · 39fc2be
1 parent 12c7218
commit 39fc2be
Show file tree

Hide file tree

Showing 20 changed files with 21 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
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
@@ -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/...omponents/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap b/...omponents/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
diff --git a/...ck/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx b/...ck/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -71,6 +71,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
           id="settingsPopover"
           isOpen={showActions}
           closePopover={onClosePopover}
+          repositionOnScroll
         >
           <EuiFlexGroup
             alignItems="flexStart"

diff --git a/.../siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/.../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/...detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap b/...detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap
diff --git a/...ugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx b/...ugins/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>