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

package/dist/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.esm.js

@@ -1,31 +1,76 @@
-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 { AlertInstructionsLayout } from '../AlertInstructionsLayout/AlertInstructionsLayout.esm.js';
 import { Link, CodeSnippet } from '@backstage/core-components';
 
 const LabelDataflowInstructionsPage = () => {
-  return /* @__PURE__ */ React.createElement(AlertInstructionsLayout, { title: "Investigating Growth" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h1" }, "Labeling Dataflow Jobs"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Labels in Google Cloud Platform are key-value pairs that can be added to most types of cloud resources. Since these labels are also exported in billing data, adding labels allows a granular breakdown of cloud cost by software entity."), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "In Cloud Dataflow, labels can be added to a job either programmatically or via the command-line when launching a job. Note that GCP has", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://cloud.google.com/compute/docs/labeling-resources#restrictions" }, "restrictions"), " ", "on the length and characters that can be used in labels."), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Labels are not retroactive, so cost tracking is only possible from when the labels are first added to a Dataflow job."), /* @__PURE__ */ React.createElement(Box, { mt: 4 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h3" }, "DataflowPipelineOptions"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Dataflow jobs using Beam's", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html" }, "DataflowPipelineOptions"), " ", "directly can use the ", /* @__PURE__ */ React.createElement("b", null, "setLabels"), " function to add one or more labels:", /* @__PURE__ */ React.createElement(
-    CodeSnippet,
-    {
-      language: "java",
-      text: `private DataflowPipelineOptions options = PipelineOptionsFactory.fromArgs(args).as(DataflowPipelineOptionsImpl.class); 
+  return /* @__PURE__ */ jsxs(AlertInstructionsLayout, { title: "Investigating Growth", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h1", children: "Labeling Dataflow Jobs" }),
+    /* @__PURE__ */ jsx(Typography, { paragraph: true, children: "Labels in Google Cloud Platform are key-value pairs that can be added to most types of cloud resources. Since these labels are also exported in billing data, adding labels allows a granular breakdown of cloud cost by software entity." }),
+    /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+      "In Cloud Dataflow, labels can be added to a job either programmatically or via the command-line when launching a job. Note that GCP has",
+      " ",
+      /* @__PURE__ */ jsx(Link, { to: "https://cloud.google.com/compute/docs/labeling-resources#restrictions", children: "restrictions" }),
+      " ",
+      "on the length and characters that can be used in labels."
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { paragraph: true, children: "Labels are not retroactive, so cost tracking is only possible from when the labels are first added to a Dataflow job." }),
+    /* @__PURE__ */ jsxs(Box, { mt: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h3", children: "DataflowPipelineOptions" }),
+      /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+        "Dataflow jobs using Beam's",
+        " ",
+        /* @__PURE__ */ jsx(Link, { to: "https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html", children: "DataflowPipelineOptions" }),
+        " ",
+        "directly can use the ",
+        /* @__PURE__ */ jsx("b", { children: "setLabels" }),
+        " function to add one or more labels:",
+        /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            language: "java",
+            text: `private DataflowPipelineOptions options = PipelineOptionsFactory.fromArgs(args).as(DataflowPipelineOptionsImpl.class); 
 options.setLabels(ImmutableMap.of("job-id", "my-dataflow-job"));`
-    }
-  )), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Dataflow jobs using Scio can similarly set options on the ScioContext:", /* @__PURE__ */ React.createElement(
-    CodeSnippet,
-    {
-      language: "scala",
-      text: `val (sc: ScioContext, args: Args) = ContextAndArgs(cmdLineArgs)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+        "Dataflow jobs using Scio can similarly set options on the ScioContext:",
+        /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            language: "scala",
+            text: `val (sc: ScioContext, args: Args) = ContextAndArgs(cmdLineArgs)
 sc.optionsAs[DataflowPipelineOptions].setLabels(Map("job-id" -> "my-dataflow-job").asJava)`
-    }
-  ))), /* @__PURE__ */ React.createElement(Box, { mt: 4 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h3" }, "Command-line"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Dataflow jobs launched from the command-line can add labels as an argument:", /* @__PURE__ */ React.createElement(
-    CodeSnippet,
-    {
-      language: "shell",
-      text: `--labels={"job-id": "my-dataflow-job", "date-argument": "2020-09-16"}`
-    }
-  )), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "For more information on specifying options, see the", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://cloud.google.com/dataflow/docs/guides/specifying-exec-params" }, "Dataflow documentation"), " ", "or", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html" }, "Scio Scaladoc"), ".")));
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { mt: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h3", children: "Command-line" }),
+      /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+        "Dataflow jobs launched from the command-line can add labels as an argument:",
+        /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            language: "shell",
+            text: `--labels={"job-id": "my-dataflow-job", "date-argument": "2020-09-16"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+        "For more information on specifying options, see the",
+        " ",
+        /* @__PURE__ */ jsx(Link, { to: "https://cloud.google.com/dataflow/docs/guides/specifying-exec-params", children: "Dataflow documentation" }),
+        " ",
+        "or",
+        " ",
+        /* @__PURE__ */ jsx(Link, { to: "https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html", children: "Scio Scaladoc" }),
+        "."
+      ] })
+    ] })
+  ] });
 };
 
 export { LabelDataflowInstructionsPage };

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

@@ -1 +1 @@
-{"version":3,"file":"LabelDataflowInstructionsPage.esm.js","sources":["../../../src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.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 { AlertInstructionsLayout } from '../AlertInstructionsLayout';\nimport { CodeSnippet, Link } from '@backstage/core-components';\n\nexport const LabelDataflowInstructionsPage = () => {\n  return (\n    <AlertInstructionsLayout title=\"Investigating Growth\">\n      <Typography variant=\"h1\">Labeling Dataflow Jobs</Typography>\n      <Typography paragraph>\n        Labels in Google Cloud Platform are key-value pairs that can be added to\n        most types of cloud resources. Since these labels are also exported in\n        billing data, adding labels allows a granular breakdown of cloud cost by\n        software entity.\n      </Typography>\n      <Typography paragraph>\n        In Cloud Dataflow, labels can be added to a job either programmatically\n        or via the command-line when launching a job. Note that GCP has{' '}\n        <Link to=\"https://cloud.google.com/compute/docs/labeling-resources#restrictions\">\n          restrictions\n        </Link>{' '}\n        on the length and characters that can be used in labels.\n      </Typography>\n      <Typography paragraph>\n        Labels are not retroactive, so cost tracking is only possible from when\n        the labels are first added to a Dataflow job.\n      </Typography>\n\n      <Box mt={4}>\n        <Typography variant=\"h3\">DataflowPipelineOptions</Typography>\n        <Typography paragraph>\n          Dataflow jobs using Beam's{' '}\n          <Link to=\"https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html\">\n            DataflowPipelineOptions\n          </Link>{' '}\n          directly can use the <b>setLabels</b> function to add one or more\n          labels:\n          <CodeSnippet\n            language=\"java\"\n            text={`private DataflowPipelineOptions options = PipelineOptionsFactory.fromArgs(args).as(DataflowPipelineOptionsImpl.class); \noptions.setLabels(ImmutableMap.of(\"job-id\", \"my-dataflow-job\"));`}\n          />\n        </Typography>\n        <Typography paragraph>\n          Dataflow jobs using Scio can similarly set options on the ScioContext:\n          <CodeSnippet\n            language=\"scala\"\n            text={`val (sc: ScioContext, args: Args) = ContextAndArgs(cmdLineArgs)\nsc.optionsAs[DataflowPipelineOptions].setLabels(Map(\"job-id\" -> \"my-dataflow-job\").asJava)`}\n          />\n        </Typography>\n      </Box>\n\n      <Box mt={4}>\n        <Typography variant=\"h3\">Command-line</Typography>\n        <Typography paragraph>\n          Dataflow jobs launched from the command-line can add labels as an\n          argument:\n          <CodeSnippet\n            language=\"shell\"\n            text={`--labels={\"job-id\": \"my-dataflow-job\", \"date-argument\": \"2020-09-16\"}`}\n          />\n        </Typography>\n        <Typography paragraph>\n          For more information on specifying options, see the{' '}\n          <Link to=\"https://cloud.google.com/dataflow/docs/guides/specifying-exec-params\">\n            Dataflow documentation\n          </Link>{' '}\n          or{' '}\n          <Link to=\"https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html\">\n            Scio Scaladoc\n          </Link>\n          .\n        </Typography>\n      </Box>\n    </AlertInstructionsLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,gCAAgC,MAAM;AACjD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAM,EAAA,sBAAA,EAAA,kBAC5B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EAAK,wBAAsB,CAAA,kBAC9C,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAS,IAAC,EAAA,EAAA,2OAKtB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,EAAA,yIAAA,EAE4C,GAChE,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,uEAAwE,EAAA,EAAA,cAEjF,CAAQ,EAAA,GAAA,EAAI,0DAEd,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,EAAA,uHAGtB,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,EAAA,yBAAuB,mBAC/C,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAS,EAAA,IAAA,EAAA,EAAC,4BACO,EAAA,GAAA,kBAC1B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAG,sHAAuH,EAAA,EAAA,yBAEhI,CAAQ,EAAA,GAAA,EAAI,uBACS,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAE,EAAA,IAAA,EAAA,WAAS,GAAI,sCAErC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,MAAA;AAAA,MACT,IAAM,EAAA,CAAA;AAAA,gEAAA;AAAA;AAAA,GAGV,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAS,QAAC,wEAEpB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,OAAA;AAAA,MACT,IAAM,EAAA,CAAA;AAAA,0FAAA;AAAA;AAAA,GAGV,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,QAAK,cAAY,CAAA,sCACpC,UAAW,EAAA,EAAA,SAAA,EAAS,QAAC,6EAGpB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,OAAA;AAAA,MACT,IAAM,EAAA,CAAA,qEAAA;AAAA;AAAA,GAEV,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAS,QAAC,qDACgC,EAAA,GAAA,kBACnD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAG,EAAA,sEAAA,EAAA,EAAuE,wBAEhF,CAAQ,EAAA,GAAA,EAAI,IACT,EAAA,GAAA,kBACF,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAG,EAAA,sEAAA,EAAA,EAAuE,eAEhF,CAAA,EAAO,GAET,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LabelDataflowInstructionsPage.esm.js","sources":["../../../src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.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 { AlertInstructionsLayout } from '../AlertInstructionsLayout';\nimport { CodeSnippet, Link } from '@backstage/core-components';\n\nexport const LabelDataflowInstructionsPage = () => {\n  return (\n    <AlertInstructionsLayout title=\"Investigating Growth\">\n      <Typography variant=\"h1\">Labeling Dataflow Jobs</Typography>\n      <Typography paragraph>\n        Labels in Google Cloud Platform are key-value pairs that can be added to\n        most types of cloud resources. Since these labels are also exported in\n        billing data, adding labels allows a granular breakdown of cloud cost by\n        software entity.\n      </Typography>\n      <Typography paragraph>\n        In Cloud Dataflow, labels can be added to a job either programmatically\n        or via the command-line when launching a job. Note that GCP has{' '}\n        <Link to=\"https://cloud.google.com/compute/docs/labeling-resources#restrictions\">\n          restrictions\n        </Link>{' '}\n        on the length and characters that can be used in labels.\n      </Typography>\n      <Typography paragraph>\n        Labels are not retroactive, so cost tracking is only possible from when\n        the labels are first added to a Dataflow job.\n      </Typography>\n\n      <Box mt={4}>\n        <Typography variant=\"h3\">DataflowPipelineOptions</Typography>\n        <Typography paragraph>\n          Dataflow jobs using Beam's{' '}\n          <Link to=\"https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html\">\n            DataflowPipelineOptions\n          </Link>{' '}\n          directly can use the <b>setLabels</b> function to add one or more\n          labels:\n          <CodeSnippet\n            language=\"java\"\n            text={`private DataflowPipelineOptions options = PipelineOptionsFactory.fromArgs(args).as(DataflowPipelineOptionsImpl.class); \noptions.setLabels(ImmutableMap.of(\"job-id\", \"my-dataflow-job\"));`}\n          />\n        </Typography>\n        <Typography paragraph>\n          Dataflow jobs using Scio can similarly set options on the ScioContext:\n          <CodeSnippet\n            language=\"scala\"\n            text={`val (sc: ScioContext, args: Args) = ContextAndArgs(cmdLineArgs)\nsc.optionsAs[DataflowPipelineOptions].setLabels(Map(\"job-id\" -> \"my-dataflow-job\").asJava)`}\n          />\n        </Typography>\n      </Box>\n\n      <Box mt={4}>\n        <Typography variant=\"h3\">Command-line</Typography>\n        <Typography paragraph>\n          Dataflow jobs launched from the command-line can add labels as an\n          argument:\n          <CodeSnippet\n            language=\"shell\"\n            text={`--labels={\"job-id\": \"my-dataflow-job\", \"date-argument\": \"2020-09-16\"}`}\n          />\n        </Typography>\n        <Typography paragraph>\n          For more information on specifying options, see the{' '}\n          <Link to=\"https://cloud.google.com/dataflow/docs/guides/specifying-exec-params\">\n            Dataflow documentation\n          </Link>{' '}\n          or{' '}\n          <Link to=\"https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html\">\n            Scio Scaladoc\n          </Link>\n          .\n        </Typography>\n      </Box>\n    </AlertInstructionsLayout>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LegendItem/LegendItem.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 Tooltip from '@material-ui/core/Tooltip';
@@ -9,35 +9,40 @@ import { useCostGrowthLegendStyles } from '../../utils/styles.esm.js';
 const LegendItem = (props) => {
   const { title, tooltipText, markerColor, children } = props;
   const classes = useCostGrowthLegendStyles();
-  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      minHeight: 25,
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
-    },
-    markerColor && /* @__PURE__ */ React.createElement("div", { className: classes.marker }, /* @__PURE__ */ React.createElement(LensIcon, { style: { fontSize: "1em", fill: markerColor } })),
-    /* @__PURE__ */ React.createElement(Typography, { className: classes.title, variant: "overline" }, title),
-    tooltipText && /* @__PURE__ */ React.createElement(
-      Tooltip,
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
       {
-        classes: { tooltip: classes.tooltip },
-        title: /* @__PURE__ */ React.createElement(Typography, { className: classes.tooltipText }, tooltipText),
-        placement: "top-start"
-      },
-      /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          component: "span",
-          role: "img",
-          "aria-label": "help",
-          className: classes.helpIcon
-        },
-        /* @__PURE__ */ React.createElement(HelpOutlineOutlinedIcon, { fontSize: "small" })
-      )
-    )
-  ), /* @__PURE__ */ React.createElement(Box, { marginLeft: markerColor ? "1.5em" : 0 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.h5, variant: "h5" }, children)));
+        minHeight: 25,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        children: [
+          markerColor && /* @__PURE__ */ jsx("div", { className: classes.marker, children: /* @__PURE__ */ jsx(LensIcon, { style: { fontSize: "1em", fill: markerColor } }) }),
+          /* @__PURE__ */ jsx(Typography, { className: classes.title, variant: "overline", children: title }),
+          tooltipText && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              classes: { tooltip: classes.tooltip },
+              title: /* @__PURE__ */ jsx(Typography, { className: classes.tooltipText, children: tooltipText }),
+              placement: "top-start",
+              children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  role: "img",
+                  "aria-label": "help",
+                  className: classes.helpIcon,
+                  children: /* @__PURE__ */ jsx(HelpOutlineOutlinedIcon, { fontSize: "small" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { marginLeft: markerColor ? "1.5em" : 0, children: /* @__PURE__ */ jsx(Typography, { className: classes.h5, variant: "h5", children }) })
+  ] });
 };
 
 export { LegendItem };

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

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.esm.js","sources":["../../../src/components/LegendItem/LegendItem.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, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport LensIcon from '@material-ui/icons/Lens';\nimport HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';\nimport { useCostGrowthLegendStyles } from '../../utils/styles';\n\n/** @public */\nexport type LegendItemProps = {\n  title: string;\n  tooltipText?: string;\n  markerColor?: string;\n};\n\n/** @public */\nexport const LegendItem = (props: PropsWithChildren<LegendItemProps>) => {\n  const { title, tooltipText, markerColor, children } = props;\n\n  const classes = useCostGrowthLegendStyles();\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <Box\n        minHeight={25}\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n      >\n        {markerColor && (\n          <div className={classes.marker}>\n            <LensIcon style={{ fontSize: '1em', fill: markerColor }} />\n          </div>\n        )}\n        <Typography className={classes.title} variant=\"overline\">\n          {title}\n        </Typography>\n        {tooltipText && (\n          <Tooltip\n            classes={{ tooltip: classes.tooltip }}\n            title={\n              <Typography className={classes.tooltipText}>\n                {tooltipText}\n              </Typography>\n            }\n            placement=\"top-start\"\n          >\n            <Typography\n              component=\"span\"\n              role=\"img\"\n              aria-label=\"help\"\n              className={classes.helpIcon}\n            >\n              <HelpOutlineOutlinedIcon fontSize=\"small\" />\n            </Typography>\n          </Tooltip>\n        )}\n      </Box>\n      <Box marginLeft={markerColor ? '1.5em' : 0}>\n        <Typography className={classes.h5} variant=\"h5\">\n          {children}\n        </Typography>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCa,MAAA,UAAA,GAAa,CAAC,KAA8C,KAAA;AACvE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,WAAA,EAAa,UAAa,GAAA,KAAA;AAEtD,EAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,MACX,OAAQ,EAAA,MAAA;AAAA,MACR,aAAc,EAAA,KAAA;AAAA,MACd,UAAW,EAAA;AAAA,KAAA;AAAA,IAEV,WACC,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,MACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,EAAO,IAAM,EAAA,WAAA,IAAe,CAC3D,CAAA;AAAA,wCAED,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,KAAO,EAAA,OAAA,EAAQ,cAC3C,KACH,CAAA;AAAA,IACC,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,EAAE,OAAS,EAAA,OAAA,CAAQ,OAAQ,EAAA;AAAA,QACpC,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,eAC5B,WACH,CAAA;AAAA,QAEF,SAAU,EAAA;AAAA,OAAA;AAAA,sBAEV,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,MAAA;AAAA,UACV,IAAK,EAAA,KAAA;AAAA,UACL,YAAW,EAAA,MAAA;AAAA,UACX,WAAW,OAAQ,CAAA;AAAA,SAAA;AAAA,wBAEnB,KAAA,CAAA,aAAA,CAAC,uBAAwB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA;AAAA;AAC5C;AACF,qBAGH,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAY,EAAA,WAAA,GAAc,UAAU,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,EAAI,EAAA,OAAA,EAAQ,IACxC,EAAA,EAAA,QACH,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LegendItem.esm.js","sources":["../../../src/components/LegendItem/LegendItem.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 { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport LensIcon from '@material-ui/icons/Lens';\nimport HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';\nimport { useCostGrowthLegendStyles } from '../../utils/styles';\n\n/** @public */\nexport type LegendItemProps = {\n  title: string;\n  tooltipText?: string;\n  markerColor?: string;\n};\n\n/** @public */\nexport const LegendItem = (props: PropsWithChildren<LegendItemProps>) => {\n  const { title, tooltipText, markerColor, children } = props;\n\n  const classes = useCostGrowthLegendStyles();\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <Box\n        minHeight={25}\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n      >\n        {markerColor && (\n          <div className={classes.marker}>\n            <LensIcon style={{ fontSize: '1em', fill: markerColor }} />\n          </div>\n        )}\n        <Typography className={classes.title} variant=\"overline\">\n          {title}\n        </Typography>\n        {tooltipText && (\n          <Tooltip\n            classes={{ tooltip: classes.tooltip }}\n            title={\n              <Typography className={classes.tooltipText}>\n                {tooltipText}\n              </Typography>\n            }\n            placement=\"top-start\"\n          >\n            <Typography\n              component=\"span\"\n              role=\"img\"\n              aria-label=\"help\"\n              className={classes.helpIcon}\n            >\n              <HelpOutlineOutlinedIcon fontSize=\"small\" />\n            </Typography>\n          </Tooltip>\n        )}\n      </Box>\n      <Box marginLeft={markerColor ? '1.5em' : 0}>\n        <Typography className={classes.h5} variant=\"h5\">\n          {children}\n        </Typography>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCa,MAAA,UAAA,GAAa,CAAC,KAA8C,KAAA;AACvE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,WAAA,EAAa,UAAa,GAAA,KAAA;AAEtD,EAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA;AAAA,QACX,OAAQ,EAAA,MAAA;AAAA,QACR,aAAc,EAAA,KAAA;AAAA,QACd,UAAW,EAAA,QAAA;AAAA,QAEV,QAAA,EAAA;AAAA,UAAA,WAAA,oBACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,QACtB,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAE,QAAU,EAAA,KAAA,EAAO,IAAM,EAAA,WAAA,IAAe,CAC3D,EAAA,CAAA;AAAA,8BAED,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,KAAO,EAAA,OAAA,EAAQ,YAC3C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,UACC,WACC,oBAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,OAAS,EAAA,EAAE,OAAS,EAAA,OAAA,CAAQ,OAAQ,EAAA;AAAA,cACpC,uBACG,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,aAC5B,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,cAEF,SAAU,EAAA,WAAA;AAAA,cAEV,QAAA,kBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,SAAU,EAAA,MAAA;AAAA,kBACV,IAAK,EAAA,KAAA;AAAA,kBACL,YAAW,EAAA,MAAA;AAAA,kBACX,WAAW,OAAQ,CAAA,QAAA;AAAA,kBAEnB,QAAA,kBAAA,GAAA,CAAC,uBAAwB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA;AAAA;AAAA;AAC5C;AAAA;AACF;AAAA;AAAA,KAEJ;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,UAAY,EAAA,WAAA,GAAc,UAAU,CACvC,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,EAAA,EAAI,OAAQ,EAAA,IAAA,EACxC,UACH,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/MetricSelect/MetricSelect.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
@@ -18,19 +18,24 @@ const MetricSelect = ({
       onSelect(e.target.value);
     }
   }
-  return /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined" }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true, id: "metric-select-label" }, "Compare to:"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      id: "metric-select",
-      labelId: "metric-select-label",
-      labelWidth: 100,
-      className: classes.select,
-      value: metric ?? "none",
-      onChange
-    },
-    /* @__PURE__ */ React.createElement(MenuItem, { className: classes.menuItem, key: "none", value: "none" }, /* @__PURE__ */ React.createElement("em", null, "None")),
-    metrics.map((m) => /* @__PURE__ */ React.createElement(MenuItem, { className: classes.menuItem, key: m.kind, value: m.kind }, /* @__PURE__ */ React.createElement("b", null, m.name)))
-  ));
+  return /* @__PURE__ */ jsxs(FormControl, { variant: "outlined", children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, id: "metric-select-label", children: "Compare to:" }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        id: "metric-select",
+        labelId: "metric-select-label",
+        labelWidth: 100,
+        className: classes.select,
+        value: metric ?? "none",
+        onChange,
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { className: classes.menuItem, value: "none", children: /* @__PURE__ */ jsx("em", { children: "None" }) }, "none"),
+          metrics.map((m) => /* @__PURE__ */ jsx(MenuItem, { className: classes.menuItem, value: m.kind, children: /* @__PURE__ */ jsx("b", { children: m.name }) }, m.kind))
+        ]
+      }
+    )
+  ] });
 };
 
 export { MetricSelect };

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

