import * as React from 'react' ; import { EuiSpacer , EuiTabbedContent , EuiTabbedContentProps } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { useDrilldownManager } from '../context' ; import { FormDrilldownWizard } from '../form_drilldown_wizard' ; import { DrilldownList } from '../drilldown_list' ; import { TemplatePicker } from '../template_picker' ; export const txtCreateNew = i18n . translate ( 'xpack.uiActionsEnhanced.drilldowns.containers.DrilldownManager.createNew' , { defaultMessage : 'Create new' , } ) ; export const txtManage = i18n . translate ( 'xpack.uiActionsEnhanced.drilldowns.containers.DrilldownManager.manage' , { defaultMessage : 'Manage' , } ) ; const tabs = [ { id : 'create' , name : txtCreateNew , content : ( < > < EuiSpacer /> < FormDrilldownWizard / > < EuiSpacer size = { 'l' } / > < TemplatePicker /> < />), } , { id : 'manage' , name : txtManage , content : ( < > < EuiSpacer /> < DrilldownList / > < />), } , ] ; export const Tabs = ( { } ) => { const drilldowns = useDrilldownManager ( ) ; const route = drilldowns . useRoute ( ) ; return ( < EuiTabbedContent tabs = { tabs } selectedTab = { tabs . find ( ( { id } ) => id === route [ 0 ] ) } onTabClick = { ( { id } ) => drilldowns . setRoute ( [ id ] ) } />); } ;