asynqmon/ui/src/components/QueueBreadcrumb.tsx

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: Theme) => ({
  root: {
    backgroundColor: isDarkTheme(theme)
      ? "#303030"
      : theme.palette.background.default,
    height: theme.spacing(3),
    color: theme.palette.text.secondary,
    fontWeight: theme.typography.fontWeightRegular,
    "&:hover, &:focus": {
      backgroundColor: theme.palette.action.hover,
    },
    "&:active": {
      boxShadow: theme.shadows[1],
      backgroundColor: emphasize(theme.palette.action.hover, 0.12),
    },
  },
}))(Chip) as typeof Chip; // Note: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591

interface Props {
  // All queue names.
  queues: string[];
  // Name of the queue currently selected.
  queueName: string;
  // ID of the task currently selected (optional).
  taskId?: string;
}

export default function QueueBreadcrumbs(props: Props) {
  const history = useHistory();
  const [anchorEl, setAnchorEl] = useState<null | Element>(null);

  const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
    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>
    </>
  );
}