[8.12] [Lens] Fix table alignment (#173908) (#174083)

# Backport This will backport the following commits from `main` to `8.12`: - [[Lens] Fix table alignment (#173908)](#173908)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
elastic · Jan 2, 2024 · c8e877a · c8e877a
1 parent 1fb8965
commit c8e877a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/NOTICE.txt b/NOTICE.txt
@@ -1,5 +1,5 @@
 Kibana source code with Kibana X-Pack source code
-Copyright 2012-2023 Elasticsearch B.V.
+Copyright 2012-2024 Elasticsearch B.V.
 
 ---
 Pretty handling of logarithmic axes.

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/visualization.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/visualization.test.tsx
@@ -759,6 +759,47 @@ describe('Datatable Visualization', () => {
         }).headerRowHeightLines
       ).toEqual([2]);
     });
+
+    it('sets alignment correctly', () => {
+      datasource.publicAPIMock.getOperationForColumnId.mockReturnValue({
+        dataType: 'string',
+        isBucketed: false, // <= make them metrics
+        label: 'label',
+        isStaticValue: false,
+        hasTimeShift: false,
+        hasReducedTimeRange: false,
+      });
+      const expression = datatableVisualization.toExpression(
+        {
+          ...defaultExpressionTableState,
+          columns: [
+            { columnId: 'b', alignment: 'center' },
+            { columnId: 'c', alignment: 'left' },
+            { columnId: 'a' },
+          ],
+        },
+        frame.datasourceLayers,
+        {},
+        { '1': { type: 'expression', chain: [] } }
+      ) as Ast;
+
+      const columnArgs = buildExpression(expression).findFunction('lens_datatable_column');
+      expect(columnArgs[0].arguments).toEqual(
+        expect.objectContaining({
+          alignment: ['left'],
+        })
+      );
+      expect(columnArgs[1].arguments).toEqual(
+        expect.objectContaining({
+          alignment: ['center'],
+        })
+      );
+      expect(columnArgs[2].arguments).toEqual(
+        expect.not.objectContaining({
+          alignment: [],
+        })
+      );
+    });
   });
 
   describe('#onEditAction', () => {

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx b/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx
@@ -496,6 +496,7 @@ export const getDatatableVisualization = ({
               width: column.width,
               isTransposed: column.isTransposed,
               transposable: isTransposable,
+              alignment: column.alignment,
               colorMode: canColor && column.colorMode ? column.colorMode : 'none',
               palette: paletteService.get(CUSTOM_PALETTE).toExpression(paletteParams),
               summaryRow: hasNoSummaryRow ? undefined : column.summaryRow!,