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

A Backstage plugin that integrates towards PagerDuty

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { makeStyles, ListItem, ListItemIcon, ListItemText, IconButton, Typography, Tooltip } 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__ */ jsxs(ListItem, { children: [
    /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(
      Avatar,
      {
        alt: user.name,
        src: user.avatar_url,
        className: classes.avatarStyle
      }
    ) }),
    /* @__PURE__ */ jsx(
      ListItemText,
      {
        primary: /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(Tooltip, { title: "Open user in PagerDuty", placement: "top", children: /* @__PURE__ */ jsx(
            IconButton,
            {
              "aria-label": "open-user-in-browser",
              onClick: () => navigateToUrl(user.html_url),
              className: classes.userTextButtonStyle,
              children: /* @__PURE__ */ jsx(Typography, { className: classes.containerStyle, children: user.name })
            }
          ) }),
          /* @__PURE__ */ jsx(
            Typography,
            {
              className: classes.listItemSecondary,
              color: "textSecondary",
              children: user.email
            }
          )
        ] }),
        secondary: /* @__PURE__ */ jsx(
          IconButton,
          {
            "aria-label": "open-escalation-policy-in-browser",
            onClick: () => navigateToUrl(policyUrl),
            className: classes.buttonStyle,
            children: /* @__PURE__ */ jsxs(Typography, { className: classes.containerStyle, children: [
              /* @__PURE__ */ jsx(NotificationsIcon, { className: classes.iconStyle }),
              policyName
            ] })
          }
        )
      }
    )
  ] });
};

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