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

package/README.md

@@ -0,0 +1,36 @@
+# PagerDuty Backstage Plugin
+
+> The PagerDuty plugin reduces the cognitive load on developers responsible for maintaining services in production.
+Instead of having to go to PagerDuty's console, you can now access the necessary information directly within Backstage.
+This includes finding active incidents or opening a new incident, reviewing recent changes made to the service,
+and checking who is on-call.
+
+## New Frontend System (NFS)
+
+This frontend plugin is starting the adoption of the [New Frontend System](https://backstage.io/docs/frontend-system/). This allow us to be present in Portal and keep up to date with Backstage's recommended best practices.
+
+### Migration
+
+We're still migrating to the NFS, since it is still in alpha. You can find this version of the plugin on the export `@pagerduty/backstage-plugin/alpha`, which allows you to start using it even in Backstage under the new `createApp` helper from `@backstage/frontend-defaults`.
+
+### Extensions
+
+The NFS allows for extendable plugins, which means there are parts of it that users can replace to elevate their experience. We've historically exported two components the `EntityPagerDutyCard` and the `EntityPagerDutySmallCard` to expose some PagerDuty's service information on your Backstage entities. In the NFS, we default to `EntityPagerDutyCard` as an entity card extension, which means you can still make use of the `EntityPagerDutySmallCard` through overrides.
+
+```javascript
+import PagerDutyPlugin from '@pagerduty/backstage-plugin/alpha';
+import { EntityPagerDutySmallCard } from '@pagerduty/backstage-plugin';
+
+const OverriddenPagerDutyPlugin = PagerDutyPlugin.withOverrides({
+  extensions: [
+    PagerDutyPlugin.getExtension('entity-card:pagerduty/EntityPagerDutyCard').override({
+      factory: originalFactory => 
+        originalFactory({
+          params: {
+            loader: async () => Promise.resolve(<EntityPagerDutySmallCard />)
+          }
+        })
+    })
+  ]
+})
+```

package/dist/alpha.d.ts

@@ -0,0 +1,8 @@
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import { FrontendPlugin } from '@backstage/frontend-plugin-api';
+
+declare const rootRouteRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
+/** @alpha */
+declare const _default: FrontendPlugin;
+
+export { _default as default, rootRouteRef };

package/dist/alpha.esm.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { createRouteRef, ApiBlueprint, fetchApiRef, configApiRef, discoveryApiRef, PageBlueprint, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { compatWrapper } from '@backstage/core-compat-api';
+import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
+import { PagerDutyClient, pagerDutyApiRef } from './api/client.esm.js';
+import '@backstage/plugin-catalog-react';
+import './components/PagerDutyCard/index.esm.js';
+import './components/PagerDutySmallCard/index.esm.js';
+import { PagerDutyIcon } from './components/Icons/index.esm.js';
+import './components/TriggerButton/index.esm.js';
+
+const rootRouteRef = createRouteRef();
+const PagerDutyAPI = ApiBlueprint.make({
+  params: {
+    factory: {
+      api: pagerDutyApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        configApi: configApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({
+        configApi,
+        discoveryApi,
+        fetchApi
+      }) => PagerDutyClient.fromConfig(configApi, { discoveryApi, fetchApi })
+    }
+  }
+});
+const PagerDutyPage = PageBlueprint.make({
+  params: {
+    defaultPath: "/pagerduty",
+    routeRef: rootRouteRef,
+    loader: () => import('./components/PagerDutyPage/index.esm.js').then((m) => compatWrapper(/* @__PURE__ */ jsx(m.PagerDutyPage, {})))
+  }
+});
+const EntityPagerDutyCard = EntityCardBlueprint.make({
+  name: "EntityPagerDutyCard",
+  params: {
+    filter: "kind:component",
+    loader: async () => import('./components/EntityPagerDutyCard/index.esm.js').then((m) => compatWrapper(/* @__PURE__ */ jsx(m.EntityPagerDutyCard, {})))
+  }
+});
+const PagerDutyNavBarItem = NavItemBlueprint.make({
+  name: "PagerDutyNavBarItem",
+  params: {
+    title: "PagerDuty",
+    icon: () => /* @__PURE__ */ jsx(PagerDutyIcon, {}),
+    routeRef: rootRouteRef
+  }
+});
+var alpha = createFrontendPlugin({
+  pluginId: "pagerduty",
+  extensions: [
+    EntityPagerDutyCard,
+    PagerDutyAPI,
+    PagerDutyPage,
+    PagerDutyNavBarItem
+  ],
+  routes: {
+    root: rootRouteRef
+  }
+});
+
+export { alpha as default, rootRouteRef };
+//# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 \"react\";\nimport { \n  ApiBlueprint, \n  createFrontendPlugin, \n  createRouteRef, \n  FrontendPlugin, \n  PageBlueprint,\n  NavItemBlueprint,\n  discoveryApiRef,\n  configApiRef,\n  fetchApiRef,\n  ConfigApi,\n  DiscoveryApi,\n  FetchApi\n} from \"@backstage/frontend-plugin-api\";\nimport { compatWrapper } from \"@backstage/core-compat-api\";\nimport { EntityCardBlueprint } from \"@backstage/plugin-catalog-react/alpha\"\nimport { pagerDutyApiRef, PagerDutyClient } from './api';\nimport { PagerDutyIcon } from './components';\n\nexport const rootRouteRef = createRouteRef();\n\n/** @alpha */\nconst PagerDutyAPI = ApiBlueprint.make({\n  params: {\n    factory: {\n      api: pagerDutyApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        configApi: configApiRef,\n        fetchApi: fetchApiRef\n      },\n      factory: ({ \n        configApi, \n        discoveryApi, \n        fetchApi \n      }: { configApi: ConfigApi; discoveryApi: DiscoveryApi; fetchApi: FetchApi }) =>\n        PagerDutyClient.fromConfig(configApi, { discoveryApi, fetchApi }),\n    }\n  }\n});\n\n/** @alpha */\nconst PagerDutyPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/pagerduty',\n    routeRef: rootRouteRef,\n    loader: () =>\n      import('./components/PagerDutyPage')\n        .then(m => compatWrapper(<m.PagerDutyPage />)),\n  }\n});\n\n/** @alpha */\nconst EntityPagerDutyCard = EntityCardBlueprint.make({\n  name: 'EntityPagerDutyCard',\n  params: {\n    filter: 'kind:component',\n    loader: async () => import('./components/EntityPagerDutyCard') \n      .then(m => compatWrapper(<m.EntityPagerDutyCard />)),\n  }\n});\n\n/** @alpha */\nconst PagerDutyNavBarItem = NavItemBlueprint.make({\n  name: 'PagerDutyNavBarItem',\n  params: {\n    title: 'PagerDuty',\n    icon: () => <PagerDutyIcon />,\n    routeRef: rootRouteRef,\n  }\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'pagerduty',\n  extensions: [\n    EntityPagerDutyCard,\n    PagerDutyAPI,\n    PagerDutyPage,\n    PagerDutyNavBarItem\n  ],\n  routes: {\n    root: rootRouteRef\n  }\n}) as FrontendPlugin;\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCO,MAAM,eAAe,cAAA;AAG5B,MAAM,YAAA,GAAe,aAAa,IAAA,CAAK;AAAA,EACrC,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS;AAAA,MACP,GAAA,EAAK,eAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,YAAA,EAAc,eAAA;AAAA,QACd,SAAA,EAAW,YAAA;AAAA,QACX,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,SAAS,CAAC;AAAA,QACR,SAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA,YAEA,eAAA,CAAgB,UAAA,CAAW,WAAW,EAAE,YAAA,EAAc,UAAU;AAAA;AACpE;AAEJ,CAAC,CAAA;AAGD,MAAM,aAAA,GAAgB,cAAc,IAAA,CAAK;AAAA,EACvC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,yCAA4B,CAAA,CAChC,IAAA,CAAK,CAAA,CAAA,KAAK,aAAA,iBAAc,GAAA,CAAC,CAAA,CAAE,aAAA,EAAF,EAAgB,CAAE,CAAC;AAAA;AAErD,CAAC,CAAA;AAGD,MAAM,mBAAA,GAAsB,oBAAoB,IAAA,CAAK;AAAA,EACnD,IAAA,EAAM,qBAAA;AAAA,EACN,MAAA,EAAQ;AAAA,IACN,MAAA,EAAQ,gBAAA;AAAA,IACR,MAAA,EAAQ,YAAY,OAAO,+CAAkC,CAAA,CAC1D,IAAA,CAAK,CAAA,CAAA,KAAK,aAAA,iBAAc,GAAA,CAAC,CAAA,CAAE,mBAAA,EAAF,EAAsB,CAAE,CAAC;AAAA;AAEzD,CAAC,CAAA;AAGD,MAAM,mBAAA,GAAsB,iBAAiB,IAAA,CAAK;AAAA,EAChD,IAAA,EAAM,qBAAA;AAAA,EACN,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,WAAA;AAAA,IACP,IAAA,EAAM,sBAAM,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,IAC3B,QAAA,EAAU;AAAA;AAEd,CAAC,CAAA;AAGD,YAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,WAAA;AAAA,EACV,UAAA,EAAY;AAAA,IACV,mBAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;;;"}

package/dist/components/ChangeEvents/ChangeEventListItem.esm.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Link } from '@backstage/core-components';
-import { makeStyles, Tooltip, IconButton, ListItem, ListItemText, Typography, ListItemSecondaryAction } from '@material-ui/core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyles, ListItem, ListItemText, Typography, 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 LinkIcon from '@material-ui/icons/Link';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -15,35 +15,35 @@ const useStyles = makeStyles((theme) => ({
   },
   listItemPrimary: {
     fontWeight: "bold"
-  },
-  smallExternalLinkIconStyle: {
-    color: theme.palette.text.primary
-  },
-  smallExternalLinkWithoutMarginIconStyle: {
-    color: theme.palette.text.primary,
-    marginRight: "-20px"
-  },
-  smallIconStyle: {
-    color: theme.palette.text.primary,
-    marginRight: "-20px"
   }
 }));
 const ChangeEventListItem = ({ changeEvent }) => {
   const classes = useStyles();
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
   const changedAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
+  const handleExternalLinkClick = (url) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const handlePagerDutyClick = () => {
+    if (changeEvent.html_url) {
+      window.open(changeEvent.html_url, "_blank", "noopener,noreferrer");
+    }
+  };
   let externalLinkElem;
-  if (changeEvent.links.length > 0) {
+  if (changeEvent.links.length > 0 && changeEvent.links[0]?.href) {
     const text = changeEvent.links[0].text;
-    externalLinkElem = /* @__PURE__ */ jsx(Tooltip, { title: text, placement: "top", children: /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        component: Link,
-        to: changeEvent.links[0].href,
-        className: changeEvent.html_url === void 0 ? classes.smallExternalLinkWithoutMarginIconStyle : classes.smallExternalLinkIconStyle,
-        children: /* @__PURE__ */ jsx(LinkIcon, {})
-      }
-    ) });
+    const linkHref = changeEvent.links[0].href;
+    externalLinkElem = /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+          variant: "tertiary",
+          onClick: () => handleExternalLinkClick(linkHref)
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { children: text })
+    ] });
   }
   return /* @__PURE__ */ jsxs(ListItem, { dense: true, children: [
     /* @__PURE__ */ jsx(
@@ -65,15 +65,18 @@ const ChangeEventListItem = ({ changeEvent }) => {
     ),
     /* @__PURE__ */ jsxs(ListItemSecondaryAction, { children: [
       externalLinkElem,
-      changeEvent.html_url === void 0 ? null : /* @__PURE__ */ jsx(Tooltip, { title: "View in PagerDuty", placement: "top", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          component: Link,
-          to: changeEvent.html_url,
-          className: classes.smallIconStyle,
-          children: /* @__PURE__ */ jsx(OpenInBrowserIcon, {})
-        }
-      ) })
+      changeEvent.html_url === void 0 ? null : /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+        /* @__PURE__ */ jsx(
+          ButtonIcon,
+          {
+            "aria-label": "view-in-pd-button",
+            icon: /* @__PURE__ */ jsx(OpenInBrowserIcon, { className: classes.smallIconStyle }),
+            variant: "tertiary",
+            onClick: handlePagerDutyClick
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { children: "View in PagerDuty" })
+      ] })
     ] })
   ] }, changeEvent.id);
 };

