[Lens] Add clear layer feature (#53627)

* [Lens] Add clear layer feature * Move clear / remove layer out of the context menu * Address code review comments * Remove xpack.lens.xyChart.deleteLayer translation * Get rid of unused Lens translations Co-authored-by: Elastic Machine <[email protected]>
elastic · Jan 14, 2020 · 8c0440f · 8c0440f
1 parent 8c878bc
commit 8c0440f
Show file tree

Hide file tree

Showing 27 changed files with 1,018 additions and 639 deletions.
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx
@@ -72,6 +72,42 @@ describe('Datatable Visualization', () => {
     });
   });
 
+  describe('#getLayerIds', () => {
+    it('return the layer ids', () => {
+      const state: DatatableVisualizationState = {
+        layers: [
+          {
+            layerId: 'baz',
+            columns: ['a', 'b', 'c'],
+          },
+        ],
+      };
+      expect(datatableVisualization.getLayerIds(state)).toEqual(['baz']);
+    });
+  });
+
+  describe('#clearLayer', () => {
+    it('should reset the layer', () => {
+      (generateId as jest.Mock).mockReturnValueOnce('testid');
+      const state: DatatableVisualizationState = {
+        layers: [
+          {
+            layerId: 'baz',
+            columns: ['a', 'b', 'c'],
+          },
+        ],
+      };
+      expect(datatableVisualization.clearLayer(state, 'baz')).toMatchObject({
+        layers: [
+          {
+            layerId: 'baz',
+            columns: ['testid'],
+          },
+        ],
+      });
+    });
+  });
+
   describe('#getSuggestions', () => {
     function numCol(columnId: string): TableSuggestionColumn {
       return {
@@ -188,6 +224,7 @@ describe('Datatable Visualization', () => {
 
       mount(
         <DataTableLayer
+          layerId="layer1"
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
           frame={frame}
           layer={layer}
@@ -224,6 +261,7 @@ describe('Datatable Visualization', () => {
       frame.datasourceLayers = { a: datasource.publicAPIMock };
       const component = mount(
         <DataTableLayer
+          layerId="layer1"
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
           frame={frame}
           layer={layer}
@@ -258,6 +296,7 @@ describe('Datatable Visualization', () => {
       frame.datasourceLayers = { a: datasource.publicAPIMock };
       const component = mount(
         <DataTableLayer
+          layerId="layer1"
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
           frame={frame}
           layer={layer}
@@ -290,6 +329,7 @@ describe('Datatable Visualization', () => {
       frame.datasourceLayers = { a: datasource.publicAPIMock };
       const component = mount(
         <DataTableLayer
+          layerId="layer1"
           dragDropContext={{ dragging: undefined, setDragging: () => {} }}
           frame={frame}
           layer={layer}

diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx
@@ -6,19 +6,18 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import { EuiForm, EuiFormRow, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
 import { MultiColumnEditor } from '../multi_column_editor';
 import {
   SuggestionRequest,
   Visualization,
-  VisualizationProps,
+  VisualizationLayerConfigProps,
   VisualizationSuggestion,
   Operation,
 } from '../types';
 import { generateId } from '../id_generator';
-import { NativeRenderer } from '../native_renderer';
 import chartTableSVG from '../assets/chart_datatable.svg';
 
 export interface LayerState {
@@ -56,40 +55,32 @@ export function DataTableLayer({
   state,
   setState,
   dragDropContext,
-}: { layer: LayerState } & VisualizationProps<DatatableVisualizationState>) {
+}: { layer: LayerState } & VisualizationLayerConfigProps<DatatableVisualizationState>) {
   const datasource = frame.datasourceLayers[layer.layerId];
 
   const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
   // When we add a column it could be empty, and therefore have no order
   const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
 
   return (
-    <EuiPanel className="lnsConfigPanel__panel" paddingSize="s">
-      <NativeRenderer
-        render={datasource.renderLayerPanel}
-        nativeProps={{ layerId: layer.layerId }}
+    <EuiFormRow
+      className="lnsConfigPanel__axis"
+      label={i18n.translate('xpack.lens.datatable.columns', { defaultMessage: 'Columns' })}
+    >
+      <MultiColumnEditor
+        accessors={sortedColumns}
+        datasource={datasource}
+        dragDropContext={dragDropContext}
+        filterOperations={allOperations}
+        layerId={layer.layerId}
+        onAdd={() => setState(updateColumns(state, layer, columns => [...columns, generateId()]))}
+        onRemove={column =>
+          setState(updateColumns(state, layer, columns => columns.filter(c => c !== column)))
+        }
+        testSubj="datatable_columns"
+        data-test-subj="datatable_multicolumnEditor"
       />
-
-      <EuiSpacer size="s" />
-      <EuiFormRow
-        className="lnsConfigPanel__axis"
-        label={i18n.translate('xpack.lens.datatable.columns', { defaultMessage: 'Columns' })}
-      >
-        <MultiColumnEditor
-          accessors={sortedColumns}
-          datasource={datasource}
-          dragDropContext={dragDropContext}
-          filterOperations={allOperations}
-          layerId={layer.layerId}
-          onAdd={() => setState(updateColumns(state, layer, columns => [...columns, generateId()]))}
-          onRemove={column =>
-            setState(updateColumns(state, layer, columns => columns.filter(c => c !== column)))
-          }
-          testSubj="datatable_columns"
-          data-test-subj="datatable_multicolumnEditor"
-        />
-      </EuiFormRow>
-    </EuiPanel>
+    </EuiFormRow>
   );
 }
 
@@ -110,7 +101,17 @@ export const datatableVisualization: Visualization<
     },
   ],
 
-  getDescription(state) {
+  getLayerIds(state) {
+    return state.layers.map(l => l.layerId);
+  },
+
+  clearLayer(state) {
+    return {
+      layers: state.layers.map(l => newLayerState(l.layerId)),
+    };
+  },
+
+  getDescription() {
     return {
       icon: chartTableSVG,
       label: i18n.translate('xpack.lens.datatable.label', {
@@ -187,17 +188,18 @@ export const datatableVisualization: Visualization<
     ];
   },
 
-  renderConfigPanel: (domElement, props) =>
-    render(
-      <I18nProvider>
-        <EuiForm className="lnsConfigPanel">
-          {props.state.layers.map(layer => (
-            <DataTableLayer key={layer.layerId} layer={layer} {...props} />
-          ))}
-        </EuiForm>
-      </I18nProvider>,
-      domElement
-    ),
+  renderLayerConfigPanel(domElement, props) {
+    const layer = props.state.layers.find(l => l.layerId === props.layerId);
+
+    if (layer) {
+      render(
+        <I18nProvider>
+          <DataTableLayer {...props} layer={layer} />
+        </I18nProvider>,
+        domElement
+      );
+    }
+  },
 
   toExpression(state, frame) {
     const layer = state.layers[0];

diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
@@ -81,7 +81,6 @@ export function ChartSwitch(props: Props) {
     trackUiEvent(`chart_switch`);
 
     switchToSuggestion(
-      props.framePublicAPI,
       props.dispatch,
       {
         ...selection,