Add a new platform embeddable example plugin

examples/demo_search/common/index.ts

@@ -17,10 +17,7 @@
  * under the License.
  */
 
-import {
-  IKibanaSearchRequest,
-  IKibanaSearchResponse,
-} from '../../../../../src/plugins/data/public';
+import { IKibanaSearchRequest, IKibanaSearchResponse } from '../../../src/plugins/data/public';
 
 export const DEMO_SEARCH_STRATEGY = 'DEMO_SEARCH_STRATEGY';
 

examples/embeddable_examples/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "embeddableExamples",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["embeddable_examples"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["embeddable"],
+  "optionalPlugins": []
+}

examples/embeddable_examples/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "embeddable_examples",
+  "version": "1.0.0",
+  "main": "target/test/plugin_functional/plugins/embeddable_examples",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.5.3"
+  }
+}

examples/embeddable_examples/public/hello_world/hello_world_embeddable.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { Embeddable, EmbeddableInput, IContainer } from '../../../../src/plugins/embeddable/public';
+
+export const HELLO_WORLD_EMBEDDABLE = 'HELLO_WORLD_EMBEDDABLE';
+
+export class HelloWorldEmbeddable extends Embeddable {
+  // The type of this embeddable. This will be used to find the appropriate factory
+  // to instantiate this kind of embeddable.
+  public readonly type = HELLO_WORLD_EMBEDDABLE;
+
+  constructor(initialInput: EmbeddableInput, parent?: IContainer) {
+    super(
+      // Input state is irrelevant to this embeddable, just pass it along.
+      initialInput,
+      // Initial output state - this embeddable does not do anything with output, so just
+      // pass along an empty object.
+      {},
+      // Optional parent component, this embeddable can optionally be rendered inside a container.
+      parent
+    );
+  }
+
+  /**
+   * Render yourself at the dom node using whatever framework you like, angular, react, or just plain
+   * vanilla js.
+   * @param node
+   */
+  public render(node: HTMLElement) {
+    node.innerHTML = '<div data-test-subj="helloWorldEmbeddable">HELLO WORLD!</div>';
+  }
+
+  /**
+   * This is mostly relevant for time based embeddables which need to update data
+   * even if EmbeddableInput has not changed at all.
+   */
+  public reload() {}
+}

examples/embeddable_examples/public/hello_world/hello_world_embeddable_factory.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import {
+  IContainer,
+  EmbeddableInput,
+  EmbeddableFactory,
+} from '../../../../src/plugins/embeddable/public';
+import { HelloWorldEmbeddable, HELLO_WORLD_EMBEDDABLE } from './hello_world_embeddable';
+
+export class HelloWorldEmbeddableFactory extends EmbeddableFactory {
+  public readonly type = HELLO_WORLD_EMBEDDABLE;
+
+  /**
+   * In our simple example, we let everyone have permissions to edit this. Most
+   * embeddables should check the UI Capabilities service to be sure of
+   * the right permissions.
+   */
+  public isEditable() {
+    return true;
+  }
+
+  public async create(initialInput: EmbeddableInput, parent?: IContainer) {
+    return new HelloWorldEmbeddable(initialInput, parent);
+  }
+
+  public getDisplayName() {
+    return i18n.translate('embeddableApi.samples.helloworld.displayName', {
+      defaultMessage: 'hello world',
+    });
+  }
+}

examples/embeddable_examples/public/hello_world/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+export * from './hello_world_embeddable';
+export * from './hello_world_embeddable_factory';

examples/embeddable_examples/public/index.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { PluginInitializer } from 'kibana/public';
+export {
+  HELLO_WORLD_EMBEDDABLE,
+  HelloWorldEmbeddable,
+  HelloWorldEmbeddableFactory,
+} from './hello_world';
+export { ListContainer } from './list_container';
+
+import { EmbeddableExamplesPlugin } from './plugin';
+
+export const plugin: PluginInitializer<void, void> = () => new EmbeddableExamplesPlugin();

examples/embeddable_examples/public/list_container/embeddable_list_item.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 {
+  EuiPanel,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiText,
+  EuiLoadingSpinner,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { IEmbeddable } from '../../../../src/plugins/embeddable/public';
+
+interface Props {
+  embeddable?: IEmbeddable;
+}
+
+export class EmbeddableListItem extends React.Component<Props> {
+  private embeddableRoot: React.RefObject<HTMLDivElement>;
+
+  constructor(props: Props) {
+    super(props);
+    this.embeddableRoot = React.createRef();
+  }
+
+  public componentDidMount() {
+    if (this.embeddableRoot.current && this.props.embeddable) {
+      this.props.embeddable.render(this.embeddableRoot.current);
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.props.embeddable) {
+      this.props.embeddable.destroy();
+    }
+  }
+
+  public render() {
+    return (
+      <EuiFlexItem>
+        <EuiPanel>
+          {this.props.embeddable ? (
+            <div ref={this.embeddableRoot} />
+          ) : (
+            <EuiLoadingSpinner size="s" />
+          )}
+        </EuiPanel>
+      </EuiFlexItem>
+    );
+  }
+}

examples/embeddable_examples/public/list_container/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { ListContainer } from './list_container';

examples/embeddable_examples/public/list_container/list_container.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { I18nProvider } from '@kbn/i18n/react';
+import {
+  Container,
+  ContainerInput,
+  GetEmbeddableFactory,
+} from '../../../../src/plugins/embeddable/public';
+import { ListContainerComponent } from './list_container_component';
+
+export const LIST_CONTAINER = 'LIST_CONTAINER';
+
+export class ListContainer extends Container<{}, ContainerInput> {
+  public readonly type = LIST_CONTAINER;
+
+  constructor(input: ContainerInput, getEmbeddableFactory: GetEmbeddableFactory) {
+    super(input, { embeddableLoaded: {} }, getEmbeddableFactory);
+  }
+
+  // This container has no input itself.
+  getInheritedInput(id: string) {
+    return {};
+  }
+
+  public render(node: HTMLElement) {
+    ReactDOM.render(
+      <I18nProvider>
+        <ListContainerComponent container={this} />
+      </I18nProvider>,
+      node
+    );
+  }
+}