@backstage-community/plugin-cost-insights 0.15.2 → 0.16.0

package/dist/components/BarChart/BarChartTooltip.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Box from '@material-ui/core/Box';
 import Divider from '@material-ui/core/Divider';
@@ -11,19 +11,32 @@ const BarChartTooltip = (props) => {
   const titleClassName = classnames(classes.truncate, {
     [classes.maxWidth]: topRight === void 0
   });
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.tooltip, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "baseline",
-      px: 2,
-      pt: 2
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Typography, { className: titleClassName, variant: "h6" }, title), subtitle && /* @__PURE__ */ React.createElement(Typography, { className: classes.subtitle, variant: "subtitle1" }, subtitle)),
-    topRight && /* @__PURE__ */ React.createElement(Box, { ml: 2 }, topRight)
-  ), content && /* @__PURE__ */ React.createElement(Box, { px: 2, pt: 2, className: classes.maxWidth }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", paragraph: true }, content)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, children), actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: classes.divider, variant: "fullWidth" }), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, actions)));
+  return /* @__PURE__ */ jsxs(Box, { className: classes.tooltip, display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        px: 2,
+        pt: 2,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ jsx(Typography, { className: titleClassName, variant: "h6", children: title }),
+            subtitle && /* @__PURE__ */ jsx(Typography, { className: classes.subtitle, variant: "subtitle1", children: subtitle })
+          ] }),
+          topRight && /* @__PURE__ */ jsx(Box, { ml: 2, children: topRight })
+        ]
+      }
+    ),
+    content && /* @__PURE__ */ jsx(Box, { px: 2, pt: 2, className: classes.maxWidth, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", paragraph: true, children: content }) }),
+    /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", p: 2, children }),
+    actions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { className: classes.divider, variant: "fullWidth" }),
+      /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", p: 2, children: actions })
+    ] })
+  ] });
 };
 
 export { BarChartTooltip };

