From 5336fd2a9d382de8100ef5a84ad60b26d17edc8a Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 4 Jan 2022 16:59:39 +0100
Subject: [PATCH 1/3] :bug: filter out non visible columsn from datatable to
 export/inspect

---
 src/plugins/data/common/exports/export_csv.tsx     | 11 ++++++++---
 src/plugins/data/common/exports/table_filter.ts    | 14 ++++++++++++++
 .../table_inspector_view/components/data_table.tsx |  3 ++-
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 src/plugins/data/common/exports/table_filter.ts

diff --git a/src/plugins/data/common/exports/export_csv.tsx b/src/plugins/data/common/exports/export_csv.tsx
index 68f817d1b1484..de12a1c6d5179 100644
--- a/src/plugins/data/common/exports/export_csv.tsx
+++ b/src/plugins/data/common/exports/export_csv.tsx
@@ -11,6 +11,7 @@
 import { Datatable } from 'src/plugins/expressions';
 import { FormatFactory } from '../../../field_formats/common';
 import { createEscapeValue } from './escape_value';
+import { getVisibleColumns } from './table_filter';
 
 export const LINE_FEED_CHARACTER = '\r\n';
 export const CSV_MIME_TYPE = 'text/plain;charset=utf-8';
@@ -28,10 +29,14 @@ export function datatableToCSV(
   { csvSeparator, quoteValues, formatFactory, raw, escapeFormulaValues }: CSVOptions
 ) {
   const escapeValues = createEscapeValue(quoteValues, escapeFormulaValues);
+
+  // If columns have some meta information, use them to filter out hidden columns
+  const filteredColumns = getVisibleColumns(columns);
+  // const filteredColumns = columns;
   // Build the header row by its names
-  const header = columns.map((col) => escapeValues(col.name));
+  const header = filteredColumns.map((col) => escapeValues(col.name));
 
-  const formatters = columns.reduce<Record<string, ReturnType<FormatFactory>>>(
+  const formatters = filteredColumns.reduce<Record<string, ReturnType<FormatFactory>>>(
     (memo, { id, meta }) => {
       memo[id] = formatFactory(meta?.params);
       return memo;
@@ -41,7 +46,7 @@ export function datatableToCSV(
 
   // Convert the array of row objects to an array of row arrays
   const csvRows = rows.map((row) => {
-    return columns.map((column) =>
+    return filteredColumns.map((column) =>
       escapeValues(raw ? row[column.id] : formatters[column.id].convert(row[column.id]))
     );
   });
diff --git a/src/plugins/data/common/exports/table_filter.ts b/src/plugins/data/common/exports/table_filter.ts
new file mode 100644
index 0000000000000..396666b9d9a76
--- /dev/null
+++ b/src/plugins/data/common/exports/table_filter.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { DatatableColumn } from 'src/plugins/expressions';
+
+export function getVisibleColumns(columns: DatatableColumn[]) {
+  const columnsHaveMetaInfo = columns.some(({ meta }) => meta.dimensionName);
+  return columnsHaveMetaInfo ? columns.filter(({ meta }) => meta?.dimensionName) : columns;
+}
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx b/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
index 4621937664479..2d06384689d6f 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
+++ b/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx
@@ -20,6 +20,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
+import { getVisibleColumns } from '../../../../common/exports/table_filter';
 import { DataViewRow, DataViewColumn } from '../types';
 import { IUiSettingsClient } from '../../../../../../core/public';
 import { Datatable, DatatableColumn } from '../../../../../expressions/public';
@@ -156,7 +157,7 @@ export class DataTableFormat extends Component<DataTableFormatProps, DataTableFo
       };
     }
 
-    const columns = data.columns.map((dataColumn: any, index: number) => {
+    const columns = getVisibleColumns(data.columns).map((dataColumn: any, index: number) => {
       const formatParams = { id: 'string', ...dataColumn.meta.params };
       const fieldFormatter = fieldFormats.deserialize(formatParams);
       const filterable = isFilterable(dataColumn);

From 5ba59ff80b4b3ec2667ebb0467ff62eb8426a0e5 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 4 Jan 2022 17:00:44 +0100
Subject: [PATCH 2/3] :white_check_mark: Add tests for it

---
 .../data/common/exports/export_csv.test.ts    |  24 +
 .../__snapshots__/data_view.test.tsx.snap     | 687 ++++++++++++++++++
 .../components/data_view.test.tsx             |  38 +
 3 files changed, 749 insertions(+)

diff --git a/src/plugins/data/common/exports/export_csv.test.ts b/src/plugins/data/common/exports/export_csv.test.ts
index f108e69c68d56..a8567ff61a0ca 100644
--- a/src/plugins/data/common/exports/export_csv.test.ts
+++ b/src/plugins/data/common/exports/export_csv.test.ts
@@ -84,4 +84,28 @@ describe('CSV exporter', () => {
       })
     ).toMatch('columnOne\r\n"\'=1"\r\n');
   });
+
+  test('should filter out columns when there are meta information', () => {
+    const datatable = getDataTable({ multipleColumns: true });
+    // Make only the first column visible
+    datatable.columns[0].meta.dimensionName = 'First column';
+    expect(
+      datatableToCSV(datatable, {
+        ...getDefaultOptions(),
+        escapeFormulaValues: true,
+        formatFactory: () => ({ convert: (v: unknown) => v } as FieldFormat),
+      })
+    ).toMatch('columnOne\r\nvalue\r\n');
+  });
+
+  test('should not filter out columns if no meta information are found', () => {
+    const datatable = getDataTable({ multipleColumns: true });
+    expect(
+      datatableToCSV(datatable, {
+        ...getDefaultOptions(),
+        escapeFormulaValues: true,
+        formatFactory: () => ({ convert: (v: unknown) => v } as FieldFormat),
+      })
+    ).toMatch('columnOne,columnTwo\r\nvalue,5\r\n');
+  });
 });
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
index 4db3f780fdebe..00b6f21dd1a84 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
+++ b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
@@ -1,5 +1,692 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Inspector Data View component should filter out hidden column if only part of the columns have meta information 1`] = `
+<Component
+  adapters={
+    Object {
+      "tables": TablesAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "_tables": Object {
+          "table1": Object {
+            "columns": Array [
+              Object {
+                "id": "1",
+                "meta": Object {
+                  "dimensionName": "accessor",
+                  "type": "number",
+                },
+                "name": "column1",
+              },
+              Object {
+                "id": "2",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column2",
+              },
+            ],
+            "rows": Array [
+              Object {
+                "1": 123,
+                "2": 5,
+              },
+            ],
+            "type": "datatable",
+          },
+        },
+        Symbol(kCapture): false,
+      },
+    }
+  }
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {
+        "date": Object {
+          "full": Object {
+            "day": "numeric",
+            "month": "long",
+            "weekday": "long",
+            "year": "numeric",
+          },
+          "long": Object {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric",
+          },
+          "medium": Object {
+            "day": "numeric",
+            "month": "short",
+            "year": "numeric",
+          },
+          "short": Object {
+            "day": "numeric",
+            "month": "numeric",
+            "year": "2-digit",
+          },
+        },
+        "number": Object {
+          "currency": Object {
+            "style": "currency",
+          },
+          "percent": Object {
+            "style": "percent",
+          },
+        },
+        "relative": Object {
+          "days": Object {
+            "units": "day",
+          },
+          "hours": Object {
+            "units": "hour",
+          },
+          "minutes": Object {
+            "units": "minute",
+          },
+          "months": Object {
+            "units": "month",
+          },
+          "seconds": Object {
+            "units": "second",
+          },
+          "years": Object {
+            "units": "year",
+          },
+        },
+        "time": Object {
+          "full": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "long": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "medium": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+          },
+          "short": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+          },
+        },
+      },
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": null,
+    }
+  }
+  title="Test Data"
+>
+  <DataViewComponent
+    adapters={
+      Object {
+        "tables": TablesAdapter {
+          "_events": Object {
+            "change": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "_tables": Object {
+            "table1": Object {
+              "columns": Array [
+                Object {
+                  "id": "1",
+                  "meta": Object {
+                    "dimensionName": "accessor",
+                    "type": "number",
+                  },
+                  "name": "column1",
+                },
+                Object {
+                  "id": "2",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column2",
+                },
+              ],
+              "rows": Array [
+                Object {
+                  "1": 123,
+                  "2": 5,
+                },
+              ],
+              "type": "datatable",
+            },
+          },
+          Symbol(kCapture): false,
+        },
+      }
+    }
+    fieldFormats={
+      Object {
+        "deserialize": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+          ],
+        },
+      }
+    }
+    isFilterable={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "id": "1",
+              "meta": Object {
+                "dimensionName": "accessor",
+                "type": "number",
+              },
+              "name": "column1",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    title="Test Data"
+    uiActions={Object {}}
+    uiSettings={
+      Object {
+        "get": [Function],
+      }
+    }
+  >
+    <EuiEmptyPrompt
+      body={
+        <React.Fragment>
+          <p>
+            <FormattedMessage
+              defaultMessage="The element did not provide any data."
+              id="data.inspector.table.noDataAvailableDescription"
+              values={Object {}}
+            />
+          </p>
+        </React.Fragment>
+      }
+      title={
+        <h2>
+          <FormattedMessage
+            defaultMessage="No data available"
+            id="data.inspector.table.noDataAvailableTitle"
+            values={Object {}}
+          />
+        </h2>
+      }
+    >
+      <EuiPanel
+        className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        color="transparent"
+        paddingSize="none"
+      >
+        <div
+          className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        >
+          <div
+            className="euiEmptyPrompt__main"
+          >
+            <div
+              className="euiEmptyPrompt__content"
+            >
+              <div
+                className="euiEmptyPrompt__contentInner"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    <FormattedMessage
+                      defaultMessage="No data available"
+                      id="data.inspector.table.noDataAvailableTitle"
+                      values={Object {}}
+                    >
+                      No data available
+                    </FormattedMessage>
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="The element did not provide any data."
+                            id="data.inspector.table.noDataAvailableDescription"
+                            values={Object {}}
+                          >
+                            The element did not provide any data.
+                          </FormattedMessage>
+                        </p>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </div>
+          </div>
+        </div>
+      </EuiPanel>
+    </EuiEmptyPrompt>
+  </DataViewComponent>
+</Component>
+`;
+
+exports[`Inspector Data View component should render all column if no column has meta information 1`] = `
+<Component
+  adapters={
+    Object {
+      "tables": TablesAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "_tables": Object {
+          "table1": Object {
+            "columns": Array [
+              Object {
+                "id": "1",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column1",
+              },
+              Object {
+                "id": "2",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column2",
+              },
+            ],
+            "rows": Array [
+              Object {
+                "1": 123,
+                "2": 5,
+              },
+            ],
+            "type": "datatable",
+          },
+        },
+        Symbol(kCapture): false,
+      },
+    }
+  }
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {
+        "date": Object {
+          "full": Object {
+            "day": "numeric",
+            "month": "long",
+            "weekday": "long",
+            "year": "numeric",
+          },
+          "long": Object {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric",
+          },
+          "medium": Object {
+            "day": "numeric",
+            "month": "short",
+            "year": "numeric",
+          },
+          "short": Object {
+            "day": "numeric",
+            "month": "numeric",
+            "year": "2-digit",
+          },
+        },
+        "number": Object {
+          "currency": Object {
+            "style": "currency",
+          },
+          "percent": Object {
+            "style": "percent",
+          },
+        },
+        "relative": Object {
+          "days": Object {
+            "units": "day",
+          },
+          "hours": Object {
+            "units": "hour",
+          },
+          "minutes": Object {
+            "units": "minute",
+          },
+          "months": Object {
+            "units": "month",
+          },
+          "seconds": Object {
+            "units": "second",
+          },
+          "years": Object {
+            "units": "year",
+          },
+        },
+        "time": Object {
+          "full": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "long": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "medium": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+          },
+          "short": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+          },
+        },
+      },
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": null,
+    }
+  }
+  title="Test Data"
+>
+  <DataViewComponent
+    adapters={
+      Object {
+        "tables": TablesAdapter {
+          "_events": Object {
+            "change": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "_tables": Object {
+            "table1": Object {
+              "columns": Array [
+                Object {
+                  "id": "1",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column1",
+                },
+                Object {
+                  "id": "2",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column2",
+                },
+              ],
+              "rows": Array [
+                Object {
+                  "1": 123,
+                  "2": 5,
+                },
+              ],
+              "type": "datatable",
+            },
+          },
+          Symbol(kCapture): false,
+        },
+      }
+    }
+    fieldFormats={
+      Object {
+        "deserialize": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+          ],
+        },
+      }
+    }
+    isFilterable={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "id": "1",
+              "meta": Object {
+                "type": "number",
+              },
+              "name": "column1",
+            },
+          ],
+          Array [
+            Object {
+              "id": "2",
+              "meta": Object {
+                "type": "number",
+              },
+              "name": "column2",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    title="Test Data"
+    uiActions={Object {}}
+    uiSettings={
+      Object {
+        "get": [Function],
+      }
+    }
+  >
+    <EuiEmptyPrompt
+      body={
+        <React.Fragment>
+          <p>
+            <FormattedMessage
+              defaultMessage="The element did not provide any data."
+              id="data.inspector.table.noDataAvailableDescription"
+              values={Object {}}
+            />
+          </p>
+        </React.Fragment>
+      }
+      title={
+        <h2>
+          <FormattedMessage
+            defaultMessage="No data available"
+            id="data.inspector.table.noDataAvailableTitle"
+            values={Object {}}
+          />
+        </h2>
+      }
+    >
+      <EuiPanel
+        className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        color="transparent"
+        paddingSize="none"
+      >
+        <div
+          className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        >
+          <div
+            className="euiEmptyPrompt__main"
+          >
+            <div
+              className="euiEmptyPrompt__content"
+            >
+              <div
+                className="euiEmptyPrompt__contentInner"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    <FormattedMessage
+                      defaultMessage="No data available"
+                      id="data.inspector.table.noDataAvailableTitle"
+                      values={Object {}}
+                    >
+                      No data available
+                    </FormattedMessage>
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="The element did not provide any data."
+                            id="data.inspector.table.noDataAvailableDescription"
+                            values={Object {}}
+                          >
+                            The element did not provide any data.
+                          </FormattedMessage>
+                        </p>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </div>
+          </div>
+        </div>
+      </EuiPanel>
+    </EuiEmptyPrompt>
+  </DataViewComponent>
+</Component>
+`;
+
 exports[`Inspector Data View component should render empty state 1`] = `
 <Component
   adapters={
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx b/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
index e6b40bcb5936c..759c3ecd1552e 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
+++ b/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
@@ -106,5 +106,43 @@ describe('Inspector Data View', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    it('should filter out hidden column if only part of the columns have meta information', () => {
+      const multitableAdapter = { tables: new TablesAdapter() };
+
+      const component = mountWithIntl(
+        // eslint-disable-next-line react/jsx-pascal-case
+        <DataView.component title="Test Data" adapters={multitableAdapter} />
+      );
+      multitableAdapter.tables.logDatatable('table1', {
+        columns: [
+          { id: '1', name: 'column1', meta: { type: 'number', dimensionName: 'accessor' } },
+          { id: '2', name: 'column2', meta: { type: 'number' } },
+        ],
+        rows: [{ '1': 123, '2': 5 }],
+        type: 'datatable',
+      });
+
+      expect(component).toMatchSnapshot();
+    });
+
+    it('should render all column if no column has meta information', () => {
+      const multitableAdapter = { tables: new TablesAdapter() };
+
+      const component = mountWithIntl(
+        // eslint-disable-next-line react/jsx-pascal-case
+        <DataView.component title="Test Data" adapters={multitableAdapter} />
+      );
+      multitableAdapter.tables.logDatatable('table1', {
+        columns: [
+          { id: '1', name: 'column1', meta: { type: 'number' } },
+          { id: '2', name: 'column2', meta: { type: 'number' } },
+        ],
+        rows: [{ '1': 123, '2': 5 }],
+        type: 'datatable',
+      });
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });

From 49f95988654591d483cf53c43b676c3ebe84054b Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 4 Jan 2022 18:16:00 +0100
Subject: [PATCH 3/3] :bug: fix bug for coloumns without meta

---
 src/plugins/data/common/exports/table_filter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/data/common/exports/table_filter.ts b/src/plugins/data/common/exports/table_filter.ts
index 396666b9d9a76..da7b0b62e06cb 100644
--- a/src/plugins/data/common/exports/table_filter.ts
+++ b/src/plugins/data/common/exports/table_filter.ts
@@ -9,6 +9,6 @@
 import { DatatableColumn } from 'src/plugins/expressions';
 
 export function getVisibleColumns(columns: DatatableColumn[]) {
-  const columnsHaveMetaInfo = columns.some(({ meta }) => meta.dimensionName);
+  const columnsHaveMetaInfo = columns.some(({ meta }) => meta?.dimensionName);
   return columnsHaveMetaInfo ? columns.filter(({ meta }) => meta?.dimensionName) : columns;
 }