Skip to content

Commit e838bf4

Browse files
author
Stacey Gammon
committed
more so embed examples
1 parent 5a74919 commit e838bf4

31 files changed

+1154
-49
lines changed

‎examples/embeddable_examples/common/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
*/
1919

2020
export { TodoSavedObjectAttributes } from './todo_saved_object_attributes';
21+
export { NoteSavedObjectAttributes, NOTE_SAVED_OBJECT } from './note_saved_object_attributes';

‎examples/embeddable_examples/common/note_saved_object_attributes.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import { SavedObjectAttributes } from '../../../src/core/types';
21+
22+
export const NOTE_SAVED_OBJECT = 'note';
23+
24+
export interface NoteSavedObjectAttributes extends SavedObjectAttributes {
25+
to?: string;
26+
from?: string;
27+
message: string;
28+
}

‎examples/embeddable_examples/kibana.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
"configPath": ["embeddable_examples"],
66
"server": true,
77
"ui": true,
8-
"requiredPlugins": ["embeddable"],
8+
"requiredPlugins": ["embeddable", "uiActions"],
99
"optionalPlugins": []
1010
}

‎examples/embeddable_examples/public/create_sample_data.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
*/
1919

2020
import { SavedObjectsClientContract } from 'kibana/public';
21-
import { TodoSavedObjectAttributes } from '../common';
21+
import { TodoSavedObjectAttributes, NOTE_SAVED_OBJECT, NoteSavedObjectAttributes } from '../common';
2222