package/dist/components/BarChart/BarChartTooltip.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartTooltip.esm.js","sources":["../../../src/components/BarChart/BarChartTooltip.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 React, { ReactNode, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type BarChartTooltipProps = {\n  title: string;\n  content?: ReactNode | string;\n  subtitle?: ReactNode;\n  topRight?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** @public */\nexport const BarChartTooltip = (\n  props: PropsWithChildren<BarChartTooltipProps>,\n) => {\n  const { title, content, subtitle, topRight, actions, children } = props;\n\n  const classes = useStyles();\n  const titleClassName = classnames(classes.truncate, {\n    [classes.maxWidth]: topRight === undefined,\n  });\n\n  return (\n    <Box className={classes.tooltip} display=\"flex\" flexDirection=\"column\">\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"baseline\"\n        px={2}\n        pt={2}\n      >\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Typography className={titleClassName} variant=\"h6\">\n            {title}\n          </Typography>\n          {subtitle && (\n            <Typography className={classes.subtitle} variant=\"subtitle1\">\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {topRight && <Box ml={2}>{topRight}</Box>}\n      </Box>\n      {content && (\n        <Box px={2} pt={2} className={classes.maxWidth}>\n          <Typography variant=\"body1\" paragraph>\n            {content}\n          </Typography>\n        </Box>\n      )}\n      <Box display=\"flex\" flexDirection=\"column\" p={2}>\n        {children}\n      </Box>\n      {actions && (\n        <>\n          <Divider className={classes.divider} variant=\"fullWidth\" />\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            {actions}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,UAAU,QAAU,EAAA,OAAA,EAAS,UAAa,GAAA,KAAA;AAElE,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAC1B,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,OAAA,CAAQ,QAAU,EAAA;AAAA,IAClD,CAAC,OAAA,CAAQ,QAAQ,GAAG,QAAa,KAAA,KAAA;AAAA,GAClC,CAAA;AAED,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,SAAS,OAAQ,EAAA,MAAA,EAAO,eAAc,QAC5D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,aAAc,EAAA,KAAA;AAAA,MACd,cAAe,EAAA,eAAA;AAAA,MACf,UAAW,EAAA,UAAA;AAAA,MACX,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,OAAA,EAAQ,QAC5C,KACH,CAAA,EACC,QACC,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,OAAA,EAAQ,WAC9C,EAAA,EAAA,QACH,CAEJ,CAAA;AAAA,IACC,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,KAAI,QAAS;AAAA,GACrC,EACC,2BACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EAAA,sCACnC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAS,IAClC,EAAA,EAAA,OACH,CACF,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,QACH,CACC,EAAA,OAAA,8EAEI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,OAAA,EAAQ,aAAY,CACzD,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,OACH,CACF,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BarChartTooltip.esm.js","sources":["../../../src/components/BarChart/BarChartTooltip.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 { ReactNode, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type BarChartTooltipProps = {\n  title: string;\n  content?: ReactNode | string;\n  subtitle?: ReactNode;\n  topRight?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** @public */\nexport const BarChartTooltip = (\n  props: PropsWithChildren<BarChartTooltipProps>,\n) => {\n  const { title, content, subtitle, topRight, actions, children } = props;\n\n  const classes = useStyles();\n  const titleClassName = classnames(classes.truncate, {\n    [classes.maxWidth]: topRight === undefined,\n  });\n\n  return (\n    <Box className={classes.tooltip} display=\"flex\" flexDirection=\"column\">\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"baseline\"\n        px={2}\n        pt={2}\n      >\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Typography className={titleClassName} variant=\"h6\">\n            {title}\n          </Typography>\n          {subtitle && (\n            <Typography className={classes.subtitle} variant=\"subtitle1\">\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {topRight && <Box ml={2}>{topRight}</Box>}\n      </Box>\n      {content && (\n        <Box px={2} pt={2} className={classes.maxWidth}>\n          <Typography variant=\"body1\" paragraph>\n            {content}\n          </Typography>\n        </Box>\n      )}\n      <Box display=\"flex\" flexDirection=\"column\" p={2}>\n        {children}\n      </Box>\n      {actions && (\n        <>\n          <Divider className={classes.divider} variant=\"fullWidth\" />\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            {actions}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,UAAU,QAAU,EAAA,OAAA,EAAS,UAAa,GAAA,KAAA;AAElE,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAC1B,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,OAAA,CAAQ,QAAU,EAAA;AAAA,IAClD,CAAC,OAAA,CAAQ,QAAQ,GAAG,QAAa,KAAA,KAAA;AAAA,GAClC,CAAA;AAED,EACE,uBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,SAAS,OAAQ,EAAA,MAAA,EAAO,eAAc,QAC5D,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,MAAA;AAAA,QACR,aAAc,EAAA,KAAA;AAAA,QACd,cAAe,EAAA,eAAA;AAAA,QACf,UAAW,EAAA,UAAA;AAAA,QACX,EAAI,EAAA,CAAA;AAAA,QACJ,EAAI,EAAA,CAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,QAChC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,OAAA,EAAQ,MAC5C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,YACC,QAAA,wBACE,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,OAAA,EAAQ,aAC9C,QACH,EAAA,QAAA,EAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,UACC,QAAY,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,GAAI,QAAS,EAAA,QAAA,EAAA;AAAA;AAAA;AAAA,KACrC;AAAA,IACC,2BACE,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EACpC,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,SAAS,EAAA,IAAA,EAClC,mBACH,CACF,EAAA,CAAA;AAAA,oBAEF,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAAS,EAAA,CAAA,EAAG,GAC3C,QACH,EAAA,CAAA;AAAA,IACC,2BAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,OAAA,EAAS,SAAQ,WAAY,EAAA,CAAA;AAAA,sBACzD,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAAS,EAAA,CAAA,EAAG,GAC3C,QACH,EAAA,OAAA,EAAA;AAAA,KACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartTooltipItem.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import LensIcon from '@material-ui/icons/Lens';
@@ -7,16 +7,21 @@ import { useTooltipStyles } from '../../utils/styles.esm.js';
 const BarChartTooltipItem = (props) => {
   const { item } = props;
   const classes = useTooltipStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      minHeight: 25
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", alignContent: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(LensIcon, { className: classes.lensIcon, style: { fill: item.fill } })), /* @__PURE__ */ React.createElement(Typography, null, item.label)),
-    /* @__PURE__ */ React.createElement(Typography, { display: "block" }, item.value)
+      minHeight: 25,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { display: "flex", alignContent: "center", marginRight: ".5em", children: [
+          /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", marginRight: ".5em", children: /* @__PURE__ */ jsx(LensIcon, { className: classes.lensIcon, style: { fill: item.fill } }) }),
+          /* @__PURE__ */ jsx(Typography, { children: item.label })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { display: "block", children: item.value })
+      ]
+    }
   );
 };
 

package/dist/components/BarChart/BarChartTooltipItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartTooltipItem.esm.js","sources":["../../../src/components/BarChart/BarChartTooltipItem.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 React from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport LensIcon from '@material-ui/icons/Lens';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type TooltipItem = {\n  fill: string;\n  label?: string;\n  value?: string;\n};\n\n/** @public */\nexport type BarChartTooltipItemProps = {\n  item: TooltipItem;\n};\n\n/** @public */\nexport const BarChartTooltipItem = (props: BarChartTooltipItemProps) => {\n  const { item } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      minHeight={25}\n    >\n      <Box display=\"flex\" alignContent=\"center\" marginRight=\".5em\">\n        <Box display=\"flex\" alignItems=\"center\" marginRight=\".5em\">\n          <LensIcon className={classes.lensIcon} style={{ fill: item.fill }} />\n        </Box>\n        <Typography>{item.label}</Typography>\n      </Box>\n      <Typography display=\"block\">{item.value}</Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AAmCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,SAAW,EAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAa,QAAS,EAAA,WAAA,EAAY,MACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,UAAA,EAAW,UAAS,WAAY,EAAA,MAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,QAAU,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,IAAA,CAAK,IAAK,EAAA,EAAG,CACrE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAY,EAAA,IAAA,EAAA,IAAA,CAAK,KAAM,CAC1B,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAS,KAAK,KAAM;AAAA,GAC1C;AAEJ;;;;"}
+{"version":3,"file":"BarChartTooltipItem.esm.js","sources":["../../../src/components/BarChart/BarChartTooltipItem.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 Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport LensIcon from '@material-ui/icons/Lens';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type TooltipItem = {\n  fill: string;\n  label?: string;\n  value?: string;\n};\n\n/** @public */\nexport type BarChartTooltipItemProps = {\n  item: TooltipItem;\n};\n\n/** @public */\nexport const BarChartTooltipItem = (props: BarChartTooltipItemProps) => {\n  const { item } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      minHeight={25}\n    >\n      <Box display=\"flex\" alignContent=\"center\" marginRight=\".5em\">\n        <Box display=\"flex\" alignItems=\"center\" marginRight=\".5em\">\n          <LensIcon className={classes.lensIcon} style={{ fill: item.fill }} />\n        </Box>\n        <Typography>{item.label}</Typography>\n      </Box>\n      <Typography display=\"block\">{item.value}</Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AAkCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAE1B,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,SAAW,EAAA,EAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,YAAa,EAAA,QAAA,EAAS,aAAY,MACpD,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,YAAW,QAAS,EAAA,WAAA,EAAY,QAClD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,UAAU,KAAO,EAAA,EAAE,MAAM,IAAK,CAAA,IAAA,IAAQ,CACrE,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,UAAY,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,KAAM,EAAA;AAAA,SAC1B,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAS,eAAK,KAAM,EAAA;AAAA;AAAA;AAAA,GAC1C;AAEJ;;;;"}

package/dist/components/CopyUrlToClipboard/CopyUrlToClipboard.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -37,7 +38,7 @@ const CopyUrlToClipboard = () => {
     text = ClipboardMessage.success;
     Icon = AssignmentTurnedInOutlinedIcon;
   }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: text, arrow: true }, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => copyToClipboard(url) }, /* @__PURE__ */ React.createElement(Icon, null)));
