From 37728f526d93561735c9f63fbe8f2b3290ba1958 Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Tue, 15 Jun 2021 10:34:57 +0200
Subject: [PATCH] [Lens] Table headers are aligned the same as cells (#101875)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../__snapshots__/table_basic.test.tsx.snap   | 54 ++++++++++++++---
 .../components/columns.tsx                    |  7 ++-
 .../components/table_basic.tsx                | 58 ++++++++++---------
 3 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
index a4be46f61990b6..9ad39e1561e97c 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
@@ -126,7 +126,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
               },
             },
             "cellActions": undefined,
-            "display": "a",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              a
+            </div>,
             "displayAsText": "a",
             "id": "a",
           },
@@ -163,7 +167,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
               },
             },
             "cellActions": undefined,
-            "display": "b",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              b
+            </div>,
             "displayAsText": "b",
             "id": "b",
           },
@@ -200,7 +208,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
               },
             },
             "cellActions": undefined,
-            "display": "c",
+            "display": <div
+              className="lnsTableCell--right"
+            >
+              c
+            </div>,
             "displayAsText": "c",
             "id": "c",
           },
@@ -360,7 +372,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
               },
             },
             "cellActions": undefined,
-            "display": "a",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              a
+            </div>,
             "displayAsText": "a",
             "id": "a",
           },
@@ -397,7 +413,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
               },
             },
             "cellActions": undefined,
-            "display": "b",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              b
+            </div>,
             "displayAsText": "b",
             "id": "b",
           },
@@ -434,7 +454,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
               },
             },
             "cellActions": undefined,
-            "display": "c",
+            "display": <div
+              className="lnsTableCell--right"
+            >
+              c
+            </div>,
             "displayAsText": "c",
             "id": "c",
           },
@@ -566,7 +590,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
               "showSortDesc": false,
             },
             "cellActions": undefined,
-            "display": "a",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              a
+            </div>,
             "displayAsText": "a",
             "id": "a",
           },
@@ -580,7 +608,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
               "showSortDesc": false,
             },
             "cellActions": undefined,
-            "display": "b",
+            "display": <div
+              className="lnsTableCell--left"
+            >
+              b
+            </div>,
             "displayAsText": "b",
             "id": "b",
           },
@@ -594,7 +626,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
               "showSortDesc": false,
             },
             "cellActions": undefined,
-            "display": "c",
+            "display": <div
+              className="lnsTableCell--right"
+            >
+              c
+            </div>,
             "displayAsText": "c",
             "id": "c",
           },
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
index 5c53d40f999b77..27c2db16dbd323 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
@@ -35,7 +35,8 @@ export const createGridColumns = (
   visibleColumns: string[],
   formatFactory: FormatFactory,
   onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void,
-  onColumnHide: (eventData: { columnId: string }) => void
+  onColumnHide: (eventData: { columnId: string }) => void,
+  alignments: Record<string, 'left' | 'right' | 'center'>
 ) => {
   const columnsReverseLookup = table.columns.reduce<
     Record<string, { name: string; index: number; meta?: DatatableColumnMeta }>
@@ -200,11 +201,13 @@ export const createGridColumns = (
         });
       }
     }
+    const currentAlignment = alignments && alignments[field];
+    const alignmentClassName = `lnsTableCell--${currentAlignment}`;
 
     const columnDefinition: EuiDataGridColumn = {
       id: field,
       cellActions,
-      display: name,
+      display: <div className={alignmentClassName}>{name}</div>,
       displayAsText: name,
       actions: {
         showHide: false,
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
index cd990149fdaf55..2a6b4879854d7a 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -180,34 +180,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
     [onEditAction, setColumnConfig, columnConfig]
   );
 
-  const columns: EuiDataGridColumn[] = useMemo(
-    () =>
-      createGridColumns(
-        bucketColumns,
-        firstLocalTable,
-        handleFilterClick,
-        handleTransposedColumnClick,
-        isReadOnlySorted,
-        columnConfig,
-        visibleColumns,
-        formatFactory,
-        onColumnResize,
-        onColumnHide
-      ),
-    [
-      bucketColumns,
-      firstLocalTable,
-      handleFilterClick,
-      handleTransposedColumnClick,
-      isReadOnlySorted,
-      columnConfig,
-      visibleColumns,
-      formatFactory,
-      onColumnResize,
-      onColumnHide,
-    ]
-  );
-
   const isNumericMap: Record<string, boolean> = useMemo(() => {
     const numericMap: Record<string, boolean> = {};
     for (const column of firstLocalTable.columns) {
@@ -237,6 +209,36 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
     );
   }, [firstTable, isNumericMap, columnConfig]);
 
+  const columns: EuiDataGridColumn[] = useMemo(
+    () =>
+      createGridColumns(
+        bucketColumns,
+        firstLocalTable,
+        handleFilterClick,
+        handleTransposedColumnClick,
+        isReadOnlySorted,
+        columnConfig,
+        visibleColumns,
+        formatFactory,
+        onColumnResize,
+        onColumnHide,
+        alignments
+      ),
+    [
+      bucketColumns,
+      firstLocalTable,
+      handleFilterClick,
+      handleTransposedColumnClick,
+      isReadOnlySorted,
+      columnConfig,
+      visibleColumns,
+      formatFactory,
+      onColumnResize,
+      onColumnHide,
+      alignments,
+    ]
+  );
+
   const trailingControlColumns: EuiDataGridControlColumn[] = useMemo(() => {
     if (!hasAtLeastOneRowClickAction || !onRowContextMenuClick) {
       return [];