[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>
This commit is contained in:
parent
8a09f247e3
commit
55922cb9a0
24 changed files with 25 additions and 0 deletions
|
@ -109,6 +109,7 @@ function FilterBarUI(props: Props) {
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
ownFocus={true}
|
ownFocus={true}
|
||||||
initialFocus=".filterEditor__hiddenItem"
|
initialFocus=".filterEditor__hiddenItem"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<div style={{ width: 400 }}>
|
<div style={{ width: 400 }}>
|
||||||
|
|
|
@ -167,6 +167,7 @@ class FilterOptionsUI extends Component<Props, State> {
|
||||||
anchorPosition="rightUp"
|
anchorPosition="rightUp"
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
withTitle
|
withTitle
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiPopoverTitle>
|
<EuiPopoverTitle>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
|
@ -77,6 +77,7 @@ export function QueryLanguageSwitcher(props: Props) {
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={() => setIsPopoverOpen(false)}
|
closePopover={() => setIsPopoverOpen(false)}
|
||||||
withTitle
|
withTitle
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiPopoverTitle>
|
<EuiPopoverTitle>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
|
@ -182,6 +182,7 @@ export function SavedQueryManagementComponent({
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
buffer={-8}
|
buffer={-8}
|
||||||
ownFocus
|
ownFocus
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="kbnSavedQueryManagement__popover"
|
className="kbnSavedQueryManagement__popover"
|
||||||
|
|
|
@ -27,6 +27,7 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
|
||||||
isOpen={false}
|
isOpen={false}
|
||||||
ownFocus={true}
|
ownFocus={true}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll={true}
|
||||||
>
|
>
|
||||||
<EuiContextMenuPanel
|
<EuiContextMenuPanel
|
||||||
data-test-subj="rules-details-menu-panel"
|
data-test-subj="rules-details-menu-panel"
|
||||||
|
|
|
@ -135,6 +135,7 @@ const RuleActionsOverflowComponent = ({
|
||||||
data-test-subj="rules-details-popover"
|
data-test-subj="rules-details-popover"
|
||||||
ownFocus={true}
|
ownFocus={true}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
|
<EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -61,6 +61,7 @@ export const TagsFilterPopoverComponent = ({
|
||||||
isOpen={isTagPopoverOpen}
|
isOpen={isTagPopoverOpen}
|
||||||
closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
|
closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<ScrollableDiv>
|
<ScrollableDiv>
|
||||||
{tags.map((tag, index) => (
|
{tags.map((tag, index) => (
|
||||||
|
|
|
@ -84,6 +84,7 @@ export const FilterPopoverComponent = ({
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={setIsPopoverOpenCb}
|
closePopover={setIsPopoverOpenCb}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<ScrollableDiv>
|
<ScrollableDiv>
|
||||||
{options.map((option, index) => (
|
{options.map((option, index) => (
|
||||||
|
|
|
@ -71,6 +71,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
|
||||||
id="settingsPopover"
|
id="settingsPopover"
|
||||||
isOpen={showActions}
|
isOpen={showActions}
|
||||||
closePopover={onClosePopover}
|
closePopover={onClosePopover}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiFlexGroup
|
<EuiFlexGroup
|
||||||
alignItems="flexStart"
|
alignItems="flexStart"
|
||||||
|
|
|
@ -100,6 +100,7 @@ const ExceptionsViewerPaginationComponent = ({
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
closePopover={handleClosePerPageMenu}
|
closePopover={handleClosePerPageMenu}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiContextMenuPanel items={items} />
|
<EuiContextMenuPanel items={items} />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -95,6 +95,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
ownFocus={false}
|
ownFocus={false}
|
||||||
panelPaddingSize="m"
|
panelPaddingSize="m"
|
||||||
|
repositionOnScroll={true}
|
||||||
>
|
>
|
||||||
<EuiDescriptionList
|
<EuiDescriptionList
|
||||||
data-test-subj="anomaly-description-list"
|
data-test-subj="anomaly-description-list"
|
||||||
|
|
|
@ -56,6 +56,7 @@ export const AnomalyScoreComponent = ({
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
closePopover={() => setIsOpen(!isOpen)}
|
closePopover={() => setIsOpen(!isOpen)}
|
||||||
button={<Icon type="iInCircle" />}
|
button={<Icon type="iInCircle" />}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiDescriptionList
|
<EuiDescriptionList
|
||||||
data-test-subj="anomaly-description-list"
|
data-test-subj="anomaly-description-list"
|
||||||
|
|
|
@ -21,6 +21,7 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
|
||||||
isOpen={false}
|
isOpen={false}
|
||||||
ownFocus={true}
|
ownFocus={true}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll={true}
|
||||||
>
|
>
|
||||||
<EuiFilterSelectItem
|
<EuiFilterSelectItem
|
||||||
key="0-auditbeat"
|
key="0-auditbeat"
|
||||||
|
|
|
@ -67,6 +67,7 @@ export const GroupsFilterPopoverComponent = ({
|
||||||
isOpen={isGroupPopoverOpen}
|
isOpen={isGroupPopoverOpen}
|
||||||
closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
|
closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
{uniqueGroups.map((group, index) => (
|
{uniqueGroups.map((group, index) => (
|
||||||
<EuiFilterSelectItem
|
<EuiFilterSelectItem
|
||||||
|
|
|
@ -122,6 +122,7 @@ export const MlPopover = React.memo(() => {
|
||||||
}
|
}
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<UpgradeContents />
|
<UpgradeContents />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
@ -147,6 +148,7 @@ export const MlPopover = React.memo(() => {
|
||||||
}
|
}
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<PopoverContentsDiv data-test-subj="ml-popover-contents">
|
<PopoverContentsDiv data-test-subj="ml-popover-contents">
|
||||||
<EuiPopoverTitle>{i18n.ML_JOB_SETTINGS}</EuiPopoverTitle>
|
<EuiPopoverTitle>{i18n.ML_JOB_SETTINGS}</EuiPopoverTitle>
|
||||||
|
|
|
@ -273,6 +273,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={closePopover}
|
closePopover={closePopover}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
|
<EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -195,6 +195,7 @@ export const PopoverComponent = ({
|
||||||
closePopover={() => setIsOpen(!isOpen)}
|
closePopover={() => setIsOpen(!isOpen)}
|
||||||
id={`${idPrefix}-popover`}
|
id={`${idPrefix}-popover`}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -33,6 +33,7 @@ const Popover = React.memo<UtilityBarActionProps>(
|
||||||
}
|
}
|
||||||
closePopover={() => setPopoverState(false)}
|
closePopover={() => setPopoverState(false)}
|
||||||
isOpen={popoverState}
|
isOpen={popoverState}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
{popoverContent?.(closePopover)}
|
{popoverContent?.(closePopover)}
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -92,6 +92,7 @@ export const TableRowActions = React.memo<{ items: EuiContextMenuPanelProps['ite
|
||||||
}
|
}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
closePopover={handleCloseMenu}
|
closePopover={handleCloseMenu}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiContextMenuPanel items={items} data-test-subj="policyActionsMenu" />
|
<EuiContextMenuPanel items={items} data-test-subj="policyActionsMenu" />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -215,6 +215,7 @@ const NodeSubMenuComponents = React.memo(
|
||||||
button={submenuPopoverButton}
|
button={submenuPopoverButton}
|
||||||
isOpen={menuIsOpen}
|
isOpen={menuIsOpen}
|
||||||
closePopover={closePopover}
|
closePopover={closePopover}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
{menuIsOpen && typeof optionsWithActions === 'object' && (
|
{menuIsOpen && typeof optionsWithActions === 'object' && (
|
||||||
<OptionList isLoading={isMenuLoading} subMenuOptions={optionsWithActions} />
|
<OptionList isLoading={isMenuLoading} subMenuOptions={optionsWithActions} />
|
||||||
|
|
|
@ -274,6 +274,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
|
||||||
}
|
}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
closePopover={() => setIsOpen(!isOpen)}
|
closePopover={() => setIsOpen(!isOpen)}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<MoreContainer
|
<MoreContainer
|
||||||
idPrefix={idPrefix}
|
idPrefix={idPrefix}
|
||||||
|
|
|
@ -187,6 +187,7 @@ export const EventColumnView = React.memo<Props>(
|
||||||
closePopover={closePopover}
|
closePopover={closePopover}
|
||||||
panelPaddingSize="none"
|
panelPaddingSize="none"
|
||||||
anchorPosition="downLeft"
|
anchorPosition="downLeft"
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<ContextMenuPanel items={grouped.contextMenu} />
|
<ContextMenuPanel items={grouped.contextMenu} />
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
|
|
|
@ -100,6 +100,7 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
|
||||||
button={insertTimelineButton}
|
button={insertTimelineButton}
|
||||||
isOpen={isPopoverOpen}
|
isOpen={isPopoverOpen}
|
||||||
closePopover={handleClosePopover}
|
closePopover={handleClosePopover}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<SelectableTimeline
|
<SelectableTimeline
|
||||||
hideUntitled={hideUntitled}
|
hideUntitled={hideUntitled}
|
||||||
|
|
|
@ -138,6 +138,7 @@ const PropertiesRightComponent: React.FC<PropertiesRightComponentProps> = ({
|
||||||
id="timelineSettingsPopover"
|
id="timelineSettingsPopover"
|
||||||
isOpen={showActions}
|
isOpen={showActions}
|
||||||
closePopover={onClosePopover}
|
closePopover={onClosePopover}
|
||||||
|
repositionOnScroll
|
||||||
>
|
>
|
||||||
<EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
|
<EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
|
||||||
{capabilitiesCanUserCRUD && (
|
{capabilitiesCanUserCRUD && (
|
||||||
|
|
Loading…
Reference in a new issue