+  return /* @__PURE__ */ jsx(Tooltip, { title: text, arrow: true, children: /* @__PURE__ */ jsx(IconButton, { onClick: () => copyToClipboard(url), children: /* @__PURE__ */ jsx(Icon, {}) }) });
 };
 
 export { CopyUrlToClipboard };

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

@@ -1 +1 @@
-{"version":3,"file":"CopyUrlToClipboard.esm.js","sources":["../../../src/components/CopyUrlToClipboard/CopyUrlToClipboard.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 React, { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';\nimport AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';\nimport SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';\n\nconst ClipboardMessage = {\n  default: 'Copy URL to clipboard',\n  success: 'Copied!',\n  error: \"Couldn't copy to clipboard\",\n};\n\nexport const CopyUrlToClipboard = () => {\n  const location = useLocation();\n  const [state, copyToClipboard] = useCopyToClipboard();\n  const [copied, setCopied] = useState(false);\n\n  const origin = window.location.origin;\n  const pathname = location.pathname;\n  const search = location.search;\n  const url = `${origin}${pathname}${search}`;\n\n  useEffect(() => {\n    if (state.error) {\n      setCopied(false);\n    } else if (state.value) {\n      setCopied(true);\n      setTimeout(setCopied, 1500, false);\n    }\n  }, [state]);\n\n  let text = ClipboardMessage.default;\n  let Icon = AssignmentOutlinedIcon;\n\n  if (state.error) {\n    text = ClipboardMessage.error;\n    Icon = SentimentVeryDissatisfiedIcon;\n  } else if (copied) {\n    text = ClipboardMessage.success;\n    Icon = AssignmentTurnedInOutlinedIcon;\n  }\n\n  return (\n    <Tooltip title={text} arrow>\n      <IconButton onClick={() => copyToClipboard(url)}>\n        <Icon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,OAAS,EAAA,uBAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,KAAO,EAAA;AACT,CAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,CAAC,KAAA,EAAO,eAAe,CAAA,GAAI,kBAAmB,EAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,OAAO,QAAS,CAAA,MAAA;AAC/B,EAAA,MAAM,WAAW,QAAS,CAAA,QAAA;AAC1B,EAAA,MAAM,SAAS,QAAS,CAAA,MAAA;AACxB,EAAA,MAAM,MAAM,CAAG,EAAA,MAAM,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,KACjB,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAW,UAAA,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,OAAO,gBAAiB,CAAA,OAAA;AAC5B,EAAA,IAAI,IAAO,GAAA,sBAAA;AAEX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,IAAA,GAAO,gBAAiB,CAAA,KAAA;AACxB,IAAO,IAAA,GAAA,6BAAA;AAAA,aACE,MAAQ,EAAA;AACjB,IAAA,IAAA,GAAO,gBAAiB,CAAA,OAAA;AACxB,IAAO,IAAA,GAAA,8BAAA;AAAA;AAGT,EAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAK,wBACxB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAS,EAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,kBAC3C,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CopyUrlToClipboard.esm.js","sources":["../../../src/components/CopyUrlToClipboard/CopyUrlToClipboard.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, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';\nimport AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';\nimport SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';\n\nconst ClipboardMessage = {\n  default: 'Copy URL to clipboard',\n  success: 'Copied!',\n  error: \"Couldn't copy to clipboard\",\n};\n\nexport const CopyUrlToClipboard = () => {\n  const location = useLocation();\n  const [state, copyToClipboard] = useCopyToClipboard();\n  const [copied, setCopied] = useState(false);\n\n  const origin = window.location.origin;\n  const pathname = location.pathname;\n  const search = location.search;\n  const url = `${origin}${pathname}${search}`;\n\n  useEffect(() => {\n    if (state.error) {\n      setCopied(false);\n    } else if (state.value) {\n      setCopied(true);\n      setTimeout(setCopied, 1500, false);\n    }\n  }, [state]);\n\n  let text = ClipboardMessage.default;\n  let Icon = AssignmentOutlinedIcon;\n\n  if (state.error) {\n    text = ClipboardMessage.error;\n    Icon = SentimentVeryDissatisfiedIcon;\n  } else if (copied) {\n    text = ClipboardMessage.success;\n    Icon = AssignmentTurnedInOutlinedIcon;\n  }\n\n  return (\n    <Tooltip title={text} arrow>\n      <IconButton onClick={() => copyToClipboard(url)}>\n        <Icon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,OAAS,EAAA,uBAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,KAAO,EAAA;AACT,CAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,CAAC,KAAA,EAAO,eAAe,CAAA,GAAI,kBAAmB,EAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,OAAO,QAAS,CAAA,MAAA;AAC/B,EAAA,MAAM,WAAW,QAAS,CAAA,QAAA;AAC1B,EAAA,MAAM,SAAS,QAAS,CAAA,MAAA;AACxB,EAAA,MAAM,MAAM,CAAG,EAAA,MAAM,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,KACjB,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAW,UAAA,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,OAAO,gBAAiB,CAAA,OAAA;AAC5B,EAAA,IAAI,IAAO,GAAA,sBAAA;AAEX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,IAAA,GAAO,gBAAiB,CAAA,KAAA;AACxB,IAAO,IAAA,GAAA,6BAAA;AAAA,aACE,MAAQ,EAAA;AACjB,IAAA,IAAA,GAAO,gBAAiB,CAAA,OAAA;AACxB,IAAO,IAAA,GAAA,8BAAA;AAAA;AAGT,EAAA,2BACG,OAAQ,EAAA,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAK,MACzB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,OAAS,EAAA,MAAM,gBAAgB,GAAG,CAAA,EAC5C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,GACR,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostGrowth/CostGrowth.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import '../../types/Alert.esm.js';
@@ -34,21 +34,40 @@ const CostGrowth = (props) => {
     [styles.savings]: growth === GrowthType.Savings
   });
   if (engineers < engineerThreshold) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "Negligible");
+    return /* @__PURE__ */ jsx(Typography, { component: "span", className: classes, children: "Negligible" });
   }
   if (currency.kind === CurrencyType.USD) {
     if (isNaN(ratio)) {
-      return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", currency.prefix, formatCurrency(converted));
+      return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+        "~",
+        currency.prefix,
+        formatCurrency(converted)
+      ] });
     }
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", currency.prefix, formatCurrency(converted));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      formatPercent(ratio),
+      " or ~",
+      currency.prefix,
+      formatCurrency(converted)
+    ] });
   }
   if (amount < 1) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "less than ", indefiniteArticleOf(["a", "an"], currency.unit));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      "less than ",
