Skip to content

Commit

Permalink
topN btn
Browse files Browse the repository at this point in the history
  • Loading branch information
@angorayc
angorayc committed Aug 12, 2021
1 parent 4db1b18 commit 4369c6e
Show file tree
Hide file tree
Showing 10 changed files with 121 additions and 134 deletions.
14 changes: 5 additions & 9 deletions ...plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,13 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
.eventFieldsTable__hoverActionButtons {
&:focus-within {
.timelines__hoverActionButton,
.securitySolution__hoverActionButton {
opacity: 1;
}
.hoverActions-active {
.timelines__hoverActionButton,
.securitySolution__hoverActionButton {
opacity: 1;
}
}
&:hover {
.timelines__hoverActionButton,
.securitySolution__hoverActionButton {
Expand All @@ -110,9 +109,6 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
opacity: 0;
} */
opacity: 0;
&:focus {
opacity: 1;
}
}
}
Expand Down
4 changes: 3 additions & 1 deletion ...k/plugins/security_solution/public/common/components/hover_actions/actions/show_top_n.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const SHOW_TOP = (fieldName: string) =>
});

interface Props {
closePopOver?: () => void;
/** `Component` is only used with `EuiDataGrid`; the grid keeps a reference to `Component` for show / hide functionality */
Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon | typeof EuiContextMenuItem;
field: string;
Expand All @@ -43,6 +44,7 @@ interface Props {

export const ShowTopNButton: React.FC<Props> = React.memo(
({
closePopOver,
Component,
field,
onClick,
Expand Down Expand Up @@ -116,7 +118,7 @@ export const ShowTopNButton: React.FC<Props> = React.memo(
)
}
isOpen={showTopN}
closePopover={onClick}
closePopover={closePopOver}
>
<StatefulTopN
browserFields={browserFields}
Expand Down
167 changes: 86 additions & 81 deletions x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ const isFocusTrapDisabled = ({
export const HoverActions: React.FC<Props> = React.memo(
({
additionalContent = null,
closePopOver,
dataProvider,
dataType,
draggableId,
Expand Down Expand Up @@ -159,19 +160,21 @@ export const HoverActions: React.FC<Props> = React.memo(
const [isOverflowPopoverOpen, setIsOverflowPopoverOpen] = useState(false);

const onOverflowButtonClick = useCallback(() => {
setIsActive((prev) => !prev);
setIsOverflowPopoverOpen(!isOverflowPopoverOpen);
setIsActive(true);
}, [isOverflowPopoverOpen, setIsActive, setIsOverflowPopoverOpen]);
}, [isOverflowPopoverOpen, setIsOverflowPopoverOpen]);

const onOverflowPopoverClosed = useCallback(() => {
setIsOverflowPopoverOpen(false);
const handleHoverActionClicked = useCallback(() => {
setIsActive(false);
}, [setIsActive, setIsOverflowPopoverOpen]);
setIsOverflowPopoverOpen(false);
if (closePopOver) {
closePopOver();
}
}, [closePopOver]);

const onShowTopNClicked = useCallback(() => {
toggleTopN();
onOverflowPopoverClosed();
}, [onOverflowPopoverClosed, toggleTopN]);
}, [toggleTopN]);

const filterManagerBackup = useMemo(() => kibana.services.data.query.filterManager, [
kibana.services.data.query.filterManager,
Expand Down Expand Up @@ -247,82 +250,86 @@ export const HoverActions: React.FC<Props> = React.memo(

const overflowButtonRef = useRef(null);

const overflowItems: Array<JSX.Element | null> = useMemo(
() => [
toggleColumn ? (
<div data-test-subj="hover-actions-toggle-column" key="hover-actions-toggle-column">
{getColumnToggleButton({
closePopOver: onOverflowPopoverClosed,
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
field,
isDisabled: isObjectArray && dataType !== 'geo_point',
isObjectArray,
keyboardEvent: stKeyboardEvent,
ownFocus,
showTooltip: enableOverflowButton ? false : true,
toggleColumn,
value: values,
})}
</div>
) : null,
showFilters && (draggableId != null || !isEmpty(dataProvider)) ? (
<div data-test-subj="hover-actions-add-timeline" key="hover-actions-add-timeline">
{getAddToTimelineButton({
closePopOver: onOverflowPopoverClosed,
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
dataProvider,
draggableId,
field,
keyboardEvent: stKeyboardEvent,
ownFocus,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
</div>
) : null,
allowTopN({
browserField: getAllFieldsByName(browserFields)[field],
fieldName: field,
}) ? (
<ShowTopNButton
Component={enableOverflowButton ? EuiContextMenuItem : undefined}
data-test-subj="hover-actions-show-top-n"
field={field}
key="hover-actions-show-top-n"
onClick={onShowTopNClicked}
onFilterAdded={onFilterAdded}
ownFocus={ownFocus}
showTopN={showTopN}
showTooltip={enableOverflowButton ? false : true}
timelineId={timelineId}
value={values}
/>
) : null,
field != null ? (
<div data-test-subj="hover-actions-copy-button" key="hover-actions-copy-button">
{getCopyButton({
closePopOver: onOverflowPopoverClosed,
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
field,
isHoverAction: true,
keyboardEvent: stKeyboardEvent,
ownFocus,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
</div>
) : null,
],
const overflowItems: JSX.Element[] = useMemo(
() =>
[
toggleColumn ? (
<div data-test-subj="hover-actions-toggle-column" key="hover-actions-toggle-column">
{getColumnToggleButton({
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
field,
isDisabled: isObjectArray && dataType !== 'geo_point',
isObjectArray,
keyboardEvent: stKeyboardEvent,
ownFocus,
onClick: handleHoverActionClicked,
showTooltip: enableOverflowButton ? false : true,
toggleColumn,
value: values,
})}
</div>
) : null,
showFilters && (draggableId != null || !isEmpty(dataProvider)) ? (
<div data-test-subj="hover-actions-add-timeline" key="hover-actions-add-timeline">
{getAddToTimelineButton({
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
dataProvider,
draggableId,
field,
keyboardEvent: stKeyboardEvent,
ownFocus,
onClick: handleHoverActionClicked,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
</div>
) : null,
allowTopN({
browserField: getAllFieldsByName(browserFields)[field],
fieldName: field,
}) ? (
<ShowTopNButton
closePopOver={handleHoverActionClicked}
Component={enableOverflowButton ? EuiContextMenuItem : undefined}
data-test-subj="hover-actions-show-top-n"
field={field}
key="hover-actions-show-top-n"
onClick={onShowTopNClicked}
onFilterAdded={onFilterAdded}
ownFocus={ownFocus}
showTopN={showTopN}
showTooltip={enableOverflowButton ? false : true}
timelineId={timelineId}
value={values}
/>
) : null,
field != null ? (
<div data-test-subj="hover-actions-copy-button" key="hover-actions-copy-button">
{getCopyButton({
Component: enableOverflowButton ? EuiContextMenuItem : undefined,
field,
isHoverAction: true,
keyboardEvent: stKeyboardEvent,
ownFocus,
onClick: handleHoverActionClicked,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
</div>
) : null,
].filter((item) => {
return item != null;
}, []) as JSX.Element[],
[
toggleColumn,
getColumnToggleButton,
onOverflowPopoverClosed,
enableOverflowButton,
field,
isObjectArray,
dataType,
stKeyboardEvent,
ownFocus,
handleHoverActionClicked,
values,
showFilters,
draggableId,
Expand Down Expand Up @@ -361,25 +368,25 @@ export const HoverActions: React.FC<Props> = React.memo(
<>
<div data-test-subj="hover-actions-filter-for">
{getFilterForValueButton({
closePopOver: onOverflowPopoverClosed,
defaultFocusedButtonRef,
field,
filterManager,
keyboardEvent: stKeyboardEvent,
onFilterAdded,
ownFocus,
onClick: handleHoverActionClicked,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
</div>
<div data-test-subj="hover-actions-filter-out">
{getFilterOutValueButton({
closePopOver: onOverflowPopoverClosed,
field,
filterManager,
keyboardEvent: stKeyboardEvent,
onFilterAdded,
ownFocus,
onClick: handleHoverActionClicked,
showTooltip: enableOverflowButton ? false : true,
value: values,
})}
Expand All @@ -388,8 +395,9 @@ export const HoverActions: React.FC<Props> = React.memo(
)}

{enableOverflowButton &&
overflowItems.length > 0 &&
getOverflowButton({
closePopOver: onOverflowPopoverClosed,
closePopOver: handleHoverActionClicked,
defaultFocusedButtonRef: overflowButtonRef,
field,
keyboardEvent: stKeyboardEvent,
Expand All @@ -401,10 +409,7 @@ export const HoverActions: React.FC<Props> = React.memo(
isOverflowPopoverOpen,
})}

{!enableOverflowButton &&
overflowItems.filter((item) => {
return item != null;
}, [])}
{!enableOverflowButton && overflowItems}
</StyledHoverActionsContainer>
</EuiFocusTrap>
);
Expand Down
8 changes: 4 additions & 4 deletions x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ export interface AddToTimelineButtonProps extends HoverActionComponentProps {
const AddToTimelineButton: React.FC<AddToTimelineButtonProps> = React.memo(
({
Component,
closePopOver,
dataProvider,
defaultFocusedButtonRef,
draggableId,
field,
keyboardEvent,
ownFocus,
onClick,
showTooltip = false,
value,
}) => {
Expand All @@ -84,10 +84,10 @@ const AddToTimelineButton: React.FC<AddToTimelineButtonProps> = React.memo(
});
}

if (closePopOver != null) {
closePopOver();
if (onClick != null) {
onClick();
}
}, [addSuccess, closePopOver, dataProvider, dispatch, draggableId, startDragToTimeline]);
}, [addSuccess, onClick, dataProvider, dispatch, draggableId, startDragToTimeline]);

useEffect(() => {
if (!ownFocus) {
Expand Down
8 changes: 4 additions & 4 deletions x-pack/plugins/timelines/public/components/hover_actions/actions/column_toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ export interface ColumnToggleProps extends HoverActionComponentProps {

const ColumnToggleButton: React.FC<ColumnToggleProps> = React.memo(
({
closePopOver,
Component,
defaultFocusedButtonRef,
field,
isDisabled,
isObjectArray,
keyboardEvent,
ownFocus,
onClick,
showTooltip = false,
toggleColumn,
value,
Expand All @@ -61,10 +61,10 @@ const ColumnToggleButton: React.FC<ColumnToggleProps> = React.memo(
id: field,
initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
});
if (closePopOver != null) {
closePopOver();
if (onClick != null) {
onClick();
}
}, [closePopOver, field, toggleColumn]);
}, [onClick, field, toggleColumn]);

useEffect(() => {
if (!ownFocus) {
Expand Down
Loading

0 comments on commit 4369c6e

Please sign in to comment.