Embed dashboard by value example & some embeddable clean up (#67783)

Added example for using dashboard container by value
1.1 Refactored embeddable explorer e2e test to use new example, removed not needed kbn_tp_embeddable_explorer plugin.
For embeddable explorer examples went away from using getFactoryById() to improve type checks
There is new component a replacement for EmbeddableFactoryRenderer with slightly more flexible api: EmbeddableRenderer.
3.1 We can improve it going forward to support more use case

examples/dashboard_embeddable_examples/README.md

@@ -0,0 +1 @@
+Example of using dashboard container embeddable outside of dashboard app

examples/dashboard_embeddable_examples/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "dashboardEmbeddableExamples",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["embeddable", "embeddableExamples", "dashboard", "developerExamples"],
+  "optionalPlugins": []
+}

examples/dashboard_embeddable_examples/public/app.tsx

@@ -0,0 +1,112 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, RouteComponentProps, withRouter } from 'react-router-dom';
+
+import {
+  EuiPage,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageSideBar,
+  EuiSideNav,
+} from '@elastic/eui';
+import 'brace/mode/json';
+import { AppMountParameters } from '../../../src/core/public';
+import { DashboardEmbeddableByValue } from './by_value/embeddable';
+import { DashboardStart } from '../../../src/plugins/dashboard/public';
+
+interface PageDef {
+  title: string;
+  id: string;
+  component: React.ReactNode;
+}
+
+type NavProps = RouteComponentProps & {
+  pages: PageDef[];
+};
+
+const Nav = withRouter(({ history, pages }: NavProps) => {
+  const navItems = pages.map((page) => ({
+    id: page.id,
+    name: page.title,
+    onClick: () => history.push(`/${page.id}`),
+    'data-test-subj': page.id,
+  }));
+
+  return (
+    <EuiSideNav
+      items={[
+        {
+          name: 'Embeddable explorer',
+          id: 'home',
+          items: [...navItems],
+        },
+      ]}
+    />
+  );
+});
+
+interface Props {
+  basename: string;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+}
+
+const DashboardEmbeddableExplorerApp = ({ basename, DashboardContainerByValueRenderer }: Props) => {
+  const pages: PageDef[] = [
+    {
+      title: 'By value dashboard embeddable',
+      id: 'dashboardEmbeddableByValue',
+      component: (
+        <DashboardEmbeddableByValue
+          DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
+        />
+      ),
+    },
+    {
+      title: 'By ref dashboard embeddable',
+      id: 'dashboardEmbeddableByRef',
+      component: <div>TODO: Not implemented, but coming soon...</div>,
+    },
+  ];
+
+  const routes = pages.map((page, i) => (
+    <Route key={i} path={`/${page.id}`} render={(props) => page.component} />
+  ));
+
+  return (
+    <Router basename={basename}>
+      <EuiPage>
+        <EuiPageSideBar>
+          <Nav pages={pages} />
+        </EuiPageSideBar>
+        <EuiPageContent>
+          <EuiPageContentBody>{routes}</EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPage>
+    </Router>
+  );
+};
+
+export const renderApp = (props: Props, element: AppMountParameters['element']) => {
+  ReactDOM.render(<DashboardEmbeddableExplorerApp {...props} />, element);
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/dashboard_embeddable_examples/public/by_value/embeddable.tsx

@@ -0,0 +1,120 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import { ViewMode } from '../../../../src/plugins/embeddable/public';
+import { DashboardContainerInput, DashboardStart } from '../../../../src/plugins/dashboard/public';
+import { HELLO_WORLD_EMBEDDABLE } from '../../../embeddable_examples/public/hello_world';
+import { InputEditor } from './input_editor';
+import { TODO_EMBEDDABLE } from '../../../embeddable_examples/public/todo';
+import { TODO_REF_EMBEDDABLE } from '../../../embeddable_examples/public/todo/todo_ref_embeddable';
+
+const initialInput: DashboardContainerInput = {
+  viewMode: ViewMode.VIEW,
+  panels: {
+    '1': {
+      gridData: {
+        w: 10,
+        h: 10,
+        x: 0,
+        y: 0,
+        i: '1',
+      },
+      type: HELLO_WORLD_EMBEDDABLE,
+      explicitInput: {
+        id: '1',
+      },
+    },
+    '2': {
+      gridData: {
+        w: 10,
+        h: 10,
+        x: 10,
+        y: 0,
+        i: '2',
+      },
+      type: HELLO_WORLD_EMBEDDABLE,
+      explicitInput: {
+        id: '2',
+      },
+    },
+    '3': {
+      gridData: {
+        w: 10,
+        h: 10,
+        x: 0,
+        y: 10,
+        i: '3',
+      },
+      type: TODO_EMBEDDABLE,
+      explicitInput: {
+        id: '3',
+        title: 'Clean up',
+        task: 'Clean up the code',
+        icon: 'trash',
+      },
+    },
+    '4': {
+      gridData: {
+        w: 10,
+        h: 10,
+        x: 10,
+        y: 10,
+        i: '4',
+      },
+      type: TODO_REF_EMBEDDABLE,
+      explicitInput: {
+        id: '4',
+        savedObjectId: 'sample-todo-saved-object',
+      },
+    },
+  },
+  isFullScreenMode: false,
+  filters: [],
+  useMargins: false,
+  id: 'random-id',
+  timeRange: {
+    to: 'now',
+    from: 'now-1d',
+  },
+  title: 'test',
+  query: {
+    query: '',
+    language: 'lucene',
+  },
+  refreshConfig: {
+    pause: true,
+    value: 15,
+  },
+};
+
+export const DashboardEmbeddableByValue = ({
+  DashboardContainerByValueRenderer,
+}: {
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+}) => {
+  const [input, setInput] = useState(initialInput);
+
+  return (
+    <>
+      <InputEditor input={input} onSubmit={setInput} />
+      <DashboardContainerByValueRenderer input={input} onInputUpdated={setInput} />
+    </>
+  );
+};

examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx

@@ -0,0 +1,56 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiButton } from '@elastic/eui';
+import { JsonEditor } from '../../../../src/plugins/es_ui_shared/public';
+
+export const InputEditor = <T,>(props: { input: T; onSubmit: (value: T) => void }) => {
+  const input = JSON.stringify(props.input, null, 4);
+  const [value, setValue] = React.useState(input);
+  const isValid = (() => {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+  React.useEffect(() => {
+    setValue(input);
+  }, [input]);
+  return (
+    <>
+      <JsonEditor
+        value={value}
+        onUpdate={(v) => setValue(v.data.raw)}
+        euiCodeEditorProps={{
+          'data-test-subj': 'dashboardEmbeddableByValueInputEditor',
+        }}
+      />
+      <EuiButton
+        onClick={() => props.onSubmit(JSON.parse(value))}
+        disabled={!isValid}
+        data-test-subj={'dashboardEmbeddableByValueInputSubmit'}
+      >
+        Update Input
+      </EuiButton>
+    </>
+  );
+};

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/public/app/index.ts → examples/dashboard_embeddable_examples/public/index.ts

@@ -17,4 +17,6 @@
  * under the License.
  */
 
-export { App } from './app';
+import { DashboardEmbeddableExamples } from './plugin';
+
+export const plugin = () => new DashboardEmbeddableExamples();

examples/dashboard_embeddable_examples/public/plugin.tsx

@@ -0,0 +1,64 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AppMountParameters, AppNavLinkStatus, CoreSetup, Plugin } from '../../../src/core/public';
+import { DashboardStart } from '../../../src/plugins/dashboard/public';
+import { DeveloperExamplesSetup } from '../../developer_examples/public';
+import { EmbeddableExamplesStart } from '../../embeddable_examples/public/plugin';
+
+interface SetupDeps {
+  developerExamples: DeveloperExamplesSetup;
+}
+
+interface StartDeps {
+  dashboard: DashboardStart;
+  embeddableExamples: EmbeddableExamplesStart;
+}
+
+export class DashboardEmbeddableExamples implements Plugin<void, void, {}, StartDeps> {
+  public setup(core: CoreSetup<StartDeps>, { developerExamples }: SetupDeps) {
+    core.application.register({
+      id: 'dashboardEmbeddableExamples',
+      title: 'Dashboard embeddable examples',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const [, depsStart] = await core.getStartServices();
+        const { renderApp } = await import('./app');
+        await depsStart.embeddableExamples.createSampleData();
+        return renderApp(
+          {
+            basename: params.appBasePath,
+            DashboardContainerByValueRenderer:
+              depsStart.dashboard.DashboardContainerByValueRenderer,
+          },
+          params.element
+        );
+      },
+    });
+
+    developerExamples.register({
+      appId: 'dashboardEmbeddableExamples',
+      title: 'Dashboard Container',
+      description: `Showcase different ways how to embed dashboard container into your app`,
+    });
+  }
+
+  public start() {}
+  public stop() {}
+}

examples/dashboard_embeddable_examples/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*",
+  ],
+  "exclude": []
+}