@pagerduty/backstage-plugin 0.15.9-alpha.0 → 0.15.9-next.5

package/dist/components/PagerDutyCardCommon/OpenServiceButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenServiceButton.esm.js","sources":["../../../src/components/PagerDutyCardCommon/OpenServiceButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { makeStyles, IconButton, Typography } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport OpenInBrowser from '@material-ui/icons/OpenInBrowser';\n\ntype OpenServiceButtonProps = {\n  serviceUrl: string;\n  compact?: boolean;\n};\n\n/** @public */\nexport function OpenServiceButton({\n  serviceUrl,\n  compact,\n}: OpenServiceButtonProps) {\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    buttonStyle: {\n      color: theme.palette.text.primary,\n      '&:hover': {\n        backgroundColor: 'transparent',\n        textDecoration: 'underline',\n      },\n    },\n    containerStyle: {\n      fontSize: compact !== true ? '12px' : '10px',\n      width: compact !== true ? '85px' : '70px',\n    },\n    iconStyle: {\n      fontSize: '30px',\n      marginBottom: '-10px',\n    },\n    textStyle: {\n      marginBottom: '-10px',\n    },\n  }));\n\n  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();\n\n  function navigateToService() {\n    window.open(serviceUrl, '_blank');\n  }\n\n  return (\n    <>\n      <IconButton\n        aria-label=\"open-service-in-browser\"\n        onClick={navigateToService}\n        className={buttonStyle}\n      >\n        <div className={containerStyle}>\n          <OpenInBrowser className={iconStyle} />\n          <Typography className={textStyle}>\n            Open service in PagerDuty\n          </Typography>\n        </div>\n      </IconButton>\n    </>\n  );\n}\n"],"names":["OpenInBrowser"],"mappings":";;;;AA4BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,UAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,SAAA,GAAY,WAA2B,CAAA,KAAA,MAAU;AAAA,IACrD,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,MAC1B,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,aAAA;AAAA,QACjB,cAAA,EAAgB;AAAA;AAClB,KACF;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EAAO,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS;AAAA,KACrC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,QAAA,EAAU,MAAA;AAAA,MACV,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,SAAA,EAAW;AAAA,MACT,YAAA,EAAc;AAAA;AAChB,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,SAAA,EAAW,SAAA,KAAc,SAAA,EAAU;AAExE,EAAA,SAAS,iBAAA,GAAoB;AAC3B,IAAA,MAAA,CAAO,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,EAClC;AAEA,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,yBAAA;AAAA,MACX,OAAA,EAAS,iBAAA;AAAA,MACT,SAAA,EAAW,WAAA;AAAA,MAEX,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,iBAAA,EAAA,EAAc,WAAW,SAAA,EAAW,CAAA;AAAA,wBACrC,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,SAAA,EAAW,QAAA,EAAA,2BAAA,EAElC;AAAA,OAAA,EACF;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OpenServiceButton.esm.js","sources":["../../../src/components/PagerDutyCardCommon/OpenServiceButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport OpenInBrowser from '@material-ui/icons/OpenInBrowser';\nimport { ButtonIcon } from '@backstage/ui';\n\ntype OpenServiceButtonProps = {\n  serviceUrl: string;\n  compact?: boolean;\n};\n\n/** @public */\nexport function OpenServiceButton({\n  serviceUrl,\n  compact,\n}: OpenServiceButtonProps) {\n  const useStyles = makeStyles<BackstageTheme>(() => ({\n    containerStyle: {\n      fontSize: compact !== true ? '12px' : '10px',\n      width: compact !== true ? '85px' : '70px',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      textAlign: 'center',\n    },\n    textStyle: {\n      fontSize: '12px',\n    },\n  }));\n\n  const { containerStyle, textStyle } = useStyles();\n\n  function navigateToService() {\n    window.open(serviceUrl, '_blank');\n  }\n\n  return (\n    <div className={containerStyle}>\n      <ButtonIcon\n        aria-label=\"open-service-in-browser\"\n        size=\"medium\"\n        onClick={navigateToService}\n        variant=\"tertiary\"\n        icon={<OpenInBrowser />}\n      />\n\n      <Typography className={textStyle}>Open service in PagerDuty</Typography>\n    </div>\n  );\n}\n"],"names":["OpenInBrowser"],"mappings":";;;;;AA4BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,UAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,SAAA,GAAY,WAA2B,OAAO;AAAA,IAClD,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EAAO,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACnC,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW;AAAA,KACb;AAAA,IACA,SAAA,EAAW;AAAA,MACT,QAAA,EAAU;AAAA;AACZ,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,SAAA,EAAU,GAAI,SAAA,EAAU;AAEhD,EAAA,SAAS,iBAAA,GAAoB;AAC3B,IAAA,MAAA,CAAO,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,EAClC;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,yBAAA;AAAA,QACX,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,iBAAA;AAAA,QACT,OAAA,EAAQ,UAAA;AAAA,QACR,IAAA,sBAAOA,iBAAA,EAAA,EAAc;AAAA;AAAA,KACvB;AAAA,oBAEA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,SAAA,EAAW,QAAA,EAAA,2BAAA,EAAyB;AAAA,GAAA,EAC7D,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyCardCommon/ServiceStandardsCard.esm.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles, withStyles, LinearProgress, Card, Typography, IconButton, Tooltip } from '@material-ui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles, withStyles, LinearProgress, Typography } from '@material-ui/core';
 import InfoIcon from '@material-ui/icons/Info';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
+import { Card, Flex, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
 
 function colorFromPercentage(theme, percentage) {
   if (percentage < 0.5) {
@@ -16,15 +17,10 @@ function ServiceStandardsCard({ total, completed, standards, compact }) {
   const useStyles = makeStyles((theme) => ({
     cardStyle: {
       height: compact !== true ? "120px" : "80px",
-      display: "grid",
-      gridTemplateRows: "1fr auto auto",
+      padding: 0,
+      position: "relative",
       backgroundColor: "rgba(0, 0, 0, 0.03)"
     },
-    containerStyle: {
-      display: "flex",
-      justifyContent: "center",
-      marginTop: compact !== true ? "-100px" : "-50px"
-    },
     largeTextStyle: {
       fontSize: compact !== true ? "50px" : "40px",
       color: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0),
@@ -36,17 +32,37 @@ function ServiceStandardsCard({ total, completed, standards, compact }) {
       fontSize: compact !== true ? "14px" : "12px",
       fontWeight: "bold",
       alignSelf: "center",
-      justifyContent: "center",
-      marginLeft: "-2px",
-      marginTop: compact !== true ? "25px" : "20px"
+      marginLeft: "-17px",
+      marginBottom: "-26px"
     },
-    tooltipContainer: {},
     tooltipIcon: {
       marginRight: "5px"
     },
+    infoIcon: {
+      color: "gray",
+      "&:hover": {
+        backgroundColor: "transparent"
+      }
+    },
     standardItem: {
       display: "flex",
       alignItems: "center"
+    },
+    linearProgressContainer: {
+      left: 0,
+      position: "absolute",
+      bottom: 0,
+      width: "100%",
+      padding: "0px"
+    },
+    textContainerStyle: {
+      position: "absolute",
+      top: compact ? "5px" : "20px",
+      width: "100%"
+    },
+    tooltipTriggerStyles: {
+      position: "relative",
+      zIndex: 1
     }
   }));
   const BorderLinearProgress = withStyles((theme) => ({
@@ -65,49 +81,54 @@ function ServiceStandardsCard({ total, completed, standards, compact }) {
   }))(LinearProgress);
   const {
     cardStyle,
-    containerStyle,
     largeTextStyle,
     smallTextStyle,
-    tooltipContainer,
+    linearProgressContainer,
     tooltipIcon,
-    standardItem
+    textContainerStyle,
+    infoIcon,
+    standardItem,
+    tooltipTriggerStyles
   } = useStyles();
   if (standards === void 0 || completed === void 0 || total === void 0) {
-    return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsx("div", { className: containerStyle, children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
+    return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
   }
-  return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: completed !== void 0 && total !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: tooltipContainer, children: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        interactive: true,
-        title: /* @__PURE__ */ jsx(Fragment, { children: standards?.map((standard, key) => /* @__PURE__ */ jsx(Typography, { children: standard.pass ? /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
-          /* @__PURE__ */ jsx(CheckCircle, { className: tooltipIcon }),
-          " ",
-          standard.name
-        ] }) : /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
-          /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, { className: tooltipIcon }),
-          " ",
-          standard.name
-        ] }) }, key)) }),
-        children: /* @__PURE__ */ jsx(InfoIcon, {})
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
+  return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+    /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          className: tooltipTriggerStyles,
+          icon: /* @__PURE__ */ jsx(InfoIcon, { className: infoIcon }),
+          variant: "tertiary"
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { children: standards?.map((standard, key) => /* @__PURE__ */ jsx(Typography, { children: standard.pass ? /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
+        /* @__PURE__ */ jsx(CheckCircle, { className: tooltipIcon }),
+        " ",
+        standard.name
+      ] }) : /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
+        /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, { className: tooltipIcon }),
+        " ",
+        standard.name
+      ] }) }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { justify: "center", className: textContainerStyle, children: [
       /* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: completed }),
       /* @__PURE__ */ jsxs(Typography, { className: smallTextStyle, children: [
         "/",
         total
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: linearProgressContainer, children: /* @__PURE__ */ jsx(
       BorderLinearProgress,
       {
         variant: "determinate",
         value: completed / total * 100
       }
     ) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: containerStyle, children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
+  ] }) });
 }
 
