move hidden flag to dimension editor

x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiSwitch, EuiFormRow } from '@elastic/eui';
+import { VisualizationDimensionEditorProps } from '../../types';
+import { DatatableVisualizationState } from '../visualization';
+
+export function TableDimensionEditor(
+  props: VisualizationDimensionEditorProps<DatatableVisualizationState>
+) {
+  const { state, setState, accessor } = props;
+  const column = state.columns.find((c) => c.columnId === accessor);
+
+  if (!column) {
+    return null;
+  }
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
+        defaultMessage: 'Column hidden in table',
+      })}
+      display="columnCompressedSwitch"
+    >
+      <EuiSwitch
+        compressed
+        label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
+          defaultMessage: 'Column hidden',
+        })}
+        showLabel={false}
+        data-test-subj="lns-table-column-hidden"
+        checked={Boolean(column?.hidden)}
+        onChange={() => {
+          const newState = {
+            ...state,
+            columns: state.columns.map((currentColumn) => {
+              if (currentColumn.columnId === accessor) {
+                return {
+                  ...currentColumn,
+                  hidden: !column.hidden,
+                };
+              } else {
+                return currentColumn;
+              }
+            }),
+          };
+          setState(newState);
+        }}
+      />
+    </EuiFormRow>
+  );
+}

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

@@ -16,7 +16,7 @@ import type {
   DatasourcePublicAPI,
 } from '../types';
 import { LensIconChartDatatable } from '../assets/chart_datatable';
-import { TableToolbar } from './components/toolbar';
+import { TableDimensionEditor } from './components/dimension_editor';
 
 export interface ColumnState {
   columnId: string;
@@ -165,6 +165,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           supportsMoreColumns: true,
           filterOperations: (op) => op.isBucketed,
           dataTestSubj: 'lnsDatatable_column',
+          enableDimensionEditor: true,
         },
         {
           groupId: 'metrics',
@@ -179,6 +180,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           filterOperations: (op) => !op.isBucketed,
           required: true,
           dataTestSubj: 'lnsDatatable_metrics',
+          enableDimensionEditor: true,
         },
       ],
     };
@@ -200,10 +202,10 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
       sorting: prevState.sorting?.columnId === columnId ? undefined : prevState.sorting,
     };
   },
-  renderToolbar(domElement, props) {
+  renderDimensionEditor(domElement, props) {
     render(
       <I18nProvider>
-        <TableToolbar {...props} />
+        <TableDimensionEditor {...props} />
       </I18nProvider>,
       domElement
     );

x-pack/test/functional/apps/lens/table.ts

@@ -53,12 +53,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('@timestamp per 3 hours');
       expect(await PageObjects.lens.getDatatableHeaderText(2)).to.equal('Average of bytes');
 
-      await PageObjects.lens.toggleColumnVisibility('Top values of ip');
+      await PageObjects.lens.toggleColumnVisibility('lnsDatatable_column > lns-dimensionTrigger');
 
       expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal('@timestamp per 3 hours');
       expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('Average of bytes');
 
-      await PageObjects.lens.toggleColumnVisibility('Top values of ip');
+      await PageObjects.lens.toggleColumnVisibility('lnsDatatable_column > lns-dimensionTrigger');
 
       expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal('Top values of ip');
       expect(await PageObjects.lens.getDatatableHeaderText(1)).to.equal('@timestamp per 3 hours');

x-pack/test/functional/page_objects/lens_page.ts

@@ -561,13 +561,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       return buttonEl.click();
     },
 
-    async toggleColumnVisibility(label: string) {
-      const id = `lnsColumns-toggle-${label.replace(/ /g, '-')}`;
-      await testSubjects.click('lnsColumnsButton');
-      await testSubjects.existOrFail(id);
+    async toggleColumnVisibility(dimension: string) {
+      await this.openDimensionEditor(dimension);
+      const id = 'lns-table-column-hidden';
       const isChecked = await testSubjects.isEuiSwitchChecked(id);
       await testSubjects.setEuiSwitch(id, isChecked ? 'uncheck' : 'check');
-      await testSubjects.click('lnsColumnsButton');
+      await this.closeDimensionEditor();
       await PageObjects.header.waitUntilLoadingHasFinished();
     },