import { render, screen, waitFor } from '@testing-library/react'; import { type Unsubscribable } from 'rxjs'; import { dateTime, usePluginContext, PluginLoadingStrategy } from '@grafana/data'; import { config, AppPluginConfig } from '@grafana/runtime'; import appEvents from 'app/core/app_events'; import { ShowModalReactEvent } from 'app/types/events'; import { log } from './logs/log'; import { resetLogMock } from './logs/testUtils'; import { deepFreeze, handleErrorsInFn, getReadOnlyProxy, createOpenModalFunction, wrapWithPluginContext, getExtensionPointPluginDependencies, getExposedComponentPluginDependencies, getAppPluginConfigs, getAppPluginIdFromExposedComponentId, getAppPluginDependencies, getExtensionPointPluginMeta, getMutationObserverProxy, writableProxy, isMutationObserverProxy, } from './utils'; jest.mock('app/features/plugins/pluginSettings', () => ({ ...jest.requireActual('app/features/plugins/pluginSettings'), getPluginSettings: () => Promise.resolve({ info: { version: '1.0.0' }, id: 'test-plugin' }), })); describe('Plugin Extensions / Utils', () => { const originalEnv = config.buildInfo.env; beforeEach(() => { jest.spyOn(log, 'error').mockImplementation(() => {}); jest.spyOn(log, 'warning').mockImplementation(() => {}); jest.spyOn(log, 'debug').mockImplementation(() => {}); jest.spyOn(log, 'info').mockImplementation(() => {}); jest.spyOn(log, 'trace').mockImplementation(() => {}); jest.spyOn(log, 'fatal').mockImplementation(() => {}); }); afterEach(() => { jest.resetAllMocks(); config.buildInfo.env = originalEnv; }); describe('deepFreeze()', () => { test('should not fail when called with primitive values', () => { // Although the type system doesn't allow to call it with primitive values, it can happen that the plugin just ignores these errors. // In these cases, we would like to make sure that the function doesn't fail. // @ts-ignore expect(deepFreeze(1)).toBe(1); // @ts-ignore expect(deepFreeze('foo')).toBe('foo'); // @ts-ignore expect(deepFreeze(true)).toBe(true); // @ts-ignore expect(deepFreeze(false)).toBe(false); // @ts-ignore expect(deepFreeze(undefined)).toBe(undefined); // @ts-ignore expect(deepFreeze(null)).toBe(null); }); test('should freeze an object so it cannot be overriden', () => { const obj = { a: 1, b: '2', c: true, }; const frozen = deepFreeze(obj); expect(Object.isFrozen(frozen)).toBe(true); expect(() => { frozen.a = 234; }).toThrow(TypeError); }); test('should freeze the primitive properties of an object', () => { const obj = { a: 1, b: '2', c: true, }; const frozen = deepFreeze(obj); expect(Object.isFrozen(frozen)).toBe(true); expect(() => { frozen.a = 2; frozen.b = '3'; frozen.c = false; }).toThrow(TypeError); }); test('should return the same object (but frozen)', () => { const obj = { a: 1, b: '2', c: true, d: { e: { f: 'foo', }, }, }; const frozen = deepFreeze(obj); expect(Object.isFrozen(frozen)).toBe(true); expect(frozen).toEqual(obj); }); test('should freeze the nested object properties', () => { const obj = { a: 1, b: { c: { d: 2, e: { f: 3, }, }, }, }; const frozen = deepFreeze(obj); // Check if the object is frozen expect(Object.isFrozen(frozen)).toBe(true); // Trying to override a primitive property -> should fail expect(() => { frozen.a = 2; }).toThrow(TypeError); // Trying to override an underlying object -> should fail expect(Object.isFrozen(frozen.b)).toBe(true); expect(() => { // @ts-ignore frozen.b = {}; }).toThrow(TypeError); // Trying to override deeply nested properties -> should fail expect(() => { frozen.b.c.e.f = 12345; }).toThrow(TypeError); }); test('should not mutate the original object', () => { const obj = { a: 1, b: { c: { d: 2, e: { f: 3, }, }, }, }; deepFreeze(obj); // We should still be able to override the original object's properties expect(Object.isFrozen(obj)).toBe(false); expect(() => { obj.b.c.d = 12345; expect(obj.b.c.d).toBe(12345); }).not.toThrow(); }); test('should work with nested arrays as well', () => { const obj = { a: 1, b: { c: { d: [{ e: { f: 1 } }], }, }, }; const frozen = deepFreeze(obj); // Should be still possible to override the original object expect(() => { obj.b.c.d[0].e.f = 12345; expect(obj.b.c.d[0].e.f).toBe(12345); }).not.toThrow(); // Trying to override the frozen object throws a TypeError expect(() => { frozen.b.c.d[0].e.f = 6789; }).toThrow(); // The original object should not be mutated expect(obj.b.c.d[0].e.f).toBe(12345); expect(frozen.b.c.d).toHaveLength(1); expect(frozen.b.c.d[0].e.f).toBe(1); }); test('should not blow up when called with an object that contains cycles', () => { const obj = { a: 1, b: { c: 123, }, }; // @ts-ignore obj.b.d = obj; let frozen: typeof obj; // Check if it does not throw due to the cycle in the object expect(() => { frozen = deepFreeze(obj); }).not.toThrow(); // Check if it did freeze the object // @ts-ignore expect(Object.isFrozen(frozen)).toBe(true); // @ts-ignore expect(Object.isFrozen(frozen.b)).toBe(true); // @ts-ignore expect(Object.isFrozen(frozen.b.d)).toBe(true); }); }); describe('handleErrorsInFn()', () => { test('should catch errors thrown by the provided function and print them as console warnings', () => { global.console.warn = jest.fn(); expect(() => { const fn = handleErrorsInFn((foo: string) => { throw new Error('Error: ' + foo); }); fn('TEST'); // Logs the errors expect(console.warn).toHaveBeenCalledWith('Error: TEST'); }).not.toThrow(); }); }); describe('getReadOnlyProxy()', () => { it('should not be possible to modify values in proxied object', () => { const proxy = getReadOnlyProxy({ a: 'a' }); expect(() => { proxy.a = 'b'; }).toThrow(TypeError); }); it('should not be possible to modify values in proxied array', () => { const proxy = getReadOnlyProxy([1, 2, 3]); expect(() => { proxy[0] = 2; }).toThrow(TypeError); }); it('should not be possible to modify nested objects in proxied object', () => { const proxy = getReadOnlyProxy({ a: { c: 'c', }, b: 'b', }); expect(() => { proxy.a.c = 'testing'; }).toThrow(TypeError); }); // This is to record what we are not able to do currently. // (Due to Proxy.get() invariants limitations: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get#invariants) it('should not work with any objects that are already frozen', () => { const obj = { a: { b: { c: { d: 'd', }, }, }, }; Object.freeze(obj); Object.freeze(obj.a); Object.freeze(obj.a.b); const proxy = getReadOnlyProxy(obj); expect(() => { proxy.a.b.c.d = 'testing'; }).toThrow( "'get' on proxy: property 'a' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')" ); expect(obj.a.b.c.d).toBe('d'); }); it('should throw a TypeError if a proxied object is trying to be frozen', () => { const obj = { a: { b: { c: { d: 'd', }, }, }, }; const proxy = getReadOnlyProxy(obj); expect(() => Object.freeze(proxy)).toThrow(TypeError); expect(() => Object.freeze(proxy.a)).toThrow(TypeError); expect(() => Object.freeze(proxy.a.b)).toThrow(TypeError); // Check if the original object is not frozen expect(Object.isFrozen(obj)).toBe(false); expect(Object.isFrozen(obj.a)).toBe(false); expect(Object.isFrozen(obj.a.b)).toBe(false); }); it('should not be possible to modify nested arrays in proxied object', () => { const proxy = getReadOnlyProxy({ a: { c: ['c', 'd'], }, b: 'b', }); expect(() => { proxy.a.c[0] = 'testing'; }).toThrow(TypeError); }); it('should be possible to modify source object', () => { const source = { a: 'b' }; getReadOnlyProxy(source); source.a = 'c'; expect(source.a).toBe('c'); }); it('should be possible to modify source array', () => { const source = ['a', 'b']; getReadOnlyProxy(source); source[0] = 'c'; expect(source[0]).toBe('c'); }); it('should be possible to modify nedsted objects in source object', () => { const source = { a: { b: 'c' } }; getReadOnlyProxy(source); source.a.b = 'd'; expect(source.a.b).toBe('d'); }); it('should be possible to modify nedsted arrays in source object', () => { const source = { a: { b: ['c', 'd'] } }; getReadOnlyProxy(source); source.a.b[0] = 'd'; expect(source.a.b[0]).toBe('d'); }); it('should be possible to call functions in proxied object', () => { const proxy = getReadOnlyProxy({ a: () => 'testing', }); expect(proxy.a()).toBe('testing'); }); it('should return a clone of moment/datetime in context', () => { const source = dateTime('2023-10-26T18:25:01Z'); const proxy = getReadOnlyProxy({ a: source, }); expect(source.isSame(proxy.a)).toBe(true); expect(source).not.toBe(proxy.a); }); }); describe('getMutationObserverProxy()', () => { describe('in development mode', () => { beforeEach(() => { config.buildInfo.env = 'development'; }); it('should be possible to modify values in proxied object, but logs an error', () => { const proxy = getMutationObserverProxy( { a: 'a' }, { pluginId: 'myorg-cool-datasource', source: 'datasource', pluginVersion: '1.2.3' } ); expect(() => { proxy.a = 'b'; }).not.toThrow(); expect(log.error).toHaveBeenCalledWith( `Attempted to mutate object property "a" from datasource with id myorg-cool-datasource and version 1.2.3`, { stack: expect.any(String), } ); expect(proxy.a).toBe('b'); }); it('should be possible to call defineProperty, but logs a debug message', () => { const obj: { a: string; b?: string } = { a: 'a' }; const proxy = getMutationObserverProxy(obj, { pluginId: 'myorg-cool-extension' }); expect(() => { Object.defineProperty(proxy, 'b', { value: 'b', writable: false, }); }).not.toThrow(); expect(log.debug).toHaveBeenCalledWith( `Attempted to define object property "b" from extension with id myorg-cool-extension and version unknown`, { stack: expect.any(String), } ); expect(proxy.b).toBe('b'); }); it('should be possible to delete properties, but logs an error', () => { const proxy = getMutationObserverProxy({ a: { c: 'c', }, b: 'b', }); expect(() => { // @ts-ignore - This is to test the logic delete proxy.a.c; }).not.toThrow(); expect(log.error).toHaveBeenCalledWith( `Attempted to delete object property "c" from extension with id unknown and version unknown`, { stack: expect.any(String), } ); expect(proxy.a.c).toBeUndefined(); }); }); describe('in production mode', () => { beforeEach(() => { config.buildInfo.env = 'production'; }); it('should be possible to modify values in proxied object, but logs a warning', () => { const proxy = getMutationObserverProxy({ a: 'a' }, { pluginId: 'myorg-cool-datasource', source: 'datasource' }); expect(() => { proxy.a = 'b'; }).not.toThrow(); expect(log.warning).toHaveBeenCalledWith( `Attempted to mutate object property "a" from datasource with id myorg-cool-datasource and version unknown`, { stack: expect.any(String), } ); expect(proxy.a).toBe('b'); }); it('should be possible to call defineProperty, but logs a debug message', () => { const obj: { a: string; b?: string } = { a: 'a' }; const proxy = getMutationObserverProxy(obj, { pluginId: 'myorg-cool-extension' }); expect(() => { Object.defineProperty(proxy, 'b', { value: 'b', writable: false, }); }).not.toThrow(); expect(log.debug).toHaveBeenCalledWith( `Attempted to define object property "b" from extension with id myorg-cool-extension and version unknown`, { stack: expect.any(String), } ); expect(proxy.b).toBe('b'); }); it('should be possible to delete properties, but logs a warning', () => { const proxy = getMutationObserverProxy({ a: { c: 'c', }, b: 'b', }); expect(() => { // @ts-ignore - This is to test the logic delete proxy.a.c; }).not.toThrow(); expect(log.warning).toHaveBeenCalledWith( `Attempted to delete object property "c" from extension with id unknown and version unknown`, { stack: expect.any(String), } ); expect(proxy.a.c).toBeUndefined(); }); }); }); describe('writableProxy()', () => { const originalEnv = config.buildInfo.env; afterEach(() => { config.buildInfo.env = originalEnv; }); it('should return the same value for primitive types', () => { expect(writableProxy(1)).toBe(1); expect(writableProxy('a')).toBe('a'); expect(writableProxy(true)).toBe(true); expect(writableProxy(false)).toBe(false); expect(writableProxy(null)).toBe(null); expect(writableProxy(undefined)).toBe(undefined); }); it('should return a writable deep-copy of the original object in dev mode', () => { config.buildInfo.env = 'development'; const obj = { a: 'a' }; const copy = writableProxy(obj, { source: 'datasource', pluginId: 'myorg-cool-datasource', pluginVersion: '1.2.3', }); expect(copy).not.toBe(obj); expect(copy.a).toBe('a'); expect(isMutationObserverProxy(copy)).toBe(true); expect(() => { copy.a = 'b'; }).not.toThrow(); expect(log.error).toHaveBeenCalledWith( `Attempted to mutate object property "a" from datasource with id myorg-cool-datasource and version 1.2.3`, { stack: expect.any(String), } ); expect(copy.a).toBe('b'); }); it('should return a writable deep-copy of the original object in production mode', () => { config.buildInfo.env = 'production'; const obj = { a: 'a' }; const copy = writableProxy(obj, { source: 'datasource', pluginId: 'myorg-cool-datasource' }); expect(copy).not.toBe(obj); expect(copy.a).toBe('a'); expect(isMutationObserverProxy(copy)).toBe(true); expect(() => { copy.a = 'b'; }).not.toThrow(); expect(log.warning).toHaveBeenCalledWith( `Attempted to mutate object property "a" from datasource with id myorg-cool-datasource and version unknown`, { stack: expect.any(String), } ); expect(copy.a).toBe('b'); }); it('should allow freezing the object in production mode', () => { config.buildInfo.env = 'production'; const obj = { a: 'a', b: { c: 'c' } }; const copy = writableProxy(obj); expect(() => { Object.freeze(copy); Object.freeze(copy.b); }).not.toThrow(); expect(Object.isFrozen(copy)).toBe(true); expect(Object.isFrozen(copy.b)).toBe(true); expect(copy.b).toEqual({ c: 'c' }); expect(log.debug).toHaveBeenCalledWith( `Attempted to define object property "a" from extension with id unknown and version unknown`, { stack: expect.any(String), } ); }); }); describe('createOpenModalFunction()', () => { let renderModalSubscription: Unsubscribable | undefined; beforeAll(() => { renderModalSubscription = appEvents.subscribe(ShowModalReactEvent, (event) => { const { payload } = event; const Modal = payload.component; render(<Modal />); }); }); afterAll(() => { renderModalSubscription?.unsubscribe(); }); it('should open modal with provided title and body', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); openModal({ title: 'Title in modal', body: () => <div>Text in body</div>, }); expect(await screen.findByRole('dialog')).toBeVisible(); expect(screen.getByRole('heading')).toHaveTextContent('Title in modal'); expect(screen.getByText('Text in body')).toBeVisible(); }); it('should open modal with default width if not specified', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); openModal({ title: 'Title in modal', body: () => <div>Text in body</div>, }); const modal = await screen.findByRole('dialog'); const style = window.getComputedStyle(modal); expect(style.width).toBe('750px'); expect(style.height).toBe(''); }); it('should open modal with specified width', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); openModal({ title: 'Title in modal', body: () => <div>Text in body</div>, width: '70%', }); const modal = await screen.findByRole('dialog'); const style = window.getComputedStyle(modal); expect(style.width).toBe('70%'); }); it('should open modal with specified height', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); openModal({ title: 'Title in modal', body: () => <div>Text in body</div>, height: 600, }); const modal = await screen.findByRole('dialog'); const style = window.getComputedStyle(modal); expect(style.height).toBe('600px'); }); it('should open modal with the plugin context being available', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); const ModalContent = () => { const context = usePluginContext(); return <div>Version: {context!.meta.info.version}</div>; }; openModal({ title: 'Title in modal', body: ModalContent, }); const modal = await screen.findByRole('dialog'); expect(modal).toHaveTextContent('Version: 1.0.0'); }); it('should add a wrapper div with a "data-plugin-sandbox" attribute', async () => { const pluginId = 'grafana-worldmap-panel'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: 'Title in modal', }); openModal({ title: 'Title in modal', body: () => <div>Text in body</div>, }); expect(await screen.findByRole('dialog')).toBeVisible(); expect(screen.getByTestId('plugin-sandbox-wrapper')).toHaveAttribute( 'data-plugin-sandbox', 'grafana-worldmap-panel' ); }); it('should show an error alert in the modal IN DEV MODE if the extension throws an error', async () => { config.buildInfo.env = 'development'; jest.spyOn(console, 'error').mockImplementation(() => {}); const pluginId = 'grafana-worldmap-panel'; const extensionTitle = 'Title in modal'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: extensionTitle, }); const ModalContent = () => { throw new Error('Test error'); }; openModal({ title: extensionTitle, body: ModalContent, }); await screen.findByRole('dialog'); expect(log.error).toHaveBeenCalledTimes(1); expect(log.error).toHaveBeenCalledWith(`Extension "${pluginId}/${extensionTitle}" failed to load.`, { message: 'Test error', componentStack: expect.any(String), digest: expect.any(String), }); expect(screen.getByText(`Extension failed to load: "${pluginId}/${extensionTitle}"`)).toBeVisible(); }); it('should also show an error alert in the modal IN PRODUCTION MODE if the extension throws an error', async () => { config.buildInfo.env = 'production'; jest.spyOn(console, 'error').mockImplementation(() => {}); const pluginId = 'grafana-worldmap-panel'; const extensionTitle = 'Title in modal'; const openModal = createOpenModalFunction({ pluginId, extensionPointId: 'myorg-extensions-app/link/v1', title: extensionTitle, }); const ModalContent = () => { throw new Error('Test error'); }; openModal({ title: extensionTitle, body: ModalContent, }); await screen.findByRole('dialog'); expect(log.error).toHaveBeenCalledTimes(1); expect(log.error).toHaveBeenCalledWith(`Extension "${pluginId}/${extensionTitle}" failed to load.`, { message: 'Test error', componentStack: expect.any(String), digest: expect.any(String), }); expect(screen.getByText(`Extension failed to load: "${pluginId}/${extensionTitle}"`)).toBeVisible(); }); }); describe('wrapWithPluginContext()', () => { type ExampleComponentProps = { a: { b: { c: string; }; }; override?: boolean; }; const ExampleComponent = (props: ExampleComponentProps) => { const pluginContext = usePluginContext(); const audience = props.a.b.c || 'Grafana'; if (props.override) { props.a.b.c = 'OVERRIDE'; } return ( <div> <h1>Hello {audience}!</h1> Version: {pluginContext!.meta.info.version} </div> ); }; beforeEach(() => { resetLogMock(log); }); it('should make the plugin context available for the wrapped component', async () => { const pluginId = 'grafana-worldmap-panel'; const Component = wrapWithPluginContext({ pluginId, extensionTitle: 'ExampleComponent', Component: ExampleComponent, log, }); render(<Component a={{ b: { c: 'Grafana' } }} />); expect(await screen.findByText('Hello Grafana!')).toBeVisible(); expect(screen.getByText('Version: 1.0.0')).toBeVisible(); }); it('should pass the properties into the wrapped component', async () => { const pluginId = 'grafana-worldmap-panel'; const Component = wrapWithPluginContext({ pluginId, extensionTitle: 'ExampleComponent', Component: ExampleComponent, log, }); render(<Component a={{ b: { c: 'Grafana' } }} />); expect(await screen.findByText('Hello Grafana!')).toBeVisible(); expect(screen.getByText('Version: 1.0.0')).toBeVisible(); }); it('should not be possible to mutate the props in development mode, but it logs an error', async () => { config.buildInfo.env = 'development'; const pluginId = 'grafana-worldmap-panel'; const Component = wrapWithPluginContext({ pluginId, extensionTitle: 'ExampleComponent', Component: ExampleComponent, log, }); const props = { a: { b: { c: 'Grafana' } } }; render(<Component {...props} override />); expect(await screen.findByText('Hello Grafana!')).toBeVisible(); // Logs a warning expect(log.error).toHaveBeenCalledTimes(1); expect(log.error).toHaveBeenCalledWith( `Attempted to mutate object property "c" from extension with id grafana-worldmap-panel and version 1.0.0`, { stack: expect.any(String), } ); // Not able to mutate the props in dev mode either expect(props.a.b.c).toBe('Grafana'); }); it('should not be possible to mutate the props in production mode either, but it logs a warning', async () => { config.buildInfo.env = 'production'; const pluginId = 'grafana-worldmap-panel'; const Component = wrapWithPluginContext({ pluginId, extensionTitle: 'ExampleComponent', Component: ExampleComponent, log, }); const props = { a: { b: { c: 'Grafana' } } }; render(<Component {...props} override />); expect(await screen.findByText('Hello Grafana!')).toBeVisible(); // Logs a warning expect(log.warning).toHaveBeenCalledTimes(1); expect(log.warning).toHaveBeenCalledWith( `Attempted to mutate object property "c" from extension with id grafana-worldmap-panel and version 1.0.0`, { stack: expect.any(String), } ); // Not able to mutate the props in production mode either expect(props.a.b.c).toBe('Grafana'); }); it('should render an error alert IN DEV MODE if the extension throws an error', async () => { config.buildInfo.env = 'development'; jest.spyOn(console, 'error').mockImplementation(() => {}); const pluginId = 'grafana-worldmap-panel'; const ComponentWithError = () => { throw new Error('Test error'); }; const extensionTitle = 'ComponentWithError'; const WrappedComponent = wrapWithPluginContext({ pluginId, extensionTitle, Component: ComponentWithError, log, }); render(<WrappedComponent />); expect(await screen.findByText(`Extension failed to load: "${pluginId}/${extensionTitle}"`)).toBeVisible(); expect(log.error).toHaveBeenCalledTimes(1); expect(log.error).toHaveBeenCalledWith(`Extension "${pluginId}/${extensionTitle}" failed to load.`, { message: 'Test error', componentStack: expect.any(String), digest: expect.any(String), }); }); it('should not render anything IN PRODUCTION MODE if the extension throws an error, but still logs an error', async () => { config.buildInfo.env = 'production'; jest.spyOn(console, 'error').mockImplementation(() => {}); const pluginId = 'grafana-worldmap-panel'; const ComponentWithError = () => { throw new Error('Test error'); }; const extensionTitle = 'ComponentWithError'; const WrappedComponent = wrapWithPluginContext({ pluginId, extensionTitle, Component: ComponentWithError, log, }); render(<WrappedComponent />); await waitFor(() => expect(screen.queryByText(`Extension failed to load: "${pluginId}/${extensionTitle}"`)).not.toBeInTheDocument() ); expect(log.error).toHaveBeenCalledTimes(1); expect(log.error).toHaveBeenCalledWith(`Extension "${pluginId}/${extensionTitle}" failed to load.`, { message: 'Test error', componentStack: expect.any(String), digest: expect.any(String), }); }); }); describe('getAppPluginConfigs()', () => { const originalApps = config.apps; const genereicAppPluginConfig = { path: '', version: '', preload: false, angular: { detected: false, hideDeprecation: false, }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedLinks: [], addedComponents: [], addedFunctions: [], exposedComponents: [], extensionPoints: [], }, }; afterEach(() => { config.apps = originalApps; }); test('should return the app plugin configs based on the provided plugin ids', () => { config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, }; expect(getAppPluginConfigs(['myorg-first-app', 'myorg-third-app'])).toEqual([ config.apps['myorg-first-app'], config.apps['myorg-third-app'], ]); }); test('should simply ignore the app plugin ids that do not belong to a config', () => { config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, }; expect(getAppPluginConfigs(['myorg-first-app', 'unknown-app-id'])).toEqual([config.apps['myorg-first-app']]); }); }); describe('getAppPluginIdFromExposedComponentId()', () => { test('should return the app plugin id from an extension point id', () => { expect(getAppPluginIdFromExposedComponentId('myorg-extensions-app/component/v1')).toBe('myorg-extensions-app'); }); }); describe('getExtensionPointPluginDependencies()', () => { const originalApps = config.apps; const genereicAppPluginConfig = { path: '', version: '', preload: false, angular: { detected: false, hideDeprecation: false, }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedLinks: [], addedComponents: [], addedFunctions: [], exposedComponents: [], extensionPoints: [], }, }; afterEach(() => { config.apps = originalApps; }); test('should return the app plugin ids that register extensions to a link extension point', () => { const extensionPointId = 'myorg-first-app/link/v1'; config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, // This plugin is registering a link extension to the extension point 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', extensions: { addedLinks: [ { targets: [extensionPointId], title: 'Link title', }, ], addedComponents: [], exposedComponents: [], extensionPoints: [], addedFunctions: [], }, }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, }; const appPluginIds = getExtensionPointPluginDependencies(extensionPointId); expect(appPluginIds).toEqual(['myorg-second-app']); }); test('should return the app plugin ids that register extensions to a component extension point', () => { const extensionPointId = 'myorg-first-app/component/v1'; config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', }, // This plugin is registering a component extension to the extension point 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', extensions: { addedLinks: [], addedComponents: [ { targets: [extensionPointId], title: 'Component title', }, ], exposedComponents: [], extensionPoints: [], addedFunctions: [], }, }, }; const appPluginIds = getExtensionPointPluginDependencies(extensionPointId); expect(appPluginIds).toEqual(['myorg-third-app']); }); test('should return an empty array if there are no apps that that extend the extension point', () => { const extensionPointId = 'myorg-first-app/component/v1'; // None of the apps are extending the extension point config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, }; const appPluginIds = getExtensionPointPluginDependencies(extensionPointId); expect(appPluginIds).toEqual([]); }); test('should also return (recursively) the app plugin ids that the apps which extend the extension-point depend on', () => { const extensionPointId = 'myorg-first-app/component/v1'; config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, // This plugin is registering a component extension to the extension point. // It is also depending on the 'myorg-fourth-app' plugin. 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', extensions: { addedLinks: [], addedComponents: [ { targets: [extensionPointId], title: 'Component title', }, ], exposedComponents: [], extensionPoints: [], addedFunctions: [], }, dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-fourth-app/component/v1'], }, }, }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, // This plugin exposes a component, but is also depending on the 'myorg-fifth-app'. 'myorg-fourth-app': { ...genereicAppPluginConfig, id: 'myorg-fourth-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: 'myorg-fourth-app/component/v1', title: 'Exposed component', }, ], extensionPoints: [], addedFunctions: [], }, dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-fifth-app/component/v1'], }, }, }, 'myorg-fifth-app': { ...genereicAppPluginConfig, id: 'myorg-fifth-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: 'myorg-fifth-app/component/v1', title: 'Exposed component', }, ], extensionPoints: [], addedFunctions: [], }, }, 'myorg-sixth-app': { ...genereicAppPluginConfig, id: 'myorg-sixth-app', }, }; const appPluginIds = getExtensionPointPluginDependencies(extensionPointId); expect(appPluginIds).toEqual(['myorg-second-app', 'myorg-fourth-app', 'myorg-fifth-app']); }); }); describe('getExposedComponentPluginDependencies()', () => { const originalApps = config.apps; const genereicAppPluginConfig = { path: '', version: '', preload: false, angular: { detected: false, hideDeprecation: false, }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedLinks: [], addedComponents: [], exposedComponents: [], extensionPoints: [], addedFunctions: [], }, }; afterEach(() => { config.apps = originalApps; }); test('should only return the app plugin id that exposes the component, if that component does not depend on anything', () => { const exposedComponentId = 'myorg-second-app/component/v1'; config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: exposedComponentId, title: 'Component title', }, ], extensionPoints: [], addedFunctions: [], }, }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, }; const appPluginIds = getExposedComponentPluginDependencies(exposedComponentId); expect(appPluginIds).toEqual(['myorg-second-app']); }); test('should also return the list of app plugin ids that the plugin - which exposes the component - is depending on', () => { const exposedComponentId = 'myorg-second-app/component/v1'; config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: exposedComponentId, title: 'Component title', }, ], extensionPoints: [], addedFunctions: [], }, dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-fourth-app/component/v1'], }, }, }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', }, 'myorg-fourth-app': { ...genereicAppPluginConfig, id: 'myorg-fourth-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: 'myorg-fourth-app/component/v1', title: 'Component title', }, ], extensionPoints: [], addedFunctions: [], }, dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-fifth-app/component/v1'], }, }, }, 'myorg-fifth-app': { ...genereicAppPluginConfig, id: 'myorg-fifth-app', extensions: { addedLinks: [], addedComponents: [], exposedComponents: [ { id: 'myorg-fifth-app/component/v1', title: 'Component title', }, ], extensionPoints: [], addedFunctions: [], }, }, }; const appPluginIds = getExposedComponentPluginDependencies(exposedComponentId); expect(appPluginIds).toEqual(['myorg-second-app', 'myorg-fourth-app', 'myorg-fifth-app']); }); }); describe('getAppPluginDependencies()', () => { const originalApps = config.apps; const genereicAppPluginConfig = { path: '', version: '', preload: false, angular: { detected: false, hideDeprecation: false, }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedLinks: [], addedComponents: [], addedFunctions: [], exposedComponents: [], extensionPoints: [], }, }; afterEach(() => { config.apps = originalApps; }); test('should not end up in an infinite loop if there are circular dependencies', () => { config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-third-app/link/v1'], }, }, }, 'myorg-third-app': { ...genereicAppPluginConfig, id: 'myorg-third-app', dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { exposedComponents: ['myorg-second-app/link/v1'], }, }, }, }; const appPluginIds = getAppPluginDependencies('myorg-second-app'); expect(appPluginIds).toEqual(['myorg-third-app']); }); test('should not end up in an infinite loop if a plugin depends on itself', () => { config.apps = { 'myorg-first-app': { ...genereicAppPluginConfig, id: 'myorg-first-app', }, 'myorg-second-app': { ...genereicAppPluginConfig, id: 'myorg-second-app', dependencies: { ...genereicAppPluginConfig.dependencies, extensions: { // Not a valid scenario! // (As this is sometimes happening out in the wild, we thought it's better to also cover it with a test-case.) exposedComponents: ['myorg-second-app/link/v1'], }, }, }, }; const appPluginIds = getAppPluginDependencies('myorg-second-app'); expect(appPluginIds).toEqual([]); }); }); describe('getExtensionPointPluginMeta()', () => { const originalApps = config.apps; const mockExtensionPointId = 'test-extension-point'; const mockApp1: AppPluginConfig = { id: 'app1', path: 'app1', version: '1.0.0', preload: false, angular: { detected: false, hideDeprecation: false }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedComponents: [ { title: 'Component 1', targets: [mockExtensionPointId] }, { title: 'Component 2', targets: ['other-point'] }, ], addedLinks: [ { title: 'Link 1', targets: [mockExtensionPointId] }, { title: 'Link 2', targets: ['other-point'] }, ], addedFunctions: [], exposedComponents: [], extensionPoints: [], }, }; const mockApp2: AppPluginConfig = { id: 'app2', path: 'app2', version: '1.0.0', preload: false, angular: { detected: false, hideDeprecation: false }, loadingStrategy: PluginLoadingStrategy.fetch, dependencies: { grafanaVersion: '8.0.0', plugins: [], extensions: { exposedComponents: [], }, }, extensions: { addedComponents: [{ title: 'Component 3', targets: [mockExtensionPointId] }], addedLinks: [], addedFunctions: [], exposedComponents: [], extensionPoints: [], }, }; beforeEach(() => { config.apps = {}; }); afterEach(() => { config.apps = originalApps; }); it('should return empty map when no plugins have extensions for the point', () => { config.apps = { app1: { ...mockApp1, extensions: { ...mockApp1.extensions, addedComponents: [], addedLinks: [] } }, app2: { ...mockApp2, extensions: { ...mockApp2.extensions, addedComponents: [], addedLinks: [] } }, }; const result = getExtensionPointPluginMeta(mockExtensionPointId); expect(result.size).toBe(0); }); it('should return map with plugins that have components for the extension point', () => { config.apps = { app1: mockApp1, app2: mockApp2, }; const result = getExtensionPointPluginMeta(mockExtensionPointId); expect(result.size).toBe(2); expect(result.get('app1')).toEqual({ addedComponents: [{ title: 'Component 1', targets: [mockExtensionPointId] }], addedLinks: [{ title: 'Link 1', targets: [mockExtensionPointId] }], }); expect(result.get('app2')).toEqual({ addedComponents: [{ title: 'Component 3', targets: [mockExtensionPointId] }], addedLinks: [], }); }); it('should filter out plugins that do not have any extensions for the point', () => { config.apps = { app1: mockApp1, app2: { ...mockApp2, extensions: { ...mockApp2.extensions, addedComponents: [], addedLinks: [] } }, app3: { ...mockApp1, id: 'app3', extensions: { ...mockApp1.extensions, addedComponents: [{ title: 'Component 4', targets: ['other-point'] }], addedLinks: [{ title: 'Link 3', targets: ['other-point'] }], }, }, }; const result = getExtensionPointPluginMeta(mockExtensionPointId); expect(result.size).toBe(1); expect(result.get('app1')).toEqual({ addedComponents: [{ title: 'Component 1', targets: [mockExtensionPointId] }], addedLinks: [{ title: 'Link 1', targets: [mockExtensionPointId] }], }); }); }); });