Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Hide column in table #88680

Merged
merged 53 commits into from
Feb 4, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
e3dcee1
migrate data table visualization to data grid
flash1293 Jan 4, 2021
a752f4d
memoize as good as possible
flash1293 Jan 4, 2021
84c2a9d
improve visuals
flash1293 Jan 4, 2021
60ceeba
Merge remote-tracking branch 'upstream/master' into lens/eui-data-grid
flash1293 Jan 5, 2021
234891d
clean up and fix tests
flash1293 Jan 5, 2021
f298b4d
:truck: Refactor table codebase in modules
dej611 Jan 12, 2021
ffe5fd2
Merge remote-tracking branch 'upstream/master' into lens/eui-data-grid
dej611 Jan 12, 2021
c233e3b
:truck: Move table component tests to its own folder
dej611 Jan 12, 2021
9318950
:bug: Fix deep check for table column header
dej611 Jan 12, 2021
79836ae
:label: Fix type check
dej611 Jan 12, 2021
3181b88
:globe_with_meridians: Fix locatization tokens
dej611 Jan 12, 2021
16b0d90
:bug: Fix functional tests
dej611 Jan 13, 2021
eb72077
:globe_with_meridians: Fix unused translation
dej611 Jan 13, 2021
07dc9a0
:camera_flash: Fix snapshot tests
dej611 Jan 13, 2021
5c0fecf
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 14, 2021
1c9ce68
:white_check_mark: Add more functional tests for Lens table
dej611 Jan 14, 2021
38fdf2a
Merge branch 'lens/eui-data-grid' of github.com:dej611/kibana into le…
dej611 Jan 14, 2021
acc4f92
:sparkles: Add resize reset + add more unit tests
dej611 Jan 18, 2021
bc4f37a
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 18, 2021
0637948
:lipstick: Make header sticky
dej611 Jan 18, 2021
ceea3cf
Merge branch 'lens/eui-data-grid' of github.com:dej611/kibana into le…
dej611 Jan 18, 2021
f6fc9a3
:camera_flash: Updated snapshots for sticky header fix
dej611 Jan 18, 2021
f27aafe
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 19, 2021
3f02cd7
add column toggle functionality
flash1293 Jan 19, 2021
a993045
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 20, 2021
e4e6761
Merge branch 'master' into lens/hidden-column
kibanamachine Jan 20, 2021
2f39d62
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 21, 2021
ff69cc7
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 25, 2021
07967ed
:lipstick: Some css classes clean up
dej611 Jan 25, 2021
0fed673
:lipstick: Make truncate work by the datagrid component
dej611 Jan 25, 2021
4eef909
Merge remote-tracking branch 'dej611/lens/eui-data-grid' into lens/hi…
flash1293 Jan 25, 2021
5a458d9
Merge branch 'lens/hidden-column' of github.com:flash1293/kibana into…
flash1293 Jan 25, 2021
9c6f5cf
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 26, 2021
90e810b
refactoring
flash1293 Jan 26, 2021
8fc5c07
Merge remote-tracking branch 'dej611/lens/eui-data-grid' into lens/hi…
flash1293 Jan 26, 2021
e821ca6
add tests and clean up
flash1293 Jan 26, 2021
83e3e85
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 26, 2021
fc4b39d
Merge remote-tracking branch 'dej611/lens/eui-data-grid' into lens/hi…
flash1293 Jan 26, 2021
82d7e9f
fix migrations
flash1293 Jan 26, 2021
4e1052f
Merge branch 'master' into lens/eui-data-grid
kibanamachine Jan 27, 2021
c7240ab
Merge remote-tracking branch 'dej611/lens/eui-data-grid' into lens/hi…
flash1293 Jan 27, 2021
00b7ab6
Merge remote-tracking branch 'upstream/master' into lens/hidden-column
flash1293 Jan 29, 2021
a17d9d5
Merge remote-tracking branch 'upstream/master' into lens/hidden-column
flash1293 Feb 1, 2021
064794b
fix bug
flash1293 Feb 1, 2021
db3ab50
Merge remote-tracking branch 'upstream/master' into lens/hidden-column
flash1293 Feb 2, 2021
46ec8ac
Merge remote-tracking branch 'upstream/master' into lens/hidden-column
flash1293 Feb 3, 2021
0ec8926
Merge remote-tracking branch 'upstream/master' into lens/hidden-column
flash1293 Feb 3, 2021
4ebca5f
move hidden flag to dimension editor
flash1293 Feb 3, 2021
b2ba6b9
fix i18n
flash1293 Feb 3, 2021
7a4befb
Merge branch 'master' into lens/hidden-column
kibanamachine Feb 4, 2021
a193204
review comments
flash1293 Feb 4, 2021
dfd4e7d
review comments
flash1293 Feb 4, 2021
7847e86
simplify
flash1293 Feb 4, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
import { EuiDataGridColumn, EuiDataGridColumnCellActionProps } from '@elastic/eui';
import type { Datatable, DatatableColumnMeta } from 'src/plugins/expressions';
import type { FormatFactory } from '../../types';
import type { DatatableColumns } from './types';
import { ColumnConfig } from './table_basic';