23-
export async function createSampleData(client: SavedObjectsClientContract) {
23+
export async function createSampleData(client: SavedObjectsClientContract, overwrite = true) {
2424
await client.create<TodoSavedObjectAttributes>(
2525
'todo',
2626
{
@@ -30,7 +30,20 @@ export async function createSampleData(client: SavedObjectsClientContract) {
3030
},
3131
{
3232
id: 'sample-todo-saved-object',
33-
overwrite: true,
33+
overwrite,
34+
}
35+
);
36+
37+
await client.create<NoteSavedObjectAttributes>(
38+
NOTE_SAVED_OBJECT,
39+
{
40+
to: 'Sue',
41+
from: 'Bob',
42+
message: 'Remember to pick up more bleach.',
43+
},
44+
{
45+
id: 'sample-note-saved-object',
46+
overwrite,
3447
}
3548
);
3649
}

‎examples/embeddable_examples/public/index.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
* under the License.
1818
*/
1919

20+
import { EmbeddableExamplesPlugin } from './plugin';
21+
22+
export const plugin = () => new EmbeddableExamplesPlugin();
23+
2024
export {
2125
HELLO_WORLD_EMBEDDABLE,
2226
HelloWorldEmbeddable,
@@ -25,8 +29,11 @@ export {
2529
export { ListContainer, LIST_CONTAINER } from './list_container';
2630
export { TODO_EMBEDDABLE } from './todo';
2731

28-
import { EmbeddableExamplesPlugin } from './plugin';
29-
30-
export { SearchableListContainer, SEARCHABLE_LIST_CONTAINER } from './searchable_list_container';
32+
export { EmbeddableExamplesStart } from './plugin';
33+
export {
34+
SearchableListContainer,
35+
SEARCHABLE_LIST_CONTAINER,
36+
SearchableContainerInput,
37+
} from './searchable_list_container';
3138
export { MULTI_TASK_TODO_EMBEDDABLE } from './multi_task_todo';
32-
export const plugin = () => new EmbeddableExamplesPlugin();
39+
export { NOTE_EMBEDDABLE, NoteEmbeddableInput, NoteEmbeddableOutput, NoteEmbeddable } from './note';

‎examples/embeddable_examples/public/note/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
The `../todo` folder has two separate examples: a "by reference" and a "by value" todo embeddable example.
2+
This folder combines both examples into a single embeddable, but since we can only have one embeddable factory
3+
represent a single saved object type, this is built off a `note` saved object type. There is more complexity
4+
invovled in making
5+
it a single embeddable - it not only takes in an optional saved object id but can also accept edits to
6+
the values. This is closer to the real world use case we aim for with the Visualize Library. A user
7+
may have an embeddable on a dashboard that is "by value" but they would like to promote it to "by reference".
8+
9+
Similarly they could break the link and convert back from by reference to by value.
10+
11+
The input data is:
12+
13+
```ts
14+
{
15+
savedObjectId?: string;
16+
attributes: NoteSavedObjectAttributes;
17+
}
18+
```
19+
20+
`attributes` represent either the "by value" data, or, edits on top of the saved object id.
21+
22+
The output data is:
23+
24+
```ts
25+
{
26+
savedAttributes?: NoteSavedObjectAttributes;
27+
}
28+
```
29+
30+
There is also an action that represents how this setup can be used with a save/create/edit action.
31+
32+
You can only have one embeddable factory representation for a single saved object, so rather than use the
33+
`Todo` example, this is going to use a new embeddable - `note`.

‎examples/embeddable_examples/public/note/create_edit_note_component.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React, { useState } from 'react';
20+
import { EuiModalBody } from '@elastic/eui';
21+
import { EuiFieldText } from '@elastic/eui';
22+
import { EuiButton } from '@elastic/eui';
23+
import { EuiModalFooter } from '@elastic/eui';
24+
import { EuiModalHeader } from '@elastic/eui';
25+
import { EuiFormRow } from '@elastic/eui';
26+
import { NoteSavedObjectAttributes } from '../common';
27+
28+
export function CreateEditNoteComponent({
29+
savedObjectId,
30+
attributes,
31+
onSave,
32+
}: {
33+
savedObjectId?: string;
34+
attributes?: NoteSavedObjectAttributes;
35+
onSave: (attributes: NoteSavedObjectAttributes, saveToLibrary: boolean) => void;
36+
}) {
37+
const [to, setTo] = useState(attributes?.to ?? '');
38+
const [from, setFrom] = useState(attributes?.from ?? '');
39+
const [message, setMessage] = useState(attributes?.message ?? '');
40+
return (
41+
<EuiModalBody>
42+
<EuiModalHeader>
43+
<h1>{`${savedObjectId ? 'Create new ' : 'Edit '}`}</h1>
44+
</EuiModalHeader>
45+
<EuiModalBody>
46+
<EuiFormRow label="To">
47+
<EuiFieldText
48+
data-test-subj="toInputField"
49+
value={to}
50+
placeholder="To"
51+
onChange={e => setTo(e.target.value)}
52+
/>
53+
</EuiFormRow>
54+
<EuiFormRow label="From">
55+
<EuiFieldText
56+
data-test-subj="fromInputField"
57+
value={from}
58+
placeholder="From"
59+
onChange={e => setFrom(e.target.value)}
60+
/>
61+
</EuiFormRow>
62+
<EuiFormRow label="Message">
63+
<EuiFieldText
64+
data-test-subj="messageInputField"
65+
value={message}
66+
placeholder="Message"
67+
onChange={e => setMessage(e.target.value)}
68+
/>
69+
</EuiFormRow>
70+
</EuiModalBody>
71+
<EuiModalFooter>
72+
{savedObjectId === undefined ? (
73+
<EuiButton
74+
data-test-subj="saveNoteEmbeddableByValue"
75+
disabled={message === ''}
76+
onClick={() => onSave({ message, to, from }, false)}
77+
>
78+
Save
79+
</EuiButton>
80+
) : null}
81+
<EuiButton
82+
data-test-subj="saveNoteEmbeddableByRef"
83+
disabled={message === ''}
84+
onClick={() => onSave({ message, to, from }, true)}
85+
>
86+
{savedObjectId ? 'Update library item' : 'Save to library'}
87+
</EuiButton>
88+
</EuiModalFooter>
89+
</EuiModalBody>
90+
);
91+
}

‎examples/embeddable_examples/public/note/edit_note_action.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React from 'react';
20+
import { OverlayStart, SavedObjectsClientContract } from 'kibana/public';
21+
import { i18n } from '@kbn/i18n';
22+
import { NoteSavedObjectAttributes, NOTE_SAVED_OBJECT } from '../common';
23+
import { createAction } from '../../../../src/plugins/ui_actions/public';
24+
import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
25+
import { ViewMode } from '../../../../src/plugins/embeddable/public';
26+
import { CreateEditNoteComponent } from './create_edit_note_component';
27+
import { NoteEmbeddable, NOTE_EMBEDDABLE } from './note_embeddable';
28+
29+
interface StartServices {
30+
openModal: OverlayStart['openModal'];
31+
savedObjectsClient: SavedObjectsClientContract;
32+
}
33+
34+
interface ActionContext {
35+
embeddable: NoteEmbeddable;
36+
}
37+
38+
export const ACTION_EDIT_NOTE = 'ACTION_EDIT_NOTE';
39+
40+
export const createEditNoteAction = (getStartServices: () => Promise<StartServices>) =>
41+
createAction({
42+
getDisplayName: () =>
43+
i18n.translate('embeddableExamples.note.edit', { defaultMessage: 'Edit' }),
44+
type: ACTION_EDIT_NOTE,
45+
isCompatible: async ({ embeddable }: ActionContext) => {
46+
return (
47+
embeddable.type === NOTE_EMBEDDABLE && embeddable.getInput().viewMode === ViewMode.EDIT
48+
);
49+
},
50+
execute: async ({ embeddable }: ActionContext) => {
51+
const { openModal, savedObjectsClient } = await getStartServices();
52+
const onSave = async (attributes: NoteSavedObjectAttributes, includeInLibrary: boolean) => {
53+
if (includeInLibrary) {
54+
if (embeddable.getInput().savedObjectId) {
55+
await savedObjectsClient.update(
56+
NOTE_SAVED_OBJECT,
57+
embeddable.getInput().savedObjectId!,
58+
attributes
59+
);
60+
embeddable.updateInput({ attributes: undefined });
61+
embeddable.reload();
62+
} else {
63+
const savedItem = await savedObjectsClient.create(NOTE_SAVED_OBJECT, attributes);
64+
embeddable.updateInput({ savedObjectId: savedItem.id });
65+
}
66+
} else {
67+
embeddable.updateInput({ attributes });
68+
}
69+
};
70+
const overlay = openModal(
71+
toMountPoint(
72+
<CreateEditNoteComponent
73+
savedObjectId={embeddable.getInput().savedObjectId}
74+
attributes={embeddable.getInput().attributes ?? embeddable.getOutput().savedAttributes}
75+
onSave={(attributes: NoteSavedObjectAttributes, includeInLibrary: boolean) => {
76+
overlay.close();
77+
onSave(attributes, includeInLibrary);
78+
}}
79+
/>
80+
)
81+
);
82+
},
83+
});

‎examples/embeddable_examples/public/note/index.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
export * from './note_embeddable';
21+
export * from './note_embeddable_factory';
22+
export * from './edit_note_action';

0 commit comments

Comments
 (0)