more so embed examples

examples/embeddable_examples/common/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { TodoSavedObjectAttributes } from './todo_saved_object_attributes';
+export { NoteSavedObjectAttributes, NOTE_SAVED_OBJECT } from './note_saved_object_attributes';

examples/embeddable_examples/common/note_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 NOTE_SAVED_OBJECT = 'note';
+
+export interface NoteSavedObjectAttributes extends SavedObjectAttributes {
+  to?: string;
+  from?: string;
+  message: string;
+}

examples/embeddable_examples/kibana.json

@@ -5,6 +5,6 @@
   "configPath": ["embeddable_examples"],
   "server": true,
   "ui": true,
-  "requiredPlugins": ["embeddable"],
+  "requiredPlugins": ["embeddable", "uiActions"],
   "optionalPlugins": []
 }

examples/embeddable_examples/public/create_sample_data.ts

@@ -18,9 +18,9 @@
  */
 
 import { SavedObjectsClientContract } from 'kibana/public';
-import { TodoSavedObjectAttributes } from '../common';
+import { TodoSavedObjectAttributes, NOTE_SAVED_OBJECT, NoteSavedObjectAttributes } from '../common';
 
-export async function createSampleData(client: SavedObjectsClientContract) {
+export async function createSampleData(client: SavedObjectsClientContract, overwrite = true) {
   await client.create<TodoSavedObjectAttributes>(
     'todo',
     {
@@ -30,7 +30,20 @@ export async function createSampleData(client: SavedObjectsClientContract) {
     },
     {
       id: 'sample-todo-saved-object',
-      overwrite: true,
+      overwrite,
+    }
+  );
+
+  await client.create<NoteSavedObjectAttributes>(
+    NOTE_SAVED_OBJECT,
+    {
+      to: 'Sue',
+      from: 'Bob',
+      message: 'Remember to pick up more bleach.',
+    },
+    {
+      id: 'sample-note-saved-object',
+      overwrite,
     }
   );
 }

examples/embeddable_examples/public/index.ts

@@ -17,6 +17,10 @@
  * under the License.
  */
 
+import { EmbeddableExamplesPlugin } from './plugin';
+
+export const plugin = () => new EmbeddableExamplesPlugin();
+
 export {
   HELLO_WORLD_EMBEDDABLE,
   HelloWorldEmbeddable,
@@ -25,8 +29,11 @@ export {
 export { ListContainer, LIST_CONTAINER } from './list_container';
 export { TODO_EMBEDDABLE } from './todo';
 
-import { EmbeddableExamplesPlugin } from './plugin';
-
-export { SearchableListContainer, SEARCHABLE_LIST_CONTAINER } from './searchable_list_container';
+export { EmbeddableExamplesStart } from './plugin';
+export {
+  SearchableListContainer,
+  SEARCHABLE_LIST_CONTAINER,
+  SearchableContainerInput,
+} from './searchable_list_container';
 export { MULTI_TASK_TODO_EMBEDDABLE } from './multi_task_todo';
-export const plugin = () => new EmbeddableExamplesPlugin();
+export { NOTE_EMBEDDABLE, NoteEmbeddableInput, NoteEmbeddableOutput, NoteEmbeddable } from './note';

examples/embeddable_examples/public/note/README.md

@@ -0,0 +1,33 @@
+The `../todo` folder has two separate examples: a "by reference" and a "by value" todo embeddable example.
+This folder combines both examples into a single embeddable, but since we can only have one embeddable factory
+represent a single saved object type, this is built off a `note` saved object type. There is more complexity
+invovled in making
+it a single embeddable - it not only takes in an optional saved object id but can also accept edits to
+the values.  This is closer to the real world use case we aim for with the Visualize Library.  A user
+may have an embeddable on a dashboard that is "by value" but they would like to promote it to "by reference".
+
+Similarly they could break the link and convert back from by reference to by value.
+
+The input data is:
+
+```ts
+{
+  savedObjectId?: string;
+  attributes: NoteSavedObjectAttributes;
+}
+```
+
+`attributes` represent either the "by value" data, or, edits on top of the saved object id.
+
+The output data is:
+
+```ts
+{
+  savedAttributes?: NoteSavedObjectAttributes;
+}
+```
+
+There is also an action that represents how this setup can be used with a save/create/edit action.
+
+You can only have one embeddable factory representation for a single saved object, so rather than use the
+`Todo` example, this is going to use a new embeddable - `note`.

examples/embeddable_examples/public/note/create_edit_note_component.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 { EuiModalBody } from '@elastic/eui';
+import { EuiFieldText } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
+import { EuiModalFooter } from '@elastic/eui';
+import { EuiModalHeader } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
+import { NoteSavedObjectAttributes } from '../common';
+
+export function CreateEditNoteComponent({
+  savedObjectId,
+  attributes,
+  onSave,
+}: {
+  savedObjectId?: string;
+  attributes?: NoteSavedObjectAttributes;
+  onSave: (attributes: NoteSavedObjectAttributes, saveToLibrary: boolean) => void;
+}) {
+  const [to, setTo] = useState(attributes?.to ?? '');
+  const [from, setFrom] = useState(attributes?.from ?? '');
+  const [message, setMessage] = useState(attributes?.message ?? '');
+  return (
+    <EuiModalBody>
+      <EuiModalHeader>
+        <h1>{`${savedObjectId ? 'Create new ' : 'Edit '}`}</h1>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiFormRow label="To">
+          <EuiFieldText
+            data-test-subj="toInputField"
+            value={to}
+            placeholder="To"
+            onChange={e => setTo(e.target.value)}
+          />
+        </EuiFormRow>
+        <EuiFormRow label="From">
+          <EuiFieldText
+            data-test-subj="fromInputField"
+            value={from}
+            placeholder="From"
+            onChange={e => setFrom(e.target.value)}
+          />
+        </EuiFormRow>
+        <EuiFormRow label="Message">
+          <EuiFieldText
+            data-test-subj="messageInputField"
+            value={message}
+            placeholder="Message"
+            onChange={e => setMessage(e.target.value)}
+          />
+        </EuiFormRow>
+      </EuiModalBody>
+      <EuiModalFooter>
+        {savedObjectId === undefined ? (
+          <EuiButton
+            data-test-subj="saveNoteEmbeddableByValue"
+            disabled={message === ''}
+            onClick={() => onSave({ message, to, from }, false)}
+          >
+            Save
+          </EuiButton>
+        ) : null}
+        <EuiButton
+          data-test-subj="saveNoteEmbeddableByRef"
+          disabled={message === ''}
+          onClick={() => onSave({ message, to, from }, true)}
+        >
+          {savedObjectId ? 'Update library item' : 'Save to library'}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModalBody>
+  );
+}

examples/embeddable_examples/public/note/edit_note_action.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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 { OverlayStart, SavedObjectsClientContract } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
+import { NoteSavedObjectAttributes, NOTE_SAVED_OBJECT } from '../common';
+import { createAction } from '../../../../src/plugins/ui_actions/public';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { ViewMode } from '../../../../src/plugins/embeddable/public';
+import { CreateEditNoteComponent } from './create_edit_note_component';
+import { NoteEmbeddable, NOTE_EMBEDDABLE } from './note_embeddable';
+
+interface StartServices {
+  openModal: OverlayStart['openModal'];
+  savedObjectsClient: SavedObjectsClientContract;
+}
+
+interface ActionContext {
+  embeddable: NoteEmbeddable;
+}
+
+export const ACTION_EDIT_NOTE = 'ACTION_EDIT_NOTE';
+
+export const createEditNoteAction = (getStartServices: () => Promise<StartServices>) =>
+  createAction({
+    getDisplayName: () =>
+      i18n.translate('embeddableExamples.note.edit', { defaultMessage: 'Edit' }),
+    type: ACTION_EDIT_NOTE,
+    isCompatible: async ({ embeddable }: ActionContext) => {
+      return (
+        embeddable.type === NOTE_EMBEDDABLE && embeddable.getInput().viewMode === ViewMode.EDIT
+      );
+    },
+    execute: async ({ embeddable }: ActionContext) => {
+      const { openModal, savedObjectsClient } = await getStartServices();
+      const onSave = async (attributes: NoteSavedObjectAttributes, includeInLibrary: boolean) => {
+        if (includeInLibrary) {
+          if (embeddable.getInput().savedObjectId) {
+            await savedObjectsClient.update(
+              NOTE_SAVED_OBJECT,
+              embeddable.getInput().savedObjectId!,
+              attributes
+            );
+            embeddable.updateInput({ attributes: undefined });
+            embeddable.reload();
+          } else {
+            const savedItem = await savedObjectsClient.create(NOTE_SAVED_OBJECT, attributes);
+            embeddable.updateInput({ savedObjectId: savedItem.id });
+          }
+        } else {
+          embeddable.updateInput({ attributes });
+        }
+      };
+      const overlay = openModal(
+        toMountPoint(
+          <CreateEditNoteComponent
+            savedObjectId={embeddable.getInput().savedObjectId}
+            attributes={embeddable.getInput().attributes ?? embeddable.getOutput().savedAttributes}
+            onSave={(attributes: NoteSavedObjectAttributes, includeInLibrary: boolean) => {
+              overlay.close();
+              onSave(attributes, includeInLibrary);
+            }}
+          />
+        )
+      );
+    },
+  });

examples/embeddable_examples/public/note/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 './note_embeddable';
+export * from './note_embeddable_factory';
+export * from './edit_note_action';