[Lens] Basic save / load

x-pack/legacy/plugins/lens/index.ts

@@ -8,6 +8,7 @@ import * as Joi from 'joi';
 import { Server } from 'hapi';
 import { resolve } from 'path';
 import { LegacyPluginInitializer } from 'src/legacy/types';
+import mappings from './mappings.json';
 
 import { PLUGIN_ID } from './common';
 
@@ -27,7 +28,22 @@ export const lens: LegacyPluginInitializer = kibana => {
         main: `plugins/${PLUGIN_ID}/index`,
       },
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
-    },
+      mappings,
+      savedObjectsManagement: {
+        lens: {
+          defaultSearchField: 'title',
+          isImportableAndExportable: true,
+          getTitle: (obj: { attributes: { title: string } }) => obj.attributes.title,
+          getInAppUrl: (obj: { id: string }) => ({
+            path: `/app/lens#/edit/${encodeURIComponent(obj.id)}`,
+            uiCapabilitiesPath: 'lens.show',
+          }),
+        },
+      },
+      // TODO: savedObjectsManagement is not in the uiExports type definition,
+      // so, we have to either fix the type signature and deal with merge
+      // conflicts, or simply cas to any here, and fix this later.
+    } as any,
 
     config: () => {
       return Joi.object({

x-pack/legacy/plugins/lens/mappings.json

@@ -0,0 +1,18 @@
+{
+  "lens": {
+    "properties": {
+      "title": {
+        "type": "text"
+      },
+      "visualizationType": {
+        "type": "keyword"
+      },
+      "datasourceType": {
+        "type": "keyword"
+      },
+      "state": {
+        "type": "text"
+      }
+    }
+  }
+}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -42,6 +42,14 @@ describe('editor_frame', () => {
 
   let expressionRendererMock: ExpressionRenderer;
 
+  const defaultProps = {
+    store: {
+      save: jest.fn(),
+      load: jest.fn(),
+    },
+    redirectTo: jest.fn(),
+  };
+
   beforeEach(() => {
     mockVisualization = createMockVisualization();
     mockVisualization2 = createMockVisualization();
@@ -57,6 +65,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -77,6 +86,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -98,6 +108,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -119,6 +130,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -143,6 +155,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -170,6 +183,7 @@ describe('editor_frame', () => {
       act(() => {
         mount(
           <EditorFrame
+            {...defaultProps}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -203,6 +217,7 @@ describe('editor_frame', () => {
 
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: { ...mockVisualization, initialize: () => initialState },
           }}
@@ -229,6 +244,7 @@ describe('editor_frame', () => {
     it('should render the resulting expression using the expression renderer', async () => {
       const instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: { ...mockVisualization, toExpression: () => 'vis' },
           }}
@@ -272,6 +288,7 @@ Object {
     it('should re-render config panel after state update', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -305,6 +322,7 @@ Object {
     it('should re-render data panel after state update', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -338,6 +356,7 @@ Object {
     it('should re-render config panel with updated datasource api after datasource state update', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -377,6 +396,7 @@ Object {
     it('should pass the datasource api to the visualization', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -403,6 +423,7 @@ Object {
 
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -426,6 +447,7 @@ Object {
     it('should re-create the public api after state has been set', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -459,6 +481,7 @@ Object {
     beforeEach(async () => {
       instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
             testVis2: mockVisualization2,
@@ -541,6 +564,7 @@ Object {
     it('should fetch suggestions of currently active datasource', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
           }}
@@ -563,6 +587,7 @@ Object {
     it('should fetch suggestions of all visualizations', async () => {
       mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: mockVisualization,
             testVis2: mockVisualization2,
@@ -586,6 +611,7 @@ Object {
     it('should display suggestions in descending order', async () => {
       const instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: {
               ...mockVisualization,
@@ -652,6 +678,7 @@ Object {
       const suggestionVisState = {};
       const instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: {
               ...mockVisualization,
@@ -706,6 +733,7 @@ Object {
       const suggestionVisState = {};
       const instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: {
               ...mockVisualization,
@@ -760,6 +788,7 @@ Object {
       const suggestionVisState = {};
       const instance = mount(
         <EditorFrame
+          {...defaultProps}
           visualizationMap={{
             testVis: {
               ...mockVisualization,

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx

@@ -5,6 +5,8 @@
  */
 
 import React, { useEffect, useReducer, useMemo } from 'react';
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/data/public';
 import { Datasource, Visualization } from '../../types';
 import { reducer, getInitialState } from './state_management';
@@ -13,14 +15,18 @@ import { ConfigPanelWrapper } from './config_panel_wrapper';
 import { FrameLayout } from './frame_layout';
 import { SuggestionPanel } from './suggestion_panel';
 import { WorkspacePanel } from './workspace_panel';
+import { SavedObjectStore, Document } from '../../persistence/saved_object_store';
+import { save } from './save';
+import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
 
 export interface EditorFrameProps {
+  doc?: Document;
+  store: SavedObjectStore;
   datasourceMap: Record<string, Datasource>;
   visualizationMap: Record<string, Visualization>;
-
+  redirectTo: (path: string) => void;
   initialDatasourceId: string | null;
   initialVisualizationId: string | null;
-
   ExpressionRenderer: ExpressionRenderer;
 }
 
@@ -50,26 +56,46 @@ export function EditorFrame(props: EditorFrameProps) {
     ]
   );
 
+  useEffect(
+    () => {
+      if (props.doc) {
+        dispatch({
+          type: 'VISUALIZATION_LOADED',
+          doc: props.doc,
+        });
+      } else {
+        dispatch({
+          type: 'RESET',
+          state: getInitialState(props),
+        });
+      }
+    },
+    [props.doc]
+  );
+
   // Initialize current datasource
   useEffect(
     () => {
       let datasourceGotSwitched = false;
       if (state.datasource.isLoading && state.datasource.activeId) {
-        props.datasourceMap[state.datasource.activeId].initialize().then(datasourceState => {
-          if (!datasourceGotSwitched) {
-            dispatch({
-              type: 'UPDATE_DATASOURCE_STATE',
-              newState: datasourceState,
-            });
-          }
-        });
+        // TODO: .catch / error handling
+        props.datasourceMap[state.datasource.activeId]
+          .initialize(props.doc && props.doc.state.datasource)
+          .then(datasourceState => {
+            if (!datasourceGotSwitched) {
+              dispatch({
+                type: 'UPDATE_DATASOURCE_STATE',
+                newState: datasourceState,
+              });
+            }
+          });
 
         return () => {
           datasourceGotSwitched = true;
         };
       }
     },
-    [state.datasource.activeId, state.datasource.isLoading]
+    [props.doc, state.datasource.activeId, state.datasource.isLoading]
   );
 
   // Initialize visualization as soon as datasource is ready
@@ -92,9 +118,40 @@ export function EditorFrame(props: EditorFrameProps) {
     [datasourcePublicAPI, state.visualization.activeId, state.visualization.state]
   );
 
-  if (state.datasource.activeId && !state.datasource.isLoading) {
+  const datasource =
+    state.datasource.activeId && !state.datasource.isLoading
+      ? props.datasourceMap[state.datasource.activeId]
+      : undefined;
+
+  const visualization = state.visualization.activeId
+    ? props.visualizationMap[state.visualization.activeId]
+    : undefined;
+
+  if (datasource) {
     return (
       <FrameLayout
+        navPanel={
+          <nav>
+            <EuiButton
+              fill
+              onClick={() =>
+                save({
+                  datasource,
+                  dispatch,
+                  visualization,
+                  state,
+                  redirectTo: props.redirectTo,
+                  store: props.store,
+                })
+              }
+              disabled={state.saving || !state.datasource.activeId || !state.visualization.activeId}
+            >
+              {i18n.translate('xpack.lens.editorFrame.Save', {
+                defaultMessage: 'Save',
+              })}
+            </EuiButton>
+          </nav>
+        }
         dataPanel={
           <DataPanelWrapper
             datasourceMap={props.datasourceMap}
@@ -114,20 +171,22 @@ export function EditorFrame(props: EditorFrameProps) {
           />
         }
         workspacePanel={
-          <WorkspacePanel
-            activeDatasource={props.datasourceMap[state.datasource.activeId]}
-            activeVisualizationId={state.visualization.activeId}
-            datasourcePublicAPI={datasourcePublicAPI!}
-            datasourceState={state.datasource.state}
-            visualizationState={state.visualization.state}
-            visualizationMap={props.visualizationMap}
-            dispatch={dispatch}
-            ExpressionRenderer={props.ExpressionRenderer}
-          />
+          <WorkspacePanelWrapper title={state.title} dispatch={dispatch}>
+            <WorkspacePanel
+              activeDatasource={datasource}
+              activeVisualizationId={state.visualization.activeId}
+              datasourcePublicAPI={datasourcePublicAPI!}
+              datasourceState={state.datasource.state}
+              visualizationState={state.visualization.state}
+              visualizationMap={props.visualizationMap}
+              dispatch={dispatch}
+              ExpressionRenderer={props.ExpressionRenderer}
+            />
+          </WorkspacePanelWrapper>
         }
         suggestionsPanel={
           <SuggestionPanel
-            activeDatasource={props.datasourceMap[state.datasource.activeId]}
+            activeDatasource={datasource}
             activeVisualizationId={state.visualization.activeId}
             datasourceState={state.datasource.state}
             visualizationState={state.visualization.state}