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

package/dist/components/Incident/IncidentListItem.esm.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyles, ListItem, ListItemText, Typography, Chip, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
+import { makeStyles, ListItem, ListItemText, Typography, Chip, ListItemSecondaryAction } from '@material-ui/core';
+import { TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
 import { DateTime, Duration } from 'luxon';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { Link } from '@backstage/core-components';
@@ -58,10 +59,6 @@ const useStyles = makeStyles((theme) => ({
   textContainer: {
     display: "flex",
     alignItems: "baseline"
-  },
-  smallIconStyle: {
-    color: theme.palette.text.primary,
-    marginRight: "-20px"
   }
 }));
 const IncidentListItem = ({ incident }) => {
@@ -69,6 +66,9 @@ const IncidentListItem = ({ incident }) => {
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(incident.created_at).getTime();
   const createdAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
   const user = incident.assignments[0]?.assignee;
+  const handleIncidentClick = () => {
+    window.open(incident.html_url, "_blank", "noopener,noreferrer");
+  };
   return /* @__PURE__ */ jsxs(ListItem, { dense: true, children: [
     /* @__PURE__ */ jsx(
       ListItemText,
@@ -109,16 +109,18 @@ const IncidentListItem = ({ incident }) => {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(Tooltip, { title: "View in PagerDuty", placement: "top", children: /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        href: incident.html_url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: classes.smallIconStyle,
-        children: /* @__PURE__ */ jsx(OpenInBrowserIcon, {})
-      }
-    ) }) })
+    /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          "aria-label": "view-in-pd-button",
+          icon: /* @__PURE__ */ jsx(OpenInBrowserIcon, {}),
+          variant: "tertiary",
+          onClick: handleIncidentClick
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { children: "View in PagerDuty" })
+    ] }) })
   ] }, incident.id);
 };
 

