[Lens] Fix datatable empty state (#66744)

x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`datatable_expression DatatableComponent it renders the title and value
     items={
       Array [
         Object {
-          "a": 10110,
+          "a": "shoes",
           "b": 1588024800000,
           "c": 3,
         },

x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx

@@ -14,6 +14,7 @@ import { createMockExecutionContext } from '../../../../../src/plugins/expressio
 import { IFieldFormat } from '../../../../../src/plugins/data/public';
 import { IAggType } from 'src/plugins/data/public';
 const onClickValue = jest.fn();
+import { EmptyPlaceholder } from '../shared_components';
 
 function sampleArgs() {
   const data: LensMultiTable = {
@@ -22,11 +23,11 @@ function sampleArgs() {
       l1: {
         type: 'kibana_datatable',
         columns: [
-          { id: 'a', name: 'a', meta: { type: 'count' } },
+          { id: 'a', name: 'a', meta: { type: 'terms' } },
           { id: 'b', name: 'b', meta: { type: 'date_histogram', aggConfigParams: { field: 'b' } } },
-          { id: 'c', name: 'c', meta: { type: 'cardinality' } },
+          { id: 'c', name: 'c', meta: { type: 'count' } },
         ],
-        rows: [{ a: 10110, b: 1588024800000, c: 3 }],
+        rows: [{ a: 'shoes', b: 1588024800000, c: 3 }],
       },
     },
   };
@@ -103,7 +104,7 @@ describe('datatable_expression', () => {
             column: 0,
             row: 0,
             table: data.tables.l1,
-            value: 10110,
+            value: 'shoes',
           },
         ],
         negate: true,
@@ -148,5 +149,31 @@ describe('datatable_expression', () => {
         timeFieldName: 'b',
       });
     });
+
+    test('it shows emptyPlaceholder for undefined bucketed data', () => {
+      const { args, data } = sampleArgs();
+      const emptyData: LensMultiTable = {
+        ...data,
+        tables: {
+          l1: {
+            ...data.tables.l1,
+            rows: [{ a: undefined, b: undefined, c: 0 }],
+          },
+        },
+      };
+
+      const component = shallow(
+        <DatatableComponent
+          data={emptyData}
+          args={args}
+          formatFactory={x => x as IFieldFormat}
+          onClickValue={onClickValue}
+          getType={jest.fn(type =>
+            type === 'count' ? ({ type: 'metrics' } as IAggType) : ({ type: 'buckets' } as IAggType)
+          )}
+        />
+      );
+      expect(component.find(EmptyPlaceholder).prop('icon')).toEqual('visTable');
+    });
   });
 });

x-pack/plugins/lens/public/datatable_visualization/expression.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
@@ -21,6 +21,8 @@ import {
   ExpressionRenderDefinition,
 } from '../../../../../src/plugins/expressions/public';
 import { VisualizationContainer } from '../visualization_container';
+import { EmptyPlaceholder } from '../shared_components';
+
 export interface DatatableColumns {
   columnIds: string[];
 }
@@ -158,26 +160,45 @@ export function DatatableComponent(props: DatatableRenderProps) {
     formatters[column.id] = props.formatFactory(column.formatHint);
   });
 
-  const handleFilterClick = (field: string, value: unknown, colIndex: number, negate = false) => {
-    const col = firstTable.columns[colIndex];
-    const isDateHistogram = col.meta?.type === 'date_histogram';
-    const timeFieldName = negate && isDateHistogram ? undefined : col?.meta?.aggConfigParams?.field;
-    const rowIndex = firstTable.rows.findIndex(row => row[field] === value);
+  const handleFilterClick = useMemo(
+    () => (field: string, value: unknown, colIndex: number, negate: boolean = false) => {
+      const col = firstTable.columns[colIndex];
+      const isDateHistogram = col.meta?.type === 'date_histogram';
+      const timeFieldName =
+        negate && isDateHistogram ? undefined : col?.meta?.aggConfigParams?.field;
+      const rowIndex = firstTable.rows.findIndex(row => row[field] === value);
 
-    const data: LensFilterEvent['data'] = {
-      negate,
-      data: [
-        {
-          row: rowIndex,
-          column: colIndex,
-          value,
-          table: firstTable,
-        },
-      ],
-      timeFieldName,
-    };
-    props.onClickValue(data);
-  };
+      const data: LensFilterEvent['data'] = {
+        negate,
+        data: [
+          {
+            row: rowIndex,
+            column: colIndex,
+            value,
+            table: firstTable,
+          },
+        ],
+        timeFieldName,
+      };
+      props.onClickValue(data);
+    },
+    [firstTable]
+  );
+
+  const bucketColumns = firstTable.columns
+    .filter(col => {
+      return col?.meta?.type && props.getType(col.meta.type)?.type === 'buckets';
+    })
+    .map(col => col.id);
+
+  const isEmpty =
+    firstTable.rows.length === 0 ||
+    (bucketColumns.length &&
+      firstTable.rows.every(row => bucketColumns.every(col => typeof row[col] === 'undefined')));
+
+  if (isEmpty) {
+    return <EmptyPlaceholder icon="visTable" />;
+  }
 
   return (
     <VisualizationContainer>
@@ -188,9 +209,8 @@ export function DatatableComponent(props: DatatableRenderProps) {
         columns={props.args.columns.columnIds
           .map(field => {
             const col = firstTable.columns.find(c => c.id === field);
+            const filterable = bucketColumns.includes(field);
             const colIndex = firstTable.columns.findIndex(c => c.id === field);
-
-            const filterable = col?.meta?.type && props.getType(col.meta.type)?.type === 'buckets';
             return {
               field,
               name: (col && col.name) || '',