[Lens] Improve Datatable content height with custom row height (#127134)

* ✨ Add new rowHeight feature

* ✅ Add unit tests for new feature

* 🗃️ Update migration logic

* 🏷️ Fix type issue

* ✅ fix usual map migration test

* Update x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx

* 🐛 Enable word wrap for multi lines

* ✅ Fix unit test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/server/embeddable/make_lens_embeddable_factory.ts

@@ -13,6 +13,7 @@ import {
 } from '../../../../../src/plugins/kibana_utils/common';
 import { DOC_TYPE } from '../../common';
 import {
+  commonEnhanceTableRowHeight,
   commonMakeReversePaletteAsCustom,
   commonRemoveTimezoneDateHistogramParam,
   commonRenameFilterReferences,
@@ -26,8 +27,10 @@ import {
   CustomVisualizationMigrations,
   LensDocShape713,
   LensDocShape715,
+  LensDocShape810,
   LensDocShapePre712,
   VisState716,
+  VisState810,
   VisStatePre715,
 } from '../migrations/types';
 import { extract, inject } from '../../common/embeddable_factory';
@@ -88,6 +91,14 @@ export const makeLensEmbeddableFactory =
                 attributes: migratedLensState,
               } as unknown as SerializableRecord;
             },
+            '8.2.0': (state) => {
+              const lensState = state as unknown as { attributes: LensDocShape810<VisState810> };
+              const migratedLensState = commonEnhanceTableRowHeight(lensState.attributes);
+              return {
+                ...lensState,
+                attributes: migratedLensState,
+              } as unknown as SerializableRecord;
+            },
           }),
           getLensCustomVisualizationMigrations(customVisualizationMigrations)
         ),

x-pack/plugins/lens/server/migrations/common_migrations.ts

@@ -23,6 +23,8 @@ import {
   VisStatePost715,
   VisStatePre715,
   VisState716,
+  VisState810,
+  VisState820,
   CustomVisualizationMigrations,
   LensDocShape810,
 } from './types';
@@ -192,6 +194,20 @@ export const commonRenameFilterReferences = (attributes: LensDocShape715): LensD
   return newAttributes as LensDocShape810;
 };
 
+export const commonEnhanceTableRowHeight = (
+  attributes: LensDocShape810<VisState810>
+): LensDocShape810<VisState820> => {
+  if (attributes.visualizationType !== 'lnsDatatable') {
+    return attributes;
+  }
+  const visState810 = attributes.state.visualization as VisState810;
+  const newAttributes = cloneDeep(attributes);
+  const vizState = newAttributes.state.visualization as VisState820;
+  vizState.rowHeight = visState810.fitRowToContent ? 'auto' : 'single';
+  vizState.rowHeightLines = visState810.fitRowToContent ? 2 : 1;
+  return newAttributes;
+};
+
 const getApplyCustomVisualizationMigrationToLens = (id: string, migration: MigrateFunction) => {
   return (savedObject: { attributes: LensDocShape }) => {
     if (savedObject.attributes.visualizationType !== id) return savedObject;

x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts

@@ -18,6 +18,8 @@ import {
   VisState716,
   VisStatePost715,
   VisStatePre715,
+  VisState810,
+  VisState820,
 } from './types';
 import { CustomPaletteParams, layerTypes } from '../../common';
 import { PaletteOutput } from 'src/plugins/charts/common';
@@ -1779,4 +1781,122 @@ describe('Lens migrations', () => {
       );
     });
   });
