import * as React from 'react' ; import { useDrilldownManager } from '../context' ; import { FlyoutFrame } from '../../components/flyout_frame' ; import { DrilldownManagerContent } from './drilldown_manager_content' ; import { RenderDrilldownManagerTitle } from '../drilldown_manager_title' ; import { RenderDrilldownManagerFooter } from '../drilldown_manager_footer' ; import { HelloBar } from '../hello_bar' ; export const DrilldownManager = ( { } ) => { const drilldowns = useDrilldownManager ( ) ; const route = drilldowns . useRoute ( ) ; const handleBack = route . length < 2 ? undefined : ( ) => drilldowns . setRoute ( route . slice ( 0 , route . length - 1 ) ) ; return ( < FlyoutFrame title = { < RenderDrilldownManagerTitle / > } banner = { < HelloBar / > } footer = { < RenderDrilldownManagerFooter / > } onClose = { drilldowns . close } onBack = { handleBack } > < DrilldownManagerContent /> < /FlyoutFrame>); } ;