import type { Meta , Story } from '@storybook/react' ; import type { CoreStart , DocLinksStart } from 'kibana/public' ; import React , { ComponentProps } from 'react' ; import { MemoryRouter } from 'react-router-dom' ; import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public' ; import type { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context' ; import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context' ; import { SettingsTemplate } from './settings_template' ; type Args = ComponentProps < typeof SettingsTemplate > ; const coreMock = { notifications : { toasts : { add : ( ) => { } } } , usageCollection : { reportUiCounter : ( ) => { } } , observability : { navigation : { PageTemplate : ( ) => { return < > hello world < />; } , } , } , http : { basePath : { prepend : ( path ) => `/basepath${ path }` , get : ( ) => `/basepath` , } , get : async ( ) => ( { } ) , } , docLinks : { DOC_LINK_VERSION : '0' , ELASTIC_WEBSITE_URL : 'https://www.elastic.co/' , links : { apm : { } , observability : { guide : '' } , } , } as unknown as DocLinksStart , } as unknown as Partial < CoreStart > ; const KibanaReactContext = createKibanaReactContext ( coreMock ) ; const stories = { title : 'routing/templates/SettingsTemplate' , component : SettingsTemplate , decorators : [ ( StoryComponent ) => { return ( < MemoryRouter > < KibanaReactContext . Provider > < MockApmPluginContextWrapper value = { { core : coreMock } as unknown as ApmPluginContextValue } > < StoryComponent /> < /MockApmPluginContextWrapper> < /KibanaReactContext.Provider> < /MemoryRouter>); } , ] , } ; export default stories ; export const Example = ( args ) => { return < SettingsTemplate { ... args } / > ; } ; Example . args = { children : < > test < />, selectedTab : 'agent-configurations' , } ;