From 4ebca5f6adb8ebac697ff72a9599d399e25a490e Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Wed, 3 Feb 2021 14:19:39 +0100 Subject: [PATCH] move hidden flag to dimension editor --- .../components/dimension_editor.tsx | 57 +++++++++++++++ .../components/toolbar.tsx | 69 ------------------- .../datatable_visualization/visualization.tsx | 8 ++- x-pack/test/functional/apps/lens/table.ts | 4 +- .../test/functional/page_objects/lens_page.ts | 9 ++- 5 files changed, 68 insertions(+), 79 deletions(-) create mode 100644 x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx delete mode 100644 x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx new file mode 100644 index 00000000000000..c881688ddcc25c --- /dev/null +++ b/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 +) { + const { state, setState, accessor } = props; + const column = state.columns.find((c) => c.columnId === accessor); + + if (!column) { + return null; + } + + return ( + + ); +} diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx deleted file mode 100644 index d7d776c6ea132a..00000000000000 --- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * 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 { EuiFlexItem, EuiFlexGroup, EuiSwitch } from '@elastic/eui'; -import { VisualizationToolbarProps } from '../../types'; -import { ToolbarPopover } from '../../shared_components'; -import { DatatableVisualizationState, ColumnState } from '../visualization'; - -export function TableToolbar(props: VisualizationToolbarProps) { - const { state, setState, frame } = props; - const columnMap: Record = {}; - state.columns.forEach((column) => { - columnMap[column.columnId] = column; - }); - const datasourceLayer = frame.datasourceLayers[state.layerId]; - return ( - - - - {datasourceLayer.getTableSpec().map(({ columnId }) => { - const label = datasourceLayer.getOperationForColumnId(columnId)?.label; - const isHidden = columnMap[columnId].hidden; - return ( - - { - e.preventDefault(); - e.stopPropagation(); - const newState = { - ...state, - columns: state.columns.map((currentColumn) => { - if (currentColumn.columnId === columnId) { - return { - ...currentColumn, - hidden: !isHidden, - }; - } else { - return currentColumn; - } - }), - }; - setState(newState); - }} - /> - - ); - })} - - - - ); -} diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index a81d298aadd850..149d517febae7e 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/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 supportsMoreColumns: true, filterOperations: (op) => op.isBucketed, dataTestSubj: 'lnsDatatable_column', + enableDimensionEditor: true, }, { groupId: 'metrics', @@ -179,6 +180,7 @@ export const datatableVisualization: Visualization filterOperations: (op) => !op.isBucketed, required: true, dataTestSubj: 'lnsDatatable_metrics', + enableDimensionEditor: true, }, ], }; @@ -200,10 +202,10 @@ export const datatableVisualization: Visualization sorting: prevState.sorting?.columnId === columnId ? undefined : prevState.sorting, }; }, - renderToolbar(domElement, props) { + renderDimensionEditor(domElement, props) { render( - + , domElement ); diff --git a/x-pack/test/functional/apps/lens/table.ts b/x-pack/test/functional/apps/lens/table.ts index 84f19c5b0e3f18..7cce25c51c8fb1 100644 --- a/x-pack/test/functional/apps/lens/table.ts +++ b/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'); diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index ff97bac36b1c20..94b9afaadad157 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/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(); },