maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[RAC] Expand cell footer button changes to prevent overflow (#110506)

Browse source 
* fix hover actions tooltip footer buttons overflow

* reorder actions

* override eui styles to match popover actions design
This commit is contained in:
Sergi Massaneda 2021-09-01 16:47:43 +02:00 committed by GitHub
parent b74345cbb7
commit e9c20f9802
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
x-pack/plugins/security_solution/public/common/components/page/index.tsx
View file

@ -31,6 +31,15 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
z-index: 9950 !important;
}
/*
overrides the default styling of EuiDataGrid expand popover footer to
make it a column of actions instead of the default actions row
*/
.euiDataGridRowCell__popover .euiPopoverFooter .euiFlexGroup {
flex-direction: column;
align-items: flex-start;
}
/*
overrides the default styling of euiComboBoxOptionsList because it's implemented
as a popover, so it's not selectable as a child of the styled component

98
x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.tsx
View file

@ -116,6 +116,36 @@ export const defaultCellActions: TGridCellAction[] = [
fieldName: columnId,
});
return (
<>
{timelines.getHoverActions().getCopyButton({
Component,
field: columnId,
isHoverAction: false,
ownFocus: false,
showTooltip: false,
value,
})}
</>
);
},
({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
rowIndex,
columnId,
Component,
}) => {
const { timelines } = useKibanaServices();
const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
if (pageRowIndex >= data.length) {
return null;
}
const value = getMappedNonEcsValue({
data: data[pageRowIndex],
fieldName: columnId,
});
const dataProvider: DataProvider[] = useMemo(
() =>
value?.map((x) => ({
@ -170,58 +200,30 @@ export const defaultCellActions: TGridCellAction[] = [
fieldName: columnId,
});
return (
<>
{allowTopN({
const showButton = useMemo(
() =>
allowTopN({
browserField: getAllFieldsByName(browserFields)[columnId],
fieldName: columnId,
hideTopN: false,
}) && (
<ShowTopNButton
Component={Component}
enablePopOver
data-test-subj="hover-actions-show-top-n"
field={columnId}
onClick={onClick}
onFilterAdded={onFilterAdded}
ownFocus={false}
showTopN={showTopN}
showTooltip={false}
timelineId={timelineId}
value={value}
/>
)}
</>
}),
[columnId]
);
},
({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
rowIndex,
columnId,
Component,
}) => {
const { timelines } = useKibanaServices();
const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
if (pageRowIndex >= data.length) {
return null;
}
const value = getMappedNonEcsValue({
data: data[pageRowIndex],
fieldName: columnId,
});
return (
<>
{timelines.getHoverActions().getCopyButton({
Component,
field: columnId,
isHoverAction: false,
ownFocus: false,
showTooltip: false,
value,
})}
</>
);
return showButton ? (
<ShowTopNButton
Component={Component}
enablePopOver
data-test-subj="hover-actions-show-top-n"
field={columnId}
onClick={onClick}
onFilterAdded={onFilterAdded}
ownFocus={false}
showTopN={showTopN}
showTooltip={false}
timelineId={timelineId}
value={value}
/>
) : null;
},
];

4
x-pack/plugins/timelines/public/components/hover_actions/actions/copy.tsx
View file

@ -69,8 +69,8 @@ const CopyButton: React.FC<CopyProps> = React.memo(
<Component
aria-label={COPY_TO_CLIPBOARD}
data-test-subj="copy-to-clipboard"
icon="copyClipboard"
iconType="copyClipboard"
icon="copy"
iconType="copy"
onClick={handleOnClick}
title={COPY_TO_CLIPBOARD}
>