IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Plugins: App plugins running inside a sandbox div will have height 100% (#71453)

Browse Source
This commit is contained in:
Esteban Beltran 2023-07-13 14:59:20 +02:00 committed by GitHub
parent 98921c072a
commit 78efef4ac0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/plugins/sandbox/sandbox_components.tsx
View File

@ -1,7 +1,7 @@
import { isFunction } from 'lodash'; import { isFunction } from 'lodash';
import React, { ComponentType, FC } from 'react'; import React, { ComponentType, FC } from 'react';
import { PluginConfigPage, PluginExtensionConfig, PluginMeta } from '@grafana/data'; import { PluginConfigPage, PluginExtensionConfig, PluginMeta, PluginType } from '@grafana/data';
import { SandboxedPluginObject } from './types'; import { SandboxedPluginObject } from './types';
import { isSandboxedPluginObject } from './utils'; import { isSandboxedPluginObject } from './utils';
@ -40,21 +40,21 @@ export async function sandboxPluginComponents(
// wrap panel component // wrap panel component
if (Reflect.has(pluginObject, 'panel')) { if (Reflect.has(pluginObject, 'panel')) {
Reflect.set(pluginObject, 'panel', withSandboxWrapper(Reflect.get(pluginObject, 'panel'), meta.id)); Reflect.set(pluginObject, 'panel', withSandboxWrapper(Reflect.get(pluginObject, 'panel'), meta));
} }
// wrap datasource components // wrap datasource components
if (Reflect.has(pluginObject, 'components')) { if (Reflect.has(pluginObject, 'components')) {
const components: Record<string, ComponentType> = Reflect.get(pluginObject, 'components'); const components: Record<string, ComponentType> = Reflect.get(pluginObject, 'components');
Object.entries(components).forEach(([key, value]) => { Object.entries(components).forEach(([key, value]) => {
Reflect.set(components, key, withSandboxWrapper(value, meta.id)); Reflect.set(components, key, withSandboxWrapper(value, meta));
}); });
Reflect.set(pluginObject, 'components', components); Reflect.set(pluginObject, 'components', components);
} }
// wrap app components // wrap app components
if (Reflect.has(pluginObject, 'root')) { if (Reflect.has(pluginObject, 'root')) {
Reflect.set(pluginObject, 'root', withSandboxWrapper(Reflect.get(pluginObject, 'root'), meta.id)); Reflect.set(pluginObject, 'root', withSandboxWrapper(Reflect.get(pluginObject, 'root'), meta));
} }
// extension components // extension components
@ -62,7 +62,7 @@ export async function sandboxPluginComponents(
const extensions: PluginExtensionConfig[] = Reflect.get(pluginObject, 'extensionConfigs'); const extensions: PluginExtensionConfig[] = Reflect.get(pluginObject, 'extensionConfigs');
for (const extension of extensions) { for (const extension of extensions) {
if (Reflect.has(extension, 'component')) { if (Reflect.has(extension, 'component')) {
Reflect.set(extension, 'component', withSandboxWrapper(Reflect.get(extension, 'component'), meta.id)); Reflect.set(extension, 'component', withSandboxWrapper(Reflect.get(extension, 'component'), meta));
} }
} }
Reflect.set(pluginObject, 'extensionConfigs', extensions); Reflect.set(pluginObject, 'extensionConfigs', extensions);
@ -77,7 +77,7 @@ export async function sandboxPluginComponents(
} }
Reflect.set(configPages, key, { Reflect.set(configPages, key, {
...value, ...value,
body: withSandboxWrapper(value.body, meta.id), body: withSandboxWrapper(value.body, meta),
}); });
} }
Reflect.set(pluginObject, 'configPages', configPages); Reflect.set(pluginObject, 'configPages', configPages);
@ -88,11 +88,11 @@ export async function sandboxPluginComponents(
const withSandboxWrapper = <P extends object>( const withSandboxWrapper = <P extends object>(
WrappedComponent: ComponentType<P>, WrappedComponent: ComponentType<P>,
pluginId: string pluginMeta: PluginMeta
): React.MemoExoticComponent<FC<P>> => { ): React.MemoExoticComponent<FC<P>> => {
const WithWrapper = React.memo((props: P) => { const WithWrapper = React.memo((props: P) => {
return ( return (
<div data-plugin-sandbox={pluginId}> <div data-plugin-sandbox={pluginMeta.id} style={{ height: pluginMeta.type === PluginType.app ? '100%' : 'auto' }}>
<WrappedComponent {...props} /> <WrappedComponent {...props} />
</div> </div>
); );