export const createGridColumns = (
bucketColumns: string[],
Expand All @@ -23,10 +23,11 @@ export const createGridColumns = (
negate?: boolean
) => void,
isReadOnly: boolean,
columnConfig: DatatableColumns & { type: 'lens_datatable_columns' },
columnConfig: ColumnConfig,
visibleColumns: string[],
formatFactory: FormatFactory,
onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void
onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void,
onColumnHide: (eventData: { columnId: string }) => void
) => {
const columnsReverseLookup = table.columns.reduce<
Record<string, { name: string; index: number; meta?: DatatableColumnMeta }>
Expand Down Expand Up @@ -134,8 +135,9 @@ export const createGridColumns = (
]
: undefined;

const initialWidth = columnConfig.columnWidth?.find(({ columnId }) => columnId === field)
?.width;
const column = columnConfig.columns.find(({ columnId }) => columnId === field);
const initialWidth = column?.width;
const isHidden = column?.hidden;

const columnDefinition: EuiDataGridColumn = {
id: field,
Expand Down Expand Up @@ -174,6 +176,17 @@ export const createGridColumns = (
'data-test-subj': 'lensDatatableResetWidth',
isDisabled: initialWidth == null,
},
{
color: 'text',
size: 'xs',
onClick: () => onColumnHide({ columnId: field }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like this does not update the visibility indicators in the main menu: when I use the Hide button from the column menu, not from the visualization menu, I get inconsistent results:

Screen Shot 2021-01-29 at 5 41 40 PM

iconType: 'eyeClosed',
label: i18n.translate('xpack.lens.table.hide.hideLabel', {
defaultMessage: 'Hide',
}),
'data-test-subj': 'lensDatatableHide',
isDisabled: !isHidden && visibleColumns.length <= 1,
},
],
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@

export const LENS_EDIT_SORT_ACTION = 'sort';
export const LENS_EDIT_RESIZE_ACTION = 'resize';
export const LENS_TOGGLE_ACTION = 'toggle';
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiSwitch, EuiFormRow } from '@elastic/eui';
import { VisualizationDimensionEditorProps } from '../../types';
import { DatatableVisualizationState } from '../visualization';

export function TableDimensionEditor(
props: VisualizationDimensionEditorProps<DatatableVisualizationState>
) {
const { state, setState, accessor } = props;
const column = state.columns.find((c) => c.columnId === accessor);

const visibleColumnsCount = state.columns.filter((c) => !c.hidden).length;

if (!column) {
return null;
}

return (
<EuiFormRow
label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
defaultMessage: 'Column hidden in table',
})}
display="columnCompressedSwitch"
>
<EuiSwitch
compressed
label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
defaultMessage: 'Column hidden in table',
})}
showLabel={false}
data-test-subj="lns-table-column-hidden"
checked={Boolean(column?.hidden)}
disabled={!column.hidden && visibleColumnsCount <= 1}
onChange={() => {
const newState = {
...state,
columns: state.columns.map((currentColumn) => {
if (currentColumn.columnId === accessor) {
return {
...currentColumn,
hidden: !column.hidden,
};
} else {
return currentColumn;
}
}),
};
setState(newState);
}}
/>
</EuiFormRow>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,19 @@ import {
createGridFilterHandler,
createGridResizeHandler,
createGridSortingConfig,
createGridHideHandler,
} from './table_actions';
import { DatatableColumns, LensGridDirection } from './types';
import { LensGridDirection } from './types';
import { ColumnConfig } from './table_basic';

