Datatable Embeddable Supports Ephemeral Sort

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

@@ -215,20 +215,16 @@ export const createGridColumns = (
         showHide: false,
         showMoveLeft: false,
         showMoveRight: false,
-        showSortAsc: isReadOnly
-          ? false
-          : {
-              label: i18n.translate('xpack.lens.table.sort.ascLabel', {
-                defaultMessage: 'Sort ascending',
-              }),
-            },
-        showSortDesc: isReadOnly
-          ? false
-          : {
-              label: i18n.translate('xpack.lens.table.sort.descLabel', {
-                defaultMessage: 'Sort descending',
-              }),
-            },
+        showSortAsc: {
+          label: i18n.translate('xpack.lens.table.sort.ascLabel', {
+            defaultMessage: 'Sort ascending',
+          }),
+        },
+        showSortDesc: {
+          label: i18n.translate('xpack.lens.table.sort.descLabel', {
+            defaultMessage: 'Sort descending',
+          }),
+        },
         additional: additionalActions,
       },
     };

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx

@@ -139,7 +139,7 @@ describe('DatatableComponent', () => {
     ).toMatchSnapshot();
   });
 
-  test('it should render hide and reset actions on header even when it is in read only mode', () => {
+  test('it should render hide, reset, and sort actions on header even when it is in read only mode', () => {
     const { data, args } = sampleArgs();
 
     expect(

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

@@ -103,11 +103,9 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
 
   const onEditAction = useCallback(
     (data: LensSortAction['data'] | LensResizeAction['data'] | LensToggleAction['data']) => {
-      if (renderMode === 'edit') {
-        dispatchEvent({ name: 'edit', data });
-      }
+      dispatchEvent({ name: 'edit', data });
     },
-    [dispatchEvent, renderMode]
+    [dispatchEvent]
   );
   const onRowContextMenuClick = useCallback(
     (data: LensTableRowContextMenuEvent['data']) => {

x-pack/plugins/lens/public/editor_frame_service/service.tsx

@@ -61,16 +61,19 @@ export class EditorFrameService {
   private readonly datasources: Array<Datasource | (() => Promise<Datasource>)> = [];
   private readonly visualizations: Array<Visualization | (() => Promise<Visualization>)> = [];
 
+  private loadDatasources = () => collectAsyncDefinitions(this.datasources);
+  public loadVisualizations = () => collectAsyncDefinitions(this.visualizations);
+
   /**
    * This method takes a Lens saved object as returned from the persistence helper,
    * initializes datsources and visualization and creates the current expression.
-   * This is an asynchronous process and should only be triggered once for a saved object.
+   * This is an asynchronous process.
    * @param doc parsed Lens saved object
    */
   public documentToExpression = async (doc: Document) => {
     const [resolvedDatasources, resolvedVisualizations] = await Promise.all([
-      collectAsyncDefinitions(this.datasources),
-      collectAsyncDefinitions(this.visualizations),
+      this.loadDatasources(),
+      this.loadVisualizations(),
     ]);
 
     const { persistedStateToExpression } = await import('../async_services');
@@ -92,8 +95,8 @@ export class EditorFrameService {
   public start(core: CoreStart, plugins: EditorFrameStartPlugins): EditorFrameStart {
     const createInstance = async (): Promise<EditorFrameInstance> => {
       const [resolvedDatasources, resolvedVisualizations] = await Promise.all([
-        collectAsyncDefinitions(this.datasources),
-        collectAsyncDefinitions(this.visualizations),
+        this.loadDatasources(),
+        this.loadVisualizations(),
       ]);
 
       const { EditorFrame } = await import('../async_services');

x-pack/plugins/lens/public/embeddable/embeddable.test.tsx

@@ -25,6 +25,7 @@ import { LensAttributeService } from '../lens_attribute_service';
 import { OnSaveProps } from '../../../../../src/plugins/saved_objects/public/save_modal';
 import { act } from 'react-dom/test-utils';
 import { inspectorPluginMock } from '../../../../../src/plugins/inspector/public/mocks';
+import { Visualization } from '../types';
 
 jest.mock('../../../../../src/plugins/inspector/public/', () => ({
   isAvailable: false,
@@ -125,6 +126,7 @@ describe('embeddable', () => {
         },
         inspector: inspectorPluginMock.createStartContract(),
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -165,6 +167,7 @@ describe('embeddable', () => {
         inspector: inspectorPluginMock.createStartContract(),
         capabilities: { canSaveDashboards: true, canSaveVisualizations: true },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -209,6 +212,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -255,6 +259,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -297,6 +302,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -336,6 +342,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -378,6 +385,7 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         capabilities: { canSaveDashboards: true, canSaveVisualizations: true },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -427,6 +435,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -474,6 +483,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -528,6 +538,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -583,6 +594,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -641,6 +653,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -683,6 +696,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -725,6 +739,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -767,6 +782,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -824,6 +840,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -897,6 +914,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -945,6 +963,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -993,6 +1012,7 @@ describe('embeddable', () => {
           canSaveVisualizations: true,
         },
         getTrigger,
+        visualizationMap: {},
         documentToExpression: () =>
           Promise.resolve({
             ast: {
@@ -1016,4 +1036,82 @@ describe('embeddable', () => {
     expect(onTableRowClick).toHaveBeenCalledWith({ name: 'test' });
     expect(onTableRowClick).toHaveBeenCalledTimes(1);
   });
+
+  it('handles edit actions ', async () => {
+    const editedVisualizationState = { value: 'edited' };
+    const onEditActionMock = jest.fn().mockReturnValue(editedVisualizationState);
+    const documentToExpressionMock = jest.fn().mockImplementation(async (document) => {
+      const isStateEdited = document.state.visualization.value === 'edited';
+      return {
+        ast: {
+          type: 'expression',
+          chain: [
+            {
+              type: 'function',
+              function: isStateEdited ? 'edited' : 'not_edited',
+              arguments: {},
+            },
+          ],
+        },
+        errors: undefined,
+      };
+    });
+
+    const visDocument: Document = {
+      state: {
+        visualization: {},
+        datasourceStates: {},
+        query: { query: '', language: 'lucene' },
+        filters: [],
+      },
+      references: [],
+      title: 'My title',
+      visualizationType: 'lensDatatable',
+    };
+
+    const embeddable = new Embeddable(
+      {
+        timefilter: dataPluginMock.createSetupContract().query.timefilter.timefilter,
+        attributeService: attributeServiceMockFromSavedVis(visDocument),
+        expressionRenderer,
+        basePath,
+        inspector: inspectorPluginMock.createStartContract(),
+        indexPatternService: {} as IndexPatternsContract,
+        capabilities: {
+          canSaveDashboards: true,
+          canSaveVisualizations: true,
+        },
+        getTrigger,
+        visualizationMap: {
+          [visDocument.visualizationType as string]: {
+            onEditAction: onEditActionMock,
+          } as unknown as Visualization,
+        },
+        documentToExpression: documentToExpressionMock,
+      },
+      { id: '123' } as unknown as LensEmbeddableInput
+    );
+
+    // SETUP FRESH STATE
+    await embeddable.initializeSavedVis({ id: '123' } as LensEmbeddableInput);
+    embeddable.render(mountpoint);
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(expressionRenderer).toHaveBeenCalledTimes(1);
+    expect(expressionRenderer.mock.calls[0][0]!.expression).toBe(`not_edited`);
+
+    // TEST EDIT EVENT
+    await embeddable.handleEvent({ name: 'edit' });
+
+    expect(onEditActionMock).toHaveBeenCalledTimes(1);
+    expect(documentToExpressionMock).toHaveBeenCalled();
+
+    const docToExpCalls = documentToExpressionMock.mock.calls;
+    const editedVisDocument = docToExpCalls[docToExpCalls.length - 1][0];
+    expect(editedVisDocument.state.visualization).toEqual(editedVisualizationState);
+
+    expect(expressionRenderer).toHaveBeenCalledTimes(2);
+    expect(expressionRenderer.mock.calls[1][0]!.expression).toBe(`edited`);
+  });
 });