UI Component Registry

The UI + plugins can (and should) use our (React) component registry. The registry is shared between plugins, and components can be added, read, used, and overriden.

Registering a component

Any plugin can register a component from a webpack pack (see Webpack/Packs), the recommended name is app/javascript/packs/component-definitions-common.js (-common means the pack gets autoincluded).

ManageIQ.components.addReact('menu.MainMenu', MainMenuComponent);

The name is an arbitrary string, try to keep a package.Name syntax, where package is a topic, like menu, or notifications, or toolbar, where Name is the actual component name.

The component can be any react component.

(ManageIQ is a javascript global.)

Using a component

From a rails haml view

= react('menu.MainMenu', { someProp: "abc", otherProp: @record.id.to_s })

an optional 3rd and 4th argument can be used to override the root element and attributes. By default, the react component will be rendered in a div with a random id.

Note: when passing a database id from rails, always use to_s.

From React

const OtherComponent = ManageIQ.components.getReact('menu.MainMenu');

return <OtherComponent {...props} />

other ways

The toolbars use the component registry for UI modals - see https://github.com/ManageIQ/guides/blob/master/ui/provider_plugin.md#extending-the-toolbars for an example, :component_name is from the registry.

It should be possible to render from angular, by getting the component and calling React.render on a .ng-non-bindable angular element.

Overriding a component

entire component

A component can be fully replaced from a plugin by using the override option for addReact:

ManageIQ.components.addReact('menu.MainMenu', DifferentComponent, { override: true });

(by default, adding an already existing component will throw instead of overriding it).

props

Sometimes, all a plugin needs is to pass extra parameters to an existing component.

That can be achieved by modifying the component in place:

const original = ManageIQ.components.getReact('menu.MainMenu');
original.defaultProps = {
  ...original.defaultProps,
  showLogo: false,
}