function getDefaultConfig(): DatatableColumns & {
type: 'lens_datatable_columns';
} {
function getDefaultConfig(): ColumnConfig {
return {
columnIds: [],
sortBy: '',
sortDirection: 'none',
type: 'lens_datatable_columns',
columns: [
{ columnId: 'a', type: 'lens_datatable_column' },
{ columnId: 'b', type: 'lens_datatable_column' },
],
sortingColumnId: '',
sortingDirection: 'none',
};
}

Expand Down Expand Up @@ -207,24 +209,28 @@ describe('Table actions', () => {

expect(setColumnConfig).toHaveBeenCalledWith({
...columnConfig,
columnWidth: [{ columnId: 'a', width: 100, type: 'lens_datatable_column_width' }],
columns: [
{ columnId: 'a', width: 100, type: 'lens_datatable_column' },
{
columnId: 'b',
type: 'lens_datatable_column',
},
],
});

expect(onEditAction).toHaveBeenCalledWith({ action: 'resize', columnId: 'a', width: 100 });
});

it('should pull out the table custom width from the local state when passing undefined', () => {
const columnConfig = getDefaultConfig();
columnConfig.columnWidth = [
{ columnId: 'a', width: 100, type: 'lens_datatable_column_width' },
];
columnConfig.columns = [{ columnId: 'a', width: 100, type: 'lens_datatable_column' }];

const resizer = createGridResizeHandler(columnConfig, setColumnConfig, onEditAction);
resizer({ columnId: 'a', width: undefined });

expect(setColumnConfig).toHaveBeenCalledWith({
...columnConfig,
columnWidth: [],
columns: [{ columnId: 'a', width: undefined, type: 'lens_datatable_column' }],
});

expect(onEditAction).toHaveBeenCalledWith({
Expand All @@ -234,4 +240,23 @@ describe('Table actions', () => {
});
});
});
describe('Column hiding', () => {
const setColumnConfig = jest.fn();

it('should allow to hide column', () => {
const columnConfig = getDefaultConfig();
const hiding = createGridHideHandler(columnConfig, setColumnConfig, onEditAction);
hiding({ columnId: 'a' });

expect(setColumnConfig).toHaveBeenCalledWith({
...columnConfig,
columns: [
{ columnId: 'a', hidden: true, type: 'lens_datatable_column' },
{ columnId: 'b', type: 'lens_datatable_column' },
],
});

expect(onEditAction).toHaveBeenCalledWith({ action: 'toggle', columnId: 'a' });
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,30 @@ import type { EuiDataGridSorting } from '@elastic/eui';
import type { Datatable } from 'src/plugins/expressions';
import type { LensFilterEvent } from '../../types';
import type {
DatatableColumns,
LensGridDirection,
LensResizeAction,
LensSortAction,
LensToggleAction,
} from './types';
import { ColumnConfig } from './table_basic';

import { desanitizeFilterContext } from '../../utils';

export const createGridResizeHandler = (
columnConfig: DatatableColumns & {
type: 'lens_datatable_columns';
},
setColumnConfig: React.Dispatch<
React.SetStateAction<
DatatableColumns & {
type: 'lens_datatable_columns';
}
>
>,
columnConfig: ColumnConfig,
setColumnConfig: React.Dispatch<React.SetStateAction<ColumnConfig>>,
onEditAction: (data: LensResizeAction['data']) => void
) => (eventData: { columnId: string; width: number | undefined }) => {
// directly set the local state of the component to make sure the visualization re-renders immediately,
// re-layouting and taking up all of the available space.
setColumnConfig({
...columnConfig,
columnWidth: [
...(columnConfig.columnWidth || []).filter(({ columnId }) => columnId !== eventData.columnId),
...(eventData.width !== undefined
? [
{
columnId: eventData.columnId,
width: eventData.width,
type: 'lens_datatable_column_width' as const,
},
]
: []),
],
columns: columnConfig.columns.map((column) => {
if (column.columnId === eventData.columnId) {
return { ...column, width: eventData.width };
}
return column;
}),
});
return onEditAction({
action: 'resize',
Expand All @@ -54,6 +41,27 @@ export const createGridResizeHandler = (
});
};

export const createGridHideHandler = (
columnConfig: ColumnConfig,
setColumnConfig: React.Dispatch<React.SetStateAction<ColumnConfig>>,
onEditAction: (data: LensToggleAction['data']) => void
) => (eventData: { columnId: string }) => {
// directly set the local state of the component to make sure the visualization re-renders immediately
setColumnConfig({
...columnConfig,
columns: columnConfig.columns.map((column) => {
if (column.columnId === eventData.columnId) {
return { ...column, hidden: true };
}
return column;
}),
});
return onEditAction({
action: 'toggle',
columnId: eventData.columnId,
});
};

export const createGridFilterHandler = (
tableRef: React.MutableRefObject<Datatable>,
onClickValue: (data: LensFilterEvent['data']) => void
Expand Down Expand Up @@ -85,7 +93,7 @@ export const createGridFilterHandler = (
};

export const createGridSortingConfig = (
sortBy: string,
sortBy: string | undefined,
sortDirection: LensGridDirection,
onEditAction: (data: LensSortAction['data']) => void
): EuiDataGridSorting => ({
Expand Down
Loading