diff --git a/examples/enhancements_pattern_explorer/public/app.tsx b/examples/enhancements_pattern_explorer/public/app.tsx index 0b99395aedaad..06c1eebd56eb2 100644 --- a/examples/enhancements_pattern_explorer/public/app.tsx +++ b/examples/enhancements_pattern_explorer/public/app.tsx @@ -20,7 +20,7 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { EuiPageContent } from '@elastic/eui'; import { EuiFieldText } from '@elastic/eui'; -import { EuiSelect } from '@elastic/eui'; +import { EuiComboBox } from '@elastic/eui'; import { AppMountParameters } from 'kibana/public'; import { EuiButton } from '@elastic/eui'; @@ -28,29 +28,40 @@ import { EuiText } from '@elastic/eui'; import { EuiCode } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; import { Services } from './services'; +import { Greeting } from '../../greeting/public'; + +function greeterToComboOption(greeter: Greeting) { + return { + value: greeter, + label: greeter.label, + }; +} function EnhancementsPatternApp(props: Services) { const [name, setName] = useState(''); - const [greeterId, setGreeterId] = useState('Casual'); + const greetersAsOptions = props.getGreeterObjects().map(greeter => greeterToComboOption(greeter)); + const defaultGreeting = props.getGreeterObjects()[0]; + + const [selectedGreeter, setSelectedGreeter] = useState(defaultGreeting); return (

Enhancements pattern

This explorer shows how one plugin can add enhancements via a{' '} setCustomProvider pattern. If you run kibana with{' '} - syarn start --run-examples and click the Greet me button, you should see - a modal. This is the enhanced functionality. If you set{' '} + yarn start --run-examples and click the Greet me button, you should see a + modal. This is the enhanced functionality. If you set{' '} greetingEnhanced.enabled: false in your kibana.yml and then run this example again you should only see a simple alert window, the unenhanced version.
- setGreeterId(e.target.value)} - options={props.getGreeterIds().map(id => ({ - value: id, - text: id, - }))} + + selectedOptions={selectedGreeter ? [greeterToComboOption(selectedGreeter)] : undefined} + onChange={e => { + setSelectedGreeter(e[0] ? e[0].value : undefined); + }} + options={greetersAsOptions} + singleSelection={{ asPlainText: true }} /> setName(e.target.value)} /> props.greetWithGreeter(greeterId, name)} + disabled={selectedGreeter === undefined || name === ''} + onClick={() => { + if (selectedGreeter) { + props.greetWithGreeter(selectedGreeter, name); + } + }} > Greet me diff --git a/examples/enhancements_pattern_explorer/public/plugin.ts b/examples/enhancements_pattern_explorer/public/plugin.ts index 4f60e38d645f8..7855c74ddbc28 100644 --- a/examples/enhancements_pattern_explorer/public/plugin.ts +++ b/examples/enhancements_pattern_explorer/public/plugin.ts @@ -19,7 +19,7 @@ import { CoreSetup, AppMountParameters, Plugin } from 'kibana/public'; -import { GreetingStart, GreetingSetup } from 'examples/greeting/public'; +import { GreetingStart, GreetingSetup, Greeting } from 'examples/greeting/public'; import { getServices } from './services'; interface SetupDependencies { @@ -30,12 +30,23 @@ interface StartDependencies { greeting: GreetingStart; } +interface EnhancedPatternExplorerPluginStart { + enhancedFirstGreeting: (name: string) => void; +} + export class EnhancedPatternExplorerPlugin - implements Plugin { + implements + Plugin { + firstGreeting?: () => Greeting; + setup(core: CoreSetup, { greeting }: SetupDependencies) { - greeting.registerGreeting({ id: 'Casual', salutation: 'Hey there', punctuation: '.' }); - greeting.registerGreeting({ id: 'Excited', salutation: 'Hi', punctuation: '!!' }); - greeting.registerGreeting({ id: 'Formal', salutation: 'Hello ', punctuation: '.' }); + this.firstGreeting = greeting.registerGreetingDefinition({ + id: 'Casual', + salutation: 'Hey there', + punctuation: '.', + }); + greeting.registerGreetingDefinition({ id: 'Excited', salutation: 'Hi', punctuation: '!!' }); + greeting.registerGreetingDefinition({ id: 'Formal', salutation: 'Hello ', punctuation: '.' }); core.application.register({ id: 'enhancingmentsPattern', @@ -48,5 +59,16 @@ export class EnhancedPatternExplorerPlugin }); } - start() {} + start() { + // an example of registering a greeting and returning a reference to the + // plain or enhanced result + setTimeout(() => this.firstGreeting && this.firstGreeting().greetMe('code ninja'), 2000); + return { + enhancedFirstGreeting: (name: string) => { + if (this.firstGreeting) { + this.firstGreeting().greetMe(name); + } + }, + }; + } } diff --git a/examples/enhancements_pattern_explorer/public/services.ts b/examples/enhancements_pattern_explorer/public/services.ts index 07304f1969012..7f2f73384e210 100644 --- a/examples/enhancements_pattern_explorer/public/services.ts +++ b/examples/enhancements_pattern_explorer/public/services.ts @@ -17,11 +17,12 @@ * under the License. */ -import { GreetingStart } from '../../greeting/public'; +import { GreetingStart, Greeting } from '../../greeting/public'; export interface Services { - greetWithGreeter: (id: string, name: string) => void; + greetWithGreeter: (greeting: Greeting, name: string) => void; getGreeterIds: () => string[]; + getGreeterObjects: () => Greeting[]; } /** @@ -30,15 +31,7 @@ export interface Services { * @param dependencies */ export const getServices = (dependencies: { greetingServices: GreetingStart }): Services => ({ - greetWithGreeter: (greeterId: string, name: string) => { - const greeting = dependencies.greetingServices.getGreeting(greeterId); - - if (!greeting) { - throw new Error(`No Greeter registered with id ${greeterId}`); - } - - greeting.greetMe(name); - }, - + greetWithGreeter: (greeting: Greeting, name: string) => greeting.greetMe(name), getGreeterIds: () => dependencies.greetingServices.getRegisteredGreetings(), + getGreeterObjects: () => dependencies.greetingServices.getRegisteredGreetingsAsObjects(), }); diff --git a/examples/greeting/public/plugin.ts b/examples/greeting/public/plugin.ts index 6dc7d337e0d26..476904a93b5a2 100644 --- a/examples/greeting/public/plugin.ts +++ b/examples/greeting/public/plugin.ts @@ -27,44 +27,46 @@ export interface GreetingDefinition { export interface Greeting { greetMe: (name: string) => void; + label: string; } type GreetingProvider = (def: GreetingDefinition) => Greeting; const defaultGreetingProvider: GreetingProvider = (def: GreetingDefinition) => ({ greetMe: (name: string) => alert(`${def.salutation} ${name}${def.punctuation}`), + label: def.id, }); export interface GreetingStart { getGreeting: (id: string) => Greeting; getRegisteredGreetings: () => string[]; + getRegisteredGreetingsAsObjects: () => Greeting[]; } export interface GreetingSetup { setCustomProvider: (customProvider: GreetingProvider) => void; - registerGreeting: (greetingDefinition: GreetingDefinition) => void; + registerGreetingDefinition: (greetingDefinition: GreetingDefinition) => () => Greeting; } export class GreetingPlugin implements Plugin { - private greetings: { [key: string]: Greeting } = {}; private greetingDefinitions: { [key: string]: GreetingDefinition } = {}; private greetingProvider: GreetingProvider = defaultGreetingProvider; setup = () => ({ setCustomProvider: (customProvider: GreetingProvider) => (this.greetingProvider = customProvider), - registerGreeting: (greetingDefinition: GreetingDefinition) => - (this.greetingDefinitions[greetingDefinition.id] = greetingDefinition), + registerGreetingDefinition: (greetingDefinition: GreetingDefinition) => { + this.greetingDefinitions[greetingDefinition.id] = greetingDefinition; + return () => this.greetingProvider(greetingDefinition); + }, }); start() { - Object.values(this.greetingDefinitions).forEach( - greetingDefinition => - (this.greetings[greetingDefinition.id] = this.greetingProvider(greetingDefinition)) - ); return { - getGreeting: (id: string) => this.greetings[id], - getRegisteredGreetings: () => Object.keys(this.greetings), + getGreeting: (id: string) => this.greetingProvider(this.greetingDefinitions[id]), + getRegisteredGreetings: () => Object.keys(this.greetingDefinitions), + getRegisteredGreetingsAsObjects: () => + Object.values(this.greetingDefinitions).map(this.greetingProvider), }; } } diff --git a/examples/greeting_enhanced/public/plugin.tsx b/examples/greeting_enhanced/public/plugin.tsx index 554cfef9a6d26..92401db39a037 100644 --- a/examples/greeting_enhanced/public/plugin.tsx +++ b/examples/greeting_enhanced/public/plugin.tsx @@ -36,6 +36,7 @@ export class GreetingEnhancedPlugin implements Plugin{`${def.salutation} ${name}${def.punctuation}`}) ), + label: def.id, })); }