Enhancements pattern without ids

examples/enhancements_pattern_explorer/public/app.tsx

@@ -20,46 +20,61 @@ 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';
 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<Greeting | undefined>(defaultGreeting);
   return (
     <EuiPageContent>
       <EuiText>
         <h1>Enhancements pattern</h1>
         This explorer shows how one plugin can add enhancements via a{' '}
         <EuiCode>setCustomProvider</EuiCode> pattern. If you run kibana with{' '}
-        <EuiCode>syarn start --run-examples</EuiCode> and click the Greet me button, you should see
-        a modal. This is the enhanced functionality. If you set{' '}
+        <EuiCode>yarn start --run-examples</EuiCode> and click the Greet me button, you should see a
+        modal. This is the enhanced functionality. If you set{' '}
         <EuiCode>greetingEnhanced.enabled: false</EuiCode> in your kibana.yml and then run this
         example again you should only see a simple alert window, the unenhanced version.
       </EuiText>
       <EuiSpacer />
-      <EuiSelect
-        value={greeterId}
-        onChange={e => setGreeterId(e.target.value)}
-        options={props.getGreeterIds().map(id => ({
-          value: id,
-          text: id,
-        }))}
+      <EuiComboBox<Greeting>
+        selectedOptions={selectedGreeter ? [greeterToComboOption(selectedGreeter)] : undefined}
+        onChange={e => {
+          setSelectedGreeter(e[0] ? e[0].value : undefined);
+        }}
+        options={greetersAsOptions}
+        singleSelection={{ asPlainText: true }}
       />
       <EuiFieldText
         placeholder="What is your name?"
         value={name}
         onChange={e => setName(e.target.value)}
       />
       <EuiButton
-        disabled={greeterId === '' || name === ''}
-        onClick={() => props.greetWithGreeter(greeterId, name)}
+        disabled={selectedGreeter === undefined || name === ''}
+        onClick={() => {
+          if (selectedGreeter) {
+            props.greetWithGreeter(selectedGreeter, name);
+          }
+        }}
       >
         Greet me
       </EuiButton>

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<void, void, SetupDependencies, StartDependencies> {
+  implements
+    Plugin<void, EnhancedPatternExplorerPluginStart, SetupDependencies, StartDependencies> {
+  firstGreeting?: () => Greeting;
+
   setup(core: CoreSetup<StartDependencies>, { 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);
+        }
+      },
+    };
+  }
 }

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(),
 });

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<GreetingSetup, GreetingStart> {
-  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),
     };
   }
 }

examples/greeting_enhanced/public/plugin.tsx

@@ -36,6 +36,7 @@ export class GreetingEnhancedPlugin implements Plugin<void, void, SetupDependenc
         this.getStartServices().overlays.openModal(
           toMountPoint(<EuiModalBody>{`${def.salutation} ${name}${def.punctuation}`}</EuiModalBody>)
         ),
+      label: def.id,
     }));
   }