[Lens] Table column text alignment (#89300) (#91675)

x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx

@@ -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');
+  });
+});

x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx

@@ -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}`}
     />
   );
 };

x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx

@@ -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',
+        },
+      ],
+    });
+  });
+});