From 2cddc6036879380723e3c3a6b382fb84217070aa Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Tue, 2 Jan 2024 13:54:07 +0100
Subject: [PATCH] [Lens] Fix table alignment (#173908)

## Summary

Fixes https://github.com/elastic/kibana/issues/173902

Fix issue and introduces also a unit test.


![text_alignment_table_fix](https://github.com/elastic/kibana/assets/924948/201f70cd-6fc6-41e9-bf87-8e87f9906052)


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 NOTICE.txt                                    |  2 +-
 .../datatable/visualization.test.tsx          | 41 +++++++++++++++++++
 .../datatable/visualization.tsx               |  1 +
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/NOTICE.txt b/NOTICE.txt
index 45af6e5231783..d02031c4b5a2b 100644
--- 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
index a3f4f6f797ee1..dda07ef2c41c8 100644
--- 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
index 505b20bdc3e58..f22d17afad762 100644
--- 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!,