[Lens] Implement basic editor frame state handling

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -7,16 +7,16 @@
 import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 
-import { EditorFrameSetup } from '../types';
+import { EditorFrameInstance } from '../types';
 import { NativeRenderer } from '../native_renderer';
 
-export function App({ editorFrame }: { editorFrame: EditorFrameSetup }) {
+export function App({ editorFrame }: { editorFrame: EditorFrameInstance }) {
   return (
     <I18nProvider>
       <div>
         <h1>Lens</h1>
 
-        <NativeRenderer render={editorFrame.render} nativeProps={undefined} />
+        <NativeRenderer render={editorFrame.mount} nativeProps={undefined} />
       </div>
     </I18nProvider>
   );

x-pack/plugins/lens/public/app_plugin/plugin.tsx

@@ -9,8 +9,11 @@ import { editorFrameSetup, editorFrameStop } from '../editor_frame_plugin';
 import { indexPatternDatasourceSetup, indexPatternDatasourceStop } from '../indexpattern_plugin';
 import { xyVisualizationSetup, xyVisualizationStop } from '../xy_visualization_plugin';
 import { App } from './app';
+import { EditorFrameInstance } from '../types';
 
 export class AppPlugin {
+  private instance: EditorFrameInstance | null = null;
+
   constructor() {}
 
   setup() {
@@ -23,10 +26,17 @@ export class AppPlugin {
     editorFrame.registerDatasource('indexpattern', indexPattern);
     editorFrame.registerVisualization('xy', xyVisualization);
 
-    return <App editorFrame={editorFrame} />;
+    this.instance = editorFrame.createInstance({});
+
+    return <App editorFrame={this.instance} />;
   }
 
   stop() {
+    if (this.instance) {
+      this.instance.unmount();
+    }
+
+    // TODO this will be handled by the plugin platform itself
     indexPatternDatasourceStop();
     xyVisualizationStop();
     editorFrameStop();

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

@@ -0,0 +1,63 @@
+/*
+ * 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, { useMemo } from 'react';
+import { EuiSelect } from '@elastic/eui';
+import { NativeRenderer } from '../../native_renderer';
+import { Action } from './state_management';
+import { Visualization, DatasourcePublicAPI } from '../../types';
+
+interface ConfigPanelWrapperProps {
+  visualizationState: unknown;
+  visualizationMap: Record<string, Visualization>;
+  activeVisualizationId: string | null;
+  dispatch: (action: Action) => void;
+  datasourcePublicAPI: DatasourcePublicAPI;
+}
+
+export function ConfigPanelWrapper(props: ConfigPanelWrapperProps) {
+  const setVisualizationState = useMemo(
+    () => (newState: unknown) => {
+      props.dispatch({
+        type: 'UPDATE_VISUALIZATION_STATE',
+        newState,
+      });
+    },
+    [props.dispatch]
+  );
+
+  return (
+    <>
+      <EuiSelect
+        data-test-subj="visualization-switch"
+        options={Object.keys(props.visualizationMap).map(visualizationId => ({
+          value: visualizationId,
+          text: visualizationId,
+        }))}
+        value={props.activeVisualizationId || undefined}
+        onChange={e => {
+          props.dispatch({
+            type: 'SWITCH_VISUALIZATION',
+            newVisualizationId: e.target.value,
+            // TODO we probably want to have a separate API to "force" a visualization switch
+            // which isn't a result of a picked suggestion
+            initialState: props.visualizationMap[e.target.value].initialize(),
+          });
+        }}
+      />
+      {props.activeVisualizationId && (
+        <NativeRenderer
+          render={props.visualizationMap[props.activeVisualizationId].renderConfigPanel}
+          nativeProps={{
+            state: props.visualizationState,
+            setState: setVisualizationState,
+            datasource: props.datasourcePublicAPI,
+          }}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+/*
+ * 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, { useMemo } from 'react';
+import { EuiSelect } from '@elastic/eui';
+import { DatasourceDataPanelProps, Datasource } from '../..';
+import { NativeRenderer } from '../../native_renderer';
+import { Action } from './state_management';
+
+interface DataPanelWrapperProps {
+  datasourceState: unknown;
+  datasourceMap: Record<string, Datasource>;
+  activeDatasource: string | null;
+  datasourceIsLoading: boolean;
+  dispatch: (action: Action) => void;
+}
+
+export function DataPanelWrapper(props: DataPanelWrapperProps) {
+  const setDatasourceState = useMemo(
+    () => (newState: unknown) => {
+      props.dispatch({
+        type: 'UPDATE_DATASOURCE_STATE',
+        newState,
+      });
+    },
+    [props.dispatch]
+  );
+
+  const datasourceProps: DatasourceDataPanelProps = {
+    state: props.datasourceState,
+    setState: setDatasourceState,
+  };
+
+  return (
+    <>
+      <EuiSelect
+        data-test-subj="datasource-switch"
+        options={Object.keys(props.datasourceMap).map(datasourceId => ({
+          value: datasourceId,
+          text: datasourceId,
+        }))}
+        value={props.activeDatasource || undefined}
+        onChange={e => {
+          props.dispatch({ type: 'SWITCH_DATASOURCE', newDatasourceId: e.target.value });
+        }}
+      />
+      {props.activeDatasource && !props.datasourceIsLoading && (
+        <NativeRenderer
+          render={props.datasourceMap[props.activeDatasource].renderDataPanel}
+          nativeProps={datasourceProps}
+        />
+      )}
+    </>
+  );
+}