Move horizontal button popover menu to a shared components so log rate table can use it
This commit is contained in:
parent
36ddacad29
commit
f80db5984d
|
@ -0,0 +1,89 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import {
|
||||
EuiButtonIcon,
|
||||
ButtonSize,
|
||||
EuiPopover,
|
||||
EuiContextMenuPanel,
|
||||
EuiContextMenuItem,
|
||||
} from '@elastic/eui';
|
||||
import { euiStyled } from '../../../observability/public';
|
||||
|
||||
interface Props {
|
||||
buttonSize?: ButtonSize;
|
||||
ariaLabel?: string;
|
||||
onMenuOpen?: () => void;
|
||||
onMenuClose?: () => void;
|
||||
menuItems: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}>;
|
||||
}
|
||||
|
||||
export const HorizontalBoxButtonWithPopoverMenu: React.FC<Props> = ({
|
||||
buttonSize,
|
||||
ariaLabel,
|
||||
onMenuOpen,
|
||||
onMenuClose,
|
||||
menuItems,
|
||||
}) => {
|
||||
const [isOpen, setOpenState] = useState(false);
|
||||
|
||||
const handleOpenMenu = useCallback(() => {
|
||||
setOpenState(true);
|
||||
if (onMenuOpen) {
|
||||
onMenuOpen();
|
||||
}
|
||||
}, [setOpenState, onMenuOpen]);
|
||||
|
||||
const handleCloseMenu = useCallback(() => {
|
||||
setOpenState(false);
|
||||
if (onMenuClose) {
|
||||
onMenuClose();
|
||||
}
|
||||
}, [setOpenState, onMenuClose]);
|
||||
|
||||
const button = (
|
||||
<ButtonWrapper>
|
||||
<EuiButtonIcon
|
||||
aria-label={ariaLabel}
|
||||
color="ghost"
|
||||
iconType="boxesHorizontal"
|
||||
onClick={handleOpenMenu}
|
||||
size={buttonSize}
|
||||
/>
|
||||
</ButtonWrapper>
|
||||
);
|
||||
|
||||
const items = menuItems.map((item) => {
|
||||
return (
|
||||
<EuiContextMenuItem
|
||||
key={item.key}
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
item.onClick();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</EuiContextMenuItem>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<EuiPopover closePopover={handleCloseMenu} isOpen={isOpen} button={button} ownFocus={true}>
|
||||
<EuiContextMenuPanel items={items} />
|
||||
</EuiPopover>
|
||||
);
|
||||
};
|
||||
|
||||
const ButtonWrapper = euiStyled.div`
|
||||
background: ${(props) => props.theme.eui.euiColorPrimary};
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
transform: translateY(-6px);
|
||||
`;
|
|
@ -5,11 +5,10 @@
|
|||
*/
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import { EuiButtonIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { LogEntryColumnContent } from './log_entry_column';
|
||||
import { euiStyled } from '../../../../../observability/public';
|
||||
import { HorizontalBoxButtonWithPopoverMenu } from '../../horizontal_box_button_with_popover';
|
||||
|
||||
interface LogEntryActionsColumnProps {
|
||||
isHovered: boolean;
|
||||
|
@ -59,43 +58,32 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
|
|||
onViewLogInContext?.();
|
||||
}, [onCloseMenu, onViewLogInContext]);
|
||||
|
||||
const button = (
|
||||
<ButtonWrapper>
|
||||
<EuiButtonIcon
|
||||
aria-label={MENU_LABEL}
|
||||
color="ghost"
|
||||
iconType="boxesHorizontal"
|
||||
onClick={onOpenMenu}
|
||||
/>
|
||||
</ButtonWrapper>
|
||||
);
|
||||
|
||||
const items = [
|
||||
<EuiContextMenuItem key="log_details" onClick={handleClickViewDetails}>
|
||||
{LOG_DETAILS_LABEL}
|
||||
</EuiContextMenuItem>,
|
||||
{
|
||||
key: 'log_details',
|
||||
onClick: handleClickViewDetails,
|
||||
label: LOG_DETAILS_LABEL,
|
||||
},
|
||||
];
|
||||
|
||||
if (onViewLogInContext !== undefined) {
|
||||
items.push(
|
||||
<EuiContextMenuItem key="view_in_context" onClick={handleClickViewInContext}>
|
||||
{LOG_VIEW_IN_CONTEXT_LABEL}
|
||||
</EuiContextMenuItem>
|
||||
);
|
||||
items.push({
|
||||
key: 'view_in_context',
|
||||
onClick: handleClickViewInContext,
|
||||
label: LOG_VIEW_IN_CONTEXT_LABEL,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionsColumnContent>
|
||||
{isHovered || isMenuOpen ? (
|
||||
<AbsoluteWrapper>
|
||||
<EuiPopover
|
||||
closePopover={onCloseMenu}
|
||||
isOpen={isMenuOpen}
|
||||
button={button}
|
||||
ownFocus={true}
|
||||
>
|
||||
<EuiContextMenuPanel items={items} />
|
||||
</EuiPopover>
|
||||
<HorizontalBoxButtonWithPopoverMenu
|
||||
onMenuOpen={onOpenMenu}
|
||||
onMenuClose={onCloseMenu}
|
||||
ariaLabel={MENU_LABEL}
|
||||
menuItems={items}
|
||||
/>
|
||||
</AbsoluteWrapper>
|
||||
) : null}
|
||||
</ActionsColumnContent>
|
||||
|
@ -107,13 +95,6 @@ const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
|
|||
user-select: none;
|
||||
`;
|
||||
|
||||
const ButtonWrapper = euiStyled.div`
|
||||
background: ${(props) => props.theme.eui.euiColorPrimary};
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
transform: translateY(-6px);
|
||||
`;
|
||||
|
||||
// this prevents the button from influencing the line height
|
||||
const AbsoluteWrapper = euiStyled.div`
|
||||
position: absolute;
|
||||
|
|
Loading…
Reference in a new issue