import type { Story , StoryContext } from '@storybook/react' ; import React , { ComponentType } from 'react' ; import { MemoryRouter } from 'react-router-dom' ; import { CoreStart } from '../../../../../../../../src/core/public' ; import { createKibanaReactContext } from '../../../../../../../../src/plugins/kibana_react/public' ; import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values' ; import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context' ; import { APMServiceContext } from '../../../../context/apm_service/apm_service_context' ; import { AnalyzeDataButton } from './analyze_data_button' ; interface Args { agentName : string ; canShowDashboard : boolean ; environment ? : string ; serviceName : string ; } export default { title : 'routing/templates/ApmServiceTemplate/AnalyzeDataButton' , component : AnalyzeDataButton , decorators : [ ( StoryComponent , { args } ) => { const { agentName , canShowDashboard , environment , serviceName } = args ; const KibanaContext = createKibanaReactContext ( { application : { capabilities : { dashboard : { show : canShowDashboard } } , } , http : { basePath : { get : ( ) => '' } } , } as unknown as Partial < CoreStart > ) ; return ( < MemoryRouter initialEntries = { [ `/services/${ serviceName }/overview?rangeFrom=now-15m&rangeTo=now&environment=${ environment ?? ENVIRONMENT_ALL . value }&kuery=` , ] } > < MockApmPluginContextWrapper > < APMServiceContext . Provider value = { { agentName , alerts : [ ] , transactionTypes : [ ] , serviceName , fallbackToTransactions : false , } } > < KibanaContext . Provider > < StoryComponent /> < /KibanaContext.Provider> < /APMServiceContext.Provider> < /MockApmPluginContextWrapper> < /MemoryRouter>); } , ] , } ; export const Example = ( ) => { return < AnalyzeDataButton />; } ; Example . args = { agentName : 'iOS/swift' , canShowDashboard : true , environment : 'testEnvironment' , serviceName : 'testServiceName' , } ;