Skip to content

Commit

Permalink
[Lens] Table column text alignment (#89300) (#91675)
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 authored Feb 17, 2021
1 parent 02a61f9 commit 995eed2
Show file tree
Hide file tree
Showing 12 changed files with 384 additions and 37 deletions.

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
@@ -0,0 +1,81 @@
/*
* 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 { mountWithIntl } from '@kbn/test/jest';
import React from 'react';
import { DataContext } from './table_basic';
import { createGridCell } from './cell_value';
import { FieldFormat } from 'src/plugins/data/public';
import { Datatable } from 'src/plugins/expressions/public';

describe('datatable cell renderer', () => {
const table: Datatable = {
type: 'datatable',
columns: [
{
id: 'a',
name: 'a',
meta: {
type: 'number',
},
},
],
rows: [{ a: 123 }],
};
const CellRenderer = createGridCell(
{
a: { convert: (x) => `formatted ${x}` } as FieldFormat,
},
DataContext
);

it('renders formatted value', () => {
const instance = mountWithIntl(
<DataContext.Provider
value={{
table,
alignments: {
a: 'right',
},
}}
>
<CellRenderer
rowIndex={0}
columnId="a"
setCellProps={() => {}}
isExpandable={false}
isDetails={false}
isExpanded={false}
/>
</DataContext.Provider>
);
expect(instance.text()).toEqual('formatted 123');
});

it('set class with text alignment', () => {
const cell = mountWithIntl(
<DataContext.Provider
value={{
table,
alignments: {
a: 'right',
},
}}
>
<CellRenderer
rowIndex={0}
columnId="a"
setCellProps={() => {}}
isExpandable={false}
isDetails={false}
isExpanded={false}
/>
</DataContext.Provider>
);
expect(cell.find('.lnsTableCell').prop('className')).toContain('--right');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,21 @@ export const createGridCell = (
formatters: Record<string, ReturnType<FormatFactory>>,
DataContext: React.Context<DataContextType>
) => ({ rowIndex, columnId }: EuiDataGridCellValueElementProps) => {
const { table } = useContext(DataContext);
const { table, alignments } = useContext(DataContext);
const rowValue = table?.rows[rowIndex][columnId];
const content = formatters[columnId]?.convert(rowValue, 'html');
const currentAlignment = alignments && alignments[columnId];
const alignmentClassName = `lnsTableCell--${currentAlignment}`;

return (
<span
<div
/*
* dangerouslySetInnerHTML is necessary because the field formatter might produce HTML markup
* which is produced in a safe way.
*/
dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
data-test-subj="lnsTableCellContent"
className="lnsDataTableCellContent"
className={`lnsTableCell ${alignmentClassName}`}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
* 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 { EuiButtonGroup } from '@elastic/eui';
import { FramePublicAPI, VisualizationDimensionEditorProps } from '../../types';
import { DatatableVisualizationState } from '../visualization';
import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks';
import { mountWithIntl } from '@kbn/test/jest';
import { TableDimensionEditor } from './dimension_editor';

describe('data table dimension editor', () => {
let frame: FramePublicAPI;
let state: DatatableVisualizationState;
let setState: (newState: DatatableVisualizationState) => void;
let props: VisualizationDimensionEditorProps<DatatableVisualizationState>;

function testState(): DatatableVisualizationState {
return {
layerId: 'first',
columns: [
{
columnId: 'foo',
},
],
};
}

beforeEach(() => {
state = testState();
frame = createMockFramePublicAPI();
frame.datasourceLayers = {
first: createMockDatasource('test').publicAPIMock,
};
frame.activeData = {
first: {
type: 'datatable',
columns: [
{
id: 'foo',
name: 'foo',
meta: {
type: 'string',
},
},
],
rows: [],
},
};
setState = jest.fn();
props = {
accessor: 'foo',
frame,
groupId: 'columns',
layerId: 'first',
state,
setState,
};
});

it('should render default alignment', () => {
const instance = mountWithIntl(<TableDimensionEditor {...props} />);
expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
expect.stringContaining('left')
);
});

it('should render default alignment for number', () => {
frame.activeData!.first.columns[0].meta.type = 'number';
const instance = mountWithIntl(<TableDimensionEditor {...props} />);
expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
expect.stringContaining('right')
);
});

it('should render specific alignment', () => {
state.columns[0].alignment = 'center';
const instance = mountWithIntl(<TableDimensionEditor {...props} />);
expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
expect.stringContaining('center')
);
});

it('should set state for the right column', () => {
state.columns = [
{
columnId: 'foo',
},
{
columnId: 'bar',
},
];
const instance = mountWithIntl(<TableDimensionEditor {...props} />);
instance.find(EuiButtonGroup).prop('onChange')('center');
expect(setState).toHaveBeenCalledWith({
...state,
columns: [
{
columnId: 'foo',
alignment: 'center',
},
{
columnId: 'bar',
},
],
});
});
});
Loading

0 comments on commit 995eed2

Please sign in to comment.