package/dist/components/ChangeEvents/ChangeEventListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeEventListItem.esm.js","sources":["../../../src/components/ChangeEvents/ChangeEventListItem.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\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { Link } from '@backstage/core-components';\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  Tooltip,\n  ListItemText,\n  makeStyles,\n  IconButton,\n  Typography,\n} from '@material-ui/core';\nimport { DateTime, Duration } from 'luxon';\nimport { PagerDutyChangeEvent } from '@pagerduty/backstage-plugin-common';\nimport OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { BackstageTheme } from '@backstage/theme';\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  smallExternalLinkIconStyle: {\n    color: theme.palette.text.primary,\n  },\n  smallExternalLinkWithoutMarginIconStyle: {\n    color: theme.palette.text.primary,\n    marginRight: '-20px',\n  },\n  smallIconStyle: {\n    color: theme.palette.text.primary,\n    marginRight: '-20px',\n  },\n}));\n\ntype Props = {\n  changeEvent: PagerDutyChangeEvent;\n};\n\nexport const ChangeEventListItem = ({ changeEvent }: Props) => {\n  const classes = useStyles();\n  const duration =\n    new Date().getTime() - new Date(changeEvent.timestamp).getTime();\n  const changedAt = DateTime.local()\n    .minus(Duration.fromMillis(duration))\n    .toRelative({ locale: 'en' });\n\n  let externalLinkElem: JSX.Element | undefined;\n  if (changeEvent.links.length > 0) {\n    const text: string = changeEvent.links[0].text;\n    externalLinkElem = (\n      <Tooltip title={text} placement=\"top\">\n        <IconButton\n          component={Link}\n          to={changeEvent.links[0].href}\n          className={\n            changeEvent.html_url === undefined\n              ? classes.smallExternalLinkWithoutMarginIconStyle\n              : classes.smallExternalLinkIconStyle\n          }\n        >\n          <LinkIcon />\n        </IconButton>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <ListItem dense key={changeEvent.id}>\n      <ListItemText\n        primary={<>{changeEvent.summary}</>}\n        primaryTypographyProps={{\n          variant: 'body1',\n          className: classes.listItemPrimary,\n        }}\n        secondary={\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            Triggered from {changeEvent.source} {changedAt}.\n          </Typography>\n        }\n      />\n      <ListItemSecondaryAction>\n        {externalLinkElem}\n        {changeEvent.html_url === undefined ? null : (\n          <Tooltip title=\"View in PagerDuty\" placement=\"top\">\n            <IconButton\n              component={Link}\n              to={changeEvent.html_url}\n              className={classes.smallIconStyle}\n            >\n              <OpenInBrowserIcon />\n            </IconButton>\n          </Tooltip>\n        )}\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChangeEventListItem.esm.js","sources":["../../../src/components/ChangeEvents/ChangeEventListItem.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\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { ButtonIcon, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport { DateTime, Duration } from 'luxon';\nimport { PagerDutyChangeEvent } from '@pagerduty/backstage-plugin-common';\nimport OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { BackstageTheme } from '@backstage/theme';\n\nconst useStyles = makeStyles<BackstageTheme>(() => ({\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}));\n\ntype Props = {\n  changeEvent: PagerDutyChangeEvent;\n};\n\nexport const ChangeEventListItem = ({ changeEvent }: Props) => {\n  const classes = useStyles();\n  const duration =\n    new Date().getTime() - new Date(changeEvent.timestamp).getTime();\n  const changedAt = DateTime.local()\n    .minus(Duration.fromMillis(duration))\n    .toRelative({ locale: 'en' });\n\n  const handleExternalLinkClick = (url: string) => {\n    window.open(url, '_blank', 'noopener,noreferrer');\n  };\n\n  const handlePagerDutyClick = () => {\n    if (changeEvent.html_url) {\n      window.open(changeEvent.html_url, '_blank', 'noopener,noreferrer');\n    }\n  };\n\n  let externalLinkElem: JSX.Element | undefined;\n  if (changeEvent.links.length > 0 && changeEvent.links[0]?.href) {\n    const text: string = changeEvent.links[0].text;\n    const linkHref = changeEvent.links[0].href;\n    externalLinkElem = (\n      <TooltipTrigger>\n        <ButtonIcon\n          icon={<LinkIcon />}\n          variant=\"tertiary\"\n          onClick={() => handleExternalLinkClick(linkHref)}\n        />\n        <Tooltip>{text}</Tooltip>\n      </TooltipTrigger>\n    );\n  }\n\n  return (\n    <ListItem dense key={changeEvent.id}>\n      <ListItemText\n        primary={<>{changeEvent.summary}</>}\n        primaryTypographyProps={{\n          variant: 'body1',\n          className: classes.listItemPrimary,\n        }}\n        secondary={\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            Triggered from {changeEvent.source} {changedAt}.\n          </Typography>\n        }\n      />\n      <ListItemSecondaryAction>\n        {externalLinkElem}\n        {changeEvent.html_url === undefined ? null : (\n          <TooltipTrigger>\n            <ButtonIcon\n              aria-label=\"view-in-pd-button\"\n              icon={<OpenInBrowserIcon className={classes.smallIconStyle} />}\n              variant=\"tertiary\"\n              onClick={handlePagerDutyClick}\n            />\n            <Tooltip>View in PagerDuty</Tooltip>\n          </TooltipTrigger>\n        )}\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ChangeEvents/ChangeEvents.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 { ChangeEventListItem } from './ChangeEventListItem.esm.js';
 import { ChangeEventEmptyState } from './ChangeEventEmptyState.esm.js';
 import { ChangeEventForbiddenState } from './ChangeEventForbiddenState.esm.js';
@@ -10,8 +10,16 @@ import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';
 import { Alert } from '@material-ui/lab';
 
+const useStyles = makeStyles(
+  () => createStyles({
+    loadingStyles: {
+      height: "253px"
+    }
+  })
+);
 const ChangeEvents = ({ serviceId, account, refreshEvents }) => {
   const api = useApi(pagerDutyApiRef);
+  const { loadingStyles } = useStyles();
   const [{ value: changeEvents, loading, error }, getChangeEvents] = useAsyncFn(
     async () => {
       const { change_events } = await api.getChangeEventsByServiceId(
@@ -34,7 +42,7 @@ const ChangeEvents = ({ serviceId, account, refreshEvents }) => {
     ] });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Progress, {});
+    return /* @__PURE__ */ jsx("div", { className: loadingStyles, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (!changeEvents?.length) {
     return /* @__PURE__ */ jsx(ChangeEventEmptyState, {});

package/dist/components/ChangeEvents/ChangeEvents.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeEvents.esm.js","sources":["../../../src/components/ChangeEvents/ChangeEvents.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\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useEffect } from 'react';\nimport { List } from '@material-ui/core';\nimport { ChangeEventListItem } from './ChangeEventListItem';\nimport { ChangeEventEmptyState } from './ChangeEventEmptyState';\nimport { ChangeEventForbiddenState } from './ChangeEventForbiddenState';\nimport useAsyncFn from 'react-use/lib/useAsyncFn';\nimport { pagerDutyApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Progress } from '@backstage/core-components';\nimport { Alert } from '@material-ui/lab';\n\ntype Props = {\n  serviceId: string;\n  account?: string;\n  refreshEvents: boolean;\n};\n\nexport const ChangeEvents = ({ serviceId, account, refreshEvents }: Props) => {\n  const api = useApi(pagerDutyApiRef);\n\n  const [{ value: changeEvents, loading, error }, getChangeEvents] = useAsyncFn(\n    async () => {\n      const { change_events } = await api.getChangeEventsByServiceId(\n        serviceId,\n        account,\n      );\n      return change_events;\n    },\n  );\n\n  useEffect(() => {\n    getChangeEvents();\n  }, [refreshEvents, getChangeEvents]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <ChangeEventForbiddenState />;\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 (!changeEvents?.length) {\n    return <ChangeEventEmptyState />;\n  }\n\n  return (\n    <List dense>\n      {changeEvents!.map((changeEvent, index) => (\n        <ChangeEventListItem\n          key={changeEvent.id + index}\n          changeEvent={changeEvent}\n        />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCO,MAAM,eAAe,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAc,KAAa;AAC5E,EAAA,MAAM,GAAA,GAAM,OAAO,eAAe,CAAA;AAElC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAO,YAAA,EAAc,SAAS,KAAA,EAAM,EAAG,eAAe,CAAA,GAAI,UAAA;AAAA,IACjE,YAAY;AACV,MAAA,MAAM,EAAE,aAAA,EAAc,GAAI,MAAM,GAAA,CAAI,0BAAA;AAAA,QAClC,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,OAAO,aAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG,CAAC,aAAA,EAAe,eAAe,CAAC,CAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,2BAAQ,yBAAA,EAAA,EAA0B,CAAA;AAAA,IACpC;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,cAAc,MAAA,EAAQ;AACzB,IAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAAA,EAChC;AAEA,EAAA,uBACE,GAAA,CAAC,QAAK,KAAA,EAAK,IAAA,EACR,uBAAc,GAAA,CAAI,CAAC,aAAa,KAAA,qBAC/B,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MAEC;AAAA,KAAA;AAAA,IADK,YAAY,EAAA,GAAK;AAAA,GAGzB,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ChangeEvents.esm.js","sources":["../../../src/components/ChangeEvents/ChangeEvents.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\nimport { useEffect } from 'react';\nimport { createStyles, List, makeStyles } from '@material-ui/core';\nimport { ChangeEventListItem } from './ChangeEventListItem';\nimport { ChangeEventEmptyState } from './ChangeEventEmptyState';\nimport { ChangeEventForbiddenState } from './ChangeEventForbiddenState';\nimport useAsyncFn from 'react-use/lib/useAsyncFn';\nimport { pagerDutyApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Progress } from '@backstage/core-components';\nimport { Alert } from '@material-ui/lab';\nimport { BackstageTheme } from '@backstage/theme';\n\ntype Props = {\n  serviceId: string;\n  account?: string;\n  refreshEvents: boolean;\n};\n\nconst useStyles = makeStyles<BackstageTheme>(() =>\n  createStyles({\n    loadingStyles: {\n      height: '253px',\n    },\n  }),\n);\n\nexport const ChangeEvents = ({ serviceId, account, refreshEvents }: Props) => {\n  const api = useApi(pagerDutyApiRef);\n  const { loadingStyles } = useStyles();\n\n  const [{ value: changeEvents, loading, error }, getChangeEvents] = useAsyncFn(\n    async () => {\n      const { change_events } = await api.getChangeEventsByServiceId(\n        serviceId,\n        account,\n      );\n      return change_events;\n    },\n  );\n\n  useEffect(() => {\n    getChangeEvents();\n  }, [refreshEvents, getChangeEvents]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <ChangeEventForbiddenState />;\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 (!changeEvents?.length) {\n    return <ChangeEventEmptyState />;\n  }\n\n  return (\n    <List dense>\n      {changeEvents!.map((changeEvent, index) => (\n        <ChangeEventListItem\n          key={changeEvent.id + index}\n          changeEvent={changeEvent}\n        />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAA2B,MAC3C,YAAA,CAAa;AAAA,IACX,aAAA,EAAe;AAAA,MACb,MAAA,EAAQ;AAAA;AACV,GACD;AACH,CAAA;AAEO,MAAM,eAAe,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAc,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,YAAA,EAAc,SAAS,KAAA,EAAM,EAAG,eAAe,CAAA,GAAI,UAAA;AAAA,IACjE,YAAY;AACV,MAAA,MAAM,EAAE,aAAA,EAAc,GAAI,MAAM,GAAA,CAAI,0BAAA;AAAA,QAClC,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,OAAO,aAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG,CAAC,aAAA,EAAe,eAAe,CAAC,CAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,2BAAQ,yBAAA,EAAA,EAA0B,CAAA;AAAA,IACpC;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,cAAc,MAAA,EAAQ;AACzB,IAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAAA,EAChC;AAEA,EAAA,uBACE,GAAA,CAAC,QAAK,KAAA,EAAK,IAAA,EACR,uBAAc,GAAA,CAAI,CAAC,aAAa,KAAA,qBAC/B,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MAEC;AAAA,KAAA;AAAA,IADK,YAAY,EAAA,GAAK;AAAA,GAGzB,CAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -10,16 +10,19 @@ const isPluginApplicableToEntity = (entity) => Boolean(
 const EntityPagerDutyCard = (props) => {
   const { readOnly, disableChangeEvents, disableOnCall } = props;
   const { entity } = useEntity();
-  const pagerDutyEntity = getPagerDutyEntity(entity);
-  return /* @__PURE__ */ jsx(
-    PagerDutyCard,
-    {
-      ...pagerDutyEntity,
-      readOnly,
-      disableChangeEvents,
-      disableOnCall
-    }
-  );
+  if (isPluginApplicableToEntity(entity)) {
+    const pagerDutyEntity = getPagerDutyEntity(entity);
+    return /* @__PURE__ */ jsx(
+      PagerDutyCard,
+      {
+        ...pagerDutyEntity,
+        readOnly,
+        disableChangeEvents,
+        disableOnCall
+      }
+    );
+  }
+  return null;
 };
 
 export { EntityPagerDutyCard, isPluginApplicableToEntity };

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/EntityPagerDutyCard/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 { Entity } from '@backstage/catalog-model';\nimport { PAGERDUTY_INTEGRATION_KEY, PAGERDUTY_SERVICE_ID } from '../constants';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getPagerDutyEntity } from '../pagerDutyEntity';\nimport { PagerDutyCard } from '../PagerDutyCard';\n\n/** @public */\nexport const isPluginApplicableToEntity = (entity: Entity) =>\n  Boolean(\n    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY] ||\n      entity.metadata.annotations?.[PAGERDUTY_SERVICE_ID],\n  );\n\n/** @public */\nexport type EntityPagerDutyCardProps = {\n  readOnly?: boolean;\n  disableChangeEvents?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const EntityPagerDutyCard = (props: EntityPagerDutyCardProps) => {\n  const { readOnly, disableChangeEvents, disableOnCall } = props;\n  const { entity } = useEntity();\n  const pagerDutyEntity = getPagerDutyEntity(entity);\n  return (\n    <PagerDutyCard\n      {...pagerDutyEntity}\n      readOnly={readOnly}\n      disableChangeEvents={disableChangeEvents}\n      disableOnCall={disableOnCall}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,0BAAA,GAA6B,CAAC,MAAA,KACzC,OAAA;AAAA,EACE,MAAA,CAAO,SAAS,WAAA,GAAc,yBAAyB,KACrD,MAAA,CAAO,QAAA,CAAS,cAAc,oBAAoB;AACtD;AAUK,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAoC;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,mBAAA,EAAqB,aAAA,EAAc,GAAI,KAAA;AACzD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,eAAA,GAAkB,mBAAmB,MAAM,CAAA;AACjD,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,QAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/EntityPagerDutyCard/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 { Entity } from '@backstage/catalog-model';\nimport { PAGERDUTY_INTEGRATION_KEY, PAGERDUTY_SERVICE_ID } from '../constants';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getPagerDutyEntity } from '../pagerDutyEntity';\nimport { PagerDutyCard } from '../PagerDutyCard';\n\n/** @public */\nexport const isPluginApplicableToEntity = (entity: Entity) =>\n  Boolean(\n    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY] ||\n      entity.metadata.annotations?.[PAGERDUTY_SERVICE_ID],\n  );\n\n/** @public */\nexport type EntityPagerDutyCardProps = {\n  readOnly?: boolean;\n  disableChangeEvents?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const EntityPagerDutyCard = (props: EntityPagerDutyCardProps) => {\n  const { readOnly, disableChangeEvents, disableOnCall } = props;\n  const { entity } = useEntity();\n\n  if (isPluginApplicableToEntity(entity)) {\n    const pagerDutyEntity = getPagerDutyEntity(entity);\n\n    return (\n      <PagerDutyCard\n        {...pagerDutyEntity}\n        readOnly={readOnly}\n        disableChangeEvents={disableChangeEvents}\n        disableOnCall={disableOnCall}\n      />\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,0BAAA,GAA6B,CAAC,MAAA,KACzC,OAAA;AAAA,EACE,MAAA,CAAO,SAAS,WAAA,GAAc,yBAAyB,KACrD,MAAA,CAAO,QAAA,CAAS,cAAc,oBAAoB;AACtD;AAUK,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAoC;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,mBAAA,EAAqB,aAAA,EAAc,GAAI,KAAA;AACzD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,IAAI,0BAAA,CAA2B,MAAM,CAAA,EAAG;AACtC,IAAA,MAAM,eAAA,GAAkB,mBAAmB,MAAM,CAAA;AAEjD,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,QAAA;AAAA,QACA,mBAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}

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

@@ -10,16 +10,19 @@ const isPluginApplicableToEntity = (entity) => Boolean(
 const EntityPagerDutySmallCard = (props) => {
   const { readOnly, disableInsights, disableOnCall } = props;
   const { entity } = useEntity();
-  const pagerDutyEntity = getPagerDutyEntity(entity);
-  return /* @__PURE__ */ jsx(
-    PagerDutySmallCard,
-    {
-      ...pagerDutyEntity,
-      readOnly,
-      disableInsights,
-      disableOnCall
-    }
-  );
+  if (isPluginApplicableToEntity(entity)) {
+    const pagerDutyEntity = getPagerDutyEntity(entity);
+    return /* @__PURE__ */ jsx(
+      PagerDutySmallCard,
+      {
+        ...pagerDutyEntity,
+        readOnly,
+        disableInsights,
+        disableOnCall
+      }
+    );
+  }
+  return null;
 };
 
 export { EntityPagerDutySmallCard, isPluginApplicableToEntity };

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/EntityPagerDutySmallCard/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 { Entity } from '@backstage/catalog-model';\nimport { PAGERDUTY_INTEGRATION_KEY, PAGERDUTY_SERVICE_ID } from '../constants';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getPagerDutyEntity } from '../pagerDutyEntity';\nimport { PagerDutySmallCard } from '../PagerDutySmallCard';\n\n/** @public */\nexport const isPluginApplicableToEntity = (entity: Entity) =>\n  Boolean(\n    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY] ||\n      entity.metadata.annotations?.[PAGERDUTY_SERVICE_ID],\n  );\n\n/** @public */\nexport type EntityPagerDutySmallCardProps = {\n  readOnly?: boolean;\n  disableInsights?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const EntityPagerDutySmallCard = (\n  props: EntityPagerDutySmallCardProps,\n) => {\n  const { readOnly, disableInsights, disableOnCall } = props;\n  const { entity } = useEntity();\n  const pagerDutyEntity = getPagerDutyEntity(entity);\n  return (\n    <PagerDutySmallCard\n      {...pagerDutyEntity}\n      readOnly={readOnly}\n      disableInsights={disableInsights}\n      disableOnCall={disableOnCall}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,0BAAA,GAA6B,CAAC,MAAA,KACzC,OAAA;AAAA,EACE,MAAA,CAAO,SAAS,WAAA,GAAc,yBAAyB,KACrD,MAAA,CAAO,QAAA,CAAS,cAAc,oBAAoB;AACtD;AAUK,MAAM,wBAAA,GAA2B,CACtC,KAAA,KACG;AACH,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,EAAiB,aAAA,EAAc,GAAI,KAAA;AACrD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,eAAA,GAAkB,mBAAmB,MAAM,CAAA;AACjD,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,QAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/EntityPagerDutySmallCard/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\nimport { Entity } from '@backstage/catalog-model';\nimport { PAGERDUTY_INTEGRATION_KEY, PAGERDUTY_SERVICE_ID } from '../constants';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { getPagerDutyEntity } from '../pagerDutyEntity';\nimport { PagerDutySmallCard } from '../PagerDutySmallCard';\n\n/** @public */\nexport const isPluginApplicableToEntity = (entity: Entity) =>\n  Boolean(\n    entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY] ||\n      entity.metadata.annotations?.[PAGERDUTY_SERVICE_ID],\n  );\n\n/** @public */\nexport type EntityPagerDutySmallCardProps = {\n  readOnly?: boolean;\n  disableInsights?: boolean;\n  disableOnCall?: boolean;\n};\n\n/** @public */\nexport const EntityPagerDutySmallCard = (\n  props: EntityPagerDutySmallCardProps,\n) => {\n  const { readOnly, disableInsights, disableOnCall } = props;\n  const { entity } = useEntity();\n\n  if (isPluginApplicableToEntity(entity)) {\n    const pagerDutyEntity = getPagerDutyEntity(entity);\n\n    return (\n      <PagerDutySmallCard\n        {...pagerDutyEntity}\n        readOnly={readOnly}\n        disableInsights={disableInsights}\n        disableOnCall={disableOnCall}\n      />\n    );\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,0BAAA,GAA6B,CAAC,MAAA,KACzC,OAAA;AAAA,EACE,MAAA,CAAO,SAAS,WAAA,GAAc,yBAAyB,KACrD,MAAA,CAAO,QAAA,CAAS,cAAc,oBAAoB;AACtD;AAUK,MAAM,wBAAA,GAA2B,CACtC,KAAA,KACG;AACH,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,EAAiB,aAAA,EAAc,GAAI,KAAA;AACrD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,IAAI,0BAAA,CAA2B,MAAM,CAAA,EAAG;AACtC,IAAA,MAAM,eAAA,GAAkB,mBAAmB,MAAM,CAAA;AAEjD,IAAA,uBACE,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,QAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist/components/Escalation/EscalationPolicy.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makeStyles, List, ListSubheader, createStyles } from '@material-ui/core';
+import { List, ListSubheader } from '@material-ui/core';
 import { EscalationUsersEmptyState } from './EscalationUsersEmptyState.esm.js';
 import { EscalationUsersForbiddenState } from './EscalationUsersForbiddenState.esm.js';
 import { EscalationUser } from './EscalationUser.esm.js';
@@ -9,13 +9,6 @@ import { Alert } from '@material-ui/lab';
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';
 
-const useStyles = makeStyles(
-  () => createStyles({
-    listStyle: {
-      marginLeft: "-15px"
-    }
-  })
-);
 const EscalationPolicy = ({
   policyId,
   policyUrl,
@@ -23,7 +16,6 @@ const EscalationPolicy = ({
   account
 }) => {
   const api = useApi(pagerDutyApiRef);
-  const classes = useStyles();
   const {
     value: users,
     loading,
@@ -46,7 +38,7 @@ const EscalationPolicy = ({
   if (!users?.length) {
     return /* @__PURE__ */ jsx(EscalationUsersEmptyState, {});
   }
-  return /* @__PURE__ */ jsx(List, { dense: true, className: classes.listStyle, children: users.map((user, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(List, { dense: true, children: users.map((user, index) => /* @__PURE__ */ jsx(
     EscalationUser,
     {
       user,

package/dist/components/Escalation/EscalationPolicy.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EscalationPolicy.esm.js","sources":["../../../src/components/Escalation/EscalationPolicy.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  List,\n  ListSubheader,\n  createStyles,\n  makeStyles,\n} from '@material-ui/core';\nimport { EscalationUsersEmptyState } from './EscalationUsersEmptyState';\nimport { EscalationUsersForbiddenState } from './EscalationUsersForbiddenState';\nimport { EscalationUser } from './EscalationUser';\nimport useAsync from 'react-use/lib/useAsync';\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 { BackstageTheme } from '@backstage/theme';\n\ntype Props = {\n  policyId: string;\n  policyUrl: string;\n  policyName: string;\n  account?: string;\n};\nconst useStyles = makeStyles<BackstageTheme>(() =>\n  createStyles({\n    listStyle: {\n      marginLeft: '-15px',\n    },\n  }),\n);\n\nexport const EscalationPolicy = ({\n  policyId,\n  policyUrl,\n  policyName,\n  account,\n}: Props) => {\n  const api = useApi(pagerDutyApiRef);\n  const classes = useStyles();\n\n  const {\n    value: users,\n    loading,\n    error,\n  } = useAsync(async () => {\n    return await api.getOnCallByPolicyId(policyId, account);\n  });\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return (\n        <List dense subheader={<ListSubheader>ON CALL</ListSubheader>}>\n          <EscalationUsersForbiddenState />\n        </List>\n      );\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 data-testid=\"escalation-progress\" />;\n  }\n\n  if (!users?.length) {\n    return <EscalationUsersEmptyState />;\n  }\n\n  return (\n    <List dense className={classes.listStyle}>\n      {users!.map((user, index) => (\n        <EscalationUser\n          key={index}\n          user={user}\n          policyUrl={policyUrl}\n          policyName={policyName}\n        />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAuCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAA2B,MAC3C,YAAA,CAAa;AAAA,IACX,SAAA,EAAW;AAAA,MACT,UAAA,EAAY;AAAA;AACd,GACD;AACH,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAa;AACX,EAAA,MAAM,GAAA,GAAM,OAAO,eAAe,CAAA;AAClC,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACF,GAAI,SAAS,YAAY;AACvB,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,OAAO,CAAA;AAAA,EACxD,CAAC,CAAA;AAED,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAK,IAAA,EAAC,SAAA,kBAAW,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAA,SAAA,EAAO,CAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,6BAAA,EAAA,EAA8B,CAAA,EACjC,CAAA;AAAA,IAEJ;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,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAY,qBAAA,EAAsB,CAAA;AAAA,EACrD;AAEA,EAAA,IAAI,CAAC,OAAO,MAAA,EAAQ;AAClB,IAAA,2BAAQ,yBAAA,EAAA,EAA0B,CAAA;AAAA,EACpC;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAK,IAAA,EAAC,SAAA,EAAW,OAAA,CAAQ,SAAA,EAC5B,QAAA,EAAA,KAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBACjB,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MAEC,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAHK;AAAA,GAKR,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EscalationPolicy.esm.js","sources":["../../../src/components/Escalation/EscalationPolicy.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 { List, ListSubheader } from '@material-ui/core';\nimport { EscalationUsersEmptyState } from './EscalationUsersEmptyState';\nimport { EscalationUsersForbiddenState } from './EscalationUsersForbiddenState';\nimport { EscalationUser } from './EscalationUser';\nimport useAsync from 'react-use/lib/useAsync';\nimport { pagerDutyApiRef } from '../../api';\nimport { Alert } from '@material-ui/lab';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Progress } from '@backstage/core-components';\n\ntype Props = {\n  policyId: string;\n  policyUrl: string;\n  policyName: string;\n  account?: string;\n};\n\nexport const EscalationPolicy = ({\n  policyId,\n  policyUrl,\n  policyName,\n  account,\n}: Props) => {\n  const api = useApi(pagerDutyApiRef);\n\n  const {\n    value: users,\n    loading,\n    error,\n  } = useAsync(async () => {\n    return await api.getOnCallByPolicyId(policyId, account);\n  });\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return (\n        <List dense subheader={<ListSubheader>ON CALL</ListSubheader>}>\n          <EscalationUsersForbiddenState />\n        </List>\n      );\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 data-testid=\"escalation-progress\" />;\n  }\n\n  if (!users?.length) {\n    return <EscalationUsersEmptyState />;\n  }\n\n  return (\n    <List dense>\n      {users!.map((user, index) => (\n        <EscalationUser\n          key={index}\n          user={user}\n          policyUrl={policyUrl}\n          policyName={policyName}\n        />\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAa;AACX,EAAA,MAAM,GAAA,GAAM,OAAO,eAAe,CAAA;AAElC,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACF,GAAI,SAAS,YAAY;AACvB,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,OAAO,CAAA;AAAA,EACxD,CAAC,CAAA;AAED,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACvC,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAK,IAAA,EAAC,SAAA,kBAAW,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAA,SAAA,EAAO,CAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,6BAAA,EAAA,EAA8B,CAAA,EACjC,CAAA;AAAA,IAEJ;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,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAY,qBAAA,EAAsB,CAAA;AAAA,EACrD;AAEA,EAAA,IAAI,CAAC,OAAO,MAAA,EAAQ;AAClB,IAAA,2BAAQ,yBAAA,EAAA,EAA0B,CAAA;AAAA,EACpC;AAEA,EAAA,uBACE,GAAA,CAAC,QAAK,KAAA,EAAK,IAAA,EACR,gBAAO,GAAA,CAAI,CAAC,MAAM,KAAA,qBACjB,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MAEC,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAHK;AAAA,GAKR,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/Escalation/EscalationUser.esm.js

@@ -1,33 +1,26 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { makeStyles, ListItem, ListItemIcon, ListItemText, IconButton, Typography, Tooltip } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, ListItem, ListItemIcon, ListItemText, Typography, Tooltip } from '@material-ui/core';
 import NotificationsIcon from '@material-ui/icons/Notifications';
+import { Avatar, Button } from '@backstage/ui';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   listItemPrimary: {
     fontWeight: "bold"
   },
   listItemSecondary: {
     fontWeight: "normal",
     textDecoration: "underline",
-    marginTop: "-5px"
+    marginTop: "-5px",
+    paddingLeft: "5px"
   },
   buttonStyle: {
-    marginLeft: "-11px",
-    marginTop: "-10px",
     fontSize: "15px",
-    color: theme.palette.text.primary,
     "&:hover": {
-      backgroundColor: "transparent",
       textDecoration: "underline"
     }
   },
   userTextButtonStyle: {
-    marginLeft: "-11px",
-    marginTop: "-10px",
-    marginBottom: "-10px",
     fontSize: "15px",
-    color: theme.palette.text.primary,
     "&:hover": {
       backgroundColor: "transparent",
       textDecoration: "underline"
@@ -40,14 +33,10 @@ const useStyles = makeStyles((theme) => ({
   },
   iconStyle: {
     fontSize: "25px",
-    marginLeft: "-4px",
-    color: theme.palette.text.primary
-  },
-  smallIconStyle: {
-    color: theme.palette.text.primary
+    marginLeft: "-4px"
   },
   avatarStyle: {
-    marginTop: "-20px"
+    marginTop: "-30px"
   }
 }));
 function navigateToUrl(url) {
@@ -59,7 +48,7 @@ const EscalationUser = ({ user, policyUrl, policyName }) => {
     /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(
       Avatar,
       {
-        alt: user.name,
+        name: user.name,
         src: user.avatar_url,
         className: classes.avatarStyle
       }
@@ -69,8 +58,9 @@ const EscalationUser = ({ user, policyUrl, policyName }) => {
       {
         primary: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Tooltip, { title: "Open user in PagerDuty", placement: "top", children: /* @__PURE__ */ jsx(
-            IconButton,
+            Button,
             {
+              variant: "tertiary",
               "aria-label": "open-user-in-browser",
               onClick: () => navigateToUrl(user.html_url),
               className: classes.userTextButtonStyle,
@@ -87,15 +77,15 @@ const EscalationUser = ({ user, policyUrl, policyName }) => {
           )
         ] }),
         secondary: /* @__PURE__ */ jsx(
-          IconButton,
+          Button,
           {
             "aria-label": "open-escalation-policy-in-browser",
             onClick: () => navigateToUrl(policyUrl),
+            variant: "tertiary",
+            size: "small",
             className: classes.buttonStyle,
-            children: /* @__PURE__ */ jsxs(Typography, { className: classes.containerStyle, children: [
-              /* @__PURE__ */ jsx(NotificationsIcon, { className: classes.iconStyle }),
-              policyName
-            ] })
+            iconStart: /* @__PURE__ */ jsx(NotificationsIcon, { className: classes.iconStyle }),
+            children: /* @__PURE__ */ jsx(Typography, { className: classes.containerStyle, children: policyName })
           }
         )
       }

package/dist/components/Escalation/EscalationUser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EscalationUser.esm.js","sources":["../../../src/components/Escalation/EscalationUser.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  ListItemIcon,\n  Tooltip,\n  ListItemText,\n  makeStyles,\n  IconButton,\n  Typography,\n} from '@material-ui/core';\nimport Avatar from '@material-ui/core/Avatar';\nimport { PagerDutyUser } from '@pagerduty/backstage-plugin-common';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport { BackstageTheme } from '@backstage/theme';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  listItemPrimary: {\n    fontWeight: 'bold',\n  },\n  listItemSecondary: {\n    fontWeight: 'normal',\n    textDecoration: 'underline',\n    marginTop: '-5px',\n  },\n  buttonStyle: {\n    marginLeft: '-11px',\n    marginTop: '-10px',\n    fontSize: '15px',\n    color: theme.palette.text.primary,\n    '&:hover': {\n      backgroundColor: 'transparent',\n      textDecoration: 'underline',\n    },\n  },\n  userTextButtonStyle: {\n    marginLeft: '-11px',\n    marginTop: '-10px',\n    marginBottom: '-10px',\n    fontSize: '15px',\n    color: theme.palette.text.primary,\n    '&:hover': {\n      backgroundColor: 'transparent',\n      textDecoration: 'underline',\n    },\n  },\n  containerStyle: {\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight: 'bold',\n  },\n  iconStyle: {\n    fontSize: '25px',\n    marginLeft: '-4px',\n    color: theme.palette.text.primary,\n  },\n  smallIconStyle: {\n    color: theme.palette.text.primary,\n  },\n  avatarStyle: {\n    marginTop: '-20px',\n  },\n}));\n\ntype Props = {\n  user: PagerDutyUser;\n  policyUrl: string;\n  policyName: string;\n};\n\nfunction navigateToUrl(url: string) {\n  // open url in new browser window\n  window.open(url, '_blank');\n}\n\nexport const EscalationUser = ({ user, policyUrl, policyName }: Props) => {\n  const classes = useStyles();\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Avatar\n          alt={user.name}\n          src={user.avatar_url}\n          className={classes.avatarStyle}\n        />\n      </ListItemIcon>\n      <ListItemText\n        primary={\n          <>\n            <Tooltip title=\"Open user in PagerDuty\" placement=\"top\">\n              <IconButton\n                aria-label=\"open-user-in-browser\"\n                onClick={() => navigateToUrl(user.html_url)}\n                className={classes.userTextButtonStyle}\n              >\n                <Typography className={classes.containerStyle}>\n                  {user.name}\n                </Typography>\n              </IconButton>\n            </Tooltip>\n\n            <Typography\n              className={classes.listItemSecondary}\n              color=\"textSecondary\"\n            >\n              {user.email}\n            </Typography>\n          </>\n        }\n        secondary={\n          <IconButton\n            aria-label=\"open-escalation-policy-in-browser\"\n            onClick={() => navigateToUrl(policyUrl)}\n            className={classes.buttonStyle}\n          >\n            <Typography className={classes.containerStyle}>\n              <NotificationsIcon className={classes.iconStyle} />\n              {policyName}\n            </Typography>\n          </IconButton>\n        }\n      />\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EscalationUser.esm.js","sources":["../../../src/components/Escalation/EscalationUser.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  ListItemIcon,\n  Tooltip,\n  ListItemText,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { PagerDutyUser } from '@pagerduty/backstage-plugin-common';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport { BackstageTheme } from '@backstage/theme';\nimport { Avatar, Button } from '@backstage/ui';\n\nconst useStyles = makeStyles<BackstageTheme>(() => ({\n  listItemPrimary: {\n    fontWeight: 'bold',\n  },\n  listItemSecondary: {\n    fontWeight: 'normal',\n    textDecoration: 'underline',\n    marginTop: '-5px',\n    paddingLeft: '5px',\n  },\n  buttonStyle: {\n    fontSize: '15px',\n    '&:hover': {\n      textDecoration: 'underline',\n    },\n  },\n  userTextButtonStyle: {\n    fontSize: '15px',\n    '&:hover': {\n      backgroundColor: 'transparent',\n      textDecoration: 'underline',\n    },\n  },\n  containerStyle: {\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight: 'bold',\n  },\n  iconStyle: {\n    fontSize: '25px',\n    marginLeft: '-4px',\n  },\n  avatarStyle: {\n    marginTop: '-30px',\n  },\n}));\n\ntype Props = {\n  user: PagerDutyUser;\n  policyUrl: string;\n  policyName: string;\n};\n\nfunction navigateToUrl(url: string) {\n  // open url in new browser window\n  window.open(url, '_blank');\n}\n\nexport const EscalationUser = ({ user, policyUrl, policyName }: Props) => {\n  const classes = useStyles();\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Avatar\n          name={user.name}\n          src={user.avatar_url}\n          className={classes.avatarStyle}\n        />\n      </ListItemIcon>\n      <ListItemText\n        primary={\n          <>\n            <Tooltip title=\"Open user in PagerDuty\" placement=\"top\">\n              <Button\n                variant=\"tertiary\"\n                aria-label=\"open-user-in-browser\"\n                onClick={() => navigateToUrl(user.html_url)}\n                className={classes.userTextButtonStyle}\n              >\n                <Typography className={classes.containerStyle}>\n                  {user.name}\n                </Typography>\n              </Button>\n            </Tooltip>\n\n            <Typography\n              className={classes.listItemSecondary}\n              color=\"textSecondary\"\n            >\n              {user.email}\n            </Typography>\n          </>\n        }\n        secondary={\n          <Button\n            aria-label=\"open-escalation-policy-in-browser\"\n            onClick={() => navigateToUrl(policyUrl)}\n            variant=\"tertiary\"\n            size=\"small\"\n            className={classes.buttonStyle}\n            iconStart={<NotificationsIcon className={classes.iconStyle} />}\n          >\n            <Typography className={classes.containerStyle}>\n              {policyName}\n            </Typography>\n          </Button>\n        }\n      />\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}