-export { ServiceStandardsCard as default };
+export { colorFromPercentage, ServiceStandardsCard as default };
 //# sourceMappingURL=ServiceStandardsCard.esm.js.map

package/dist/components/PagerDutyCardCommon/ServiceStandardsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceStandardsCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/ServiceStandardsCard.tsx"],"sourcesContent":["import { BackstageTheme } from '@backstage/theme';\nimport {\n  Card,\n  IconButton,\n  LinearProgress,\n  Theme,\n  Tooltip,\n  Typography,\n  makeStyles,\n  withStyles,\n} from '@material-ui/core';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { PagerDutyServiceStandard } from '@pagerduty/backstage-plugin-common';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\n\ntype Props = {\n  total: number | undefined;\n  completed: number | undefined;\n  standards: PagerDutyServiceStandard[] | undefined;\n  compact?: boolean;\n};\n\nfunction colorFromPercentage(theme: Theme, percentage: number) {\n  if (percentage < 0.5) {\n    return theme.palette.error.main;\n  } else if (percentage < 0.8) {\n    return theme.palette.warning.main;\n  }\n  return theme.palette.success.main;\n}\n\nfunction ServiceStandardsCard({ total, completed, standards, compact }: Props) {\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      display: 'grid',\n      gridTemplateRows: '1fr auto auto',\n      backgroundColor: 'rgba(0, 0, 0, 0.03)',\n    },\n    containerStyle: {\n      display: 'flex',\n      justifyContent: 'center',\n      marginTop: compact !== true ? '-100px' : '-50px',\n    },\n    largeTextStyle: {\n      fontSize: compact !== true ? '50px' : '40px',\n      color:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n      alignSelf: 'center',\n      justifyContent: 'center',\n    },\n    smallTextStyle: {\n      color: theme.palette.textSubtle,\n      fontSize: compact !== true ? '14px' : '12px',\n      fontWeight: 'bold',\n      alignSelf: 'center',\n      justifyContent: 'center',\n      marginLeft: '-2px',\n      marginTop: compact !== true ? '25px' : '20px',\n    },\n    tooltipContainer: {},\n    tooltipIcon: {\n      marginRight: '5px',\n    },\n    standardItem: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n  }));\n\n  const BorderLinearProgress = withStyles(theme => ({\n    root: {\n      height: 10,\n      borderRadius: 5,\n      margin: 5,\n    },\n    colorPrimary: {\n      backgroundColor:\n        theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],\n    },\n    bar: {\n      borderRadius: 5,\n      backgroundColor:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n    },\n  }))(LinearProgress);\n\n  const {\n    cardStyle,\n    containerStyle,\n    largeTextStyle,\n    smallTextStyle,\n    tooltipContainer,\n    tooltipIcon,\n    standardItem,\n  } = useStyles();\n\n  if (\n    standards === undefined ||\n    completed === undefined ||\n    total === undefined\n  ) {\n    return (\n      <Card className={cardStyle}>\n        <div className={containerStyle}>\n          <Typography className={smallTextStyle}>\n            Unable to retrieve Scores\n          </Typography>\n        </div>\n      </Card>\n    );\n  }\n\n  return (\n    <Card className={cardStyle}>\n      {completed !== undefined && total !== undefined ? (\n        <>\n          <div className={tooltipContainer}>\n            <IconButton>\n              <Tooltip\n                interactive\n                title={\n                  <>\n                    {standards?.map((standard, key) => (\n                      <Typography key={key}>\n                        {standard.pass ? (\n                          <Typography className={standardItem}>\n                            <CheckCircle className={tooltipIcon} />{' '}\n                            {standard.name}\n                          </Typography>\n                        ) : (\n                          <Typography className={standardItem}>\n                            <RadioButtonUncheckedIcon className={tooltipIcon} />{' '}\n                            {standard.name}\n                          </Typography>\n                        )}\n                      </Typography>\n                    ))}\n                  </>\n                }\n              >\n                <InfoIcon />\n              </Tooltip>\n            </IconButton>\n          </div>\n          <div className={containerStyle}>\n            <Typography className={largeTextStyle}>{completed}</Typography>\n            <Typography className={smallTextStyle}>/{total}</Typography>\n          </div>\n          <div>\n            <BorderLinearProgress\n              variant=\"determinate\"\n              value={(completed! / total!) * 100}\n            />\n          </div>\n        </>\n      ) : (\n        <div className={containerStyle}>\n          <Typography className={smallTextStyle}>\n            Unable to retrieve Scores\n          </Typography>\n        </div>\n      )}\n    </Card>\n  );\n}\n\nexport default ServiceStandardsCard;\n"],"names":[],"mappings":";;;;;;AAuBA,SAAS,mBAAA,CAAoB,OAAc,UAAA,EAAoB;AAC7D,EAAA,IAAI,aAAa,GAAA,EAAK;AACpB,IAAA,OAAO,KAAA,CAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,EAC7B,CAAA,MAAA,IAAW,aAAa,GAAA,EAAK;AAC3B,IAAA,OAAO,KAAA,CAAM,QAAQ,OAAA,CAAQ,IAAA;AAAA,EAC/B;AACA,EAAA,OAAO,KAAA,CAAM,QAAQ,OAAA,CAAQ,IAAA;AAC/B;AAEA,SAAS,qBAAqB,EAAE,KAAA,EAAO,SAAA,EAAW,SAAA,EAAW,SAAQ,EAAU;AAC7E,EAAA,MAAM,SAAA,GAAY,WAA2B,CAAA,KAAA,MAAU;AAAA,IACrD,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,OAAA,KAAY,IAAA,GAAO,OAAA,GAAU,MAAA;AAAA,MACrC,OAAA,EAAS,MAAA;AAAA,MACT,gBAAA,EAAkB,eAAA;AAAA,MAClB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,MAAA;AAAA,MACT,cAAA,EAAgB,QAAA;AAAA,MAChB,SAAA,EAAW,OAAA,KAAY,IAAA,GAAO,QAAA,GAAW;AAAA,KAC3C;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EACE,SAAA,KAAc,MAAA,IAAa,KAAA,KAAU,MAAA,GACjC,mBAAA,CAAoB,KAAA,EAAO,SAAA,GAAY,KAAK,CAAA,GAC5C,mBAAA,CAAoB,KAAA,EAAO,CAAC,CAAA;AAAA,MAClC,SAAA,EAAW,QAAA;AAAA,MACX,cAAA,EAAgB;AAAA,KAClB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,KAAA,EAAO,MAAM,OAAA,CAAQ,UAAA;AAAA,MACrB,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,UAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,QAAA;AAAA,MACX,cAAA,EAAgB,QAAA;AAAA,MAChB,UAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS;AAAA,KACzC;AAAA,IACA,kBAAkB,EAAC;AAAA,IACnB,WAAA,EAAa;AAAA,MACX,WAAA,EAAa;AAAA,KACf;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY;AAAA;AACd,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,oBAAA,GAAuB,WAAW,CAAA,KAAA,MAAU;AAAA,IAChD,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ,EAAA;AAAA,MACR,YAAA,EAAc,CAAA;AAAA,MACd,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,eAAA,EACE,MAAM,OAAA,CAAQ,IAAA,CAAK,MAAM,OAAA,CAAQ,IAAA,KAAS,OAAA,GAAU,GAAA,GAAM,GAAG;AAAA,KACjE;AAAA,IACA,GAAA,EAAK;AAAA,MACH,YAAA,EAAc,CAAA;AAAA,MACd,eAAA,EACE,SAAA,KAAc,MAAA,IAAa,KAAA,KAAU,MAAA,GACjC,mBAAA,CAAoB,KAAA,EAAO,SAAA,GAAY,KAAK,CAAA,GAC5C,mBAAA,CAAoB,KAAA,EAAO,CAAC;AAAA;AACpC,GACF,CAAE,EAAE,cAAc,CAAA;AAElB,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,SAAA,EAAU;AAEd,EAAA,IACE,SAAA,KAAc,MAAA,IACd,SAAA,KAAc,MAAA,IACd,UAAU,MAAA,EACV;AACA,IAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,SAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAgB,QAAA,EAAA,2BAAA,EAEvC,GACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,QAAK,SAAA,EAAW,SAAA,EACd,wBAAc,MAAA,IAAa,KAAA,KAAU,yBACpC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,gBAAA,EACd,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAW,IAAA;AAAA,QACX,KAAA,kBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,SAAA,EAAW,GAAA,CAAI,CAAC,QAAA,EAAU,GAAA,qBACzB,GAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA,QAAA,CAAS,IAAA,mBACR,IAAA,CAAC,UAAA,EAAA,EAAW,WAAW,YAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WAAA,EAAA,EAAY,WAAW,WAAA,EAAa,CAAA;AAAA,UAAG,GAAA;AAAA,UACvC,QAAA,CAAS;AAAA,SAAA,EACZ,CAAA,mBAEA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,YAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,wBAAA,EAAA,EAAyB,WAAW,WAAA,EAAa,CAAA;AAAA,UAAG,GAAA;AAAA,UACpD,QAAA,CAAS;AAAA,SAAA,EACZ,CAAA,EAAA,EAVa,GAYjB,CACD,CAAA,EACH,CAAA;AAAA,QAGF,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,OAEd,CAAA,EACF,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,sBAClD,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE;AAAA,OAAA,EAAM;AAAA,KAAA,EACjD,CAAA;AAAA,wBACC,KAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,aAAA;AAAA,QACR,KAAA,EAAQ,YAAa,KAAA,GAAU;AAAA;AAAA,KACjC,EACF;AAAA,GAAA,EACF,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAgB,QAAA,EAAA,2BAAA,EAEvC,CAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ServiceStandardsCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/ServiceStandardsCard.tsx"],"sourcesContent":["import { BackstageTheme } from '@backstage/theme';\nimport {\n  LinearProgress,\n  Theme,\n  Typography,\n  makeStyles,\n  withStyles,\n} from '@material-ui/core';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { PagerDutyServiceStandard } from '@pagerduty/backstage-plugin-common';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\nimport { ButtonIcon, Card, Flex, Tooltip, TooltipTrigger } from '@backstage/ui';\n\ntype Props = {\n  total: number | undefined;\n  completed: number | undefined;\n  standards: PagerDutyServiceStandard[] | undefined;\n  compact?: boolean;\n};\n\nexport function colorFromPercentage(theme: Theme, percentage: number) {\n  if (percentage < 0.5) {\n    return theme.palette.error.main;\n  } else if (percentage < 0.8) {\n    return theme.palette.warning.main;\n  }\n  return theme.palette.success.main;\n}\n\nfunction ServiceStandardsCard({ total, completed, standards, compact }: Props) {\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      padding: 0,\n      position: 'relative',\n      backgroundColor: 'rgba(0, 0, 0, 0.03)',\n    },\n    largeTextStyle: {\n      fontSize: compact !== true ? '50px' : '40px',\n      color:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n      alignSelf: 'center',\n      justifyContent: 'center',\n    },\n    smallTextStyle: {\n      color: theme.palette.textSubtle,\n      fontSize: compact !== true ? '14px' : '12px',\n      fontWeight: 'bold',\n      alignSelf: 'center',\n      marginLeft: '-17px',\n      marginBottom: '-26px',\n    },\n    tooltipIcon: {\n      marginRight: '5px',\n    },\n    infoIcon: {\n      color: 'gray',\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n    standardItem: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    linearProgressContainer: {\n      left: 0,\n      position: 'absolute',\n      bottom: 0,\n      width: '100%',\n      padding: '0px',\n    },\n    textContainerStyle: {\n      position: 'absolute',\n      top: compact ? '5px' : '20px',\n      width: '100%',\n    },\n    tooltipTriggerStyles: {\n      position: 'relative',\n      zIndex: 1,\n    },\n  }));\n\n  const BorderLinearProgress = withStyles(theme => ({\n    root: {\n      height: 10,\n      borderRadius: 5,\n      margin: 5,\n    },\n    colorPrimary: {\n      backgroundColor:\n        theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],\n    },\n    bar: {\n      borderRadius: 5,\n      backgroundColor:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n    },\n  }))(LinearProgress);\n\n  const {\n    cardStyle,\n    largeTextStyle,\n    smallTextStyle,\n    linearProgressContainer,\n    tooltipIcon,\n    textContainerStyle,\n    infoIcon,\n    standardItem,\n    tooltipTriggerStyles,\n  } = useStyles();\n\n  if (\n    standards === undefined ||\n    completed === undefined ||\n    total === undefined\n  ) {\n    return (\n      <Card className={cardStyle}>\n        <Flex justify=\"center\">\n          <Typography className={smallTextStyle}>\n            Unable to retrieve Scores\n          </Typography>\n        </Flex>\n      </Card>\n    );\n  }\n\n  return (\n    <Card className={cardStyle}>\n      <Flex direction=\"column\">\n        <TooltipTrigger>\n          <ButtonIcon\n            className={tooltipTriggerStyles}\n            icon={<InfoIcon className={infoIcon} />}\n            variant=\"tertiary\"\n          />\n          <Tooltip>\n            {standards?.map((standard, key) => (\n              <Typography key={key}>\n                {standard.pass ? (\n                  <Typography className={standardItem}>\n                    <CheckCircle className={tooltipIcon} /> {standard.name}\n                  </Typography>\n                ) : (\n                  <Typography className={standardItem}>\n                    <RadioButtonUncheckedIcon className={tooltipIcon} />{' '}\n                    {standard.name}\n                  </Typography>\n                )}\n              </Typography>\n            ))}\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex justify=\"center\" className={textContainerStyle}>\n          <Typography className={largeTextStyle}>{completed}</Typography>\n          <Typography className={smallTextStyle}>/{total}</Typography>\n        </Flex>\n        <div className={linearProgressContainer}>\n          <BorderLinearProgress\n            variant=\"determinate\"\n            value={(completed! / total!) * 100}\n          />\n        </div>\n      </Flex>\n    </Card>\n  );\n}\n\nexport default ServiceStandardsCard;\n"],"names":[],"mappings":"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"}