+
+  describe('8.2.0 rename fitRowToContent to new detailed rowHeight and rowHeightLines', () => {
+    const context = { log: { warning: () => {} } } as unknown as SavedObjectMigrationContext;
+    function getExample(fitToContent: boolean) {
+      return {
+        type: 'lens',
+        id: 'mocked-saved-object-id',
+        attributes: {
+          visualizationType: 'lnsDatatable',
+          title: 'Lens visualization',
+          references: [
+            {
+              id: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+              name: 'indexpattern-datasource-current-indexpattern',
+              type: 'index-pattern',
+            },
+            {
+              id: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+              name: 'indexpattern-datasource-layer-cddd8f79-fb20-4191-a3e7-92484780cc62',
+              type: 'index-pattern',
+            },
+          ],
+          state: {
+            datasourceStates: {
+              indexpattern: {
+                layers: {
+                  'cddd8f79-fb20-4191-a3e7-92484780cc62': {
+                    indexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+                    columns: {
+                      '221f0abf-6e54-4c61-9316-4107ad6fa500': {
+                        label: 'Top values of category.keyword',
+                        dataType: 'string',
+                        operationType: 'terms',
+                        scale: 'ordinal',
+                        sourceField: 'category.keyword',
+                        isBucketed: true,
+                        params: {
+                          size: 5,
+                          orderBy: {
+                            type: 'column',
+                            columnId: 'c6f07a26-64eb-4871-ad62-c7d937230e33',
+                          },
+                          orderDirection: 'desc',
+                          otherBucket: true,
+                          missingBucket: false,
+                          parentFormat: {
+                            id: 'terms',
+                          },
+                        },
+                      },
+                      'c6f07a26-64eb-4871-ad62-c7d937230e33': {
+                        label: 'Count of records',
+                        dataType: 'number',
+                        operationType: 'count',
+                        isBucketed: false,
+                        scale: 'ratio',
+                        sourceField: '___records___',
+                      },
+                    },
+                    columnOrder: [
+                      '221f0abf-6e54-4c61-9316-4107ad6fa500',
+                      'c6f07a26-64eb-4871-ad62-c7d937230e33',
+                    ],
+                    incompleteColumns: {},
+                  },
+                },
+              },
+            },
+            visualization: {
+              columns: [
+                {
+                  isTransposed: false,
+                  columnId: '221f0abf-6e54-4c61-9316-4107ad6fa500',
+                },
+                {
+                  isTransposed: false,
+                  columnId: 'c6f07a26-64eb-4871-ad62-c7d937230e33',
+                },
+              ],
+              layerId: 'cddd8f79-fb20-4191-a3e7-92484780cc62',
+              layerType: 'data',
+              fitRowToContent: fitToContent,
+            },
+            filters: [],
+            query: {
+              query: '',
+              language: 'kuery',
+            },
+          },
+        },
+      } as unknown as SavedObjectUnsanitizedDoc<LensDocShape810>;
+    }
+
+    it('should migrate enabled fitRowToContent to new rowHeight: "auto"', () => {
+      const result = migrations['8.2.0'](getExample(true), context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape810<VisState810>, LensDocShape810<VisState820>>
+      >;
+
+      expect(result.attributes.state.visualization as VisState820).toEqual(
+        expect.objectContaining({
+          rowHeight: 'auto',
+        })
+      );
+    });
+
+    it('should migrate disabled fitRowToContent to new rowHeight: "single"', () => {
+      const result = migrations['8.2.0'](getExample(false), context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape810<VisState810>, LensDocShape810<VisState820>>
+      >;
+
+      expect(result.attributes.state.visualization as VisState820).toEqual(
+        expect.objectContaining({
+          rowHeight: 'single',
+          rowHeightLines: 1,
+        })
+      );
+    });
+  });
 });

x-pack/plugins/lens/server/migrations/saved_object_migrations.ts

@@ -40,6 +40,7 @@ import {
   getLensCustomVisualizationMigrations,
   commonRenameRecordsField,
   fixLensTopValuesCustomFormatting,
+  commonEnhanceTableRowHeight,
 } from './common_migrations';
 
 interface LensDocShapePre710<VisualizationState = unknown> {
@@ -464,6 +465,11 @@ const addParentFormatter: SavedObjectMigrationFn<LensDocShape810, LensDocShape81
   return { ...newDoc, attributes: fixLensTopValuesCustomFormatting(newDoc.attributes) };
 };
 
+const enhanceTableRowHeight: SavedObjectMigrationFn<LensDocShape810, LensDocShape810> = (doc) => {
+  const newDoc = cloneDeep(doc);
+  return { ...newDoc, attributes: commonEnhanceTableRowHeight(newDoc.attributes) };
+};
+
 const lensMigrations: SavedObjectMigrationMap = {
   '7.7.0': removeInvalidAccessors,
   // The order of these migrations matter, since the timefield migration relies on the aggConfigs
@@ -478,6 +484,7 @@ const lensMigrations: SavedObjectMigrationMap = {
   '7.15.0': addLayerTypeToVisualization,
   '7.16.0': moveDefaultReversedPaletteToCustom,
   '8.1.0': flow(renameFilterReferences, renameRecordsField, addParentFormatter),
+  '8.2.0': enhanceTableRowHeight,
 };
 
 export const getAllMigrations = (

x-pack/plugins/lens/server/migrations/types.ts

@@ -246,3 +246,14 @@ export type VisState716 =
   | {
       palette?: PaletteOutput<CustomPaletteParams>;
     };
+
+// Datatable only
+export interface VisState810 {
+  fitRowToContent?: boolean;
+}
+
+// Datatable only
+export interface VisState820 {
+  rowHeight: 'auto' | 'single' | 'custom';
+  rowHeightLines: number;
+}