Dynamic actions

src/dev/storybook/aliases.ts

@@ -25,4 +25,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

@@ -44,7 +44,7 @@ import {
 import { inspectorPluginMock } from 'src/plugins/inspector/public/mocks';
 import { EuiBadge } from '@elastic/eui';
 
-const actionRegistry = new Map<string, Action<object | undefined | string | number>>();
+const actionRegistry = new Map<string, Action>();
 const triggerRegistry = new Map<string, Trigger>();
 const embeddableFactories = new Map<string, EmbeddableFactory>();
 const getEmbeddableFactory: GetEmbeddableFactory = (id: string) => embeddableFactories.get(id);
@@ -213,13 +213,17 @@ const renderInEditModeAndOpenContextMenu = async (
 };
 
 test('HelloWorldContainer in edit mode hides disabledActions', async () => {
-  const action: Action = {
+  const action = {
     id: 'FOO',
     type: 'FOO' as ActionType,
     getIconType: () => undefined,
     getDisplayName: () => 'foo',
     isCompatible: async () => true,
     execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return undefined;
+    },
   };
   const getActions = () => Promise.resolve([action]);
 
@@ -245,13 +249,17 @@ test('HelloWorldContainer in edit mode hides disabledActions', async () => {
 });
 
 test('HelloWorldContainer hides disabled badges', async () => {
-  const action: Action = {
+  const action = {
     id: 'BAR',
     type: 'BAR' as ActionType,
     getIconType: () => undefined,
     getDisplayName: () => 'bar',
     isCompatible: async () => true,
     execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return undefined;
+    },
   };
   const getActions = () => Promise.resolve([action]);
 

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

@@ -245,7 +245,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       new EditPanelAction(this.props.getEmbeddableFactory),
     ];
 
-    const sorted = actions
+    const sorted = (actions as Array<Action<EmbeddableContext>>)
       .concat(extraActions)
       .sort((a: Action<EmbeddableContext>, b: Action<EmbeddableContext>) => {
         const bOrder = b.order || 0;

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

@@ -19,10 +19,13 @@
 
 import { UiComponent } from 'src/plugins/kibana_utils/common';
 import { ActionType, ActionContextMapping } from '../types';
+import { Presentable } from '../util/presentable';
+import { Configurable } from '../util/configurable';
 
 export type ActionByType<T extends ActionType> = Action<ActionContextMapping[T], T>;
 
-export interface Action<Context = {}, T = ActionType> {
+export interface Action<Context extends {} = {}, T = ActionType>
+  extends Partial<Presentable<Context>> {
   /**
    * Determined the order when there is more than one action matched to a trigger.
    * Higher numbers are displayed first.
@@ -72,3 +75,48 @@ export interface Action<Context = {}, T = ActionType> {
    */
   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?: ActionType;
+
+  getHref?(context: Context): string | undefined;
+
+  /**
+   * Executes the action.
+   */
+  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>;

src/plugins/ui_actions/public/actions/action_internal.test.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 { ActionDefinition } from './action';
+import { ActionInternal } from './action_internal';
+import { ActionType } from '../types';
+
+const defaultActionDef: ActionDefinition = {
+  id: 'test-action',
+  execute: jest.fn(),
+};
+
+describe('ActionInternal', () => {
+  test('can instantiate from action definition', () => {
+    const action = new ActionInternal(defaultActionDef);
+    expect(action.id).toBe('test-action');
+  });
+
+  describe('serialize()', () => {
+    test('can serialize very simple action', () => {
+      const action = new ActionInternal(defaultActionDef);
+      const serialized = action.serialize();
+
+      expect(serialized).toMatchObject({
+        id: 'test-action',
+        state: expect.any(Object),
+      });
+    });
+
+    test('can serialize action with modified state', () => {
+      const action = new ActionInternal({
+        ...defaultActionDef,
+        type: 'ACTION_TYPE' as ActionType,
+        order: 11,
+      });
+      action.state.transitions.setConfig({ foo: 'bar' });
+      action.state.transitions.setName('qux');
+
+      const serialized = action.serialize();
+
+      expect(serialized).toMatchObject({
+        id: 'test-action',
+        type: 'ACTION_TYPE',
+        state: {
+          name: 'qux',
+          config: {
+            foo: 'bar',
+          },
+        },
+      });
+    });
+  });
+
+  describe('deserialize', () => {
+    const serialized = {
+      id: 'id',
+      type: 'type',
+      state: {
+        name: 'name',
+        order: 0,
+        config: {
+          foo: 'foo',
+        },
+      },
+    };
+
+    test('can deserialize action state', () => {
+      const action = new ActionInternal({
+        ...defaultActionDef,
+      });
+
+      action.deserialize(serialized);
+
+      expect(action.state.get()).toMatchObject(serialized.state);
+    });
+
+    test('does not overwrite action id and type', () => {
+      const action = new ActionInternal({
+        ...defaultActionDef,
+      });
+
+      action.deserialize(serialized);
+
+      expect(action.id).toBe('test-action');
+      expect(action.type).toBe('');
+    });
+  });
+});