Dynamic actions

src/dev/storybook/aliases.ts

@@ -24,4 +24,5 @@ export const storybookAliases = {
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   siem: 'x-pack/legacy/plugins/siem/scripts/storybook.js',
+  ui_actions: 'src/plugins/ui_actions/scripts/storybook.js',
 };

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -25,7 +25,7 @@ import { nextTick } from 'test_utils/enzyme_helpers';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { I18nProvider } from '@kbn/i18n/react';
 import { CONTEXT_MENU_TRIGGER } from '../triggers';
-import { Action, UiActionsStart } from 'src/plugins/ui_actions/public';
+import { Action, UiActionsStart, UiActionsActionContract } from 'src/plugins/ui_actions/public';
 import { Trigger, GetEmbeddableFactory, ViewMode } from '../types';
 import { EmbeddableFactory, isErrorEmbeddable } from '../embeddables';
 import { EmbeddablePanel } from './embeddable_panel';
@@ -213,14 +213,14 @@ const renderInEditModeAndOpenContextMenu = async (
 };
 
 test('HelloWorldContainer in edit mode hides disabledActions', async () => {
-  const action = {
+  const action = ({
     id: 'FOO',
     type: 'FOO',
     getIconType: () => undefined,
     getDisplayName: () => 'foo',
     isCompatible: async () => true,
     execute: async () => {},
-  };
+  } as any) as UiActionsActionContract<any>;
   const getActions = () => Promise.resolve([action]);
 
   const { component: component1 } = await renderInEditModeAndOpenContextMenu(
@@ -245,14 +245,14 @@ test('HelloWorldContainer in edit mode hides disabledActions', async () => {
 });
 
 test('HelloWorldContainer hides disabled badges', async () => {
-  const action = {
+  const action = ({
     id: 'BAR',
     type: 'BAR',
     getIconType: () => undefined,
     getDisplayName: () => 'bar',
     isCompatible: async () => true,
     execute: async () => {},
-  };
+  } as any) as UiActionsActionContract<any>;
   const getActions = () => Promise.resolve([action]);
 
   const { component: component1 } = await renderInEditModeAndOpenContextMenu(

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -245,11 +245,13 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       new EditPanelAction(this.props.getEmbeddableFactory),
     ];
 
-    const sorted = actions.concat(extraActions).sort((a: Action, b: Action) => {
-      const bOrder = b.order || 0;
-      const aOrder = a.order || 0;
-      return bOrder - aOrder;
-    });
+    const sorted = (actions as Array<Action<{ embeddable: IEmbeddable }>>)
+      .concat(extraActions)
+      .sort((a, b) => {
+        const bOrder = b.order || 0;
+        const aOrder = a.order || 0;
+        return bOrder - aOrder;
+      });
 
     return await buildContextMenuForActions({
       actions: sorted,

src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.ts

@@ -24,15 +24,58 @@ import { Comparator, Connect, StateContainer, UnboxState } from './types';
 
 const { useContext, useLayoutEffect, useRef, createElement: h } = React;
 
+/**
+ * Returns the latest state of a state container.
+ *
+ * @param container State container which state to track.
+ */
+export const useContainerState = <Container extends StateContainer<any, any>>(
+  container: Container
+): UnboxState<Container> => useObservable(container.state$, container.get());
+
+/**
+ * Apply selector to state container to extract only needed information. Will
+ * re-render your component only when the section changes.
+ *
+ * @param container State container which state to track.
+ * @param selector Function used to pick parts of state.
+ * @param comparator Comparator function used to memoize previous result, to not
+ *    re-render React component if state did not change. By default uses
+ *    `fast-deep-equal` package.
+ */
+export const useContainerSelector = <Container extends StateContainer<any, any>, Result>(
+  container: Container,
+  selector: (state: UnboxState<Container>) => Result,
+  comparator: Comparator<Result> = defaultComparator
+): Result => {
+  const { state$, get } = container;
+  const lastValueRef = useRef<Result>(get());
+  const [value, setValue] = React.useState<Result>(() => {
+    const newValue = selector(get());
+    lastValueRef.current = newValue;
+    return newValue;
+  });
+  useLayoutEffect(() => {
+    const subscription = state$.subscribe((currentState: UnboxState<Container>) => {
+      const newValue = selector(currentState);
+      if (!comparator(lastValueRef.current, newValue)) {
+        lastValueRef.current = newValue;
+        setValue(newValue);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [state$, comparator]);
+  return value;
+};
+
 export const createStateContainerReactHelpers = <Container extends StateContainer<any, any>>() => {
   const context = React.createContext<Container>(null as any);
 
   const useContainer = (): Container => useContext(context);
 
   const useState = (): UnboxState<Container> => {
-    const { state$, get } = useContainer();
-    const value = useObservable(state$, get());
-    return value;
+    const container = useContainer();
+    return useContainerState(container);
   };
 
   const useTransitions: () => Container['transitions'] = () => useContainer().transitions;
@@ -41,24 +84,8 @@ export const createStateContainerReactHelpers = <Container extends StateContaine
     selector: (state: UnboxState<Container>) => Result,
     comparator: Comparator<Result> = defaultComparator
   ): Result => {
-    const { state$, get } = useContainer();
-    const lastValueRef = useRef<Result>(get());
-    const [value, setValue] = React.useState<Result>(() => {
-      const newValue = selector(get());
-      lastValueRef.current = newValue;
-      return newValue;
-    });
-    useLayoutEffect(() => {
-      const subscription = state$.subscribe((currentState: UnboxState<Container>) => {
-        const newValue = selector(currentState);
-        if (!comparator(lastValueRef.current, newValue)) {
-          lastValueRef.current = newValue;
-          setValue(newValue);
-        }
-      });
-      return () => subscription.unsubscribe();
-    }, [state$, comparator]);
-    return value;
+    const container = useContainer();
+    return useContainerSelector<Container, Result>(container, selector, comparator);
   };
 
   const connect: Connect<UnboxState<Container>> = mapStateToProp => component => props =>

src/plugins/ui_actions/public/actions/action.ts

@@ -17,49 +17,89 @@
  * under the License.
  */
 
-import { UiComponent } from 'src/plugins/kibana_utils/common';
-
-export interface Action<ActionContext extends {} = {}> {
-  /**
-   * Determined the order when there is more than one action matched to a trigger.
-   * Higher numbers are displayed first.
-   */
-  order?: number;
+import { Presentable } from '../util/presentable';
+import { Configurable } from '../util/configurable';
 
+/**
+ * Legacy action interface, do not use. Use @type {ActionDefinition} and
+ * @type {ActionInternal} instead.
+ *
+ * @deprecated
+ */
+export interface Action<Context extends {} = {}> extends Partial<Presentable<Context>> {
   id: string;
 
   readonly type: string;
 
   /**
    * Optional EUI icon type that can be displayed along with the title.
    */
-  getIconType(context: ActionContext): string | undefined;
+  getIconType(context: Context): string | undefined;
 
   /**
    * Returns a title to be displayed to the user.
    * @param context
    */
-  getDisplayName(context: ActionContext): string;
-
-  /**
-   * `UiComponent` to render when displaying this action as a context menu item.
-   * If not provided, `getDisplayName` will be used instead.
-   */
-  MenuItem?: UiComponent<{ context: ActionContext }>;
+  getDisplayName(context: Context): string;
 
   /**
    * Returns a promise that resolves to true if this action is compatible given the context,
    * otherwise resolves to false.
    */
-  isCompatible(context: ActionContext): Promise<boolean>;
+  isCompatible(context: Context): Promise<boolean>;
 
   /**
    * If this returns something truthy, this is used in addition to the `execute` method when clicked.
    */
-  getHref?(context: ActionContext): string | undefined;
+  getHref?(context: Context): string | undefined;
+
+  /**
+   * Executes the action.
+   */
+  execute(context: Context): Promise<void>;
+}
+
+/**
+ * A convenience interface used to register an action.
+ */
+export interface ActionDefinition<
+  Context extends object = object,
+  Config extends object | undefined = undefined
+> extends Partial<Presentable<Context>>, Partial<Configurable<Config, Context>> {
+  /**
+   * ID of the action that uniquely identifies this action in the actions registry.
+   */
+  readonly id: string;
+
+  /**
+   * ID of the factory for this action. Used to construct dynamic actions.
+   */
+  readonly type?: string;
+
+  getHref?(context: Context): string | undefined;
 
   /**
    * Executes the action.
    */
-  execute(context: ActionContext): Promise<void>;
+  execute(context: Context): Promise<void>;
 }
+
+export type AnyActionDefinition = ActionDefinition<any, any>;
+export type ActionContext<A> = A extends ActionDefinition<infer Context, any> ? Context : never;
+export type ActionConfig<A> = A extends ActionDefinition<any, infer Config> ? Config : never;
+
+/**
+ * A convenience interface used to register a dynamic action.
+ *
+ * A dynamic action is one that can be create by user and registered into the
+ * actions registry at runtime. User can also provide custom config for this
+ * action. And dynamic actions can be serialized for storage and deserialized
+ * back.
+ */
+export type DynamicActionDefinition<
+  Context extends object = object,
+  Config extends object | undefined = undefined
+> = ActionDefinition<Context, Config> &
+  Required<Pick<ActionDefinition<Context, Config>, 'CollectConfig' | 'defaultConfig' | 'type'>>;
+
+export type AnyDynamicActionDefinition = DynamicActionDefinition<any, any>;

src/plugins/ui_actions/public/actions/action_contract.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { ActionInternal } from './action_internal';
+import { AnyActionDefinition } from './action';
+
+/**
+ * Action representation that is exposed out to other plugins.
+ */
+export type ActionContract<A extends AnyActionDefinition> = Pick<
+  ActionInternal<A>,
+  | 'id'
+  | 'type'
+  | 'order'
+  | 'getIconType'
+  | 'getDisplayName'
+  | 'isCompatible'
+  | 'getHref'
+  | 'execute'
+>;
+
+export type AnyActionContract = ActionContract<any>;