package/dist/components/PagerDutyCardCommon/StatusCard.esm.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography, Card } from '@material-ui/core';
 import { useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { useApi } from '@backstage/core-plugin-api';
@@ -7,6 +6,8 @@ import { pagerDutyApiRef } from '../../api/client.esm.js';
 import { useAsyncFn } from 'react-use';
 import Alert from '@material-ui/lab/Alert/Alert';
 import { Progress } from '@backstage/core-components';
+import { Card } from '@backstage/ui';
+import { Typography } from '@material-ui/core';
 
 function labelFromStatus(status) {
   let label;
@@ -73,8 +74,7 @@ function StatusCard({ serviceId, refreshStatus, account, compact }) {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active"),
-      marginRight: "10px"
+      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active")
     },
     largeTextStyle: {
       color: "white",

package/dist/components/PagerDutyCardCommon/StatusCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/StatusCard.tsx"],"sourcesContent":["import { Card, Typography } from '@material-ui/core';\nimport { useEffect } from 'react';\nimport { Theme, makeStyles } from '@material-ui/core/styles';\nimport { BackstageTheme } from '@backstage/theme';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { useAsyncFn } from 'react-use';\nimport Alert from '@material-ui/lab/Alert/Alert';\nimport { Progress } from '@backstage/core-components';\n\ntype Props = {\n  serviceId: string;\n  refreshStatus: boolean;\n  account?: string;\n  compact?: boolean;\n};\n\nfunction labelFromStatus(status: string) {\n  let label;\n  switch (status) {\n    case 'active':\n      label = 'OK';\n      break;\n    case 'warning':\n      label = 'ACTIVE';\n      break;\n    case 'critical':\n      label = 'ALARM';\n      break;\n    case 'maintenance':\n      label = 'MAINTENANCE';\n      break;\n    case 'disabled':\n      label = 'DISABLED';\n      break;\n    default:\n      label = 'OK';\n      break;\n  }\n\n  return label;\n}\n\nfunction colorFromStatus(theme: Theme, status: string) {\n  let color;\n  switch (status) {\n    case 'active':\n      color = theme.palette.success.main;\n      break;\n    case 'warning':\n      color = theme.palette.warningBackground;\n      break;\n    case 'critical':\n      color = theme.palette.error.main;\n      break;\n    case 'maintenance':\n      color = '#ebdc00';\n      break;\n    case 'disabled':\n      color = '#A9A9A9';\n      break;\n    default:\n      color = theme.palette.success.main;\n      break;\n  }\n\n  return color;\n}\n\nfunction StatusCard({ serviceId, refreshStatus, account, compact }: Props) {\n  const api = useApi(pagerDutyApiRef);\n  const [{ value: status, loading, error }, getStatus] = useAsyncFn(\n    async () => {\n      const { service: foundService } = await api.getServiceById(\n        serviceId,\n        account,\n      );\n      return foundService.status;\n    },\n  );\n\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor:\n        status !== undefined\n          ? colorFromStatus(theme, status)\n          : colorFromStatus(theme, 'active'),\n      marginRight: '10px',\n    },\n    largeTextStyle: {\n      color: 'white',\n      fontWeight: 'bold',\n      fontSize: '20px',\n      wordWrap: 'break-word',\n    },\n  }));\n\n  const { cardStyle, largeTextStyle } = useStyles();\n\n  useEffect(() => {\n    getStatus();\n  }, [refreshStatus, getStatus]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <Typography>forbidden</Typography>;\n    }\n\n    return (\n      <Alert severity=\"error\">\n        Error encountered while fetching information. {error.message}\n      </Alert>\n    );\n  }\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (!status) {\n    return <Typography>not found</Typography>;\n  }\n\n  return (\n    <Card className={cardStyle}>\n      {status !== undefined ? (\n        <Typography className={largeTextStyle}>\n          {labelFromStatus(status)}\n        </Typography>\n      ) : (\n        <Typography className={largeTextStyle}>Unable to get status</Typography>\n      )}\n    </Card>\n  );\n}\n\nexport default StatusCard;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StatusCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/StatusCard.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Theme, makeStyles } from '@material-ui/core/styles';\nimport { BackstageTheme } from '@backstage/theme';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { useAsyncFn } from 'react-use';\nimport Alert from '@material-ui/lab/Alert/Alert';\nimport { Progress } from '@backstage/core-components';\nimport { Card } from '@backstage/ui';\nimport { Typography } from '@material-ui/core';\n\ntype Props = {\n  serviceId: string;\n  refreshStatus: boolean;\n  account?: string;\n  compact?: boolean;\n};\n\nfunction labelFromStatus(status: string) {\n  let label;\n  switch (status) {\n    case 'active':\n      label = 'OK';\n      break;\n    case 'warning':\n      label = 'ACTIVE';\n      break;\n    case 'critical':\n      label = 'ALARM';\n      break;\n    case 'maintenance':\n      label = 'MAINTENANCE';\n      break;\n    case 'disabled':\n      label = 'DISABLED';\n      break;\n    default:\n      label = 'OK';\n      break;\n  }\n\n  return label;\n}\n\nfunction colorFromStatus(theme: Theme, status: string) {\n  let color;\n  switch (status) {\n    case 'active':\n      color = theme.palette.success.main;\n      break;\n    case 'warning':\n      color = theme.palette.warningBackground;\n      break;\n    case 'critical':\n      color = theme.palette.error.main;\n      break;\n    case 'maintenance':\n      color = '#ebdc00';\n      break;\n    case 'disabled':\n      color = '#A9A9A9';\n      break;\n    default:\n      color = theme.palette.success.main;\n      break;\n  }\n\n  return color;\n}\n\nfunction StatusCard({ serviceId, refreshStatus, account, compact }: Props) {\n  const api = useApi(pagerDutyApiRef);\n  const [{ value: status, loading, error }, getStatus] = useAsyncFn(\n    async () => {\n      const { service: foundService } = await api.getServiceById(\n        serviceId,\n        account,\n      );\n      return foundService.status;\n    },\n  );\n\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor:\n        status !== undefined\n          ? colorFromStatus(theme, status)\n          : colorFromStatus(theme, 'active'),\n    },\n    largeTextStyle: {\n      color: 'white',\n      fontWeight: 'bold',\n      fontSize: '20px',\n      wordWrap: 'break-word',\n    },\n  }));\n\n  const { cardStyle, largeTextStyle } = useStyles();\n\n  useEffect(() => {\n    getStatus();\n  }, [refreshStatus, getStatus]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <Typography>forbidden</Typography>;\n    }\n\n    return (\n      <Alert severity=\"error\">\n        Error encountered while fetching information. {error.message}\n      </Alert>\n    );\n  }\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (!status) {\n    return <Typography>not found</Typography>;\n  }\n\n  return (\n    <Card className={cardStyle}>\n      {status !== undefined ? (\n        <Typography className={largeTextStyle}>\n          {labelFromStatus(status)}\n        </Typography>\n      ) : (\n        <Typography className={largeTextStyle}>Unable to get status</Typography>\n      )}\n    </Card>\n  );\n}\n\nexport default StatusCard;\n"],"names":[],"mappings":"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"}