package/dist/components/Incident/IncidentListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"IncidentListItem.esm.js","sources":["../../../src/components/Incident/IncidentListItem.tsx"],"sourcesContent":["/*\n * Copyright 2020 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// eslint-disable-next-line @backstage/no-undeclared-imports\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  Tooltip,\n  ListItemText,\n  makeStyles,\n  IconButton,\n  Typography,\n  Chip,\n} from '@material-ui/core';\nimport { DateTime, Duration } from 'luxon';\nimport { PagerDutyIncident } from '@pagerduty/backstage-plugin-common';\nimport OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';\nimport { BackstageTheme } from '@backstage/theme';\nimport { Link } from '@backstage/core-components';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  denseListIcon: {\n    marginRight: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  listItemPrimary: {\n    fontWeight: 'bold',\n  },\n  warning: {\n    borderColor: theme.palette.warning.main,\n    color: '#fff',\n    backgroundColor: theme.palette.warning.main,\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: '#fff',\n    },\n  },\n  error: {\n    borderColor: theme.palette.error.main,\n    color: '#fff',\n    backgroundColor: theme.palette.error.main,\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: '#fff',\n    },\n  },\n  lowUrgency: {\n    borderColor: theme.palette.warning.main,\n    color: theme.palette.warning.main,\n    backgroundColor: '#fff',\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: theme.palette.warning.main,\n    },\n  },\n  highUrgency: {\n    borderColor: theme.palette.error.main,\n    color: theme.palette.error.main,\n    backgroundColor: '#fff',\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: theme.palette.error.main,\n    },\n  },\n  textContainer: {\n    display: 'flex',\n    alignItems: 'baseline',\n  },\n  smallIconStyle: {\n    color: theme.palette.text.primary,\n    marginRight: '-20px',\n  },\n}));\n\ntype Props = {\n  incident: PagerDutyIncident;\n};\n\nexport const IncidentListItem = ({ incident }: Props) => {\n  const classes = useStyles();\n  const duration =\n    new Date().getTime() - new Date(incident.created_at).getTime();\n  const createdAt = DateTime.local()\n    .minus(Duration.fromMillis(duration))\n    .toRelative({ locale: 'en' });\n  const user = incident.assignments[0]?.assignee;\n\n  return (\n    <ListItem dense key={incident.id}>\n      <ListItemText\n        primary={\n          <div className={classes.textContainer}>\n            <Chip\n              data-testid={`chip-${incident.status}`}\n              label={incident.status}\n              size=\"small\"\n              variant=\"outlined\"\n              className={\n                incident.status === 'triggered'\n                  ? classes.error\n                  : classes.warning\n              }\n            />\n            <Chip\n              data-testid={`chip-${incident.urgency}`}\n              label={`${incident.urgency} urgency`}\n              size=\"small\"\n              variant=\"outlined\"\n              className={\n                incident.urgency === 'high'\n                  ? classes.highUrgency\n                  : classes.lowUrgency\n              }\n            />\n            {incident.title}\n          </div>\n        }\n        primaryTypographyProps={{\n          variant: 'body1',\n          className: classes.listItemPrimary,\n        }}\n        secondary={\n          <Typography noWrap variant=\"body2\" color=\"textSecondary\">\n            Created {createdAt} and assigned to{' '}\n            <Link to={user?.html_url ?? '#'}>{user?.summary ?? 'nobody'}</Link>\n          </Typography>\n        }\n      />\n      <ListItemSecondaryAction>\n        <Tooltip title=\"View in PagerDuty\" placement=\"top\">\n          <IconButton\n            href={incident.html_url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={classes.smallIconStyle}\n          >\n            <OpenInBrowserIcon />\n          </IconButton>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"IncidentListItem.esm.js","sources":["../../../src/components/Incident/IncidentListItem.tsx"],"sourcesContent":["/*\n * Copyright 2020 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// eslint-disable-next-line @backstage/no-undeclared-imports\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n  makeStyles,\n  Typography,\n  Chip,\n} from '@material-ui/core';\nimport { ButtonIcon, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport { DateTime, Duration } from 'luxon';\nimport { PagerDutyIncident } from '@pagerduty/backstage-plugin-common';\nimport OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';\nimport { BackstageTheme } from '@backstage/theme';\nimport { Link } from '@backstage/core-components';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  denseListIcon: {\n    marginRight: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  listItemPrimary: {\n    fontWeight: 'bold',\n  },\n  warning: {\n    borderColor: theme.palette.warning.main,\n    color: '#fff',\n    backgroundColor: theme.palette.warning.main,\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: '#fff',\n    },\n  },\n  error: {\n    borderColor: theme.palette.error.main,\n    color: '#fff',\n    backgroundColor: theme.palette.error.main,\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: '#fff',\n    },\n  },\n  lowUrgency: {\n    borderColor: theme.palette.warning.main,\n    color: theme.palette.warning.main,\n    backgroundColor: '#fff',\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: theme.palette.warning.main,\n    },\n  },\n  highUrgency: {\n    borderColor: theme.palette.error.main,\n    color: theme.palette.error.main,\n    backgroundColor: '#fff',\n    boxShadow: '0 4px 4px 0 rgba(0,0,0,0.2)',\n    textTransform: 'uppercase',\n    '& *': {\n      color: theme.palette.error.main,\n    },\n  },\n  textContainer: {\n    display: 'flex',\n    alignItems: 'baseline',\n  },\n}));\n\ntype Props = {\n  incident: PagerDutyIncident;\n};\n\nexport const IncidentListItem = ({ incident }: Props) => {\n  const classes = useStyles();\n  const duration =\n    new Date().getTime() - new Date(incident.created_at).getTime();\n  const createdAt = DateTime.local()\n    .minus(Duration.fromMillis(duration))\n    .toRelative({ locale: 'en' });\n  const user = incident.assignments[0]?.assignee;\n\n  const handleIncidentClick = () => {\n    window.open(incident.html_url, '_blank', 'noopener,noreferrer');\n  };\n\n  return (\n    <ListItem dense key={incident.id}>\n      <ListItemText\n        primary={\n          <div className={classes.textContainer}>\n            <Chip\n              data-testid={`chip-${incident.status}`}\n              label={incident.status}\n              size=\"small\"\n              variant=\"outlined\"\n              className={\n                incident.status === 'triggered'\n                  ? classes.error\n                  : classes.warning\n              }\n            />\n            <Chip\n              data-testid={`chip-${incident.urgency}`}\n              label={`${incident.urgency} urgency`}\n              size=\"small\"\n              variant=\"outlined\"\n              className={\n                incident.urgency === 'high'\n                  ? classes.highUrgency\n                  : classes.lowUrgency\n              }\n            />\n            {incident.title}\n          </div>\n        }\n        primaryTypographyProps={{\n          variant: 'body1',\n          className: classes.listItemPrimary,\n        }}\n        secondary={\n          <Typography noWrap variant=\"body2\" color=\"textSecondary\">\n            Created {createdAt} and assigned to{' '}\n            <Link to={user?.html_url ?? '#'}>{user?.summary ?? 'nobody'}</Link>\n          </Typography>\n        }\n      />\n      <ListItemSecondaryAction>\n        <TooltipTrigger>\n          <ButtonIcon\n            aria-label=\"view-in-pd-button\"\n            icon={<OpenInBrowserIcon />}\n            variant=\"tertiary\"\n            onClick={handleIncidentClick}\n          />\n          <Tooltip>View in PagerDuty</Tooltip>\n        </TooltipTrigger>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Incident/Incidents.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEffect } from 'react';
-import { List } from '@material-ui/core';
+import { makeStyles, List, createStyles } from '@material-ui/core';
 import { IncidentListItem } from './IncidentListItem.esm.js';
 import { IncidentsEmptyState } from './IncidentEmptyState.esm.js';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -10,8 +10,16 @@ import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';
 import { IncidentForbiddenState } from './IncidentForbiddenState.esm.js';
 
+const useStyles = makeStyles(
+  () => createStyles({
+    loadingStyles: {
+      height: "253px"
+    }
+  })
+);
 const Incidents = ({ serviceId, account, refreshIncidents }) => {
   const api = useApi(pagerDutyApiRef);
+  const { loadingStyles } = useStyles();
   const [{ value: incidents, loading, error }, getIncidents] = useAsyncFn(
     async () => {
       const { incidents: foundIncidents } = await api.getIncidentsByServiceId(
@@ -34,7 +42,7 @@ const Incidents = ({ serviceId, account, refreshIncidents }) => {
     ] });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Progress, {});
+    return /* @__PURE__ */ jsx("div", { className: loadingStyles, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (!incidents?.length) {
     return /* @__PURE__ */ jsx(IncidentsEmptyState, {});

package/dist/components/Incident/Incidents.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Incidents.esm.js","sources":["../../../src/components/Incident/Incidents.tsx"],"sourcesContent":["/*\n * Copyright 2020 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// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useEffect } from 'react';\nimport { List } from '@material-ui/core';\nimport { IncidentListItem } from './IncidentListItem';\nimport { IncidentsEmptyState } from './IncidentEmptyState';\nimport useAsyncFn from 'react-use/lib/useAsyncFn';\nimport { pagerDutyApiRef } from '../../api';\nimport { Alert } from '@material-ui/lab';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Progress } from '@backstage/core-components';\nimport { IncidentForbiddenState } from './IncidentForbiddenState';\n\ntype Props = {\n  serviceId: string;\n  account?: string;\n  refreshIncidents: boolean;\n};\n\nexport const Incidents = ({ serviceId, account, refreshIncidents }: Props) => {\n  const api = useApi(pagerDutyApiRef);\n\n  const [{ value: incidents, loading, error }, getIncidents] = useAsyncFn(\n    async () => {\n      const { incidents: foundIncidents } = await api.getIncidentsByServiceId(\n        serviceId,\n        account,\n      );\n      return foundIncidents;\n    },\n  );\n\n  useEffect(() => {\n    getIncidents();\n  }, [refreshIncidents, getIncidents]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <IncidentForbiddenState />;\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 (!incidents?.length) {\n    return <IncidentsEmptyState />;\n  }\n\n  return (\n    <List dense>\n      {incidents!.map((incident, index) => (\n        <IncidentListItem key={incident.id + index} incident={incident} />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCO,MAAM,YAAY,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,kBAAiB,KAAa;AAC5E,EAAA,MAAM,GAAA,GAAM,OAAO,eAAe,CAAA;AAElC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,SAAS,KAAA,EAAM,EAAG,YAAY,CAAA,GAAI,UAAA;AAAA,IAC3D,YAAY;AACV,MAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAe,GAAI,MAAM,GAAA,CAAI,uBAAA;AAAA,QAC9C,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,OAAO,cAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,EAAa;AAAA,EACf,CAAA,EAAG,CAAC,gBAAA,EAAkB,YAAY,CAAC,CAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,2BAAQ,sBAAA,EAAA,EAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAQ,QAAA,EAAA;AAAA,MAAA,gDAAA;AAAA,MACyB,KAAA,CAAM;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BAAQ,QAAA,EAAA,EAAS,CAAA;AAAA,EACnB;AAEA,EAAA,IAAI,CAAC,WAAW,MAAA,EAAQ;AACtB,IAAA,2BAAQ,mBAAA,EAAA,EAAoB,CAAA;AAAA,EAC9B;AAEA,EAAA,2BACG,IAAA,EAAA,EAAK,KAAA,EAAK,IAAA,EACR,QAAA,EAAA,SAAA,CAAW,IAAI,CAAC,QAAA,EAAU,KAAA,qBACzB,GAAA,CAAC,oBAA2C,QAAA,EAAA,EAArB,QAAA,CAAS,EAAA,GAAK,KAA2B,CACjE,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Incidents.esm.js","sources":["../../../src/components/Incident/Incidents.tsx"],"sourcesContent":["/*\n * Copyright 2020 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// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useEffect } from 'react';\nimport { createStyles, List, makeStyles } from '@material-ui/core';\nimport { IncidentListItem } from './IncidentListItem';\nimport { IncidentsEmptyState } from './IncidentEmptyState';\nimport useAsyncFn from 'react-use/lib/useAsyncFn';\nimport { pagerDutyApiRef } from '../../api';\nimport { Alert } from '@material-ui/lab';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Progress } from '@backstage/core-components';\nimport { IncidentForbiddenState } from './IncidentForbiddenState';\nimport { BackstageTheme } from '@backstage/theme';\n\ntype Props = {\n  serviceId: string;\n  account?: string;\n  refreshIncidents: boolean;\n};\n\nconst useStyles = makeStyles<BackstageTheme>(() =>\n  createStyles({\n    loadingStyles: {\n      height: '253px',\n    },\n  }),\n);\n\nexport const Incidents = ({ serviceId, account, refreshIncidents }: Props) => {\n  const api = useApi(pagerDutyApiRef);\n  const { loadingStyles } = useStyles();\n\n  const [{ value: incidents, loading, error }, getIncidents] = useAsyncFn(\n    async () => {\n      const { incidents: foundIncidents } = await api.getIncidentsByServiceId(\n        serviceId,\n        account,\n      );\n      return foundIncidents;\n    },\n  );\n\n  useEffect(() => {\n    getIncidents();\n  }, [refreshIncidents, getIncidents]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <IncidentForbiddenState />;\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 (\n      <div className={loadingStyles}>\n        <Progress />\n      </div>\n    );\n  }\n\n  if (!incidents?.length) {\n    return <IncidentsEmptyState />;\n  }\n\n  return (\n    <List dense>\n      {incidents!.map((incident, index) => (\n        <IncidentListItem key={incident.id + index} incident={incident} />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAA2B,MAC3C,YAAA,CAAa;AAAA,IACX,aAAA,EAAe;AAAA,MACb,MAAA,EAAQ;AAAA;AACV,GACD;AACH,CAAA;AAEO,MAAM,YAAY,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,kBAAiB,KAAa;AAC5E,EAAA,MAAM,GAAA,GAAM,OAAO,eAAe,CAAA;AAClC,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,SAAA,EAAU;AAEpC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,SAAS,KAAA,EAAM,EAAG,YAAY,CAAA,GAAI,UAAA;AAAA,IAC3D,YAAY;AACV,MAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAe,GAAI,MAAM,GAAA,CAAI,uBAAA;AAAA,QAC9C,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,OAAO,cAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,EAAa;AAAA,EACf,CAAA,EAAG,CAAC,gBAAA,EAAkB,YAAY,CAAC,CAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,2BAAQ,sBAAA,EAAA,EAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAQ,QAAA,EAAA;AAAA,MAAA,gDAAA;AAAA,MACyB,KAAA,CAAM;AAAA,KAAA,EACvD,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACd,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,WAAW,MAAA,EAAQ;AACtB,IAAA,2BAAQ,mBAAA,EAAA,EAAoB,CAAA;AAAA,EAC9B;AAEA,EAAA,2BACG,IAAA,EAAA,EAAK,KAAA,EAAK,IAAA,EACR,QAAA,EAAA,SAAA,CAAW,IAAI,CAAC,QAAA,EAAU,KAAA,qBACzB,GAAA,CAAC,oBAA2C,QAAA,EAAA,EAArB,QAAA,CAAS,EAAA,GAAK,KAA2B,CACjE,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyCard/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { Card, CardHeader, Grid, Typography, Divider, CardContent } from '@material-ui/core';
+import { Typography, Divider } from '@material-ui/core';
 import { Incidents } from '../Incident/Incidents.esm.js';
 import { EscalationPolicy } from '../Escalation/EscalationPolicy.esm.js';
 import useAsync from 'react-use/lib/useAsync';
@@ -12,7 +12,7 @@ import PDGreenImage from '../../assets/PD-Green.svg';
 import PDWhiteImage from '../../assets/PD-White.svg';
 import { useApi } from '@backstage/core-plugin-api';
 import { NotFoundError } from '@backstage/errors';
-import { Progress, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
+import { Progress, InfoCard } from '@backstage/core-components';
 import { ForbiddenError } from '../Errors/ForbiddenError.esm.js';
 import IncidentCounterCard from '../PagerDutyCardCommon/InsightsCard.esm.js';
 import { OpenServiceButton } from '../PagerDutyCardCommon/OpenServiceButton.esm.js';
@@ -20,6 +20,7 @@ import ServiceStandardsCard from '../PagerDutyCardCommon/ServiceStandardsCard.es
 import StatusCard from '../PagerDutyCardCommon/StatusCard.esm.js';
 import { TriggerIncidentButton } from '../PagerDutyCardCommon/TriggerIncidentButton.esm.js';
 import { makeStyles, useTheme, createStyles } from '@material-ui/core/styles';
+import { Card, Grid, Flex, Tabs, TabList, Tab, TabPanel } from '@backstage/ui';
 
 const useStyles = makeStyles(
   (theme) => createStyles({
@@ -32,35 +33,20 @@ const useStyles = makeStyles(
       fontSize: "14px",
       fontWeight: 500,
       marginTop: "10px",
+      marginLeft: "10px",
       color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
     },
-    headerStyle: {
-      marginBottom: "0px",
-      fontSize: "0px"
-    },
-    overviewHeaderContainerStyle: {
-      display: "flex",
-      margin: "15px",
-      marginBottom: "20px"
-    },
-    headerWithSubheaderContainerStyle: {
-      display: "flex",
-      alignItems: "center"
-    },
     subheaderTextStyle: {
       fontSize: "10px",
-      marginLeft: "5px"
+      marginLeft: "-10px",
+      paddingTop: "3px"
     },
-    overviewCardsContainerStyle: {
-      display: "flex",
-      margin: "15px",
-      marginTop: "-15px"
+    logoContainerStyles: {
+      height: "100%"
     },
-    incidentMetricsContainerStyle: {
-      display: "flex",
-      height: "100%",
-      justifyContent: "center",
-      columnSpan: "all"
+    cardStyles: {
+      paddingLeft: "20px",
+      paddingRight: "20px"
     }
   })
 );
@@ -125,36 +111,40 @@ const PagerDutyCard = (props) => {
   if (loading) {
     return /* @__PURE__ */ jsx(BasicCard, { children: /* @__PURE__ */ jsx(Progress, {}) });
   }
-  return /* @__PURE__ */ jsxs(Card, { "data-testid": "pagerduty-card", children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        className: classes.headerStyle,
-        title: theme.palette.type === "dark" ? /* @__PURE__ */ jsx("img", { src: PDWhiteImage, alt: "PagerDuty", height: "35" }) : /* @__PURE__ */ jsx("img", { src: PDGreenImage, alt: "PagerDuty", height: "35" }),
-        action: !readOnly && props.integrationKey ? /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            TriggerIncidentButton,
-            {
-              "data-testid": "trigger-incident-button",
-              integrationKey: props.integrationKey,
-              entityName: props.name,
-              handleRefresh
-            }
-          ),
-          /* @__PURE__ */ jsx(OpenServiceButton, { serviceUrl: service.url })
-        ] }) : /* @__PURE__ */ jsx(OpenServiceButton, { serviceUrl: service.url })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Grid, { item: true, md: 12, className: classes.overviewHeaderContainerStyle, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, md: 3, children: /* @__PURE__ */ jsx(Typography, { className: classes.overviewHeaderTextStyle, children: "STATUS" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, md: 6, children: /* @__PURE__ */ jsxs(Typography, { className: classes.headerWithSubheaderContainerStyle, children: [
+  return /* @__PURE__ */ jsxs(Card, { "data-testid": "pagerduty-card", className: classes.cardStyles, children: [
+    /* @__PURE__ */ jsxs(Grid.Root, { columns: "6", children: [
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "4", children: /* @__PURE__ */ jsx(
+        Flex,
+        {
+          pl: "20px",
+          align: "center",
+          className: classes.logoContainerStyles,
+          children: theme.palette.type === "dark" ? /* @__PURE__ */ jsx("img", { src: PDWhiteImage, alt: "PagerDuty", height: "35" }) : /* @__PURE__ */ jsx("img", { src: PDGreenImage, alt: "PagerDuty", height: "35" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "2", children: /* @__PURE__ */ jsx(Flex, { justify: "end", children: !readOnly && props.integrationKey ? /* @__PURE__ */ jsxs(Flex, { children: [
+        /* @__PURE__ */ jsx(
+          TriggerIncidentButton,
+          {
+            "data-testid": "trigger-incident-button",
+            integrationKey: props.integrationKey,
+            entityName: props.name,
+            handleRefresh
+          }
+        ),
+        /* @__PURE__ */ jsx(OpenServiceButton, { serviceUrl: service.url })
+      ] }) : /* @__PURE__ */ jsx(OpenServiceButton, { serviceUrl: service.url }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid.Root, { columns: "4", gap: "1", pl: "1", pr: "1", children: [
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "1", children: /* @__PURE__ */ jsx(Typography, { className: classes.overviewHeaderTextStyle, children: "STATUS" }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "2", children: /* @__PURE__ */ jsxs(Flex, { children: [
         /* @__PURE__ */ jsx(Typography, { className: classes.overviewHeaderTextStyle, children: "INSIGHTS" }),
         /* @__PURE__ */ jsx(Typography, { className: classes.subheaderTextStyle, children: "(last 30 days)" })
       ] }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, md: 3, children: /* @__PURE__ */ jsx(Typography, { className: classes.overviewHeaderTextStyle, children: "STANDARDS" }) })
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "1", children: /* @__PURE__ */ jsx(Typography, { className: classes.overviewHeaderTextStyle, children: "STANDARDS" }) })
     ] }),
-    /* @__PURE__ */ jsxs(Grid, { item: true, md: 12, className: classes.overviewCardsContainerStyle, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, md: 3, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: "1", columns: "4", pl: "1", pr: "1", children: [
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "1", children: /* @__PURE__ */ jsx(
         StatusCard,
         {
           serviceId: service.id,
@@ -162,8 +152,8 @@ const PagerDutyCard = (props) => {
           refreshStatus
         }
       ) }),
-      /* @__PURE__ */ jsxs(Grid, { item: true, md: 6, className: classes.incidentMetricsContainerStyle, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, md: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "2", children: /* @__PURE__ */ jsxs(Grid.Root, { gap: "1", columns: "3", pl: "1", pr: "1", children: [
+        /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
           IncidentCounterCard,
           {
             count: service?.metrics !== void 0 && service.metrics.length > 0 ? service?.metrics[0].total_interruptions : void 0,
@@ -171,7 +161,7 @@ const PagerDutyCard = (props) => {
             color: theme.palette.textSubtle
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, md: 4, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
           IncidentCounterCard,
           {
             count: service?.metrics !== void 0 && service.metrics.length > 0 ? service?.metrics[0].total_high_urgency_incidents : void 0,
@@ -179,7 +169,7 @@ const PagerDutyCard = (props) => {
             color: theme.palette.warning.main
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, md: 4, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
           IncidentCounterCard,
           {
             count: service?.metrics !== void 0 && service?.metrics?.length > 0 ? service?.metrics[0].total_incident_count : void 0,
@@ -187,8 +177,8 @@ const PagerDutyCard = (props) => {
             color: theme.palette.error.main
           }
         ) })
-      ] }),
-      /* @__PURE__ */ jsx(Grid, { item: true, md: 3, children: /* @__PURE__ */ jsx(
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: "1", children: /* @__PURE__ */ jsx(
         ServiceStandardsCard,
         {
           total: service?.standards?.score !== void 0 ? service?.standards?.score?.total : void 0,
@@ -198,39 +188,41 @@ const PagerDutyCard = (props) => {
       ) })
     ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsxs(CardContent, { children: [
-      /* @__PURE__ */ jsxs(TabbedCard, { children: [
-        /* @__PURE__ */ jsx(CardTab, { label: "Incidents", children: /* @__PURE__ */ jsx(
-          Incidents,
-          {
-            serviceId: service.id,
-            refreshIncidents,
-            account: service.account
-          }
-        ) }),
-        disableChangeEvents !== true ? /* @__PURE__ */ jsx(CardTab, { label: "Change Events", children: /* @__PURE__ */ jsx(
-          ChangeEvents,
-          {
-            "data-testid": "change-events",
-            serviceId: service.id,
-            refreshEvents: refreshChangeEvents,
-            account: service.account
-          }
-        ) }) : /* @__PURE__ */ jsx(Fragment, {})
+    /* @__PURE__ */ jsxs(Tabs, { children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { id: "tab-1", children: "Incidents" }),
+        disableChangeEvents !== true && /* @__PURE__ */ jsx(Tab, { id: "tab-2", children: "Change Events" })
       ] }),
-      disableOnCall !== true ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Typography, { className: classes.oncallHeaderTextStyle, children: "ON CALL" }),
-        /* @__PURE__ */ jsx(
-          EscalationPolicy,
-          {
-            "data-testid": "oncall-card",
-            policyId: service.policyId,
-            policyUrl: service.policyLink,
-            policyName: service.policyName,
-            account: service.account
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(Fragment, {})
+      /* @__PURE__ */ jsx(TabPanel, { id: "tab-1", children: /* @__PURE__ */ jsx(
+        Incidents,
+        {
+          serviceId: service.id,
+          refreshIncidents,
+          account: service.account
+        }
+      ) }),
+      disableChangeEvents !== true && /* @__PURE__ */ jsx(TabPanel, { id: "tab-2", children: /* @__PURE__ */ jsx(
+        ChangeEvents,
+        {
+          "data-testid": "change-events",
+          serviceId: service.id,
+          refreshEvents: refreshChangeEvents,
+          account: service.account
+        }
+      ) })
+    ] }),
+    disableOnCall !== true && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { className: classes.oncallHeaderTextStyle, children: "ON CALL" }),
+      /* @__PURE__ */ jsx(
+        EscalationPolicy,
+        {
+          "data-testid": "oncall-card",
+          policyId: service.policyId,
+          policyUrl: service.policyLink,
+          policyName: service.policyName,
+          account: service.account
+        }
+      )
     ] })
   ] });
 };

package/dist/components/PagerDutyCard/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/PagerDutyCard/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 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// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { ReactNode, useCallback, useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  Divider,\n  CardContent,\n  Grid,\n  Typography,\n} from '@material-ui/core';\nimport { Incidents } from '../Incident';\nimport { EscalationPolicy } from '../Escalation';\nimport useAsync from 'react-use/lib/useAsync';\nimport { pagerDutyApiRef, UnauthorizedError } from '../../api';\nimport { MissingTokenError, ServiceNotFoundError } from '../Errors';\nimport { ChangeEvents } from '../ChangeEvents';\nimport PDGreenImage from '../../assets/PD-Green.svg';\nimport PDWhiteImage from '../../assets/PD-White.svg';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { NotFoundError } from '@backstage/errors';\nimport {\n  Progress,\n  TabbedCard,\n  CardTab,\n  InfoCard,\n} from '@backstage/core-components';\nimport { PagerDutyEntity } from '../../types';\nimport { ForbiddenError } from '../Errors/ForbiddenError';\nimport {\n  InsightsCard,\n  OpenServiceButton,\n  ServiceStandardsCard,\n  StatusCard,\n  TriggerIncidentButton,\n} from '../PagerDutyCardCommon';\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { BackstageTheme } from '@backstage/theme';\nimport { PagerDutyCardServiceResponse } from '../../api/types';\n\nconst useStyles = makeStyles<BackstageTheme>(theme =>\n  createStyles({\n    overviewHeaderTextStyle: {\n      fontSize: '14px',\n      fontWeight: 500,\n      color:\n        theme.palette.type === 'light'\n          ? 'rgba(0, 0, 0, 0.54)'\n          : 'rgba(255, 255, 255, 0.7)',\n    },\n    oncallHeaderTextStyle: {\n      fontSize: '14px',\n      fontWeight: 500,\n      marginTop: '10px',\n      color:\n        theme.palette.type === 'light'\n          ? 'rgba(0, 0, 0, 0.54)'\n          : 'rgba(255, 255, 255, 0.7)',\n    },\n    headerStyle: {\n      marginBottom: '0px',\n      fontSize: '0px',\n    },\n    overviewHeaderContainerStyle: {\n      display: 'flex',\n      margin: '15px',\n      marginBottom: '20px',\n    },\n    headerWithSubheaderContainerStyle: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    subheaderTextStyle: {\n      fontSize: '10px',\n      marginLeft: '5px',\n    },\n    overviewCardsContainerStyle: {\n      display: 'flex',\n      margin: '15px',\n      marginTop: '-15px',\n    },\n    incidentMetricsContainerStyle: {\n      display: 'flex',\n      height: '100%',\n      justifyContent: 'center',\n      columnSpan: 'all',\n    },\n  }),\n);\n\nconst BasicCard = ({ children }: { children: ReactNode }) => (\n  <InfoCard title=\"PagerDuty\">{children}</InfoCard>\n);\n\n/** @public */\nexport type PagerDutyCardProps = PagerDutyEntity & {\n  readOnly?: boolean;\n  disableChangeEvents?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const PagerDutyCard = (props: PagerDutyCardProps) => {\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const { readOnly, disableChangeEvents, disableOnCall } = props;\n  const api = useApi(pagerDutyApiRef);\n  const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);\n  const [refreshChangeEvents, setRefreshChangeEvents] =\n    useState<boolean>(false);\n  const [refreshStatus, setRefreshStatus] = useState<boolean>(false);\n\n  const handleRefresh = useCallback(() => {\n    setRefreshIncidents(x => !x);\n    setRefreshChangeEvents(x => !x);\n    setRefreshStatus(x => !x);\n  }, []);\n\n  const {\n    value: service,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const { service: foundService } = await api.getServiceByPagerDutyEntity(\n      props,\n    );\n\n    const serviceStandards = await api.getServiceStandardsByServiceId(\n      foundService.id,\n      props.account,\n    );\n\n    const serviceMetrics = await api.getServiceMetricsByServiceId(\n      foundService.id,\n      props.account,\n    );\n\n    const result: PagerDutyCardServiceResponse = {\n      id: foundService.id,\n      account: props.account,\n      name: foundService.name,\n      url: foundService.html_url,\n      policyId: foundService.escalation_policy.id,\n      policyLink: foundService.escalation_policy.html_url as string,\n      policyName: foundService.escalation_policy.name,\n      status: foundService.status,\n      standards:\n        serviceStandards !== undefined ? serviceStandards.standards : undefined,\n      metrics:\n        serviceMetrics !== undefined ? serviceMetrics.metrics : undefined,\n    };\n\n    return result;\n  }, [props]);\n\n  if (error) {\n    let errorNode: ReactNode;\n\n    switch (error.constructor) {\n      case UnauthorizedError:\n        errorNode = <MissingTokenError />;\n        break;\n      case NotFoundError:\n        errorNode = <ServiceNotFoundError />;\n        break;\n      default:\n        errorNode = <ForbiddenError />;\n    }\n\n    return <BasicCard>{errorNode}</BasicCard>;\n  }\n\n  if (loading) {\n    return (\n      <BasicCard>\n        <Progress />\n      </BasicCard>\n    );\n  }\n\n  return (\n    <Card data-testid=\"pagerduty-card\">\n      <CardHeader\n        className={classes.headerStyle}\n        title={\n          theme.palette.type === 'dark' ? (\n            <img src={PDWhiteImage} alt=\"PagerDuty\" height=\"35\" />\n          ) : (\n            <img src={PDGreenImage} alt=\"PagerDuty\" height=\"35\" />\n          )\n        }\n        action={\n          !readOnly && props.integrationKey ? (\n            <div>\n              <TriggerIncidentButton\n                data-testid=\"trigger-incident-button\"\n                integrationKey={props.integrationKey}\n                entityName={props.name}\n                handleRefresh={handleRefresh}\n              />\n              <OpenServiceButton serviceUrl={service!.url} />\n            </div>\n          ) : (\n            <OpenServiceButton serviceUrl={service!.url} />\n          )\n        }\n      />\n      <Grid item md={12} className={classes.overviewHeaderContainerStyle}>\n        <Grid item md={3}>\n          <Typography className={classes.overviewHeaderTextStyle}>\n            STATUS\n          </Typography>\n        </Grid>\n        <Grid item md={6}>\n          <Typography className={classes.headerWithSubheaderContainerStyle}>\n            <Typography className={classes.overviewHeaderTextStyle}>\n              INSIGHTS\n            </Typography>\n            <Typography className={classes.subheaderTextStyle}>\n              (last 30 days)\n            </Typography>\n          </Typography>\n        </Grid>\n        <Grid item md={3}>\n          <Typography className={classes.overviewHeaderTextStyle}>\n            STANDARDS\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid item md={12} className={classes.overviewCardsContainerStyle}>\n        <Grid item md={3}>\n          <StatusCard\n            serviceId={service!.id}\n            account={service!.account}\n            refreshStatus={refreshStatus}\n          />\n        </Grid>\n        <Grid item md={6} className={classes.incidentMetricsContainerStyle}>\n          <Grid item md={4}>\n            <InsightsCard\n              count={\n                service?.metrics !== undefined && service.metrics.length > 0\n                  ? service?.metrics[0].total_interruptions\n                  : undefined\n              }\n              label=\"interruptions\"\n              color={theme.palette.textSubtle}\n            />\n          </Grid>\n          <Grid item md={4}>\n            <InsightsCard\n              count={\n                service?.metrics !== undefined && service.metrics.length > 0\n                  ? service?.metrics[0].total_high_urgency_incidents\n                  : undefined\n              }\n              label=\"high urgency\"\n              color={theme.palette.warning.main}\n            />\n          </Grid>\n          <Grid item md={4}>\n            <InsightsCard\n              count={\n                service?.metrics !== undefined && service?.metrics?.length > 0\n                  ? service?.metrics[0].total_incident_count\n                  : undefined\n              }\n              label=\"incidents\"\n              color={theme.palette.error.main}\n            />\n          </Grid>\n        </Grid>\n        <Grid item md={3}>\n          <ServiceStandardsCard\n            total={\n              service?.standards?.score !== undefined\n                ? service?.standards?.score?.total\n                : undefined\n            }\n            completed={\n              service?.standards?.score !== undefined\n                ? service?.standards?.score?.passing\n                : undefined\n            }\n            standards={\n              service?.standards !== undefined\n                ? service?.standards?.standards\n                : undefined\n            }\n          />\n        </Grid>\n      </Grid>\n\n      <Divider />\n      <CardContent>\n        <TabbedCard>\n          <CardTab label=\"Incidents\">\n            <Incidents\n              serviceId={service!.id}\n              refreshIncidents={refreshIncidents}\n              account={service!.account}\n            />\n          </CardTab>\n          {disableChangeEvents !== true ? (\n            <CardTab label=\"Change Events\">\n              <ChangeEvents\n                data-testid=\"change-events\"\n                serviceId={service!.id}\n                refreshEvents={refreshChangeEvents}\n                account={service!.account}\n              />\n            </CardTab>\n          ) : (\n            <></>\n          )}\n        </TabbedCard>\n        {disableOnCall !== true ? (\n          <>\n            <Typography className={classes.oncallHeaderTextStyle}>\n              ON CALL\n            </Typography>\n            <EscalationPolicy\n              data-testid=\"oncall-card\"\n              policyId={service!.policyId}\n              policyUrl={service!.policyLink}\n              policyName={service!.policyName}\n              account={service!.account}\n            />\n          </>\n        ) : (\n          <></>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["InsightsCard"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/PagerDutyCard/index.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\nimport { ReactNode, useCallback, useState } from 'react';\nimport { Typography, Divider } from '@material-ui/core';\nimport { Incidents } from '../Incident';\nimport { EscalationPolicy } from '../Escalation';\nimport useAsync from 'react-use/lib/useAsync';\nimport { pagerDutyApiRef, UnauthorizedError } from '../../api';\nimport { MissingTokenError, ServiceNotFoundError } from '../Errors';\nimport { ChangeEvents } from '../ChangeEvents';\nimport PDGreenImage from '../../assets/PD-Green.svg';\nimport PDWhiteImage from '../../assets/PD-White.svg';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { NotFoundError } from '@backstage/errors';\nimport { Progress, InfoCard } from '@backstage/core-components';\nimport { PagerDutyEntity } from '../../types';\nimport { ForbiddenError } from '../Errors/ForbiddenError';\nimport {\n  InsightsCard,\n  OpenServiceButton,\n  ServiceStandardsCard,\n  StatusCard,\n  TriggerIncidentButton,\n} from '../PagerDutyCardCommon';\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { BackstageTheme } from '@backstage/theme';\nimport { PagerDutyCardServiceResponse } from '../../api/types';\nimport { Card, Flex, Grid, Tab, TabList, TabPanel, Tabs } from '@backstage/ui';\n\nconst useStyles = makeStyles<BackstageTheme>(theme =>\n  createStyles({\n    overviewHeaderTextStyle: {\n      fontSize: '14px',\n      fontWeight: 500,\n      color:\n        theme.palette.type === 'light'\n          ? 'rgba(0, 0, 0, 0.54)'\n          : 'rgba(255, 255, 255, 0.7)',\n    },\n    oncallHeaderTextStyle: {\n      fontSize: '14px',\n      fontWeight: 500,\n      marginTop: '10px',\n      marginLeft: '10px',\n      color:\n        theme.palette.type === 'light'\n          ? 'rgba(0, 0, 0, 0.54)'\n          : 'rgba(255, 255, 255, 0.7)',\n    },\n\n    subheaderTextStyle: {\n      fontSize: '10px',\n      marginLeft: '-10px',\n      paddingTop: '3px',\n    },\n    logoContainerStyles: {\n      height: '100%',\n    },\n    cardStyles: {\n      paddingLeft: '20px',\n      paddingRight: '20px',\n    },\n  }),\n);\n\nconst BasicCard = ({ children }: { children: ReactNode }) => (\n  <InfoCard title=\"PagerDuty\">{children}</InfoCard>\n);\n\n/** @public */\nexport type PagerDutyCardProps = PagerDutyEntity & {\n  readOnly?: boolean;\n  disableChangeEvents?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const PagerDutyCard = (props: PagerDutyCardProps) => {\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const { readOnly, disableChangeEvents, disableOnCall } = props;\n  const api = useApi(pagerDutyApiRef);\n  const [refreshIncidents, setRefreshIncidents] = useState<boolean>(false);\n  const [refreshChangeEvents, setRefreshChangeEvents] =\n    useState<boolean>(false);\n  const [refreshStatus, setRefreshStatus] = useState<boolean>(false);\n\n  const handleRefresh = useCallback(() => {\n    setRefreshIncidents(x => !x);\n    setRefreshChangeEvents(x => !x);\n    setRefreshStatus(x => !x);\n  }, []);\n\n  const {\n    value: service,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const { service: foundService } = await api.getServiceByPagerDutyEntity(\n      props,\n    );\n\n    const serviceStandards = await api.getServiceStandardsByServiceId(\n      foundService.id,\n      props.account,\n    );\n\n    const serviceMetrics = await api.getServiceMetricsByServiceId(\n      foundService.id,\n      props.account,\n    );\n\n    const result: PagerDutyCardServiceResponse = {\n      id: foundService.id,\n      account: props.account,\n      name: foundService.name,\n      url: foundService.html_url,\n      policyId: foundService.escalation_policy.id,\n      policyLink: foundService.escalation_policy.html_url as string,\n      policyName: foundService.escalation_policy.name,\n      status: foundService.status,\n      standards:\n        serviceStandards !== undefined ? serviceStandards.standards : undefined,\n      metrics:\n        serviceMetrics !== undefined ? serviceMetrics.metrics : undefined,\n    };\n\n    return result;\n  }, [props]);\n\n  if (error) {\n    let errorNode: ReactNode;\n\n    switch (error.constructor) {\n      case UnauthorizedError:\n        errorNode = <MissingTokenError />;\n        break;\n      case NotFoundError:\n        errorNode = <ServiceNotFoundError />;\n        break;\n      default:\n        errorNode = <ForbiddenError />;\n    }\n\n    return <BasicCard>{errorNode}</BasicCard>;\n  }\n\n  if (loading) {\n    return (\n      <BasicCard>\n        <Progress />\n      </BasicCard>\n    );\n  }\n\n  return (\n    <Card data-testid=\"pagerduty-card\" className={classes.cardStyles}>\n      <Grid.Root columns=\"6\">\n        <Grid.Item colSpan=\"4\">\n          <Flex\n            pl=\"20px\"\n            align=\"center\"\n            className={classes.logoContainerStyles}\n          >\n            {theme.palette.type === 'dark' ? (\n              <img src={PDWhiteImage} alt=\"PagerDuty\" height=\"35\" />\n            ) : (\n              <img src={PDGreenImage} alt=\"PagerDuty\" height=\"35\" />\n            )}\n          </Flex>\n        </Grid.Item>\n        <Grid.Item colSpan=\"2\">\n          <Flex justify=\"end\">\n            {!readOnly && props.integrationKey ? (\n              <Flex>\n                <TriggerIncidentButton\n                  data-testid=\"trigger-incident-button\"\n                  integrationKey={props.integrationKey}\n                  entityName={props.name}\n                  handleRefresh={handleRefresh}\n                />\n                <OpenServiceButton serviceUrl={service!.url} />\n              </Flex>\n            ) : (\n              <OpenServiceButton serviceUrl={service!.url} />\n            )}\n          </Flex>\n        </Grid.Item>\n      </Grid.Root>\n      <Grid.Root columns=\"4\" gap=\"1\" pl=\"1\" pr=\"1\">\n        <Grid.Item colSpan=\"1\">\n          <Typography className={classes.overviewHeaderTextStyle}>\n            STATUS\n          </Typography>\n        </Grid.Item>\n        <Grid.Item colSpan=\"2\">\n          <Flex>\n            <Typography className={classes.overviewHeaderTextStyle}>\n              INSIGHTS\n            </Typography>\n            <Typography className={classes.subheaderTextStyle}>\n              (last 30 days)\n            </Typography>\n          </Flex>\n        </Grid.Item>\n        <Grid.Item colSpan=\"1\">\n          <Typography className={classes.overviewHeaderTextStyle}>\n            STANDARDS\n          </Typography>\n        </Grid.Item>\n      </Grid.Root>\n\n      <Grid.Root gap=\"1\" columns=\"4\" pl=\"1\" pr=\"1\">\n        <Grid.Item colSpan=\"1\">\n          <StatusCard\n            serviceId={service!.id}\n            account={service!.account}\n            refreshStatus={refreshStatus}\n          />\n        </Grid.Item>\n        <Grid.Item colSpan=\"2\">\n          <Grid.Root gap=\"1\" columns=\"3\" pl=\"1\" pr=\"1\">\n            <Grid.Item>\n              <InsightsCard\n                count={\n                  service?.metrics !== undefined && service.metrics.length > 0\n                    ? service?.metrics[0].total_interruptions\n                    : undefined\n                }\n                label=\"interruptions\"\n                color={theme.palette.textSubtle}\n              />\n            </Grid.Item>\n            <Grid.Item>\n              <InsightsCard\n                count={\n                  service?.metrics !== undefined && service.metrics.length > 0\n                    ? service?.metrics[0].total_high_urgency_incidents\n                    : undefined\n                }\n                label=\"high urgency\"\n                color={theme.palette.warning.main}\n              />\n            </Grid.Item>\n            <Grid.Item>\n              <InsightsCard\n                count={\n                  service?.metrics !== undefined && service?.metrics?.length > 0\n                    ? service?.metrics[0].total_incident_count\n                    : undefined\n                }\n                label=\"incidents\"\n                color={theme.palette.error.main}\n              />\n            </Grid.Item>\n          </Grid.Root>\n        </Grid.Item>\n        <Grid.Item colSpan=\"1\">\n          <ServiceStandardsCard\n            total={\n              service?.standards?.score !== undefined\n                ? service?.standards?.score?.total\n                : undefined\n            }\n            completed={\n              service?.standards?.score !== undefined\n                ? service?.standards?.score?.passing\n                : undefined\n            }\n            standards={\n              service?.standards !== undefined\n                ? service?.standards?.standards\n                : undefined\n            }\n          />\n        </Grid.Item>\n      </Grid.Root>\n\n      <Divider />\n\n      <Tabs>\n        <TabList>\n          <Tab id=\"tab-1\">Incidents</Tab>\n          {disableChangeEvents !== true && <Tab id=\"tab-2\">Change Events</Tab>}\n        </TabList>\n        <TabPanel id=\"tab-1\">\n          <Incidents\n            serviceId={service!.id}\n            refreshIncidents={refreshIncidents}\n            account={service!.account}\n          />\n        </TabPanel>\n        {disableChangeEvents !== true && (\n          <TabPanel id=\"tab-2\">\n            <ChangeEvents\n              data-testid=\"change-events\"\n              serviceId={service!.id}\n              refreshEvents={refreshChangeEvents}\n              account={service!.account}\n            />\n          </TabPanel>\n        )}\n      </Tabs>\n      {disableOnCall !== true && (\n        <>\n          <Typography className={classes.oncallHeaderTextStyle}>\n            ON CALL\n          </Typography>\n          <EscalationPolicy\n            data-testid=\"oncall-card\"\n            policyId={service!.policyId}\n            policyUrl={service!.policyLink}\n            policyName={service!.policyName}\n            account={service!.account}\n          />\n        </>\n      )}\n    </Card>\n  );\n};\n"],"names":["InsightsCard"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles, Card, Typography } from '@material-ui/core';
+import { Card } from '@backstage/ui';
+import { makeStyles, Typography } from '@material-ui/core';
 import validateColor from 'validate-color';
 
 function IncidentCounterCard({ count, label, color, compact }) {

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

@@ -1 +1 @@
-{"version":3,"file":"InsightsCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/InsightsCard.tsx"],"sourcesContent":["import { BackstageTheme } from '@backstage/theme';\nimport { Card, Typography, makeStyles } from '@material-ui/core';\nimport validateColor from 'validate-color';\n\ntype Props = {\n  count: number | undefined;\n  label: string;\n  color: string;\n  compact?: boolean;\n};\n\nfunction IncidentCounterCard({ count, label, color, compact }: Props) {\n  const textColor = color && validateColor(color) ? color : 'black';\n\n  const useStyles = makeStyles<BackstageTheme>(() => ({\n    cardStyle: {\n      marginRight: '10px',\n      height: compact !== true ? '120px' : '80px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(0, 0, 0, 0.03)',\n    },\n    largeTextStyle: {\n      color: textColor,\n      fontSize: '30px',\n      marginTop: '-10px',\n    },\n    smallTextStyle: {\n      color: textColor,\n      fontWeight: 'bold',\n      fontSize: '10px',\n      marginTop: '-5px',\n      textTransform: 'uppercase',\n      flexWrap: 'wrap',\n    },\n  }));\n\n  const { cardStyle, largeTextStyle, smallTextStyle } = useStyles();\n\n  return (\n    <Card className={cardStyle}>\n      {count !== undefined ? (\n        <>\n          <Typography className={largeTextStyle}>{count}</Typography>\n          <Typography className={smallTextStyle}>{label}</Typography>\n        </>\n      ) : (\n        <>\n          <Typography className={largeTextStyle}>-</Typography>\n          <Typography className={smallTextStyle}>{label}</Typography>\n        </>\n      )}\n    </Card>\n  );\n}\n\nexport default IncidentCounterCard;\n"],"names":[],"mappings":";;;;AAWA,SAAS,oBAAoB,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,SAAQ,EAAU;AACpE,EAAA,MAAM,SAAA,GAAY,KAAA,IAAS,aAAA,CAAc,KAAK,IAAI,KAAA,GAAQ,OAAA;AAE1D,EAAA,MAAM,SAAA,GAAY,WAA2B,OAAO;AAAA,IAClD,SAAA,EAAW;AAAA,MACT,WAAA,EAAa,MAAA;AAAA,MACb,MAAA,EAAQ,OAAA,KAAY,IAAA,GAAO,OAAA,GAAU,MAAA;AAAA,MACrC,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,QAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW;AAAA,KACb;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,UAAA,EAAY,MAAA;AAAA,MACZ,QAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW,MAAA;AAAA,MACX,aAAA,EAAe,WAAA;AAAA,MACf,QAAA,EAAU;AAAA;AACZ,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAgB,cAAA,KAAmB,SAAA,EAAU;AAEhE,EAAA,2BACG,IAAA,EAAA,EAAK,SAAA,EAAW,SAAA,EACd,QAAA,EAAA,KAAA,KAAU,yBACT,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBAC9C,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAChD,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAgB,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,oBACxC,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAChD,CAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InsightsCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/InsightsCard.tsx"],"sourcesContent":["import { BackstageTheme } from '@backstage/theme';\nimport { Card } from '@backstage/ui';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport validateColor from 'validate-color';\n\ntype Props = {\n  count: number | undefined;\n  label: string;\n  color: string;\n  compact?: boolean;\n};\n\nfunction IncidentCounterCard({ count, label, color, compact }: Props) {\n  const textColor = color && validateColor(color) ? color : 'black';\n\n  const useStyles = makeStyles<BackstageTheme>(() => ({\n    cardStyle: {\n      marginRight: '10px',\n      height: compact !== true ? '120px' : '80px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(0, 0, 0, 0.03)',\n    },\n    largeTextStyle: {\n      color: textColor,\n      fontSize: '30px',\n      marginTop: '-10px',\n    },\n    smallTextStyle: {\n      color: textColor,\n      fontWeight: 'bold',\n      fontSize: '10px',\n      marginTop: '-5px',\n      textTransform: 'uppercase',\n      flexWrap: 'wrap',\n    },\n  }));\n\n  const { cardStyle, largeTextStyle, smallTextStyle } = useStyles();\n\n  return (\n    <Card className={cardStyle}>\n      {count !== undefined ? (\n        <>\n          <Typography className={largeTextStyle}>{count}</Typography>\n          <Typography className={smallTextStyle}>{label}</Typography>\n        </>\n      ) : (\n        <>\n          <Typography className={largeTextStyle}>-</Typography>\n          <Typography className={smallTextStyle}>{label}</Typography>\n        </>\n      )}\n    </Card>\n  );\n}\n\nexport default IncidentCounterCard;\n"],"names":[],"mappings":";;;;;AAYA,SAAS,oBAAoB,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,SAAQ,EAAU;AACpE,EAAA,MAAM,SAAA,GAAY,KAAA,IAAS,aAAA,CAAc,KAAK,IAAI,KAAA,GAAQ,OAAA;AAE1D,EAAA,MAAM,SAAA,GAAY,WAA2B,OAAO;AAAA,IAClD,SAAA,EAAW;AAAA,MACT,WAAA,EAAa,MAAA;AAAA,MACb,MAAA,EAAQ,OAAA,KAAY,IAAA,GAAO,OAAA,GAAU,MAAA;AAAA,MACrC,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,QAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW;AAAA,KACb;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,UAAA,EAAY,MAAA;AAAA,MACZ,QAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW,MAAA;AAAA,MACX,aAAA,EAAe,WAAA;AAAA,MACf,QAAA,EAAU;AAAA;AACZ,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,SAAA,EAAW,cAAA,EAAgB,cAAA,KAAmB,SAAA,EAAU;AAEhE,EAAA,2BACG,IAAA,EAAA,EAAK,SAAA,EAAW,SAAA,EACd,QAAA,EAAA,KAAA,KAAU,yBACT,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBAC9C,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAChD,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAgB,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,oBACxC,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,cAAA,EAAiB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAChD,CAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -1,47 +1,42 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { makeStyles, IconButton, Typography } from '@material-ui/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles, Typography } from '@material-ui/core';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { ButtonIcon } from '@backstage/ui';
 
 function OpenServiceButton({
   serviceUrl,
   compact
 }) {
-  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 ? "85px" : "70px"
-    },
-    iconStyle: {
-      fontSize: "30px",
-      marginBottom: "-10px"
+      width: compact !== true ? "85px" : "70px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center"
     },
     textStyle: {
-      marginBottom: "-10px"
+      fontSize: "12px"
     }
   }));
-  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();
+  const { containerStyle, textStyle } = useStyles();
   function navigateToService() {
     window.open(serviceUrl, "_blank");
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      "aria-label": "open-service-in-browser",
-      onClick: navigateToService,
-      className: buttonStyle,
-      children: /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
-        /* @__PURE__ */ jsx(OpenInBrowserIcon, { className: iconStyle }),
-        /* @__PURE__ */ jsx(Typography, { className: textStyle, children: "Open service in PagerDuty" })
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      ButtonIcon,
+      {
+        "aria-label": "open-service-in-browser",
+        size: "medium",
+        onClick: navigateToService,
+        variant: "tertiary",
+        icon: /* @__PURE__ */ jsx(OpenInBrowserIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { className: textStyle, children: "Open service in PagerDuty" })
+  ] });
 }
 
 export { OpenServiceButton };