@@ -1 +1 @@
-{"version":3,"file":"MetricSelect.esm.js","sources":["../../../src/components/MetricSelect/MetricSelect.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 InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport {\n  Maybe,\n  Metric,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\n\nexport type MetricSelectProps = {\n  metric: Maybe<string>;\n  metrics: Array<Metric>;\n  onSelect: (metric: Maybe<string>) => void;\n};\n\nexport const MetricSelect = ({\n  metric,\n  metrics,\n  onSelect,\n}: MetricSelectProps) => {\n  const classes = useStyles();\n\n  function onChange(e: React.ChangeEvent<{ value: unknown }>) {\n    if (e.target.value === 'none') {\n      onSelect(null);\n    } else {\n      onSelect(e.target.value as string);\n    }\n  }\n\n  return (\n    <FormControl variant=\"outlined\">\n      <InputLabel shrink id=\"metric-select-label\">\n        Compare to:\n      </InputLabel>\n      <Select\n        id=\"metric-select\"\n        labelId=\"metric-select-label\"\n        labelWidth={100}\n        className={classes.select}\n        value={metric ?? 'none'}\n        onChange={onChange}\n      >\n        <MenuItem className={classes.menuItem} key=\"none\" value=\"none\">\n          <em>None</em>\n        </MenuItem>\n        {metrics.map((m: Metric) => (\n          <MenuItem className={classes.menuItem} key={m.kind} value={m.kind}>\n            <b>{m.name}</b>\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAE1B,EAAA,SAAS,SAAS,CAA0C,EAAA;AAC1D,IAAI,IAAA,CAAA,CAAE,MAAO,CAAA,KAAA,KAAU,MAAQ,EAAA;AAC7B,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACR,MAAA;AACL,MAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAe,CAAA;AAAA;AACnC;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAM,IAAC,EAAA,EAAA,EAAG,qBAAsB,EAAA,EAAA,aAE5C,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,eAAA;AAAA,MACH,OAAQ,EAAA,qBAAA;AAAA,MACR,UAAY,EAAA,GAAA;AAAA,MACZ,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,OAAO,MAAU,IAAA,MAAA;AAAA,MACjB;AAAA,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,QAAU,EAAA,GAAA,EAAI,MAAO,EAAA,KAAA,EAAM,MACtD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAG,EAAA,IAAA,EAAA,MAAI,CACV,CAAA;AAAA,IACC,OAAA,CAAQ,IAAI,CAAC,CAAA,yCACX,QAAS,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,GAAA,EAAK,EAAE,IAAM,EAAA,KAAA,EAAO,EAAE,IAC3D,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAG,CAAE,CAAA,IAAK,CACb,CACD;AAAA,GAEL,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MetricSelect.esm.js","sources":["../../../src/components/MetricSelect/MetricSelect.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 type { ChangeEvent } from 'react';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport {\n  Maybe,\n  Metric,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\n\nexport type MetricSelectProps = {\n  metric: Maybe<string>;\n  metrics: Array<Metric>;\n  onSelect: (metric: Maybe<string>) => void;\n};\n\nexport const MetricSelect = ({\n  metric,\n  metrics,\n  onSelect,\n}: MetricSelectProps) => {\n  const classes = useStyles();\n\n  function onChange(e: ChangeEvent<{ value: unknown }>) {\n    if (e.target.value === 'none') {\n      onSelect(null);\n    } else {\n      onSelect(e.target.value as string);\n    }\n  }\n\n  return (\n    <FormControl variant=\"outlined\">\n      <InputLabel shrink id=\"metric-select-label\">\n        Compare to:\n      </InputLabel>\n      <Select\n        id=\"metric-select\"\n        labelId=\"metric-select-label\"\n        labelWidth={100}\n        className={classes.select}\n        value={metric ?? 'none'}\n        onChange={onChange}\n      >\n        <MenuItem className={classes.menuItem} key=\"none\" value=\"none\">\n          <em>None</em>\n        </MenuItem>\n        {metrics.map((m: Metric) => (\n          <MenuItem className={classes.menuItem} key={m.kind} value={m.kind}>\n            <b>{m.name}</b>\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAE1B,EAAA,SAAS,SAAS,CAAoC,EAAA;AACpD,IAAI,IAAA,CAAA,CAAE,MAAO,CAAA,KAAA,KAAU,MAAQ,EAAA;AAC7B,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACR,MAAA;AACL,MAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAe,CAAA;AAAA;AACnC;AAGF,EACE,uBAAA,IAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAM,IAAC,EAAA,EAAA,EAAG,uBAAsB,QAE5C,EAAA,aAAA,EAAA,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,eAAA;AAAA,QACH,OAAQ,EAAA,qBAAA;AAAA,QACR,UAAY,EAAA,GAAA;AAAA,QACZ,WAAW,OAAQ,CAAA,MAAA;AAAA,QACnB,OAAO,MAAU,IAAA,MAAA;AAAA,QACjB,QAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,QAAqB,EAAA,KAAA,EAAM,QACtD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAG,QAAI,EAAA,MAAA,EAAA,CAAA,EAAA,EADiC,MAE3C,CAAA;AAAA,UACC,QAAQ,GAAI,CAAA,CAAC,sBACX,GAAA,CAAA,QAAA,EAAA,EAAS,WAAW,OAAQ,CAAA,QAAA,EAAuB,OAAO,CAAE,CAAA,IAAA,EAC3D,8BAAC,GAAG,EAAA,EAAA,QAAA,EAAA,CAAA,CAAE,MAAK,CAD+B,EAAA,EAAA,CAAA,CAAE,IAE9C,CACD;AAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/PeriodSelect/PeriodSelect.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import '../../types/Alert.esm.js';
@@ -43,9 +43,9 @@ const PeriodSelect = ({
   };
   const renderValue = (value) => {
     const option = findAlways(optionsOrDefault, (o) => o.value === value);
-    return /* @__PURE__ */ React.createElement("b", null, option.label);
+    return /* @__PURE__ */ jsx("b", { children: option.label });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Select,
     {
       className: classes.select,
@@ -53,18 +53,18 @@ const PeriodSelect = ({
       onChange: handleOnChange,
       value: duration,
       renderValue,
-      "data-testid": "period-select"
-    },
-    optionsOrDefault.map((option) => /* @__PURE__ */ React.createElement(
-      MenuItem,
-      {
-        className: classes.menuItem,
-        key: option.value,
-        value: option.value,
-        "data-testid": `period-select-option-${option.value}`
-      },
-      option.label
-    ))
+      "data-testid": "period-select",
+      children: optionsOrDefault.map((option) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          className: classes.menuItem,
+          value: option.value,
+          "data-testid": `period-select-option-${option.value}`,
+          children: option.label
+        },
+        option.value
+      ))
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelect.esm.js","sources":["../../../src/components/PeriodSelect/PeriodSelect.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 MenuItem from '@material-ui/core/MenuItem';\nimport Select, { SelectProps } from '@material-ui/core/Select';\nimport { Duration } from '../../types';\nimport { formatLastTwoLookaheadQuarters } from '../../utils/formatters';\nimport { findAlways } from '../../utils/assert';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\nimport { useLastCompleteBillingDate } from '../../hooks';\n\nexport type PeriodOption = {\n  value: Duration;\n  label: string;\n};\n\nexport function getDefaultOptions(\n  lastCompleteBillingDate: string,\n): PeriodOption[] {\n  return [\n    {\n      value: Duration.P90D,\n      label: 'Past 6 Months',\n    },\n    {\n      value: Duration.P30D,\n      label: 'Past 60 Days',\n    },\n    {\n      value: Duration.P3M,\n      label: formatLastTwoLookaheadQuarters(lastCompleteBillingDate),\n    },\n  ];\n}\n\ntype PeriodSelectProps = {\n  duration: Duration;\n  onSelect: (duration: Duration) => void;\n  options?: PeriodOption[];\n};\n\nexport const PeriodSelect = ({\n  duration,\n  onSelect,\n  options,\n}: PeriodSelectProps) => {\n  const classes = useStyles();\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const optionsOrDefault =\n    options ?? getDefaultOptions(lastCompleteBillingDate);\n\n  const handleOnChange: SelectProps['onChange'] = e => {\n    onSelect(e.target.value as Duration);\n  };\n\n  const renderValue: SelectProps['renderValue'] = value => {\n    const option = findAlways(optionsOrDefault, o => o.value === value);\n    return <b>{option.label}</b>;\n  };\n\n  return (\n    <Select\n      className={classes.select}\n      variant=\"outlined\"\n      onChange={handleOnChange}\n      value={duration}\n      renderValue={renderValue}\n      data-testid=\"period-select\"\n    >\n      {optionsOrDefault.map(option => (\n        <MenuItem\n          className={classes.menuItem}\n          key={option.value}\n          value={option.value}\n          data-testid={`period-select-option-${option.value}`}\n        >\n          {option.label}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;AA8BO,SAAS,kBACd,uBACgB,EAAA;AAChB,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAO,QAAS,CAAA,IAAA;AAAA,MAChB,KAAO,EAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,OAAO,QAAS,CAAA,IAAA;AAAA,MAChB,KAAO,EAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,OAAO,QAAS,CAAA,GAAA;AAAA,MAChB,KAAA,EAAO,+BAA+B,uBAAuB;AAAA;AAC/D,GACF;AACF;AAQO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAC1B,EAAA,MAAM,0BAA0B,0BAA2B,EAAA;AAC3D,EAAM,MAAA,gBAAA,GACJ,OAAW,IAAA,iBAAA,CAAkB,uBAAuB,CAAA;AAEtD,EAAA,MAAM,iBAA0C,CAAK,CAAA,KAAA;AACnD,IAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAiB,CAAA;AAAA,GACrC;AAEA,EAAA,MAAM,cAA0C,CAAS,KAAA,KAAA;AACvD,IAAA,MAAM,SAAS,UAAW,CAAA,gBAAA,EAAkB,CAAK,CAAA,KAAA,CAAA,CAAE,UAAU,KAAK,CAAA;AAClE,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EAAA,MAAA,CAAO,KAAM,CAAA;AAAA,GAC1B;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,OAAQ,EAAA,UAAA;AAAA,MACR,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,QAAA;AAAA,MACP,WAAA;AAAA,MACA,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,gBAAA,CAAiB,IAAI,CACpB,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,QAAA;AAAA,QACnB,KAAK,MAAO,CAAA,KAAA;AAAA,QACZ,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,aAAA,EAAa,CAAwB,qBAAA,EAAA,MAAA,CAAO,KAAK,CAAA;AAAA,OAAA;AAAA,MAEhD,MAAO,CAAA;AAAA,KAEX;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"PeriodSelect.esm.js","sources":["../../../src/components/PeriodSelect/PeriodSelect.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 MenuItem from '@material-ui/core/MenuItem';\nimport Select, { SelectProps } from '@material-ui/core/Select';\nimport { Duration } from '../../types';\nimport { formatLastTwoLookaheadQuarters } from '../../utils/formatters';\nimport { findAlways } from '../../utils/assert';\nimport { useSelectStyles as useStyles } from '../../utils/styles';\nimport { useLastCompleteBillingDate } from '../../hooks';\n\nexport type PeriodOption = {\n  value: Duration;\n  label: string;\n};\n\nexport function getDefaultOptions(\n  lastCompleteBillingDate: string,\n): PeriodOption[] {\n  return [\n    {\n      value: Duration.P90D,\n      label: 'Past 6 Months',\n    },\n    {\n      value: Duration.P30D,\n      label: 'Past 60 Days',\n    },\n    {\n      value: Duration.P3M,\n      label: formatLastTwoLookaheadQuarters(lastCompleteBillingDate),\n    },\n  ];\n}\n\ntype PeriodSelectProps = {\n  duration: Duration;\n  onSelect: (duration: Duration) => void;\n  options?: PeriodOption[];\n};\n\nexport const PeriodSelect = ({\n  duration,\n  onSelect,\n  options,\n}: PeriodSelectProps) => {\n  const classes = useStyles();\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const optionsOrDefault =\n    options ?? getDefaultOptions(lastCompleteBillingDate);\n\n  const handleOnChange: SelectProps['onChange'] = e => {\n    onSelect(e.target.value as Duration);\n  };\n\n  const renderValue: SelectProps['renderValue'] = value => {\n    const option = findAlways(optionsOrDefault, o => o.value === value);\n    return <b>{option.label}</b>;\n  };\n\n  return (\n    <Select\n      className={classes.select}\n      variant=\"outlined\"\n      onChange={handleOnChange}\n      value={duration}\n      renderValue={renderValue}\n      data-testid=\"period-select\"\n    >\n      {optionsOrDefault.map(option => (\n        <MenuItem\n          className={classes.menuItem}\n          key={option.value}\n          value={option.value}\n          data-testid={`period-select-option-${option.value}`}\n        >\n          {option.label}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;AA6BO,SAAS,kBACd,uBACgB,EAAA;AAChB,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAO,QAAS,CAAA,IAAA;AAAA,MAChB,KAAO,EAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,OAAO,QAAS,CAAA,IAAA;AAAA,MAChB,KAAO,EAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,OAAO,QAAS,CAAA,GAAA;AAAA,MAChB,KAAA,EAAO,+BAA+B,uBAAuB;AAAA;AAC/D,GACF;AACF;AAQO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAUA,eAAU,EAAA;AAC1B,EAAA,MAAM,0BAA0B,0BAA2B,EAAA;AAC3D,EAAM,MAAA,gBAAA,GACJ,OAAW,IAAA,iBAAA,CAAkB,uBAAuB,CAAA;AAEtD,EAAA,MAAM,iBAA0C,CAAK,CAAA,KAAA;AACnD,IAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAiB,CAAA;AAAA,GACrC;AAEA,EAAA,MAAM,cAA0C,CAAS,KAAA,KAAA;AACvD,IAAA,MAAM,SAAS,UAAW,CAAA,gBAAA,EAAkB,CAAK,CAAA,KAAA,CAAA,CAAE,UAAU,KAAK,CAAA;AAClE,IAAO,uBAAA,GAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,GAC1B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,OAAQ,EAAA,UAAA;AAAA,MACR,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,QAAA;AAAA,MACP,WAAA;AAAA,MACA,aAAY,EAAA,eAAA;AAAA,MAEX,QAAA,EAAA,gBAAA,CAAiB,IAAI,CACpB,MAAA,qBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,WAAW,OAAQ,CAAA,QAAA;AAAA,UAEnB,OAAO,MAAO,CAAA,KAAA;AAAA,UACd,aAAA,EAAa,CAAwB,qBAAA,EAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AAAA,UAEhD,QAAO,EAAA,MAAA,CAAA;AAAA,SAAA;AAAA,QAJH,MAAO,CAAA;AAAA,OAMf;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/ProductInsights/ProductInsights.esm.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import Alert from '@material-ui/lab/Alert';
@@ -85,13 +86,16 @@ const ProductInsights = ({
     },
     [initialStates, onLoaded]
   );
-  return /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(Box, { mt: 0, mb: 5, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true }, "Your team's product usage")), error ? /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message) : /* @__PURE__ */ React.createElement(
-    ProductInsightsCardList,
-    {
-      initialStates,
-      onSelectAsync: onSelectAsyncMemo
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Box, { px: 3, py: 6, children: [
+    /* @__PURE__ */ jsx(Box, { mt: 0, mb: 5, textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, children: "Your team's product usage" }) }),
+    error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsx(
+      ProductInsightsCardList,
+      {
+        initialStates,
+        onSelectAsync: onSelectAsyncMemo
+      }
+    )
+  ] });
 };
 
 export { ProductInsights };

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

@@ -1 +1 @@
-{"version":3,"file":"ProductInsights.esm.js","sources":["../../../src/components/ProductInsights/ProductInsights.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, { useCallback, useEffect, useRef, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { default as Alert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ProductInsightsCardList } from '../ProductInsightsCard/ProductInsightsCardList';\nimport { Duration } from '../../types';\nimport {\n  Entity,\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { intervalsOf, DEFAULT_DURATION } from '../../utils/duration';\nimport {\n  DefaultLoadingAction,\n  initialStatesOf,\n  settledResponseOf,\n  ProductState,\n} from '../../utils/loading';\nimport { totalAggregationSort } from '../../utils/sort';\nimport {\n  useLoading,\n  useLastCompleteBillingDate,\n  MapLoadingToProps,\n} from '../../hooks';\nimport { useApi } from '@backstage/core-plugin-api';\n\ntype LoadingProps = (isLoading: boolean) => void;\n\nconst mapLoadingToProps: MapLoadingToProps<LoadingProps> =\n  ({ dispatch }) =>\n  (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });\n\ntype ProductInsightsProps = {\n  group: string;\n  project: Maybe<string>;\n  products: Product[];\n  onLoaded: (entities: Product[]) => void;\n};\n\nexport const ProductInsights = ({\n  group,\n  project,\n  products,\n  onLoaded,\n}: ProductInsightsProps) => {\n  const client = useApi(costInsightsApiRef);\n  const onceRef = useRef(false);\n  const [initialStates, setStates] = useState<ProductState[]>([]);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const dispatchLoading = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // See @CostInsightsPage\n  const dispatchLoadingProducts = useCallback(dispatchLoading, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const onSelectAsyncMemo = useCallback(\n    async function onSelectAsync(\n      product: Product,\n      duration: Duration,\n    ): Promise<Entity> {\n      return client.getProductInsights({\n        group: group,\n        project: project,\n        product: product.kind,\n        intervals: intervalsOf(duration, lastCompleteBillingDate),\n      });\n    },\n    [client, group, project, lastCompleteBillingDate],\n  );\n\n  useEffect(() => {\n    async function getAllProductInsights() {\n      try {\n        dispatchLoadingProducts(true);\n        const responses = await Promise.allSettled(\n          products.map(product =>\n            client.getProductInsights({\n              group: group,\n              project: project,\n              product: product.kind,\n              intervals: intervalsOf(DEFAULT_DURATION, lastCompleteBillingDate),\n            }),\n          ),\n        ).then(settledResponseOf);\n\n        const updatedInitialStates = initialStatesOf(products, responses).sort(\n          totalAggregationSort,\n        );\n        setStates(updatedInitialStates);\n      } catch (e) {\n        setError(e);\n      } finally {\n        dispatchLoadingProducts(false);\n      }\n    }\n\n    getAllProductInsights();\n  }, [\n    client,\n    group,\n    project,\n    products,\n    lastCompleteBillingDate,\n    dispatchLoadingProducts,\n  ]);\n\n  useEffect(\n    function handleOnLoaded() {\n      if (onceRef.current) {\n        const initialProducts = initialStates.map(state => state.product);\n        onLoaded(initialProducts);\n      } else {\n        onceRef.current = true;\n      }\n    },\n    [initialStates, onLoaded],\n  );\n\n  return (\n    <Box px={3} py={6}>\n      <Box mt={0} mb={5} textAlign=\"center\">\n        <Typography variant=\"h4\" gutterBottom>\n          Your team's product usage\n        </Typography>\n      </Box>\n      {error ? (\n        <Alert severity=\"error\">{error.message}</Alert>\n      ) : (\n        <ProductInsightsCardList\n          initialStates={initialStates}\n          onSelectAsync={onSelectAsyncMemo}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductInsights.esm.js","sources":["../../../src/components/ProductInsights/ProductInsights.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 { useCallback, useEffect, useRef, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { default as Alert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ProductInsightsCardList } from '../ProductInsightsCard/ProductInsightsCardList';\nimport { Duration } from '../../types';\nimport {\n  Entity,\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { intervalsOf, DEFAULT_DURATION } from '../../utils/duration';\nimport {\n  DefaultLoadingAction,\n  initialStatesOf,\n  settledResponseOf,\n  ProductState,\n} from '../../utils/loading';\nimport { totalAggregationSort } from '../../utils/sort';\nimport {\n  useLoading,\n  useLastCompleteBillingDate,\n  MapLoadingToProps,\n} from '../../hooks';\nimport { useApi } from '@backstage/core-plugin-api';\n\ntype LoadingProps = (isLoading: boolean) => void;\n\nconst mapLoadingToProps: MapLoadingToProps<LoadingProps> =\n  ({ dispatch }) =>\n  (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });\n\ntype ProductInsightsProps = {\n  group: string;\n  project: Maybe<string>;\n  products: Product[];\n  onLoaded: (entities: Product[]) => void;\n};\n\nexport const ProductInsights = ({\n  group,\n  project,\n  products,\n  onLoaded,\n}: ProductInsightsProps) => {\n  const client = useApi(costInsightsApiRef);\n  const onceRef = useRef(false);\n  const [initialStates, setStates] = useState<ProductState[]>([]);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const dispatchLoading = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // See @CostInsightsPage\n  const dispatchLoadingProducts = useCallback(dispatchLoading, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const onSelectAsyncMemo = useCallback(\n    async function onSelectAsync(\n      product: Product,\n      duration: Duration,\n    ): Promise<Entity> {\n      return client.getProductInsights({\n        group: group,\n        project: project,\n        product: product.kind,\n        intervals: intervalsOf(duration, lastCompleteBillingDate),\n      });\n    },\n    [client, group, project, lastCompleteBillingDate],\n  );\n\n  useEffect(() => {\n    async function getAllProductInsights() {\n      try {\n        dispatchLoadingProducts(true);\n        const responses = await Promise.allSettled(\n          products.map(product =>\n            client.getProductInsights({\n              group: group,\n              project: project,\n              product: product.kind,\n              intervals: intervalsOf(DEFAULT_DURATION, lastCompleteBillingDate),\n            }),\n          ),\n        ).then(settledResponseOf);\n\n        const updatedInitialStates = initialStatesOf(products, responses).sort(\n          totalAggregationSort,\n        );\n        setStates(updatedInitialStates);\n      } catch (e) {\n        setError(e);\n      } finally {\n        dispatchLoadingProducts(false);\n      }\n    }\n\n    getAllProductInsights();\n  }, [\n    client,\n    group,\n    project,\n    products,\n    lastCompleteBillingDate,\n    dispatchLoadingProducts,\n  ]);\n\n  useEffect(\n    function handleOnLoaded() {\n      if (onceRef.current) {\n        const initialProducts = initialStates.map(state => state.product);\n        onLoaded(initialProducts);\n      } else {\n        onceRef.current = true;\n      }\n    },\n    [initialStates, onLoaded],\n  );\n\n  return (\n    <Box px={3} py={6}>\n      <Box mt={0} mb={5} textAlign=\"center\">\n        <Typography variant=\"h4\" gutterBottom>\n          Your team's product usage\n        </Typography>\n      </Box>\n      {error ? (\n        <Alert severity=\"error\">{error.message}</Alert>\n      ) : (\n        <ProductInsightsCardList\n          initialStates={initialStates}\n          onSelectAsync={onSelectAsyncMemo}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ProductInsightsCard/ProductEntityDialog.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
@@ -22,20 +23,24 @@ const ProductEntityDialog = ({
     id: index.toString(),
     label: `Breakdown by ${label}`
   }));
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose, scroll: "body", fullWidth: true, maxWidth: "lg" }, /* @__PURE__ */ React.createElement(IconButton, { className: classes.closeButton, onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)), /* @__PURE__ */ React.createElement(
-    HeaderTabs,
-    {
-      tabs,
-      onChange: (index) => setSelectedLabel(labels[index])
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ProductEntityTable,
-    {
-      entityLabel: selectedLabel,
-      entity,
-      options
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose, scroll: "body", fullWidth: true, maxWidth: "lg", children: [
+    /* @__PURE__ */ jsx(IconButton, { className: classes.closeButton, onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      HeaderTabs,
+      {
+        tabs,
+        onChange: (index) => setSelectedLabel(labels[index])
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ProductEntityTable,
+      {
+        entityLabel: selectedLabel,
+        entity,
+        options
+      }
+    )
+  ] });
 };
 
 export { ProductEntityDialog };

package/dist/components/ProductInsightsCard/ProductEntityDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductEntityDialog.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductEntityDialog.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, { useState } from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport IconButton from '@material-ui/core/IconButton';\nimport { default as CloseButton } from '@material-ui/icons/Close';\nimport { useEntityDialogStyles as useStyles } from '../../utils/styles';\nimport { Entity } from '@backstage-community/plugin-cost-insights-common';\nimport {\n  ProductEntityTable,\n  ProductEntityTableOptions,\n} from './ProductEntityTable';\nimport { findAlways } from '../../utils/assert';\nimport { HeaderTabs } from '@backstage/core-components';\n\ntype ProductEntityDialogProps = {\n  open: boolean;\n  entity: Entity;\n  options?: ProductEntityTableOptions;\n  onClose: () => void;\n};\n\nexport const ProductEntityDialog = ({\n  open,\n  entity,\n  options = {},\n  onClose,\n}: ProductEntityDialogProps) => {\n  const classes = useStyles();\n  const labels = Object.keys(entity.entities);\n  const [selectedLabel, setSelectedLabel] = useState(\n    findAlways(labels, _ => true),\n  );\n\n  const tabs = labels.map((label, index) => ({\n    id: index.toString(),\n    label: `Breakdown by ${label}`,\n  }));\n\n  return (\n    <Dialog open={open} onClose={onClose} scroll=\"body\" fullWidth maxWidth=\"lg\">\n      <IconButton className={classes.closeButton} onClick={onClose}>\n        <CloseButton />\n      </IconButton>\n      <HeaderTabs\n        tabs={tabs}\n        onChange={index => setSelectedLabel(labels[index])}\n      />\n      <ProductEntityTable\n        entityLabel={selectedLabel}\n        entity={entity}\n        options={options}\n      />\n    </Dialog>\n  );\n};\n"],"names":["useStyles","CloseButton"],"mappings":";;;;;;;;;AAoCO,MAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAU,EAAC;AAAA,EACX;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,UAAUA,qBAAU,EAAA;AAC1B,EAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,QAAQ,CAAA;AAC1C,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,UAAA,CAAW,MAAQ,EAAA,CAAA,CAAA,KAAK,IAAI;AAAA,GAC9B;AAEA,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,OAAO,KAAW,MAAA;AAAA,IACzC,EAAA,EAAI,MAAM,QAAS,EAAA;AAAA,IACnB,KAAA,EAAO,gBAAgB,KAAK,CAAA;AAAA,GAC5B,CAAA,CAAA;AAEF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,IAAY,EAAA,OAAA,EAAkB,QAAO,MAAO,EAAA,SAAA,EAAS,MAAC,QAAS,EAAA,IAAA,EAAA,sCACpE,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,WAAa,EAAA,OAAA,EAAS,2BAClD,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,IAAY,CACf,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,QAAU,EAAA,CAAA,KAAA,KAAS,gBAAiB,CAAA,MAAA,CAAO,KAAK,CAAC;AAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,WAAa,EAAA,aAAA;AAAA,MACb,MAAA;AAAA,MACA;AAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ProductEntityDialog.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductEntityDialog.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 { useState } from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport IconButton from '@material-ui/core/IconButton';\nimport { default as CloseButton } from '@material-ui/icons/Close';\nimport { useEntityDialogStyles as useStyles } from '../../utils/styles';\nimport { Entity } from '@backstage-community/plugin-cost-insights-common';\nimport {\n  ProductEntityTable,\n  ProductEntityTableOptions,\n} from './ProductEntityTable';\nimport { findAlways } from '../../utils/assert';\nimport { HeaderTabs } from '@backstage/core-components';\n\ntype ProductEntityDialogProps = {\n  open: boolean;\n  entity: Entity;\n  options?: ProductEntityTableOptions;\n  onClose: () => void;\n};\n\nexport const ProductEntityDialog = ({\n  open,\n  entity,\n  options = {},\n  onClose,\n}: ProductEntityDialogProps) => {\n  const classes = useStyles();\n  const labels = Object.keys(entity.entities);\n  const [selectedLabel, setSelectedLabel] = useState(\n    findAlways(labels, _ => true),\n  );\n\n  const tabs = labels.map((label, index) => ({\n    id: index.toString(),\n    label: `Breakdown by ${label}`,\n  }));\n\n  return (\n    <Dialog open={open} onClose={onClose} scroll=\"body\" fullWidth maxWidth=\"lg\">\n      <IconButton className={classes.closeButton} onClick={onClose}>\n        <CloseButton />\n      </IconButton>\n      <HeaderTabs\n        tabs={tabs}\n        onChange={index => setSelectedLabel(labels[index])}\n      />\n      <ProductEntityTable\n        entityLabel={selectedLabel}\n        entity={entity}\n        options={options}\n      />\n    </Dialog>\n  );\n};\n"],"names":["useStyles","CloseButton"],"mappings":";;;;;;;;;;AAoCO,MAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAU,EAAC;AAAA,EACX;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,UAAUA,qBAAU,EAAA;AAC1B,EAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,QAAQ,CAAA;AAC1C,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,UAAA,CAAW,MAAQ,EAAA,CAAA,CAAA,KAAK,IAAI;AAAA,GAC9B;AAEA,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,OAAO,KAAW,MAAA;AAAA,IACzC,EAAA,EAAI,MAAM,QAAS,EAAA;AAAA,IACnB,KAAA,EAAO,gBAAgB,KAAK,CAAA;AAAA,GAC5B,CAAA,CAAA;AAEF,EACE,uBAAA,IAAA,CAAC,UAAO,IAAY,EAAA,OAAA,EAAkB,QAAO,MAAO,EAAA,SAAA,EAAS,IAAC,EAAA,QAAA,EAAS,IACrE,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,WAAW,OAAQ,CAAA,WAAA,EAAa,SAAS,OACnD,EAAA,QAAA,kBAAA,GAAA,CAACC,aAAY,CACf,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,QAAU,EAAA,CAAA,KAAA,KAAS,gBAAiB,CAAA,MAAA,CAAO,KAAK,CAAC;AAAA;AAAA,KACnD;AAAA,oBACA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,WAAa,EAAA,aAAA;AAAA,QACb,MAAA;AAAA,QACA;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/ProductInsightsCard/ProductEntityTable.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import { formatChange } from '../../utils/formatters.esm.js';
@@ -28,9 +28,9 @@ const createRenderer = (baseCurrency) => (col, classes) => {
     switch (col) {
       case "previous":
       case "current":
-        return /* @__PURE__ */ React.createElement(Typography, { className: rowStyles }, baseCurrency.format(row[col]));
+        return /* @__PURE__ */ jsx(Typography, { className: rowStyles, children: baseCurrency.format(row[col]) });
       case "change":
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           CostGrowthIndicator,
           {
             className: rowStyles,
@@ -39,7 +39,7 @@ const createRenderer = (baseCurrency) => (col, classes) => {
           }
         );
       default:
-        return /* @__PURE__ */ React.createElement(Typography, { className: rowStyles }, row.label);
+        return /* @__PURE__ */ jsx(Typography, { className: rowStyles, children: row.label });
     }
   };
 };
@@ -80,28 +80,28 @@ const ProductEntityTable = ({
   const columns = [
     {
       field: "label",
-      title: /* @__PURE__ */ React.createElement(Typography, { className: firstColClasses }, entityLabel),
+      title: /* @__PURE__ */ jsx(Typography, { className: firstColClasses, children: entityLabel }),
       render: createRenderer(baseCurrency)("label", classes),
       customSort: createSorter("label"),
       width: "33.33%"
     },
     {
       field: "previous",
-      title: /* @__PURE__ */ React.createElement(Typography, { className: classes.column }, data.previousName),
+      title: /* @__PURE__ */ jsx(Typography, { className: classes.column, children: data.previousName }),
       align: "right",
       render: createRenderer(baseCurrency)("previous", classes),
       customSort: createSorter("previous")
     },
     {
       field: "current",
-      title: /* @__PURE__ */ React.createElement(Typography, { className: classes.column }, data.currentName),
+      title: /* @__PURE__ */ jsx(Typography, { className: classes.column, children: data.currentName }),
       align: "right",
       render: createRenderer(baseCurrency)("current", classes),
       customSort: createSorter("current")
     },
     {
       field: "change",
-      title: /* @__PURE__ */ React.createElement(Typography, { className: lastColClasses }, "Change"),
+      title: /* @__PURE__ */ jsx(Typography, { className: lastColClasses, children: "Change" }),
       align: "right",
       render: createRenderer(baseCurrency)("change", classes),
       customSort: createSorter("change")
@@ -120,7 +120,7 @@ const ProductEntityTable = ({
     current: entity.aggregation[1],
     change: entity.change
   }).sort(createSorter());
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Table,
     {
       columns,