+      indefiniteArticleOf(["a", "an"], currency.unit)
+    ] });
   }
   if (isNaN(ratio)) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", formatCurrency(converted, currency.unit));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      "~",
+      formatCurrency(converted, currency.unit)
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", formatCurrency(converted, currency.unit));
+  return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+    formatPercent(ratio),
+    " or ~",
+    formatCurrency(converted, currency.unit)
+  ] });
 };
 
 export { CostGrowth };

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

@@ -1 +1 @@
-{"version":3,"file":"CostGrowth.esm.js","sources":["../../../src/components/CostGrowth/CostGrowth.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 React from 'react';\nimport classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { CurrencyType, Duration, GrowthType } from '../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { rateOf } from '../../utils/currency';\nimport { growthOf } from '../../utils/change';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport { formatPercent, formatCurrency } from '../../utils/formatters';\nimport { indefiniteArticleOf } from '../../utils/grammar';\nimport { useConfig, useCurrency } from '../../hooks';\nimport { notEmpty } from '../../utils/assert';\n\n/** @public */\nexport type CostGrowthProps = {\n  change: ChangeStatistic;\n  duration: Duration;\n};\n\n/** @public */\nexport const CostGrowth = (props: CostGrowthProps) => {\n  const { change, duration } = props;\n\n  const styles = useStyles();\n  const { engineerCost, engineerThreshold } = useConfig();\n  const [currency] = useCurrency();\n\n  // Only display costs in absolute values\n  const amount = Math.abs(change.amount);\n  const ratio = Math.abs(change.ratio ?? NaN);\n\n  const rate = rateOf(engineerCost, duration);\n  const engineers = amount / rate;\n  const converted = amount / (currency.rate ?? rate);\n\n  // If a ratio cannot be calculated, don't format.\n  const growth = notEmpty(change.ratio)\n    ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold)\n    : null;\n  // Determine if growth is significant enough to highlight\n  const classes = classnames({\n    [styles.excess]: growth === GrowthType.Excess,\n    [styles.savings]: growth === GrowthType.Savings,\n  });\n\n  if (engineers < engineerThreshold) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        Negligible\n      </Typography>\n    );\n  }\n\n  if (currency.kind === CurrencyType.USD) {\n    // Do not display percentage if ratio cannot be calculated\n    if (isNaN(ratio)) {\n      return (\n        <Typography component=\"span\" className={classes}>\n          ~{currency.prefix}\n          {formatCurrency(converted)}\n        </Typography>\n      );\n    }\n\n    return (\n      <Typography component=\"span\" className={classes}>\n        {formatPercent(ratio)} or ~{currency.prefix}\n        {formatCurrency(converted)}\n      </Typography>\n    );\n  }\n\n  if (amount < 1) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        less than {indefiniteArticleOf(['a', 'an'], currency.unit)}\n      </Typography>\n    );\n  }\n\n  // Do not display percentage if ratio cannot be calculated\n  if (isNaN(ratio)) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        ~{formatCurrency(converted, currency.unit)}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography component=\"span\" className={classes}>\n      {formatPercent(ratio)} or ~{formatCurrency(converted, currency.unit)}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCa,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,KAAA;AAE7B,EAAA,MAAM,SAASA,mBAAU,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACtD,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAI,WAAY,EAAA;AAG/B,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,MAAM,CAAA;AACrC,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,SAAS,GAAG,CAAA;AAE1C,EAAM,MAAA,IAAA,GAAO,MAAO,CAAA,YAAA,EAAc,QAAQ,CAAA;AAC1C,EAAA,MAAM,YAAY,MAAS,GAAA,IAAA;AAC3B,EAAM,MAAA,SAAA,GAAY,MAAU,IAAA,QAAA,CAAS,IAAQ,IAAA,IAAA,CAAA;AAG7C,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,MAAO,CAAA,KAAK,IAChC,QAAS,CAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAO,EAAA,MAAA,EAAQ,SAAU,EAAA,EAAG,iBAAiB,CACtE,GAAA,IAAA;AAEJ,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,CAAC,MAAA,CAAO,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACvC,CAAC,MAAA,CAAO,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GACzC,CAAA;AAED,EAAA,IAAI,YAAY,iBAAmB,EAAA;AACjC,IAAA,2CACG,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,WAAS,YAEjD,CAAA;AAAA;AAIJ,EAAI,IAAA,QAAA,CAAS,IAAS,KAAA,YAAA,CAAa,GAAK,EAAA;AAEtC,IAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,MACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,GAAA,EAC7C,QAAS,CAAA,MAAA,EACV,cAAe,CAAA,SAAS,CAC3B,CAAA;AAAA;AAIJ,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,EAAA,aAAA,CAAc,KAAK,CAAA,EAAE,OAAM,EAAA,QAAA,CAAS,MACpC,EAAA,cAAA,CAAe,SAAS,CAC3B,CAAA;AAAA;AAIJ,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,EAAA,YAAA,EACpC,mBAAoB,CAAA,CAAC,GAAK,EAAA,IAAI,CAAG,EAAA,QAAA,CAAS,IAAI,CAC3D,CAAA;AAAA;AAKJ,EAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,GAAA,EAC7C,cAAe,CAAA,SAAA,EAAW,QAAS,CAAA,IAAI,CAC3C,CAAA;AAAA;AAIJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,EAAA,aAAA,CAAc,KAAK,CAAA,EAAE,OAAM,EAAA,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI,CACrE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostGrowth.esm.js","sources":["../../../src/components/CostGrowth/CostGrowth.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 classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { CurrencyType, Duration, GrowthType } from '../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { rateOf } from '../../utils/currency';\nimport { growthOf } from '../../utils/change';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport { formatPercent, formatCurrency } from '../../utils/formatters';\nimport { indefiniteArticleOf } from '../../utils/grammar';\nimport { useConfig, useCurrency } from '../../hooks';\nimport { notEmpty } from '../../utils/assert';\n\n/** @public */\nexport type CostGrowthProps = {\n  change: ChangeStatistic;\n  duration: Duration;\n};\n\n/** @public */\nexport const CostGrowth = (props: CostGrowthProps) => {\n  const { change, duration } = props;\n\n  const styles = useStyles();\n  const { engineerCost, engineerThreshold } = useConfig();\n  const [currency] = useCurrency();\n\n  // Only display costs in absolute values\n  const amount = Math.abs(change.amount);\n  const ratio = Math.abs(change.ratio ?? NaN);\n\n  const rate = rateOf(engineerCost, duration);\n  const engineers = amount / rate;\n  const converted = amount / (currency.rate ?? rate);\n\n  // If a ratio cannot be calculated, don't format.\n  const growth = notEmpty(change.ratio)\n    ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold)\n    : null;\n  // Determine if growth is significant enough to highlight\n  const classes = classnames({\n    [styles.excess]: growth === GrowthType.Excess,\n    [styles.savings]: growth === GrowthType.Savings,\n  });\n\n  if (engineers < engineerThreshold) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        Negligible\n      </Typography>\n    );\n  }\n\n  if (currency.kind === CurrencyType.USD) {\n    // Do not display percentage if ratio cannot be calculated\n    if (isNaN(ratio)) {\n      return (\n        <Typography component=\"span\" className={classes}>\n          ~{currency.prefix}\n          {formatCurrency(converted)}\n        </Typography>\n      );\n    }\n\n    return (\n      <Typography component=\"span\" className={classes}>\n        {formatPercent(ratio)} or ~{currency.prefix}\n        {formatCurrency(converted)}\n      </Typography>\n    );\n  }\n\n  if (amount < 1) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        less than {indefiniteArticleOf(['a', 'an'], currency.unit)}\n      </Typography>\n    );\n  }\n\n  // Do not display percentage if ratio cannot be calculated\n  if (isNaN(ratio)) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        ~{formatCurrency(converted, currency.unit)}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography component=\"span\" className={classes}>\n      {formatPercent(ratio)} or ~{formatCurrency(converted, currency.unit)}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmCa,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,KAAA;AAE7B,EAAA,MAAM,SAASA,mBAAU,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACtD,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAI,WAAY,EAAA;AAG/B,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,MAAM,CAAA;AACrC,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,SAAS,GAAG,CAAA;AAE1C,EAAM,MAAA,IAAA,GAAO,MAAO,CAAA,YAAA,EAAc,QAAQ,CAAA;AAC1C,EAAA,MAAM,YAAY,MAAS,GAAA,IAAA;AAC3B,EAAM,MAAA,SAAA,GAAY,MAAU,IAAA,QAAA,CAAS,IAAQ,IAAA,IAAA,CAAA;AAG7C,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,MAAO,CAAA,KAAK,IAChC,QAAS,CAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAO,EAAA,MAAA,EAAQ,SAAU,EAAA,EAAG,iBAAiB,CACtE,GAAA,IAAA;AAEJ,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,CAAC,MAAA,CAAO,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACvC,CAAC,MAAA,CAAO,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GACzC,CAAA;AAED,EAAA,IAAI,YAAY,iBAAmB,EAAA;AACjC,IAAA,2BACG,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,SAAS,QAEjD,EAAA,YAAA,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,QAAA,CAAS,IAAS,KAAA,YAAA,CAAa,GAAK,EAAA;AAEtC,IAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,MAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAC7C,QAAS,CAAA,MAAA;AAAA,QACV,eAAe,SAAS;AAAA,OAC3B,EAAA,CAAA;AAAA;AAIJ,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MAAE,OAAA;AAAA,MAAM,QAAS,CAAA,MAAA;AAAA,MACpC,eAAe,SAAS;AAAA,KAC3B,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA;AAAA,MACpC,oBAAoB,CAAC,GAAA,EAAK,IAAI,CAAA,EAAG,SAAS,IAAI;AAAA,KAC3D,EAAA,CAAA;AAAA;AAKJ,EAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAC7C,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI;AAAA,KAC3C,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,QAAA,EAAA;AAAA,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IAAE,OAAA;AAAA,IAAM,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI;AAAA,GACrE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
@@ -24,7 +24,11 @@ const CostGrowthIndicator = (props) => {
     [classes.excess]: growth === GrowthType.Excess,
     [classes.savings]: growth === GrowthType.Savings
   });
-  return /* @__PURE__ */ React.createElement(Typography, { className: classNames, component: "span", ...extraProps }, formatter ? formatter(change, { absolute: true }) : change.ratio, growth === GrowthType.Excess && /* @__PURE__ */ React.createElement(ArrowDropUp, { "aria-label": "excess" }), growth === GrowthType.Savings && /* @__PURE__ */ React.createElement(ArrowDropDown, { "aria-label": "savings" }));
+  return /* @__PURE__ */ jsxs(Typography, { className: classNames, component: "span", ...extraProps, children: [
+    formatter ? formatter(change, { absolute: true }) : change.ratio,
+    growth === GrowthType.Excess && /* @__PURE__ */ jsx(ArrowDropUp, { "aria-label": "excess" }),
+    growth === GrowthType.Savings && /* @__PURE__ */ jsx(ArrowDropDown, { "aria-label": "savings" })
+  ] });
 };
 
 export { CostGrowthIndicator };

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostGrowthIndicator.esm.js","sources":["../../../src/components/CostGrowth/CostGrowthIndicator.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 React from 'react';\nimport classnames from 'classnames';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';\nimport { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';\nimport { growthOf } from '../../utils/change';\nimport { GrowthType } from '../../types';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport {\n  ChangeStatistic,\n  Maybe,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type CostGrowthIndicatorProps = TypographyProps & {\n  change: ChangeStatistic;\n  formatter?: (\n    change: ChangeStatistic,\n    options?: { absolute: boolean },\n  ) => Maybe<string>;\n};\n\n/** @public */\nexport const CostGrowthIndicator = (props: CostGrowthIndicatorProps) => {\n  const { engineerThreshold } = useConfig();\n  const { change, formatter, className, ...extraProps } = props;\n\n  const classes = useStyles();\n\n  const growth = growthOf(change, engineerThreshold);\n\n  const classNames = classnames(classes.indicator, className, {\n    [classes.excess]: growth === GrowthType.Excess,\n    [classes.savings]: growth === GrowthType.Savings,\n  });\n\n  return (\n    <Typography className={classNames} component=\"span\" {...extraProps}>\n      {formatter ? formatter(change, { absolute: true }) : change.ratio}\n      {growth === GrowthType.Excess && <ArrowDropUp aria-label=\"excess\" />}\n      {growth === GrowthType.Savings && <ArrowDropDown aria-label=\"savings\" />}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;AAwCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,YAAe,GAAA,KAAA;AAExD,EAAA,MAAM,UAAUA,mBAAU,EAAA;AAE1B,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AAEjD,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,IAC1D,CAAC,OAAA,CAAQ,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACxC,CAAC,OAAA,CAAQ,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GAC1C,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,UAAA,EAAY,WAAU,MAAQ,EAAA,GAAG,UACrD,EAAA,EAAA,SAAA,GAAY,SAAU,CAAA,MAAA,EAAQ,EAAE,QAAA,EAAU,MAAM,CAAA,GAAI,MAAO,CAAA,KAAA,EAC3D,MAAW,KAAA,UAAA,CAAW,MAAU,oBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,YAAW,EAAA,QAAA,EAAS,CACjE,EAAA,MAAA,KAAW,WAAW,OAAW,oBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,YAAA,EAAW,WAAU,CACxE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostGrowthIndicator.esm.js","sources":["../../../src/components/CostGrowth/CostGrowthIndicator.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 classnames from 'classnames';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';\nimport { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';\nimport { growthOf } from '../../utils/change';\nimport { GrowthType } from '../../types';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport {\n  ChangeStatistic,\n  Maybe,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type CostGrowthIndicatorProps = TypographyProps & {\n  change: ChangeStatistic;\n  formatter?: (\n    change: ChangeStatistic,\n    options?: { absolute: boolean },\n  ) => Maybe<string>;\n};\n\n/** @public */\nexport const CostGrowthIndicator = (props: CostGrowthIndicatorProps) => {\n  const { engineerThreshold } = useConfig();\n  const { change, formatter, className, ...extraProps } = props;\n\n  const classes = useStyles();\n\n  const growth = growthOf(change, engineerThreshold);\n\n  const classNames = classnames(classes.indicator, className, {\n    [classes.excess]: growth === GrowthType.Excess,\n    [classes.savings]: growth === GrowthType.Savings,\n  });\n\n  return (\n    <Typography className={classNames} component=\"span\" {...extraProps}>\n      {formatter ? formatter(change, { absolute: true }) : change.ratio}\n      {growth === GrowthType.Excess && <ArrowDropUp aria-label=\"excess\" />}\n      {growth === GrowthType.Savings && <ArrowDropDown aria-label=\"savings\" />}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;AAuCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,YAAe,GAAA,KAAA;AAExD,EAAA,MAAM,UAAUA,mBAAU,EAAA;AAE1B,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AAEjD,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,IAC1D,CAAC,OAAA,CAAQ,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACxC,CAAC,OAAA,CAAQ,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GAC1C,CAAA;AAED,EAAA,4BACG,UAAW,EAAA,EAAA,SAAA,EAAW,YAAY,SAAU,EAAA,MAAA,EAAQ,GAAG,UACrD,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,GAAY,UAAU,MAAQ,EAAA,EAAE,UAAU,IAAK,EAAC,IAAI,MAAO,CAAA,KAAA;AAAA,IAC3D,WAAW,UAAW,CAAA,MAAA,oBAAW,GAAA,CAAA,WAAA,EAAA,EAAY,cAAW,QAAS,EAAA,CAAA;AAAA,IACjE,WAAW,UAAW,CAAA,OAAA,oBAAY,GAAA,CAAA,aAAA,EAAA,EAAc,cAAW,SAAU,EAAA;AAAA,GACxE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostInsightsHeader/CostInsightsHeader.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import useAsync from 'react-use/esm/useAsync';
 import { useCostInsightsStyles } from '../../utils/styles.esm.js';
@@ -17,7 +17,24 @@ const CostInsightsHeaderNoData = ({
   const classes = useCostInsightsStyles();
   const hasMultipleGroups = groups.length > 1;
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " doesn't seem to have any cloud costs."), hasMultipleGroups && /* @__PURE__ */ React.createElement(Typography, { align: "center", gutterBottom: true }, "Maybe we picked the wrong team, choose another from the menu above?"));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "flushed-face", children: "\u{1F633}" }),
+      " ",
+      "Well this is awkward"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " doesn't seem to have any cloud costs."
+    ] }),
+    hasMultipleGroups && /* @__PURE__ */ jsx(Typography, { align: "center", gutterBottom: true, children: "Maybe we picked the wrong team, choose another from the menu above?" })
+  ] });
 };
 const CostInsightsHeaderAlerts = ({
   groupId,
@@ -27,7 +44,29 @@ const CostInsightsHeaderAlerts = ({
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass" }, "\u{1F50E}"), " ", "You have ", alerts, " thing", alerts > 1 && "s", " to look into"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " We've identified", " ", alerts > 1 ? "a few things " : "one thing ", /* @__PURE__ */ React.createElement("b", null, ownerName), " should look into next."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass", children: "\u{1F50E}" }),
+      " ",
+      "You have ",
+      alerts,
+      " thing",
+      alerts > 1 && "s",
+      " to look into"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " We've identified",
+      " ",
+      alerts > 1 ? "a few things " : "one thing ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " should look into next."
+    ] })
+  ] });
 };
 const CostInsightsHeaderNoAlerts = ({
   groupId,
@@ -36,21 +75,51 @@ const CostInsightsHeaderNoAlerts = ({
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true, align: "center" }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "thumbs-up" }, "\u{1F44D}"), " ", "Your team is doing great"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " is doing well. No major changes this month."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", gutterBottom: true, align: "center", children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "thumbs-up", children: "\u{1F44D}" }),
+      " ",
+      "Your team is doing great"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " is doing well. No major changes this month."
+    ] })
+  ] });
 };
 const CostInsightsHeaderNoGroups = () => {
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " It doesn't look like you belong to any teams."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "flushed-face", children: "\u{1F633}" }),
+      " ",
+      "Well this is awkward"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " It doesn't look like you belong to any teams."
+    ] })
+  ] });
 };
 const CostInsightsHeader = (props) => {
   if (!props.hasCostData) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoData, { ...props });
