Dynamic action configuration (A&E Phase II)

[streamich]

In drilldowns we will allow users to configure the dynamic actions they create. Configuration collection from user is responsibility of an action, as from embeddable's perspective those are just opaque objects—embeddable does not know the structure of configuration objects.

In this issue we need to implement functionality that allows to render UI component defined by the dynamic action to collect a configuration object for that action.

• Create DynamicAction interface that extends Action interface.
• DynamicAction should have CollectConfig attribute, which is a UiComponent component rendered every time we want to create or edit configuration for that dynamic action. CollectConfig should support the following props:
  • config — object or undefined which represents the initial configuration that ConfigInputs should display.
  • onConfig — a callback (config: object | undefined) => void that is called every time config is changed in UI by the user.
    • Should call with object only on valid config.
    • Calling with undefined means "remove config".
• Create react component that can render CollectConfig of dynamic actions.

Example actions that will use this interface:

• DashboardDrilldownAction
• UrlDrilldownAction

Parent issue: #43299

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[stacey-gammon]

IDynamicAction should have ConfigInputs attribute, which is a UiComponent component rendered every time we want to create or edit configuration for that dynamic action.

We might be able to get away without a new UIComponent concept by having actions attached to a CREATE_EDIT_DRILLDOWN_TRIGGER take in a dom node as context. Somethin like:

class ConfigureDrillDownsAction extends Action {
  id: CONFIGURE_DRILLDOWNS;
  execute: ({ embeddable }) => openConfigureDrillDownsFlyout(embeddable);
}
uiActions.attachActionToTrigger({ actionId: CONFIGURE_DRILLDOWNS, triggerId: CONTEXT_MENU_PANEL});

class CreateOrEditDashboardDrilldownAction extends Action {
  id: CREATE_EDIT_DASHBOARD_DRILLDOWNS;
  execute: ({ domNode, actionToEdit, embeddable }: { actionToEdit: NavigateToDashboardAction }) => {
    const onSave = (action: NavigateToDashboardAction) => {
      embeddable.updateInput({ actions: { ...actions, [action.id]: { type: action.type; configuration: JSON.stringify(action.getConfig())} }})
    }
    renderEditor(domNode, actionToEdit, embeddable);
  }
}
uiActions.attachActionToTrigger({ actionId: CREATE_EDIT_DASHBOARD_DRILLDOWNS, triggerId: CREATE_EDIT_DRILLDOWNS_TRIGGER});

export configureDrillDownsFlyout({ embeddable }) {
  const actions = embeddable.getInput().actions;
  const createEditDrilldownActions = uiActionsPlugin.getActionsForTrigger(CREATE_EDIT_DRILLDOWNS_TRIGGER);
   return (
     // First: Show a table of existing actions
     <Table>
     {
       actions.forEach(action => {

         // Grab the right "createEditDrilldownAction" to execute based on the type.
         const createDrillDownTypeForAction = createEditDrilldownActions.find(({ type }) => type === (action as DrillDownAction).getConfig().createEditType);

         return (
           <Row>
            <Cell>action.icon()</Cell>
            <Cell>action.displayName()</Cell>
            <Cell><Button onClick={() => createDrillDownTypeForAction.execute({ domNode: renderCreateOrEditControlsHere, actionToEdit: action, embeddable }})>Edit</Button></Cell>
            <Cell><Button onClick={() => embeddable.updateInput({ actions: { ...actions, [action.id]: undefined }})>Delete</Button></Cell>
           </Row>
         );
        }
     }
     </Table>

     // Below it, show a listing of the types of actions that can be used for drilldowns
     {
       createEditDrilldownActions.forEach(createEditDrilldownAction => (
         <IconList
             icon={createEditDrilldownAction.icon}
             label={createEditDrilldownAction.displayName()}
             onClick={createEditDrilldownAction.execute({ domNode: renderCreateOrEditControlsHere, actionToEdit: undefined, embeddable }) />
         )
     }
     <div ref={renderCreateOrEditControlsHere} />
}

Then there are three actions in this scenario:

• ConfigureDrillDowns - the generic one that shows up int eh context menu of a panel and opens a flyout
• CreateEditDashboardDrilldown - the action that allows the user to create new or edit existing NavigateToDrillDown actions and attach it to an embeddable
• NavigateToDrillDown actions that will be attached to the APPLY_FILTER_TRIGGER action.

End of day, so I haven't thought this fully through, but will circle back to this later.