mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
Clean up saved object based embeddable examples (#162987)
## Summary These examples are outdated and don't show recent embeddable best practices. They also use client-side saved object client and block making `SavedObjectFinder` backward compatible https://github.com/elastic/kibana/pull/162904 as the `foobar` saved objects need to be added to content management. We decided that it is better to clean them up, as fixing them is not a small effort and it is not worth it on this point as a large embeddable refactor is coming.
This commit is contained in:
Anton Dosov
GitHub
parent
bb68c20d99
commit
65fd7ad260
47 changed files with 24 additions and 2538 deletions
|
|
@ -14,8 +14,7 @@
|
|||
"embeddableExamples",
|
||||
"developerExamples",
|
||||
"dashboard",
|
||||
"kibanaReact",
|
||||
"savedObjects"
|
||||
"kibanaReact"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,20 +11,12 @@ import ReactDOM from 'react-dom';
|
|||
import { BrowserRouter as Router, withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { Route } from '@kbn/shared-ux-router';
|
||||
import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
|
||||
|
||||
import { EmbeddableStart } from '@kbn/embeddable-plugin/public';
|
||||
import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
|
||||
import { Start as InspectorStartContract } from '@kbn/inspector-plugin/public';
|
||||
import {
|
||||
AppMountParameters,
|
||||
CoreStart,
|
||||
SavedObjectsStart,
|
||||
IUiSettingsClient,
|
||||
OverlayStart,
|
||||
} from '@kbn/core/public';
|
||||
import { AppMountParameters, CoreStart, IUiSettingsClient, OverlayStart } from '@kbn/core/public';
|
||||
import { EmbeddableExamplesStart } from '@kbn/embeddable-examples-plugin/public/plugin';
|
||||
import { HelloWorldEmbeddableExample } from './hello_world_embeddable_example';
|
||||
import { TodoEmbeddableExample } from './todo_embeddable_example';
|
||||
import { ListContainerExample } from './list_container_example';
|
||||
import { EmbeddablePanelExample } from './embeddable_panel_example';
|
||||
|
||||
|
|
@ -68,7 +60,6 @@ interface Props {
|
|||
overlays: OverlayStart;
|
||||
notifications: CoreStart['notifications'];
|
||||
inspector: InspectorStartContract;
|
||||
savedObject: SavedObjectsStart;
|
||||
uiSettingsClient: IUiSettingsClient;
|
||||
embeddableExamples: EmbeddableExamplesStart;
|
||||
}
|
||||
|
|
@ -89,15 +80,6 @@ const EmbeddableExplorerApp = ({
|
|||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Update embeddable state',
|
||||
id: 'todoEmbeddableSection',
|
||||
component: (
|
||||
<TodoEmbeddableExample
|
||||
todoEmbeddableFactory={embeddableExamples.factories.getTodoEmbeddableFactory()}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Groups of embeddables',
|
||||
id: 'listContainerSection',
|
||||
|
|
@ -112,7 +94,7 @@ const EmbeddableExplorerApp = ({
|
|||
id: 'embeddablePanelExample',
|
||||
component: (
|
||||
<EmbeddablePanelExample
|
||||
searchListContainerFactory={embeddableExamples.factories.getSearchableListContainerEmbeddableFactory()}
|
||||
helloWorldFactory={embeddableExamples.factories.getHelloWorldEmbeddableFactory()}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,80 +10,13 @@ import React, { useState, useEffect, useRef } from 'react';
|
|||
import { EuiPanel, EuiText, EuiPageTemplate } from '@elastic/eui';
|
||||
import { EuiSpacer } from '@elastic/eui';
|
||||
import { IEmbeddable, EmbeddablePanel } from '@kbn/embeddable-plugin/public';
|
||||
import {
|
||||
HELLO_WORLD_EMBEDDABLE,
|
||||
TODO_EMBEDDABLE,
|
||||
BOOK_EMBEDDABLE,
|
||||
MULTI_TASK_TODO_EMBEDDABLE,
|
||||
SearchableListContainerFactory,
|
||||
} from '@kbn/embeddable-examples-plugin/public';
|
||||
import { HelloWorldEmbeddableFactory } from '@kbn/embeddable-examples-plugin/public';
|
||||
|
||||
interface Props {
|
||||
searchListContainerFactory: SearchableListContainerFactory;
|
||||
helloWorldFactory: HelloWorldEmbeddableFactory;
|
||||
}
|
||||
|
||||
export function EmbeddablePanelExample({ searchListContainerFactory }: Props) {
|
||||
const searchableInput = {
|
||||
id: '1',
|
||||
title: 'My searchable todo list',
|
||||
panels: {
|
||||
'1': {
|
||||
type: HELLO_WORLD_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '1',
|
||||
title: 'Hello',
|
||||
},
|
||||
},
|
||||
'2': {
|
||||
type: TODO_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '2',
|
||||
task: 'Goes out on Wednesdays!',
|
||||
icon: 'broom',
|
||||
title: 'Take out the trash',
|
||||
},
|
||||
},
|
||||
'3': {
|
||||
type: MULTI_TASK_TODO_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '3',
|
||||
icon: 'searchProfilerApp',
|
||||
title: 'Learn more',
|
||||
tasks: ['Go to school', 'Watch planet earth', 'Read the encyclopedia'],
|
||||
},
|
||||
},
|
||||
'4': {
|
||||
type: BOOK_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '4',
|
||||
savedObjectId: 'sample-book-saved-object',
|
||||
},
|
||||
},
|
||||
'5': {
|
||||
type: BOOK_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '5',
|
||||
attributes: {
|
||||
title: 'The Sympathizer',
|
||||
author: 'Viet Thanh Nguyen',
|
||||
readIt: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
'6': {
|
||||
type: BOOK_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '6',
|
||||
attributes: {
|
||||
title: 'The Hobbit',
|
||||
author: 'J.R.R. Tolkien',
|
||||
readIt: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function EmbeddablePanelExample({ helloWorldFactory }: Props) {
|
||||
const [embeddable, setEmbeddable] = useState<IEmbeddable | undefined>(undefined);
|
||||
|
||||
const ref = useRef(false);
|
||||
|
|
@ -91,7 +24,7 @@ export function EmbeddablePanelExample({ searchListContainerFactory }: Props) {
|
|||
useEffect(() => {
|
||||
ref.current = true;
|
||||
if (!embeddable) {
|
||||
const promise = searchListContainerFactory.create(searchableInput);
|
||||
const promise = helloWorldFactory.create({ id: '1', title: 'Hello World!' });
|
||||
if (promise) {
|
||||
promise.then((e) => {
|
||||
if (ref.current) {
|
||||
|
|
|
|||
|
|
@ -11,10 +11,8 @@ import { EuiPanel, EuiSpacer, EuiText, EuiPageTemplate, EuiCodeBlock } from '@el
|
|||
import { EmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
|
||||
import {
|
||||
HELLO_WORLD_EMBEDDABLE,
|
||||
TODO_EMBEDDABLE,
|
||||
ListContainerFactory,
|
||||
} from '@kbn/embeddable-examples-plugin/public';
|
||||
import { TodoInput } from '@kbn/embeddable-examples-plugin/public/todo';
|
||||
|
||||
interface Props {
|
||||
listContainerEmbeddableFactory: ListContainerFactory;
|
||||
|
|
@ -33,7 +31,7 @@ export function ListContainerExample({ listContainerEmbeddableFactory }: Props)
|
|||
factory={listContainerEmbeddableFactory}
|
||||
input={{
|
||||
id: 'hello',
|
||||
title: 'Todo list',
|
||||
title: 'Hello world list',
|
||||
viewMode: ViewMode.VIEW,
|
||||
panels: {
|
||||
'1': {
|
||||
|
|
@ -43,21 +41,10 @@ export function ListContainerExample({ listContainerEmbeddableFactory }: Props)
|
|||
},
|
||||
},
|
||||
'2': {
|
||||
type: TODO_EMBEDDABLE,
|
||||
type: HELLO_WORLD_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '2',
|
||||
task: 'Goes out on Wednesdays!',
|
||||
icon: 'broom',
|
||||
title: 'Take out the trash',
|
||||
} as TodoInput,
|
||||
},
|
||||
'3': {
|
||||
type: TODO_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '3',
|
||||
icon: 'broom',
|
||||
title: 'Vaccum the floor',
|
||||
} as TodoInput,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
|
@ -77,24 +64,13 @@ export function ListContainerExample({ listContainerEmbeddableFactory }: Props)
|
|||
explicitInput: {
|
||||
id: '1',
|
||||
},
|
||||
},
|
||||
'2': {
|
||||
type: TODO_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '2',
|
||||
task: 'Goes out on Wednesdays!',
|
||||
icon: 'broom',
|
||||
title: 'Take out the trash',
|
||||
} as TodoInput,
|
||||
},
|
||||
'3': {
|
||||
type: TODO_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '3',
|
||||
icon: 'broom',
|
||||
title: 'Vaccum the floor',
|
||||
} as TodoInput,
|
||||
},
|
||||
type: HELLO_WORLD_EMBEDDABLE,
|
||||
explicitInput: {
|
||||
id: '2',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>`}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ export class EmbeddableExplorerPlugin implements Plugin<void, void, {}, StartDep
|
|||
uiActionsApi: depsStart.uiActions,
|
||||
basename: params.appBasePath,
|
||||
uiSettingsClient: coreStart.uiSettings,
|
||||
savedObject: coreStart.savedObjects,
|
||||
overlays: coreStart.overlays,
|
||||
navigateToApp: coreStart.application.navigateToApp,
|
||||
embeddableExamples: depsStart.embeddableExamples,
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
EuiCodeBlock,
|
||||
EuiFieldText,
|
||||
EuiForm,
|
||||
EuiFormRow,
|
||||
EuiPanel,
|
||||
EuiText,
|
||||
EuiTextArea,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiSelect,
|
||||
} from '@elastic/eui';
|
||||
import { TodoEmbeddableFactory } from '@kbn/embeddable-examples-plugin/public';
|
||||
import { EmbeddableRenderer } from '@kbn/embeddable-plugin/public';
|
||||
|
||||
interface Props {
|
||||
todoEmbeddableFactory: TodoEmbeddableFactory;
|
||||
}
|
||||
|
||||
interface State {
|
||||
task: string;
|
||||
title: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const ICON_OPTIONS = [
|
||||
{ value: 'beaker', text: 'beaker' },
|
||||
{ value: 'bell', text: 'bell' },
|
||||
{ value: 'bolt', text: 'bolt' },
|
||||
{ value: 'broom', text: 'broom' },
|
||||
{ value: 'bug', text: 'bug' },
|
||||
{ value: 'bullseye', text: 'bullseye' },
|
||||
];
|
||||
|
||||
export class TodoEmbeddableExample extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
icon: 'broom',
|
||||
task: 'Take out the trash',
|
||||
title: 'Trash',
|
||||
};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<EuiPageTemplate.Header pageTitle="Update embeddable state" />
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<>
|
||||
<EuiText>
|
||||
Use <strong>input</strong> prop to update embeddable state.
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiForm>
|
||||
<EuiFormRow label="Title">
|
||||
<EuiFieldText
|
||||
data-test-subj="titleTodo"
|
||||
value={this.state.title}
|
||||
onChange={(ev) => this.setState({ title: ev.target.value })}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
<EuiFormRow label="Icon">
|
||||
<EuiSelect
|
||||
data-test-subj="iconTodo"
|
||||
value={this.state.icon}
|
||||
options={ICON_OPTIONS}
|
||||
onChange={(ev) => this.setState({ icon: ev.target.value })}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
<EuiFormRow label="Task">
|
||||
<EuiTextArea
|
||||
fullWidth
|
||||
resize="horizontal"
|
||||
data-test-subj="taskTodo"
|
||||
value={this.state.task}
|
||||
onChange={(ev) => this.setState({ task: ev.target.value })}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</EuiForm>
|
||||
<EuiSpacer />
|
||||
<EuiPanel data-test-subj="todoEmbeddable" role="figure">
|
||||
<EmbeddableRenderer
|
||||
factory={this.props.todoEmbeddableFactory}
|
||||
input={{
|
||||
id: '1',
|
||||
task: this.state.task,
|
||||
title: this.state.title,
|
||||
icon: this.state.icon,
|
||||
}}
|
||||
/>
|
||||
</EuiPanel>
|
||||
<EuiSpacer />
|
||||
<EuiCodeBlock language="jsx" fontSize="m" paddingSize="m">
|
||||
{`<EmbeddableRenderer
|
||||
factory={this.props.todoEmbeddableFactory}
|
||||
input={{
|
||||
id: '1',
|
||||
task: this.state.task,
|
||||
title: this.state.title,
|
||||
icon: this.state.icon,
|
||||
}}
|
||||
/>`}
|
||||
</EuiCodeBlock>
|
||||
</>
|
||||
</EuiPageTemplate.Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue