import React , { useState } from "react" ; import { Link , useHistory } from "react-router-dom" ; import { emphasize , withStyles , Theme } from "@material-ui/core/styles" ; import Breadcrumbs from "@material-ui/core/Breadcrumbs" ; import Chip from "@material-ui/core/Chip" ; import Menu from "@material-ui/core/Menu" ; import MenuItem from "@material-ui/core/MenuItem" ; import ExpandMoreIcon from "@material-ui/icons/ExpandMore" ; import { paths , queueDetailsPath } from "../paths" ; import { isDarkTheme } from "../theme" ; const StyledBreadcrumb = withStyles ( ( theme ) => ( { root : { backgroundColor : isDarkTheme ( theme ) ? "#303030" : theme . palette . background . default , height : theme . spacing ( 3 ) , color : theme . palette . text . secondary , fontWeight : 400 , "&:hover, &:focus" : { backgroundColor : theme . palette . action . hover , } , "&:active" : { boxShadow : theme . shadows [ 1 ] , backgroundColor : emphasize ( theme . palette . action . hover , 0.12 ) , } , } , } ) ) ( Chip ) as typeof Chip ; interface Props { queues : string [ ] ; queueName : string ; taskId ? : string ; } export default function QueueBreadcrumbs ( props ) { const history = useHistory ( ) ; const [ anchorEl , setAnchorEl ] = useState < null | Element > ( null ) ; const handleClick = ( event ) => { event . preventDefault ( ) ; setAnchorEl ( event . currentTarget ) ; } ; const closeMenu = ( ) => { setAnchorEl ( null ) ; } ; return ( < > < Breadcrumbs aria - label = "breadcrumb" > < StyledBreadcrumb component = { Link } to = { paths . HOME } label = "Queues" onClick = { ( ) => history . push ( paths . HOME ) } /> < StyledBreadcrumb label = { props . queueName } deleteIcon = { < ExpandMoreIcon / > } onClick = { handleClick } onDelete = { handleClick } / > { props . taskId && < StyledBreadcrumb label = { `task:${ props . taskId }` } />} < /Breadcrumbs> < Menu id = "queue-breadcrumb-menu" anchorEl = { anchorEl } keepMounted open = { Boolean ( anchorEl ) } onClose = { closeMenu } > { props . queues . sort ( ) . map ( ( qname ) => ( < MenuItem key = { qname } onClick = { ( ) => { history . push ( queueDetailsPath ( qname ) ) ; closeMenu ( ) ; } } > { qname } < /MenuItem>))} < /Menu> < />); }