+    return /* @__PURE__ */ jsx(CostInsightsHeaderNoData, { ...props });
   }
   if (props.alerts) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderAlerts, { ...props });
+    return /* @__PURE__ */ jsx(CostInsightsHeaderAlerts, { ...props });
   }
-  return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoAlerts, { ...props });
+  return /* @__PURE__ */ jsx(CostInsightsHeaderNoAlerts, { ...props });
 };
 
 export { CostInsightsHeader, CostInsightsHeaderNoGroups };

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

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsHeader.esm.js","sources":["../../../src/components/CostInsightsHeader/CostInsightsHeader.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 React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useCostInsightsStyles } from '../../utils/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nfunction useDisplayName(): string {\n  const identityApi = useApi(identityApiRef);\n  const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]);\n  return state.loading ? '' : state.value?.displayName || 'Mysterious Stranger';\n}\n\ntype CostInsightsHeaderProps = {\n  groupId: string;\n  groups: Group[];\n  hasCostData: boolean;\n  alerts: number;\n};\n\nconst CostInsightsHeaderNoData = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const hasMultipleGroups = groups.length > 1;\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> doesn't seem to have any\n        cloud costs.\n      </Typography>\n      {hasMultipleGroups && (\n        <Typography align=\"center\" gutterBottom>\n          Maybe we picked the wrong team, choose another from the menu above?\n        </Typography>\n      )}\n    </>\n  );\n};\n\nconst CostInsightsHeaderAlerts = ({\n  groupId,\n  groups,\n  alerts,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"magnifying-glass\">\n          🔎\n        </Typography>{' '}\n        You have {alerts} thing{alerts > 1 && 's'} to look into\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> We've identified{' '}\n        {alerts > 1 ? 'a few things ' : 'one thing '}\n        <b>{ownerName}</b> should look into next.\n      </Typography>\n    </>\n  );\n};\n\nconst CostInsightsHeaderNoAlerts = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" gutterBottom align=\"center\">\n        <Typography component=\"span\" role=\"img\" aria-label=\"thumbs-up\">\n          👍\n        </Typography>{' '}\n        Your team is doing great\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> is doing well. No major\n        changes this month.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeaderNoGroups = () => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> It doesn't look like you belong to any teams.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeader = (props: CostInsightsHeaderProps) => {\n  if (!props.hasCostData) {\n    return <CostInsightsHeaderNoData {...props} />;\n  }\n  if (props.alerts) {\n    return <CostInsightsHeaderAlerts {...props} />;\n  }\n  return <CostInsightsHeaderNoAlerts {...props} />;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CostInsightsHeader.esm.js","sources":["../../../src/components/CostInsightsHeader/CostInsightsHeader.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 Typography from '@material-ui/core/Typography';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useCostInsightsStyles } from '../../utils/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nfunction useDisplayName(): string {\n  const identityApi = useApi(identityApiRef);\n  const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]);\n  return state.loading ? '' : state.value?.displayName || 'Mysterious Stranger';\n}\n\ntype CostInsightsHeaderProps = {\n  groupId: string;\n  groups: Group[];\n  hasCostData: boolean;\n  alerts: number;\n};\n\nconst CostInsightsHeaderNoData = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const hasMultipleGroups = groups.length > 1;\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> doesn't seem to have any\n        cloud costs.\n      </Typography>\n      {hasMultipleGroups && (\n        <Typography align=\"center\" gutterBottom>\n          Maybe we picked the wrong team, choose another from the menu above?\n        </Typography>\n      )}\n    </>\n  );\n};\n\nconst CostInsightsHeaderAlerts = ({\n  groupId,\n  groups,\n  alerts,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"magnifying-glass\">\n          🔎\n        </Typography>{' '}\n        You have {alerts} thing{alerts > 1 && 's'} to look into\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> We've identified{' '}\n        {alerts > 1 ? 'a few things ' : 'one thing '}\n        <b>{ownerName}</b> should look into next.\n      </Typography>\n    </>\n  );\n};\n\nconst CostInsightsHeaderNoAlerts = ({\n  groupId,\n  groups,\n}: CostInsightsHeaderProps) => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;\n\n  return (\n    <>\n      <Typography variant=\"h4\" gutterBottom align=\"center\">\n        <Typography component=\"span\" role=\"img\" aria-label=\"thumbs-up\">\n          👍\n        </Typography>{' '}\n        Your team is doing great\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> <b>{ownerName}</b> is doing well. No major\n        changes this month.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeaderNoGroups = () => {\n  const displayName = useDisplayName();\n  const classes = useCostInsightsStyles();\n  return (\n    <>\n      <Typography variant=\"h4\" align=\"center\" gutterBottom>\n        <Typography component=\"span\" role=\"img\" aria-label=\"flushed-face\">\n          😳\n        </Typography>{' '}\n        Well this is awkward\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        <b>Hey, {displayName}!</b> It doesn't look like you belong to any teams.\n      </Typography>\n    </>\n  );\n};\n\nexport const CostInsightsHeader = (props: CostInsightsHeaderProps) => {\n  if (!props.hasCostData) {\n    return <CostInsightsHeaderNoData {...props} />;\n  }\n  if (props.alerts) {\n    return <CostInsightsHeaderAlerts {...props} />;\n  }\n  return <CostInsightsHeaderNoAlerts {...props} />;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CostInsightsLayout/CostInsightsLayout.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
 import { CostInsightsTabs } from '../CostInsightsTabs/CostInsightsTabs.esm.js';
 import { Page, Header } from '@backstage/core-components';
@@ -20,15 +20,21 @@ const CostInsightsLayout = ({
   children
 }) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      style: { boxShadow: "none" },
-      title: "Cost Insights",
-      pageTitleOverride: title,
-      type: "Tool"
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(CostInsightsTabs, { groups }), /* @__PURE__ */ React.createElement("div", { className: classes.content }, children)));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        style: { boxShadow: "none" },
+        title: "Cost Insights",
+        pageTitleOverride: title,
+        type: "Tool"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+      /* @__PURE__ */ jsx(CostInsightsTabs, { groups }),
+      /* @__PURE__ */ jsx("div", { className: classes.content, children })
+    ] })
+  ] });
 };
 
 export { CostInsightsLayout };

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

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsLayout.esm.js","sources":["../../../src/components/CostInsightsLayout/CostInsightsLayout.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 React, { PropsWithChildren } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { CostInsightsTabs } from '../CostInsightsTabs';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n  },\n  header: {\n    boxShadow: 'none',\n  },\n  content: {\n    padding: theme.spacing(4),\n  },\n}));\n\ntype CostInsightsLayoutProps = {\n  title?: string;\n  groups: Group[];\n};\n\nexport const CostInsightsLayout = ({\n  title = 'Cost Insights',\n  groups,\n  children,\n}: PropsWithChildren<CostInsightsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <Page themeId=\"tool\">\n      <Header\n        style={{ boxShadow: 'none' }}\n        title=\"Cost Insights\"\n        pageTitleOverride={title}\n        type=\"Tool\"\n      />\n      <div className={classes.root}>\n        <CostInsightsTabs groups={groups} />\n        <div className={classes.content}>{children}</div>\n      </div>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAE5B,CAAE,CAAA,CAAA;AAOK,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,MAAA;AAAA,EACA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,MAC3B,KAAM,EAAA,eAAA;AAAA,MACN,iBAAmB,EAAA,KAAA;AAAA,MACnB,IAAK,EAAA;AAAA;AAAA,qBAEN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,wBACrB,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,MAAgB,EAAA,CAAA,sCACjC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,OAAU,EAAA,EAAA,QAAS,CAC7C,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostInsightsLayout.esm.js","sources":["../../../src/components/CostInsightsLayout/CostInsightsLayout.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 { PropsWithChildren } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { CostInsightsTabs } from '../CostInsightsTabs';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n  },\n  header: {\n    boxShadow: 'none',\n  },\n  content: {\n    padding: theme.spacing(4),\n  },\n}));\n\ntype CostInsightsLayoutProps = {\n  title?: string;\n  groups: Group[];\n};\n\nexport const CostInsightsLayout = ({\n  title = 'Cost Insights',\n  groups,\n  children,\n}: PropsWithChildren<CostInsightsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <Page themeId=\"tool\">\n      <Header\n        style={{ boxShadow: 'none' }}\n        title=\"Cost Insights\"\n        pageTitleOverride={title}\n        type=\"Tool\"\n      />\n      <div className={classes.root}>\n        <CostInsightsTabs groups={groups} />\n        <div className={classes.content}>{children}</div>\n      </div>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAE5B,CAAE,CAAA,CAAA;AAOK,MAAM,qBAAqB,CAAC;AAAA,EACjC,KAAQ,GAAA,eAAA;AAAA,EACR,MAAA;AAAA,EACA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,QAC3B,KAAM,EAAA,eAAA;AAAA,QACN,iBAAmB,EAAA,KAAA;AAAA,QACnB,IAAK,EAAA;AAAA;AAAA,KACP;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,IACtB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,oBAAiB,MAAgB,EAAA,CAAA;AAAA,sBACjC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SAAU,QAAS,EAAA;AAAA,KAC7C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}