package/dist/components/PagerDutyCardCommon/TriggerIncidentButton.esm.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { makeStyles, IconButton, Typography } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import { TriggerDialog } from '../TriggerDialog/TriggerDialog.esm.js';
 import AddAlert from '@material-ui/icons/AddAlert';
+import { ButtonIcon } from '@backstage/ui';
 
 function TriggerIncidentButton({
   integrationKey,
@@ -10,28 +11,21 @@ function TriggerIncidentButton({
   compact,
   handleRefresh
 }) {
-  const useStyles = makeStyles((theme) => ({
-    buttonStyle: {
-      color: theme.palette.text.primary,
-      "&:hover": {
-        backgroundColor: "transparent",
-        textDecoration: "underline"
-      }
-    },
+  const useStyles = makeStyles(() => ({
     containerStyle: {
       fontSize: compact !== true ? "12px" : "10px",
       width: compact !== true ? "80px" : "60px",
-      marginRight: "-10px"
-    },
-    iconStyle: {
-      fontSize: "30px",
-      marginBottom: "-10px"
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
     },
     textStyle: {
-      marginBottom: "-10px"
+      textAlign: "center",
+      fontSize: "12px",
+      minWidth: "30px"
     }
   }));
-  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();
+  const { containerStyle, textStyle } = useStyles();
   const [dialogShown, setDialogShown] = useState(false);
   const showDialog = useCallback(() => {
     setDialogShown(true);
@@ -41,19 +35,20 @@ function TriggerIncidentButton({
   }, [setDialogShown]);
   const disabled = !integrationKey;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        "aria-label": "create-incident",
-        onClick: showDialog,
-        className: disabled ? "" : buttonStyle,
-        disabled,
-        children: /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
-          /* @__PURE__ */ jsx(AddAlert, { className: iconStyle }),
-          /* @__PURE__ */ jsx(Typography, { className: textStyle, children: "Create new incident" })
-        ] })
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "tertiary",
+          size: "medium",
+          "aria-label": "create-incident",
+          onClick: showDialog,
+          isDisabled: disabled,
+          icon: /* @__PURE__ */ jsx(AddAlert, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { className: textStyle, children: "Create new incident" })
+    ] }),
     integrationKey && /* @__PURE__ */ jsx(
       TriggerDialog,
       {

package/dist/components/PagerDutyCardCommon/TriggerIncidentButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerIncidentButton.esm.js","sources":["../../../src/components/PagerDutyCardCommon/TriggerIncidentButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useCallback, useState } from 'react';\nimport { makeStyles, IconButton, Typography } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { TriggerDialog } from '../TriggerDialog';\nimport AddAlert from '@material-ui/icons/AddAlert';\n\n/** @public */\nexport type TriggerIncidentButtonProps = {\n  integrationKey: string | undefined;\n  entityName: string;\n  compact?: boolean;\n  handleRefresh: () => void;\n};\n\n/** @public */\nexport function TriggerIncidentButton({\n  integrationKey,\n  entityName,\n  compact,\n  handleRefresh,\n}: TriggerIncidentButtonProps) {\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    buttonStyle: {\n      color: theme.palette.text.primary,\n      '&:hover': {\n        backgroundColor: 'transparent',\n        textDecoration: 'underline',\n      },\n    },\n    containerStyle: {\n      fontSize: compact !== true ? '12px' : '10px',\n      width: compact !== true ? '80px' : '60px',\n      marginRight: '-10px',\n    },\n    iconStyle: {\n      fontSize: '30px',\n      marginBottom: '-10px',\n    },\n    textStyle: {\n      marginBottom: '-10px',\n    },\n  }));\n\n  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();\n  const [dialogShown, setDialogShown] = useState<boolean>(false);\n\n  const showDialog = useCallback(() => {\n    setDialogShown(true);\n  }, [setDialogShown]);\n  const hideDialog = useCallback(() => {\n    setDialogShown(false);\n  }, [setDialogShown]);\n\n  const disabled = !integrationKey;\n\n  return (\n    <>\n      <IconButton\n        aria-label=\"create-incident\"\n        onClick={showDialog}\n        className={disabled ? '' : buttonStyle}\n        disabled={disabled}\n      >\n        <div className={containerStyle}>\n          <AddAlert className={iconStyle} />\n          <Typography className={textStyle}>Create new incident</Typography>\n        </div>\n      </IconButton>\n      {integrationKey && (\n        <TriggerDialog\n          showDialog={dialogShown}\n          handleDialog={hideDialog}\n          integrationKey={integrationKey}\n          serviceName={entityName}\n          onIncidentCreated={handleRefresh}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAiCO,SAAS,qBAAA,CAAsB;AAAA,EACpC,cAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,SAAA,GAAY,WAA2B,CAAA,KAAA,MAAU;AAAA,IACrD,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,MAC1B,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,aAAA;AAAA,QACjB,cAAA,EAAgB;AAAA;AAClB,KACF;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EAAO,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACnC,WAAA,EAAa;AAAA,KACf;AAAA,IACA,SAAA,EAAW;AAAA,MACT,QAAA,EAAU,MAAA;AAAA,MACV,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,SAAA,EAAW;AAAA,MACT,YAAA,EAAc;AAAA;AAChB,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,SAAA,EAAW,SAAA,KAAc,SAAA,EAAU;AACxE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AACnB,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAW,CAAC,cAAA;AAElB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,iBAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,SAAA,EAAW,WAAW,EAAA,GAAK,WAAA;AAAA,QAC3B,QAAA;AAAA,QAEA,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAW,SAAA,EAAW,CAAA;AAAA,0BAChC,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,SAAA,EAAW,QAAA,EAAA,qBAAA,EAAmB;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,cAAA,oBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,WAAA;AAAA,QACZ,YAAA,EAAc,UAAA;AAAA,QACd,cAAA;AAAA,QACA,WAAA,EAAa,UAAA;AAAA,QACb,iBAAA,EAAmB;AAAA;AAAA;AACrB,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TriggerIncidentButton.esm.js","sources":["../../../src/components/PagerDutyCardCommon/TriggerIncidentButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useCallback, useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { TriggerDialog } from '../TriggerDialog';\nimport AddAlert from '@material-ui/icons/AddAlert';\nimport { ButtonIcon } from '@backstage/ui';\n\n/** @public */\nexport type TriggerIncidentButtonProps = {\n  integrationKey: string | undefined;\n  entityName: string;\n  compact?: boolean;\n  handleRefresh: () => void;\n};\n\n/** @public */\nexport function TriggerIncidentButton({\n  integrationKey,\n  entityName,\n  compact,\n  handleRefresh,\n}: TriggerIncidentButtonProps) {\n  const useStyles = makeStyles<BackstageTheme>(() => ({\n    containerStyle: {\n      fontSize: compact !== true ? '12px' : '10px',\n      width: compact !== true ? '80px' : '60px',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n    },\n    textStyle: {\n      textAlign: 'center',\n      fontSize: '12px',\n      minWidth: '30px',\n    },\n  }));\n\n  const { containerStyle, textStyle } = useStyles();\n  const [dialogShown, setDialogShown] = useState<boolean>(false);\n\n  const showDialog = useCallback(() => {\n    setDialogShown(true);\n  }, [setDialogShown]);\n  const hideDialog = useCallback(() => {\n    setDialogShown(false);\n  }, [setDialogShown]);\n\n  const disabled = !integrationKey;\n\n  return (\n    <>\n      <div className={containerStyle}>\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"medium\"\n          aria-label=\"create-incident\"\n          onClick={showDialog}\n          isDisabled={disabled}\n          icon={<AddAlert />}\n        />\n\n        <Typography className={textStyle}>Create new incident</Typography>\n      </div>\n      {integrationKey && (\n        <TriggerDialog\n          showDialog={dialogShown}\n          handleDialog={hideDialog}\n          integrationKey={integrationKey}\n          serviceName={entityName}\n          onIncidentCreated={handleRefresh}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAkCO,SAAS,qBAAA,CAAsB;AAAA,EACpC,cAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,SAAA,GAAY,WAA2B,OAAO;AAAA,IAClD,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EAAO,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACnC,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,UAAA,EAAY;AAAA,KACd;AAAA,IACA,SAAA,EAAW;AAAA,MACT,SAAA,EAAW,QAAA;AAAA,MACX,QAAA,EAAU,MAAA;AAAA,MACV,QAAA,EAAU;AAAA;AACZ,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,SAAA,EAAU,GAAI,SAAA,EAAU;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AACnB,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAW,CAAC,cAAA;AAElB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,cAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,UAAA;AAAA,UACR,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,iBAAA;AAAA,UACX,OAAA,EAAS,UAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,IAAA,sBAAO,QAAA,EAAA,EAAS;AAAA;AAAA,OAClB;AAAA,sBAEA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,SAAA,EAAW,QAAA,EAAA,qBAAA,EAAmB;AAAA,KAAA,EACvD,CAAA;AAAA,IACC,cAAA,oBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,WAAA;AAAA,QACZ,YAAA,EAAc,UAAA;AAAA,QACd,cAAA;AAAA,QACA,WAAA,EAAa,UAAA;AAAA,QACb,iBAAA,EAAmB;AAAA;AAAA;AACrB,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyPage/MappingTable.esm.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
 import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
-import { Typography, Box, Tooltip, IconButton, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
+import { Typography, Box, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
+import { Flex, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
 import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
 import { Edit, OpenInBrowser } from '@mui/icons-material';
 import { useApi } from '@backstage/core-plugin-api';
@@ -202,24 +203,34 @@ const MappingTable = ({
         ),
         /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(MRT_EditActionButtons, { variant: "text", table, row }) })
       ] }),
-      renderRowActions: ({ row, table }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, children: [
-        /* @__PURE__ */ jsx(Tooltip, { title: "Edit", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            onClick: () => {
-              getEntityOptions();
-              table.setEditingRow(row);
-            },
-            children: /* @__PURE__ */ jsx(Edit, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Tooltip, { title: "Open in PagerDuty", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            onClick: () => openInBrowser(row.getValue("serviceUrl")),
-            children: /* @__PURE__ */ jsx(OpenInBrowser, {})
-          }
-        ) })
+      renderRowActions: ({ row, table }) => /* @__PURE__ */ jsxs(Flex, { children: [
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              "aria-label": "Edit",
+              variant: "tertiary",
+              onClick: () => {
+                getEntityOptions();
+                table.setEditingRow(row);
+              },
+              icon: /* @__PURE__ */ jsx(Edit, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: "Edit" })
+        ] }),
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              "aria-label": "Open in PagerDuty",
+              variant: "tertiary",
+              onClick: () => openInBrowser(row.getValue("serviceUrl")),
+              icon: /* @__PURE__ */ jsx(OpenInBrowser, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: " Open in PagerDuty" })
+        ] })
       ] }),
       state: {
         isLoading: mappings.length === 0 || catalogEntities.length === 0,

package/dist/components/PagerDutyPage/MappingTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MappingTable.esm.js","sources":["../../../src/components/PagerDutyPage/MappingTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { PagerDutyEntityMapping } from '@pagerduty/backstage-plugin-common';\nimport {\n  MRT_ColumnDef,\n  MRT_EditActionButtons,\n  MRT_TableOptions,\n  MaterialReactTable,\n  useMaterialReactTable,\n} from 'material-react-table';\nimport {\n  Box,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport {\n  QueryClient,\n  QueryClientProvider,\n  useMutation,\n} from '@tanstack/react-query';\nimport { Edit, OpenInBrowser } from '@mui/icons-material';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\n\ntype BackstageEntity = {\n  id: string;\n  name: string;\n  namespace: string;\n  type: string;\n  system: string;\n  owner: string;\n  lifecycle: string;\n  annotations: Annotations;\n};\n\nexport type Annotations = {\n  'pagerduty.com/integration-key': string;\n  'pagerduty.com/service-id': string;\n};\n\nfunction getColorFromStatus(status?: string) {\n  switch (status) {\n    case 'InSync':\n      return 'green';\n    case 'OutOfSync':\n      return 'red';\n    case 'NotMapped':\n      return 'orange';\n    default:\n      return 'gray';\n  }\n}\n\nfunction makeReadable(status?: string) {\n  switch (status) {\n    case 'InSync':\n      return 'In Sync';\n    case 'OutOfSync':\n      return 'Out of Sync';\n    case 'NotMapped':\n      return 'Not Mapped';\n    default:\n      return 'Refresh to Update';\n  }\n}\n\ntype CatalogEntityOptions = {\n  value: string;\n  label: string;\n};\n\ntype MappingTableProps = {\n  mappings: PagerDutyEntityMapping[];\n  catalogEntities: BackstageEntity[];\n};\n\nexport const MappingTable = ({\n  mappings,\n  catalogEntities,\n}: MappingTableProps) => {\n  const DenseTable = () => {\n    const [validationErrors, setValidationErrors] = useState<\n      Record<string, string | undefined>\n    >({});\n    const [entityOptions, setEntityOptions] = useState<CatalogEntityOptions[]>(\n      [],\n    );\n    const pagerDutyApi = useApi(pagerDutyApiRef);\n\n    useEffect(() => {\n      getEntityOptions();\n    }, []);\n\n    const columns = useMemo<MRT_ColumnDef<PagerDutyEntityMapping>[]>(\n      () => [\n        {\n          id: 'serviceId',\n          accessorKey: 'serviceId',\n          header: 'Service ID',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n          Cell: ({ cell }) => (\n            <Typography variant=\"body1\" style={{ fontWeight: 600 }}>\n              {cell.getValue<string>()}\n            </Typography>\n          ),\n        },\n        {\n          id: 'integrationKey',\n          accessorKey: 'integrationKey',\n          header: 'Integration Key',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'serviceName',\n          accessorKey: 'serviceName',\n          header: 'PagerDuty Service',\n          enableEditing: false,\n        },\n        {\n          id: 'account',\n          accessorKey: 'account',\n          header: 'Account',\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'team',\n          accessorKey: 'team',\n          header: 'Team',\n          enableEditing: false,\n        },\n        {\n          id: 'escalationPolicy',\n          accessorKey: 'escalationPolicy',\n          header: 'Escalation Policy',\n          enableEditing: false,\n        },\n        {\n          id: 'entityRef',\n          accessorKey: 'entityRef',\n          header: 'Mapping',\n          visibleInShowHideMenu: false,\n          editVariant: 'select',\n          editSelectOptions: entityOptions,\n          muiEditTextFieldProps: {\n            select: true,\n            error: !!validationErrors?.state,\n            helperText: validationErrors?.state,\n            multiline: true,\n            type: 'range',\n          },\n        },\n        {\n          id: 'entityName',\n          accessorKey: 'entityName',\n          header: 'Mapped Entity Name',\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'status',\n          accessorKey: 'status',\n          header: 'Status',\n          enableEditing: false,\n          Edit: () => null,\n          Cell: ({ cell }) => (\n            <Box\n              component=\"span\"\n              bgcolor={getColorFromStatus(cell.getValue<string>())}\n              borderRadius=\"0.25rem\"\n              color=\"white\"\n              p=\"0.25rem\"\n            >\n              {makeReadable(cell.getValue<string>())}\n            </Box>\n          ),\n        },\n        {\n          id: 'serviceUrl',\n          accessorKey: 'serviceUrl',\n          header: 'Service URL',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n        },\n      ],\n      [validationErrors, entityOptions],\n    );\n\n    // UPDATE hook (put mapping in api)\n    function useUpdateMapping() {\n      return useMutation({\n        mutationFn: async (mapping: PagerDutyEntityMapping) => {\n          return await pagerDutyApi.storeServiceMapping(\n            mapping.serviceId,\n            mapping.integrationKey ?? '',\n            mapping.entityRef,\n            mapping.account ?? '',\n          );\n        },\n      });\n    }\n\n    // call UPDATE hook\n    const { mutateAsync: updateMapping, isPending: isUpdatingMapping } =\n      useUpdateMapping();\n\n    // UPDATE action\n    const handleSaveMapping: MRT_TableOptions<PagerDutyEntityMapping>['onEditingRowSave'] =\n      async ({ values, table }) => {\n        setValidationErrors({});\n\n        values.entityName =\n          catalogEntities.find(\n            entity =>\n              `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase() ===\n              values.entityRef,\n          )?.name ?? '';\n        values.status = 'RefreshToUpdate';\n\n        await updateMapping(values);\n\n        // find corresponding mapping in mappings array\n        // and update it with new values\n        const existingMapping = mappings.find(\n          item => item.serviceId === values.serviceId,\n        );\n        if (existingMapping) {\n          existingMapping.entityRef = values.entityRef;\n          existingMapping.entityName = values.entityName;\n        }\n\n        table.setEditingRow(null); // exit editing mode\n      };\n\n    const openInBrowser = (url: string) => {\n      window.open(url, '_blank', 'noreferrer');\n    };\n\n    const dataTable = useMaterialReactTable({\n      columns,\n      data: mappings,\n      editDisplayMode: 'modal',\n      enableEditing: true,\n      positionActionsColumn: 'last',\n      enableStickyHeader: true,\n      enableFilters: true,\n      getRowId: row => row.serviceId,\n      muiToolbarAlertBannerProps:\n        mappings === undefined\n          ? {\n              color: 'error',\n              children: 'Error loading data',\n            }\n          : undefined,\n      muiTableContainerProps: {\n        sx: {\n          minHeight: '500px',\n        },\n      },\n      onEditingRowCancel: () => setValidationErrors({}),\n      onEditingRowSave: handleSaveMapping,\n      renderEditRowDialogContent: ({ table, row, internalEditComponents }) => (\n        <>\n          <DialogTitle>Update Entity Mapping</DialogTitle>\n          <DialogContent\n            style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}\n          >\n            {internalEditComponents}\n          </DialogContent>\n          <DialogActions>\n            <MRT_EditActionButtons variant=\"text\" table={table} row={row} />\n          </DialogActions>\n        </>\n      ),\n      renderRowActions: ({ row, table }) => (\n        <Box sx={{ display: 'flex' }}>\n          <Tooltip title=\"Edit\">\n            <IconButton\n              onClick={() => {\n                getEntityOptions();\n                table.setEditingRow(row);\n              }}\n            >\n              <Edit />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Open in PagerDuty\">\n            <IconButton\n              onClick={() => openInBrowser(row.getValue('serviceUrl'))}\n            >\n              <OpenInBrowser />\n            </IconButton>\n          </Tooltip>\n        </Box>\n      ),\n      state: {\n        isLoading: mappings.length === 0 || catalogEntities.length === 0,\n        isSaving: isUpdatingMapping,\n        showAlertBanner:\n          mappings === undefined || catalogEntities === undefined,\n        showProgressBars: mappings.length === 0 || catalogEntities.length === 0,\n      },\n      initialState: {\n        columnVisibility: {\n          serviceId: false,\n          entityRef: false,\n          serviceUrl: false,\n          integrationKey: false,\n        },\n      },\n    });\n\n    function getEntityOptions() {\n      const options: CatalogEntityOptions[] = [];\n      // initialize with empty object\n      options.push({ value: '', label: 'None' });\n\n      catalogEntities.forEach(entity => {\n        // find service-id annotation in entity\n        const foundServiceAnnotation =\n          entity.annotations['pagerduty.com/service-id'];\n\n        // find integration-key annotation in entity\n        const foundIntegrationKeyAnnotation =\n          entity.annotations['pagerduty.com/integration-key'];\n\n        // find entity with service-id in mappings array if service-id is found in entity\n        let foundServiceMapping: PagerDutyEntityMapping | undefined;\n        if (foundServiceAnnotation || foundIntegrationKeyAnnotation) {\n          foundServiceMapping = mappings.find(\n            item =>\n              item.serviceId === foundServiceAnnotation ||\n              item.integrationKey === foundIntegrationKeyAnnotation,\n          );\n        }\n\n        const entityRef =\n          `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase();\n        // find entity with entity.id in entityMappings array\n        const foundEntityMapping = mappings.find(\n          item => item.entityRef === entityRef,\n        );\n\n        if (\n          (!foundEntityMapping &&\n            (!foundServiceAnnotation || !foundIntegrationKeyAnnotation)) ||\n          ((foundServiceAnnotation || foundIntegrationKeyAnnotation) &&\n            foundServiceMapping &&\n            !foundEntityMapping)\n        ) {\n          options.push({\n            value: entityRef,\n            label: entity.name,\n          });\n        }\n      });\n\n      setEntityOptions(options);\n    }\n\n    return <MaterialReactTable table={dataTable} />;\n  };\n\n  const queryClient = new QueryClient();\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <DenseTable />\n    </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MappingTable.esm.js","sources":["../../../src/components/PagerDutyPage/MappingTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { PagerDutyEntityMapping } from '@pagerduty/backstage-plugin-common';\nimport {\n  MRT_ColumnDef,\n  MRT_EditActionButtons,\n  MRT_TableOptions,\n  MaterialReactTable,\n  useMaterialReactTable,\n} from 'material-react-table';\nimport {\n  Box,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Typography,\n} from '@material-ui/core';\nimport { Flex, Tooltip, TooltipTrigger, ButtonIcon } from '@backstage/ui';\nimport {\n  QueryClient,\n  QueryClientProvider,\n  useMutation,\n} from '@tanstack/react-query';\nimport { Edit, OpenInBrowser } from '@mui/icons-material';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\n\ntype BackstageEntity = {\n  id: string;\n  name: string;\n  namespace: string;\n  type: string;\n  system: string;\n  owner: string;\n  lifecycle: string;\n  annotations: Annotations;\n};\n\nexport type Annotations = {\n  'pagerduty.com/integration-key': string;\n  'pagerduty.com/service-id': string;\n};\n\nfunction getColorFromStatus(status?: string) {\n  switch (status) {\n    case 'InSync':\n      return 'green';\n    case 'OutOfSync':\n      return 'red';\n    case 'NotMapped':\n      return 'orange';\n    default:\n      return 'gray';\n  }\n}\n\nfunction makeReadable(status?: string) {\n  switch (status) {\n    case 'InSync':\n      return 'In Sync';\n    case 'OutOfSync':\n      return 'Out of Sync';\n    case 'NotMapped':\n      return 'Not Mapped';\n    default:\n      return 'Refresh to Update';\n  }\n}\n\ntype CatalogEntityOptions = {\n  value: string;\n  label: string;\n};\n\ntype MappingTableProps = {\n  mappings: PagerDutyEntityMapping[];\n  catalogEntities: BackstageEntity[];\n};\n\nexport const MappingTable = ({\n  mappings,\n  catalogEntities,\n}: MappingTableProps) => {\n  const DenseTable = () => {\n    const [validationErrors, setValidationErrors] = useState<\n      Record<string, string | undefined>\n    >({});\n    const [entityOptions, setEntityOptions] = useState<CatalogEntityOptions[]>(\n      [],\n    );\n    const pagerDutyApi = useApi(pagerDutyApiRef);\n\n    useEffect(() => {\n      getEntityOptions();\n    }, []);\n\n    const columns = useMemo<MRT_ColumnDef<PagerDutyEntityMapping>[]>(\n      () => [\n        {\n          id: 'serviceId',\n          accessorKey: 'serviceId',\n          header: 'Service ID',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n          Cell: ({ cell }) => (\n            <Typography variant=\"body1\" style={{ fontWeight: 600 }}>\n              {cell.getValue<string>()}\n            </Typography>\n          ),\n        },\n        {\n          id: 'integrationKey',\n          accessorKey: 'integrationKey',\n          header: 'Integration Key',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'serviceName',\n          accessorKey: 'serviceName',\n          header: 'PagerDuty Service',\n          enableEditing: false,\n        },\n        {\n          id: 'account',\n          accessorKey: 'account',\n          header: 'Account',\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'team',\n          accessorKey: 'team',\n          header: 'Team',\n          enableEditing: false,\n        },\n        {\n          id: 'escalationPolicy',\n          accessorKey: 'escalationPolicy',\n          header: 'Escalation Policy',\n          enableEditing: false,\n        },\n        {\n          id: 'entityRef',\n          accessorKey: 'entityRef',\n          header: 'Mapping',\n          visibleInShowHideMenu: false,\n          editVariant: 'select',\n          editSelectOptions: entityOptions,\n          muiEditTextFieldProps: {\n            select: true,\n            error: !!validationErrors?.state,\n            helperText: validationErrors?.state,\n            multiline: true,\n            type: 'range',\n          },\n        },\n        {\n          id: 'entityName',\n          accessorKey: 'entityName',\n          header: 'Mapped Entity Name',\n          enableEditing: false,\n          Edit: () => null,\n        },\n        {\n          id: 'status',\n          accessorKey: 'status',\n          header: 'Status',\n          enableEditing: false,\n          Edit: () => null,\n          Cell: ({ cell }) => (\n            <Box\n              component=\"span\"\n              bgcolor={getColorFromStatus(cell.getValue<string>())}\n              borderRadius=\"0.25rem\"\n              color=\"white\"\n              p=\"0.25rem\"\n            >\n              {makeReadable(cell.getValue<string>())}\n            </Box>\n          ),\n        },\n        {\n          id: 'serviceUrl',\n          accessorKey: 'serviceUrl',\n          header: 'Service URL',\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n        },\n      ],\n      [validationErrors, entityOptions],\n    );\n\n    // UPDATE hook (put mapping in api)\n    function useUpdateMapping() {\n      return useMutation({\n        mutationFn: async (mapping: PagerDutyEntityMapping) => {\n          return await pagerDutyApi.storeServiceMapping(\n            mapping.serviceId,\n            mapping.integrationKey ?? '',\n            mapping.entityRef,\n            mapping.account ?? '',\n          );\n        },\n      });\n    }\n\n    // call UPDATE hook\n    const { mutateAsync: updateMapping, isPending: isUpdatingMapping } =\n      useUpdateMapping();\n\n    // UPDATE action\n    const handleSaveMapping: MRT_TableOptions<PagerDutyEntityMapping>['onEditingRowSave'] =\n      async ({ values, table }) => {\n        setValidationErrors({});\n\n        values.entityName =\n          catalogEntities.find(\n            entity =>\n              `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase() ===\n              values.entityRef,\n          )?.name ?? '';\n        values.status = 'RefreshToUpdate';\n\n        await updateMapping(values);\n\n        // find corresponding mapping in mappings array\n        // and update it with new values\n        const existingMapping = mappings.find(\n          item => item.serviceId === values.serviceId,\n        );\n        if (existingMapping) {\n          existingMapping.entityRef = values.entityRef;\n          existingMapping.entityName = values.entityName;\n        }\n\n        table.setEditingRow(null); // exit editing mode\n      };\n\n    const openInBrowser = (url: string) => {\n      window.open(url, '_blank', 'noreferrer');\n    };\n\n    const dataTable = useMaterialReactTable({\n      columns,\n      data: mappings,\n      editDisplayMode: 'modal',\n      enableEditing: true,\n      positionActionsColumn: 'last',\n      enableStickyHeader: true,\n      enableFilters: true,\n      getRowId: row => row.serviceId,\n      muiToolbarAlertBannerProps:\n        mappings === undefined\n          ? {\n              color: 'error',\n              children: 'Error loading data',\n            }\n          : undefined,\n      muiTableContainerProps: {\n        sx: {\n          minHeight: '500px',\n        },\n      },\n      onEditingRowCancel: () => setValidationErrors({}),\n      onEditingRowSave: handleSaveMapping,\n      renderEditRowDialogContent: ({ table, row, internalEditComponents }) => (\n        <>\n          <DialogTitle>Update Entity Mapping</DialogTitle>\n          <DialogContent\n            style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}\n          >\n            {internalEditComponents}\n          </DialogContent>\n          <DialogActions>\n            <MRT_EditActionButtons variant=\"text\" table={table} row={row} />\n          </DialogActions>\n        </>\n      ),\n      renderRowActions: ({ row, table }) => (\n        <Flex>\n          <TooltipTrigger>\n            <ButtonIcon\n              aria-label=\"Edit\"\n              variant=\"tertiary\"\n              onClick={() => {\n                getEntityOptions();\n                table.setEditingRow(row);\n              }}\n              icon={<Edit />}\n            />\n            <Tooltip>Edit</Tooltip>\n          </TooltipTrigger>\n          <TooltipTrigger>\n            <ButtonIcon\n              aria-label=\"Open in PagerDuty\"\n              variant=\"tertiary\"\n              onClick={() => openInBrowser(row.getValue('serviceUrl'))}\n              icon={<OpenInBrowser />}\n            />\n            <Tooltip> Open in PagerDuty</Tooltip>\n          </TooltipTrigger>\n        </Flex>\n      ),\n      state: {\n        isLoading: mappings.length === 0 || catalogEntities.length === 0,\n        isSaving: isUpdatingMapping,\n        showAlertBanner:\n          mappings === undefined || catalogEntities === undefined,\n        showProgressBars: mappings.length === 0 || catalogEntities.length === 0,\n      },\n      initialState: {\n        columnVisibility: {\n          serviceId: false,\n          entityRef: false,\n          serviceUrl: false,\n          integrationKey: false,\n        },\n      },\n    });\n\n    function getEntityOptions() {\n      const options: CatalogEntityOptions[] = [];\n      // initialize with empty object\n      options.push({ value: '', label: 'None' });\n\n      catalogEntities.forEach(entity => {\n        // find service-id annotation in entity\n        const foundServiceAnnotation =\n          entity.annotations['pagerduty.com/service-id'];\n\n        // find integration-key annotation in entity\n        const foundIntegrationKeyAnnotation =\n          entity.annotations['pagerduty.com/integration-key'];\n\n        // find entity with service-id in mappings array if service-id is found in entity\n        let foundServiceMapping: PagerDutyEntityMapping | undefined;\n        if (foundServiceAnnotation || foundIntegrationKeyAnnotation) {\n          foundServiceMapping = mappings.find(\n            item =>\n              item.serviceId === foundServiceAnnotation ||\n              item.integrationKey === foundIntegrationKeyAnnotation,\n          );\n        }\n\n        const entityRef =\n          `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase();\n        // find entity with entity.id in entityMappings array\n        const foundEntityMapping = mappings.find(\n          item => item.entityRef === entityRef,\n        );\n\n        if (\n          (!foundEntityMapping &&\n            (!foundServiceAnnotation || !foundIntegrationKeyAnnotation)) ||\n          ((foundServiceAnnotation || foundIntegrationKeyAnnotation) &&\n            foundServiceMapping &&\n            !foundEntityMapping)\n        ) {\n          options.push({\n            value: entityRef,\n            label: entity.name,\n          });\n        }\n      });\n\n      setEntityOptions(options);\n    }\n\n    return <MaterialReactTable table={dataTable} />;\n  };\n\n  const queryClient = new QueryClient();\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <DenseTable />\n    </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":"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"}