@pagerduty/backstage-plugin/dist/components/Escalation/EscalationUser.esm.js

A Backstage plugin that integrates towards PagerDuty

import React from 'react';
import { makeStyles, ListItem, ListItemIcon, ListItemText, Tooltip, IconButton, Typography } from '@material-ui/core';
import Avatar from '@material-ui/core/Avatar';
import NotificationsIcon from '@material-ui/icons/Notifications';

const useStyles = makeStyles((theme) => ({
  listItemPrimary: {
    fontWeight: "bold"
  },
  listItemSecondary: {
    fontWeight: "normal",
    textDecoration: "underline",
    marginTop: "-5px"
  },
  buttonStyle: {
    marginLeft: "-11px",
    marginTop: "-10px",
    fontSize: "15px",
    color: theme.palette.text.primary,
    "&:hover": {
      backgroundColor: "transparent",
      textDecoration: "underline"
    }
  },
  userTextButtonStyle: {
    marginLeft: "-11px",
    marginTop: "-10px",
    marginBottom: "-10px",
    fontSize: "15px",
    color: theme.palette.text.primary,
    "&:hover": {
      backgroundColor: "transparent",
      textDecoration: "underline"
    }
  },
  containerStyle: {
    display: "flex",
    alignItems: "center",
    fontWeight: "bold"
  },
  iconStyle: {
    fontSize: "25px",
    marginLeft: "-4px",
    color: theme.palette.text.primary
  },
  smallIconStyle: {
    color: theme.palette.text.primary
  },
  avatarStyle: {
    marginTop: "-20px"
  }
}));
function navigateToUrl(url) {
  window.open(url, "_blank");
}
const EscalationUser = ({ user, policyUrl, policyName }) => {
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(
    Avatar,
    {
      alt: user.name,
      src: user.avatar_url,
      className: classes.avatarStyle
    }
  )), /* @__PURE__ */ React.createElement(
    ListItemText,
    {
      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Open user in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
        IconButton,
        {
          "aria-label": "open-user-in-browser",
          onClick: () => navigateToUrl(user.html_url),
          className: classes.userTextButtonStyle
        },
        /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, user.name)
      )), /* @__PURE__ */ React.createElement(
        Typography,
        {
          className: classes.listItemSecondary,
          color: "textSecondary"
        },
        user.email
      )),
      secondary: /* @__PURE__ */ React.createElement(
        IconButton,
        {
          "aria-label": "open-escalation-policy-in-browser",
          onClick: () => navigateToUrl(policyUrl),
          className: classes.buttonStyle
        },
        /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, /* @__PURE__ */ React.createElement(NotificationsIcon, { className: classes.iconStyle }), policyName)
      )
    }
  ));
};

export { EscalationUser };
//# sourceMappingURL=EscalationUser.esm.js.map