UiComponent

[streamich]

Summary

• Introduces UiComponent interface.
• Adds uiToReactComponent function.
• Adds reactToUiComponent function.
• Adds ability for IAction to render arbitrary HTML in context menu.
• Added needed functionality to EUI in a separate PR.

Run embeddable test samples:

yarn start --plugin-path test/plugin_functional/plugins/kbn_tp_embeddable_explorer/

Open context menu, see secret badge next to Hello world! action:

This will also allow us to render Edit button in drilldowns:

---

Dev Docs

UiComponent interface was added to kibana_utils plugin. UiComponent represents a user interface building block, like a React component, but UiComponent does not have to be implemented in React—it can be implemented in plain JS or React, or Angular, etc.

In many places in Kibana we want to be agnostic to frontend view library, i.e. instead of exposing React-specific APIs we want to expose APIs that are orthogonal to any rendering library. UiComponent interface represents such UI components. UI component receives a DOM element and props through render() method, the render() method can be called many times.

export type UiComponent<Props extends object = object> = () => {
  render(el: HTMLElement, props: Props): void;
  unmount?(): void;
};

Although Kibana aims to be library agnostic, Kibana itself is written in React, therefore UiComponent is designed such that it maps directly to a functional React component: UiCompnent interface corresponds to React.ComponentType type and UiCompnent props map to React component props.

To help use UiComponent interface in the codebase uiToReactComponent and reactToUiComponent helper functions were added to kibana_react plugin, they transform a UiComponent into a React component and vice versa, respectively.

const uiToReactComponent: (comp: UiComponent) => React.ComponentType;
const reactToUiComponent: (comp: React.ComponentType) => UiComponent;

[elasticmachine]

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

[streamich]

@elasticmachine merge upstream

[stacey-gammon]

lgtm!

[mattkime]

nit: would prefer explicit exports

[mattkime]

I've read through the code buy should probably talk to @streamich to make sure my understanding of the code is correct. I'm a little fuzzy on why the interfaces are configured as they are although I see what they do.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 740c89e

History

• 💔 Build #24327 failed e5024de
• 💚 Build #24047 succeeded 8151b3b
• 💚 Build #23964 succeeded 8ab0998
• 💚 Build #23866 succeeded dc8de46
• 💚 Build #23859 succeeded f977044

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream