[Example] Embeddable by Reference and Value (#68719)

Added an attribute service to embeddable start contract which provides a higher level abstraction for embeddables that can be by reference OR by value. Added an example that uses this service.

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;
+  }
+}