Plugins: Share the plugin context with apps and ui-extensions

[leventebalogh]

What changed?

This PR is basically sharing the PluginContext with app plugins and UI-extension modal components, so they can get hold of the plugin meta information in the following way:

import { usePluginContext } from '@grafana/data';

// This can either be a component inside of an app plugin, or the component being used 
// for rendering the modal. 
const MyComponent = () => {
    const { meta } = usePluginContext();

    return (<div>{ meta.info.version }</div>);
}

Also introduced new hooks:

import { usePluginMeta, usePluginJsonData, usePluginVersion } from '@grafana/data';

// Anywhere in your app plugin
const meta = usePluginMeta();
const jsonData = usePluginJsonData();
const pluginVersion = usePluginVersion();

---

Notes for the reviewer

• Pre-fetching: we are now pre-fetching the meta information from the API for each pre-loaded app plugin. We are not "awaiting" these, so we don't block the booting process of the Grafana app. The same meta information for panel plugins is already present in the GrafanaBootConfig, so that would be the other option, to have app plugin meta on the config instead.

[mckn]

LGTM!!

[jackw]

Lovely stuff! 🚀

[sunker]

This is neat! Didn't know we had a usePluginContext hook. I wonder if plugin authors in general are aware of this?

[mckn]

This is neat! Didn't know we had a usePluginContext hook. I wonder if plugin authors in general are aware of this?

Probably not, something we added a while back but without any proper documentation. It is being used under the hood by the tracking hook. We should probably improve the docs around this.

[mckn]

@leventebalogh we should probably also add a wrapper around the components being shared via pluginExtensionCoponents so these hooks can be used there as well. But lets do that in a follow up PR.