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

A Backstage plugin that integrates towards PagerDuty

import { jsxs, jsx } from 'react/jsx-runtime';
import { makeStyles, ListItem, ListItemIcon, ListItemText, Tooltip } from '@material-ui/core';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { Avatar, Button, Text, Flex } from '@backstage/ui';

const useStyles = makeStyles((_) => ({
  listItemPrimary: {
    fontWeight: "bold"
  },
  listItemSecondary: {
    fontWeight: "normal",
    textDecoration: "underline",
    marginTop: "-5px",
    paddingLeft: "5px"
  },
  buttonStyle: {
    fontSize: "15px",
    "&:hover": {
      textDecoration: "underline"
    }
  },
  containerStyle: {
    display: "flex",
    alignItems: "center",
    fontWeight: "bold"
  },
  iconStyle: {
    fontSize: "25px",
    marginLeft: "-4px"
  },
  avatarStyle: {
    marginTop: "-30px"
  }
}));
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,
      {
        name: user.name,
        src: user.avatar_url,
        className: classes.avatarStyle
      }
    ) }),
    /* @__PURE__ */ jsx(
      ListItemText,
      {
        primary: /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "start", gap: "0", children: [
          /* @__PURE__ */ jsx(Tooltip, { title: "Open user in PagerDuty", placement: "top", children: /* @__PURE__ */ jsx(
            Button,
            {
              variant: "tertiary",
              "aria-label": "open-user-in-browser",
              size: "small",
              className: classes.buttonStyle,
              onClick: () => navigateToUrl(user.html_url),
              children: /* @__PURE__ */ jsx(Text, { className: classes.containerStyle, children: user.name })
            }
          ) }),
          /* @__PURE__ */ jsx(Text, { color: "secondary", className: classes.listItemSecondary, children: user.email })
        ] }),
        secondary: /* @__PURE__ */ jsx(
          Button,
          {
            "aria-label": "open-escalation-policy-in-browser",
            onClick: () => navigateToUrl(policyUrl),
            variant: "tertiary",
            size: "small",
            className: classes.buttonStyle,
            iconStart: /* @__PURE__ */ jsx(NotificationsIcon, { className: classes.iconStyle }),
            children: /* @__PURE__ */ jsx(Text, { className: classes.containerStyle, children: policyName })
          }
        )
      }
    )
  ] });
};

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