Merge branch 'master' into eui/26.1

examples/embeddable_examples/common/book_saved_object_attributes.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { SavedObjectAttributes } from '../../../src/core/types';
+
+export const BOOK_SAVED_OBJECT = 'book';
+
+export interface BookSavedObjectAttributes extends SavedObjectAttributes {
+ title: string;
+ author?: string;
+ readIt?: boolean;
+}

examples/embeddable_examples/common/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { TodoSavedObjectAttributes } from './todo_saved_object_attributes';
+export { BookSavedObjectAttributes, BOOK_SAVED_OBJECT } from './book_saved_object_attributes';

examples/embeddable_examples/kibana.json

@@ -4,7 +4,7 @@
  "kibanaVersion": "kibana",
  "server": true,
  "ui": true,
- "requiredPlugins": ["embeddable"],
+ "requiredPlugins": ["embeddable", "uiActions"],
  "optionalPlugins": [],
  "extraPublicDirs": ["public/todo", "public/hello_world", "public/todo/todo_ref_embeddable"]
 }

examples/embeddable_examples/public/book/book_component.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 { EuiFlexItem, EuiFlexGroup, EuiIcon } from '@elastic/eui';
+
+import { EuiText } from '@elastic/eui';
+import { EuiFlexGrid } from '@elastic/eui';
+import { withEmbeddableSubscription } from '../../../../src/plugins/embeddable/public';
+import { BookEmbeddableInput, BookEmbeddableOutput, BookEmbeddable } from './book_embeddable';
+
+interface Props {
+ input: BookEmbeddableInput;
+ output: BookEmbeddableOutput;
+ embeddable: BookEmbeddable;
+}
+
+function wrapSearchTerms(task?: string, search?: string) {
+ if (!search || !task) return task;
+ const parts = task.split(new RegExp(`(${search})`, 'g'));
+ return parts.map((part, i) =>
+ part === search ? (
+ <span key={i} style={{ backgroundColor: 'yellow' }}>
+ {part}
+ </span>
+ ) : (
+ part
+ )
+ );
+}
+
+export function BookEmbeddableComponentInner({ input: { search }, output: { attributes } }: Props) {
+ const title = attributes?.title;
+ const author = attributes?.author;
+ const readIt = attributes?.readIt;
+
+ return (
+ <EuiFlexGroup gutterSize="s">
+ <EuiFlexItem>
+ <EuiFlexGrid columns={1} gutterSize="none">
+ {title ? (
+ <EuiFlexItem>
+ <EuiText data-test-subj="bookEmbeddableTitle">
+ <h3>{wrapSearchTerms(title, search)},</h3>
+ </EuiText>
+ </EuiFlexItem>
+ ) : null}
+ {author ? (
+ <EuiFlexItem>
+ <EuiText data-test-subj="bookEmbeddableAuthor">
+ <h5>-{wrapSearchTerms(author, search)}</h5>
+ </EuiText>
+ </EuiFlexItem>
+ ) : null}
+ {readIt ? (
+ <EuiFlexItem>
+ <EuiIcon type="check" />
+ </EuiFlexItem>
+ ) : (
+ <EuiFlexItem>
+ <EuiIcon type="cross" />
+ </EuiFlexItem>
+ )}
+ </EuiFlexGrid>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+}
+
+export const BookEmbeddableComponent = withEmbeddableSubscription<
+ BookEmbeddableInput,
+ BookEmbeddableOutput,
+ BookEmbeddable,
+ {}
+>(BookEmbeddableComponentInner);

examples/embeddable_examples/public/book/book_embeddable.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 { Subscription } from 'rxjs';
+import {
+ Embeddable,
+ EmbeddableInput,
+ IContainer,
+ EmbeddableOutput,
+ SavedObjectEmbeddableInput,
+ AttributeService,
+} from '../../../../src/plugins/embeddable/public';
+import { BookSavedObjectAttributes } from '../../common';
+import { BookEmbeddableComponent } from './book_component';
+
+export const BOOK_EMBEDDABLE = 'book';
+export type BookEmbeddableInput = BookByValueInput | BookByReferenceInput;
+export interface BookEmbeddableOutput extends EmbeddableOutput {
+ hasMatch: boolean;
+ attributes: BookSavedObjectAttributes;
+}
+
+interface BookInheritedInput extends EmbeddableInput {
+ search?: string;
+}
+
+export type BookByValueInput = { attributes: BookSavedObjectAttributes } & BookInheritedInput;
+export type BookByReferenceInput = SavedObjectEmbeddableInput & BookInheritedInput;
+
+/**
+ * Returns whether any attributes contain the search string. If search is empty, true is returned. If
+ * there are no savedAttributes, false is returned.
+ * @param search - the search string
+ * @param savedAttributes - the saved object attributes for the saved object with id `input.savedObjectId`
+ */
+function getHasMatch(search?: string, savedAttributes?: BookSavedObjectAttributes): boolean {
+ if (!search) return true;
+ if (!savedAttributes) return false;
+ return Boolean(
+ (savedAttributes.author && savedAttributes.author.match(search)) ||
+ (savedAttributes.title && savedAttributes.title.match(search))
+ );
+}
+
+export class BookEmbeddable extends Embeddable<BookEmbeddableInput, BookEmbeddableOutput> {
+ public readonly type = BOOK_EMBEDDABLE;
+ private subscription: Subscription;
+ private node?: HTMLElement;
+ private savedObjectId?: string;
+ private attributes?: BookSavedObjectAttributes;
+
+ constructor(
+ initialInput: BookEmbeddableInput,
+ private attributeService: AttributeService<
+ BookSavedObjectAttributes,
+ BookByValueInput,
+ BookByReferenceInput
+ >,
+ {
+ parent,
+ }: {
+ parent?: IContainer;
+ }
+ ) {
+ super(initialInput, {} as BookEmbeddableOutput, parent);
+
+ this.subscription = this.getInput$().subscribe(async () => {
+ const savedObjectId = (this.getInput() as BookByReferenceInput).savedObjectId;
+ const attributes = (this.getInput() as BookByValueInput).attributes;
+ if (this.attributes !== attributes || this.savedObjectId !== savedObjectId) {
+ this.savedObjectId = savedObjectId;
+ this.reload();
+ } else {
+ this.updateOutput({
+ attributes: this.attributes,
+ hasMatch: getHasMatch(this.input.search, this.attributes),
+ });
+ }
+ });
+ }
+
+ public render(node: HTMLElement) {
+ if (this.node) {
+ ReactDOM.unmountComponentAtNode(this.node);
+ }
+ this.node = node;
+ ReactDOM.render(<BookEmbeddableComponent embeddable={this} />, node);
+ }
+
+ public async reload() {
+ this.attributes = await this.attributeService.unwrapAttributes(this.input);
+
+ this.updateOutput({
+ attributes: this.attributes,
+ hasMatch: getHasMatch(this.input.search, this.attributes),
+ });
+ }
+
+ public destroy() {
+ super.destroy();
+ this.subscription.unsubscribe();
+ if (this.node) {
+ ReactDOM.unmountComponentAtNode(this.node);
+ }
+ }
+}

examples/embeddable_examples/public/book/book_embeddable_factory.tsx

@@ -0,0 +1,127 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { BookSavedObjectAttributes, BOOK_SAVED_OBJECT } from '../../common';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import {
+ EmbeddableFactoryDefinition,
+ EmbeddableStart,
+ IContainer,
+ AttributeService,
+ EmbeddableFactory,
+} from '../../../../src/plugins/embeddable/public';
+import {
+ BookEmbeddable,
+ BOOK_EMBEDDABLE,
+ BookEmbeddableInput,
+ BookEmbeddableOutput,
+ BookByValueInput,
+ BookByReferenceInput,
+} from './book_embeddable';
+import { CreateEditBookComponent } from './create_edit_book_component';
+import { OverlayStart } from '../../../../src/core/public';
+
+interface StartServices {
+ getAttributeService: EmbeddableStart['getAttributeService'];
+ openModal: OverlayStart['openModal'];
+}
+
+export type BookEmbeddableFactory = EmbeddableFactory<
+ BookEmbeddableInput,
+ BookEmbeddableOutput,
+ BookEmbeddable,
+ BookSavedObjectAttributes
+>;
+
+export class BookEmbeddableFactoryDefinition
+ implements
+ EmbeddableFactoryDefinition<
+ BookEmbeddableInput,
+ BookEmbeddableOutput,
+ BookEmbeddable,
+ BookSavedObjectAttributes
+ > {
+ public readonly type = BOOK_EMBEDDABLE;
+ public savedObjectMetaData = {
+ name: 'Book',
+ includeFields: ['title', 'author', 'readIt'],
+ type: BOOK_SAVED_OBJECT,
+ getIconForSavedObject: () => 'pencil',
+ };
+
+ private attributeService?: AttributeService<
+ BookSavedObjectAttributes,
+ BookByValueInput,
+ BookByReferenceInput
+ >;
+
+ constructor(private getStartServices: () => Promise<StartServices>) {}
+
+ public async isEditable() {
+ return true;
+ }
+
+ public async create(input: BookEmbeddableInput, parent?: IContainer) {
+ return new BookEmbeddable(input, await this.getAttributeService(), {
+ parent,
+ });
+ }
+
+ public getDisplayName() {
+ return i18n.translate('embeddableExamples.book.displayName', {
+ defaultMessage: 'Book',
+ });
+ }
+
+ public async getExplicitInput(): Promise<Omit<BookEmbeddableInput, 'id'>> {
+ const { openModal } = await this.getStartServices();
+ return new Promise<Omit<BookEmbeddableInput, 'id'>>((resolve) => {
+ const onSave = async (attributes: BookSavedObjectAttributes, useRefType: boolean) => {
+ const wrappedAttributes = (await this.getAttributeService()).wrapAttributes(
+ attributes,
+ useRefType
+ );
+ resolve(wrappedAttributes);
+ };
+ const overlay = openModal(
+ toMountPoint(
+ <CreateEditBookComponent
+ onSave={(attributes: BookSavedObjectAttributes, useRefType: boolean) => {
+ onSave(attributes, useRefType);
+ overlay.close();
+ }}
+ />
+ )
+ );
+ });
+ }
+
+ private async getAttributeService() {
+ if (!this.attributeService) {
+ this.attributeService = await (await this.getStartServices()).getAttributeService<
+ BookSavedObjectAttributes,
+ BookByValueInput,
+ BookByReferenceInput
+ >(this.type);
+ }
+ return this.attributeService;
+ }
+}