Plugins: Add a new UI Extension type

[leventebalogh]

What changed?

This PR adds a new type of UI extension that can be used to register React components.
Using these extensions plugins will be able to extend new parts of the Grafana UI.

Why components vs elements?

Although we also experimented with using React elements, we have chosen to use components in the end. With elements we needed to pass down the context object through the configure() function, and this needed more boilerplate. On the other hand using components we can just pass the whole context object as a component prop, which makes the call-site (the plugin registering the extension) much simpler. This also eliminated the need of the configure() function entirely.

Where can it be used?

This PR only adds the ability to register component-type extensions, but doesn't create a new extension point that handles them. This PR (based on this one) on the other hand adds a new extension point to the datasources config page.

How to register a component extension?

You will be able to do the following in your app plugin:

// module.ts
const plugin = new AppPlugin<{}>()
    .setRootPage(App)
    // ...
    ..configureExtensionComponent({
        title: 'Title of the extension',
        description: 'Description of the extension',
        extensionPointId: '<EXTENSION-POINT-ID>',
        component: MyExtensionComponent,
   });


// MyExtensionComponent.tsx
export const MyExtensionComponent = ({ context }: Props) => {

    // The context object varies by extension point
    return <div>Hello! { context.foo }</div>;
});

[leventebalogh]

Levitate breaking changes
These are because the PluginExtension type was changed (not removed). It shouldn't be a breaking change though, as the new type behind that name should be seamlessly usable for the previous scenarios (became wider).

[mckn]

I think it looks good! Great work on this! Adding a couple of questions.

[mckn]

We can probably fix these by doing a type assertion when adding the configuration. But lets do that in a follow up PR.

[mckn]

I think it would be worth doing some repetition instead of creating the types out of other types with Pick. But also something we can do in a follow up PR.

[leventebalogh]

I think that's a good point, like this it's becoming quite cryptic 👍

[leventebalogh]

I tidied them up in this commit, ket me know what you think?

[mckn]

Spot on! Great work on this.

[jackw]

LGTM! 🚀

[mckn]

LGTM