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

package/dist/components/CostInsightsNavigation/CostInsightsNavigation.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect, cloneElement } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import MenuList from '@material-ui/core/MenuList';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -20,23 +21,25 @@ import { DefaultNavigation, getDefaultNavigationItems } from '../../utils/naviga
 const NavigationMenuItem = ({ navigation, icon, title }) => {
   const classes = useNavigationStyles();
   const [, setScroll] = useScroll();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     MenuItem,
     {
       "data-testid": `menu-item-${navigation}`,
       className: classes.menuItem,
-      onClick: () => setScroll(navigation)
-    },
-    /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listItemIcon }, icon),
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.title }, title)
-      }
-    )
+      onClick: () => setScroll(navigation),
+      children: [
+        /* @__PURE__ */ jsx(ListItemIcon, { className: classes.listItemIcon, children: icon }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: /* @__PURE__ */ jsx(Typography, { className: classes.title, children: title })
+          }
+        )
+      ]
+    }
   );
 };
-const CostInsightsNavigation = React.memo(
+const CostInsightsNavigation = memo(
   ({ alerts, products }) => {
     const classes = useNavigationStyles();
     const { icons } = useConfig();
@@ -57,29 +60,32 @@ const CostInsightsNavigation = React.memo(
       },
       [products]
     );
-    return /* @__PURE__ */ React.createElement(MenuList, { className: classes.menuList }, defaultNavigationItems.map((item) => /* @__PURE__ */ React.createElement(
-      NavigationMenuItem,
-      {
-        key: `navigation-menu-item-${item.navigation}`,
-        navigation: item.navigation,
-        title: item.title,
-        icon: item.navigation === DefaultNavigation.AlertInsightsHeader ? /* @__PURE__ */ React.createElement(Badge, { badgeContent: alerts, color: "secondary" }, React.cloneElement(item.icon, {
-          className: classes.navigationIcon
-        })) : React.cloneElement(item.icon, {
-          className: classes.navigationIcon
-        })
-      }
-    )), /* @__PURE__ */ React.createElement(Collapse, { in: isOpen, timeout: 850 }, productNavigationItems.map((item) => /* @__PURE__ */ React.createElement(
-      NavigationMenuItem,
-      {
-        key: `navigation-menu-item-${item.navigation}`,
-        navigation: item.navigation,
-        icon: React.cloneElement(item.icon, {
-          className: classes.navigationIcon
-        }),
-        title: item.title
-      }
-    ))));
+    return /* @__PURE__ */ jsxs(MenuList, { className: classes.menuList, children: [
+      defaultNavigationItems.map((item) => /* @__PURE__ */ jsx(
+        NavigationMenuItem,
+        {
+          navigation: item.navigation,
+          title: item.title,
+          icon: item.navigation === DefaultNavigation.AlertInsightsHeader ? /* @__PURE__ */ jsx(Badge, { badgeContent: alerts, color: "secondary", children: cloneElement(item.icon, {
+            className: classes.navigationIcon
+          }) }) : cloneElement(item.icon, {
+            className: classes.navigationIcon
+          })
+        },
+        `navigation-menu-item-${item.navigation}`
+      )),
+      /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: 850, children: productNavigationItems.map((item) => /* @__PURE__ */ jsx(
+        NavigationMenuItem,
+        {
+          navigation: item.navigation,
+          icon: cloneElement(item.icon, {
+            className: classes.navigationIcon
+          }),
+          title: item.title
+        },
+        `navigation-menu-item-${item.navigation}`
+      )) })
+    ] });
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsNavigation.esm.js","sources":["../../../src/components/CostInsightsNavigation/CostInsightsNavigation.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 Collapse from '@material-ui/core/Collapse';\nimport MenuList from '@material-ui/core/MenuList';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Typography from '@material-ui/core/Typography';\nimport Badge from '@material-ui/core/Badge';\nimport { useNavigationStyles as useStyles } from '../../utils/styles';\nimport { useConfig, useScroll } from '../../hooks';\nimport { findAlways } from '../../utils/assert';\nimport {\n  DefaultNavigation,\n  NavigationItem,\n  getDefaultNavigationItems,\n} from '../../utils/navigation';\nimport {\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\n\ntype CostInsightsNavigationProps = {\n  alerts: number;\n  products: Maybe<Product[]>;\n};\n\nconst NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {\n  const classes = useStyles();\n  const [, setScroll] = useScroll();\n  return (\n    <MenuItem\n      data-testid={`menu-item-${navigation}`}\n      className={classes.menuItem}\n      onClick={() => setScroll(navigation)}\n    >\n      <ListItemIcon className={classes.listItemIcon}>{icon}</ListItemIcon>\n      <ListItemText\n        primary={<Typography className={classes.title}>{title}</Typography>}\n      />\n    </MenuItem>\n  );\n};\n\nexport const CostInsightsNavigation = React.memo(\n  ({ alerts, products }: CostInsightsNavigationProps) => {\n    const classes = useStyles();\n    const { icons } = useConfig();\n    const [isOpen, setOpen] = useState(false);\n\n    const defaultNavigationItems = getDefaultNavigationItems(alerts);\n    const productNavigationItems: NavigationItem[] =\n      products?.map(product => ({\n        title: product.name,\n        navigation: product.kind,\n        icon: findAlways(icons, i => i.kind === product.kind).component,\n      })) ?? [];\n\n    useEffect(\n      function toggleProductMenuItems() {\n        if (products?.length) {\n          setOpen(true);\n        } else {\n          setOpen(false);\n        }\n      },\n      [products],\n    );\n\n    return (\n      <MenuList className={classes.menuList}>\n        {defaultNavigationItems.map(item => (\n          <NavigationMenuItem\n            key={`navigation-menu-item-${item.navigation}`}\n            navigation={item.navigation}\n            title={item.title}\n            icon={\n              item.navigation === DefaultNavigation.AlertInsightsHeader ? (\n                <Badge badgeContent={alerts} color=\"secondary\">\n                  {React.cloneElement(item.icon, {\n                    className: classes.navigationIcon,\n                  })}\n                </Badge>\n              ) : (\n                React.cloneElement(item.icon, {\n                  className: classes.navigationIcon,\n                })\n              )\n            }\n          />\n        ))}\n        <Collapse in={isOpen} timeout={850}>\n          {productNavigationItems.map((item: NavigationItem) => (\n            <NavigationMenuItem\n              key={`navigation-menu-item-${item.navigation}`}\n              navigation={item.navigation}\n              icon={React.cloneElement(item.icon, {\n                className: classes.navigationIcon,\n              })}\n              title={item.title}\n            />\n          ))}\n        </Collapse>\n      </MenuList>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":"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"}
+{"version":3,"file":"CostInsightsNavigation.esm.js","sources":["../../../src/components/CostInsightsNavigation/CostInsightsNavigation.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 { memo, cloneElement, useEffect, useState } from 'react';\nimport Collapse from '@material-ui/core/Collapse';\nimport MenuList from '@material-ui/core/MenuList';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Typography from '@material-ui/core/Typography';\nimport Badge from '@material-ui/core/Badge';\nimport { useNavigationStyles as useStyles } from '../../utils/styles';\nimport { useConfig, useScroll } from '../../hooks';\nimport { findAlways } from '../../utils/assert';\nimport {\n  DefaultNavigation,\n  NavigationItem,\n  getDefaultNavigationItems,\n} from '../../utils/navigation';\nimport {\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\n\ntype CostInsightsNavigationProps = {\n  alerts: number;\n  products: Maybe<Product[]>;\n};\n\nconst NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {\n  const classes = useStyles();\n  const [, setScroll] = useScroll();\n  return (\n    <MenuItem\n      data-testid={`menu-item-${navigation}`}\n      className={classes.menuItem}\n      onClick={() => setScroll(navigation)}\n    >\n      <ListItemIcon className={classes.listItemIcon}>{icon}</ListItemIcon>\n      <ListItemText\n        primary={<Typography className={classes.title}>{title}</Typography>}\n      />\n    </MenuItem>\n  );\n};\n\nexport const CostInsightsNavigation = memo(\n  ({ alerts, products }: CostInsightsNavigationProps) => {\n    const classes = useStyles();\n    const { icons } = useConfig();\n    const [isOpen, setOpen] = useState(false);\n\n    const defaultNavigationItems = getDefaultNavigationItems(alerts);\n    const productNavigationItems: NavigationItem[] =\n      products?.map(product => ({\n        title: product.name,\n        navigation: product.kind,\n        icon: findAlways(icons, i => i.kind === product.kind).component,\n      })) ?? [];\n\n    useEffect(\n      function toggleProductMenuItems() {\n        if (products?.length) {\n          setOpen(true);\n        } else {\n          setOpen(false);\n        }\n      },\n      [products],\n    );\n\n    return (\n      <MenuList className={classes.menuList}>\n        {defaultNavigationItems.map(item => (\n          <NavigationMenuItem\n            key={`navigation-menu-item-${item.navigation}`}\n            navigation={item.navigation}\n            title={item.title}\n            icon={\n              item.navigation === DefaultNavigation.AlertInsightsHeader ? (\n                <Badge badgeContent={alerts} color=\"secondary\">\n                  {cloneElement(item.icon, {\n                    className: classes.navigationIcon,\n                  })}\n                </Badge>\n              ) : (\n                cloneElement(item.icon, {\n                  className: classes.navigationIcon,\n                })\n              )\n            }\n          />\n        ))}\n        <Collapse in={isOpen} timeout={850}>\n          {productNavigationItems.map((item: NavigationItem) => (\n            <NavigationMenuItem\n              key={`navigation-menu-item-${item.navigation}`}\n              navigation={item.navigation}\n              icon={cloneElement(item.icon, {\n                className: classes.navigationIcon,\n              })}\n              title={item.title}\n            />\n          ))}\n        </Collapse>\n      </MenuList>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/CostInsightsPage/CostInsightsPage.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import Box from '@material-ui/core/Box';
 import Collapse from '@material-ui/core/Collapse';
 import Container from '@material-ui/core/Container';
@@ -125,22 +126,27 @@ const CostInsightsPage = () => {
     lastCompleteBillingDate
   ]);
   if (loadingInitial) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ jsx(Progress, {});
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
   if (!pageFilters.group) {
-    return /* @__PURE__ */ React.createElement(CostInsightsLayout, { groups }, /* @__PURE__ */ React.createElement(Box, { textAlign: "right" }, /* @__PURE__ */ React.createElement(CopyUrlToClipboard, null)), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(CostInsightsHeaderNoGroups, null)), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(WhyCostsMatter, null)));
+    return /* @__PURE__ */ jsxs(CostInsightsLayout, { groups, children: [
+      /* @__PURE__ */ jsx(Box, { textAlign: "right", children: /* @__PURE__ */ jsx(CopyUrlToClipboard, {}) }),
+      /* @__PURE__ */ jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsx(CostInsightsHeaderNoGroups, {}) }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsx(WhyCostsMatter, {}) })
+    ] });
   }
   if (!dailyCost) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, `Error: Could not fetch cost insights data for team ${pageFilters.group}`);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: `Error: Could not fetch cost insights data for team ${pageFilters.group}` });
   }
   const onProjectSelect = (project) => {
     setProject(project);
     dispatchLoadingReset(loadingActions);
   };
-  const CostOverviewBanner = () => /* @__PURE__ */ React.createElement(
+  const CostOverviewBanner = () => /* @__PURE__ */ jsxs(
     Box,
     {
       px: 3,
@@ -148,81 +154,112 @@ const CostInsightsPage = () => {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      minHeight: 40
-    },
-    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4" }, "Cost Overview"), /* @__PURE__ */ React.createElement(Typography, { classes }, "Billing data as of ", lastCompleteBillingDate)),
-    /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
-      CurrencySelect,
-      {
-        currency,
-        currencies: config.currencies,
-        onSelect: setCurrency
-      }
-    )), /* @__PURE__ */ React.createElement(
-      ProjectSelect,
+      minHeight: 40,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", children: "Cost Overview" }),
+          /* @__PURE__ */ jsxs(Typography, { classes, children: [
+            "Billing data as of ",
+            lastCompleteBillingDate
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
+          /* @__PURE__ */ jsx(Box, { mr: 1, children: /* @__PURE__ */ jsx(
+            CurrencySelect,
+            {
+              currency,
+              currencies: config.currencies,
+              onSelect: setCurrency
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            ProjectSelect,
+            {
+              project: pageFilters.project,
+              projects: projects || [],
+              onSelect: onProjectSelect
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(CostInsightsLayout, { groups, children: /* @__PURE__ */ jsxs(Grid, { container: true, wrap: "nowrap", children: [
+    (isProductsDisplayed || isActionItemsDisplayed) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Box, { position: "sticky", top: 20, children: /* @__PURE__ */ jsx(
+      CostInsightsNavigation,
       {
-        project: pageFilters.project,
-        projects: projects || [],
-        onSelect: onProjectSelect
+        products,
+        alerts: active.length
       }
-    ))
-  );
-  return /* @__PURE__ */ React.createElement(CostInsightsLayout, { groups }, /* @__PURE__ */ React.createElement(Grid, { container: true, wrap: "nowrap" }, (isProductsDisplayed || isActionItemsDisplayed) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { position: "sticky", top: 20 }, /* @__PURE__ */ React.createElement(
-    CostInsightsNavigation,
-    {
-      products,
-      alerts: active.length
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "flex-end",
-      mb: 2
-    },
-    /* @__PURE__ */ React.createElement(CopyUrlToClipboard, null)
-  ), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg", disableGutters: true }, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
-    CostInsightsHeader,
-    {
-      groupId: pageFilters.group,
-      groups,
-      hasCostData: !!dailyCost.aggregation.length,
-      alerts: active.length
-    }
-  )), /* @__PURE__ */ React.createElement(Collapse, { in: isActionItemsDisplayed, enter: false }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(
-    ActionItems,
-    {
-      active,
-      snoozed,
-      accepted,
-      dismissed
-    }
-  ))), /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(CostOverviewBanner, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, !!dailyCost.aggregation.length && /* @__PURE__ */ React.createElement(
-    CostOverviewCard,
-    {
-      dailyCostData: dailyCost,
-      metricData
-    }
-  ), /* @__PURE__ */ React.createElement(WhyCostsMatter, null))), /* @__PURE__ */ React.createElement(Collapse, { in: isAlertInsightsDisplayed, enter: false }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 6, py: 6, mx: -3, bgcolor: "alertBackground" }, /* @__PURE__ */ React.createElement(
-    AlertInsights,
-    {
-      group: pageFilters.group,
-      active,
-      snoozed,
-      accepted,
-      dismissed,
-      onChange: setAlerts
-    }
-  )))), !isAlertInsightsDisplayed && isProductsDisplayed && /* @__PURE__ */ React.createElement(Divider, null), isProductsDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(
-    ProductInsights,
-    {
-      group: pageFilters.group,
-      project: pageFilters.project,
-      products: config.products,
-      onLoaded: setProducts
-    }
-  ))))))));
+    ) }) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: true, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          mb: 2,
+          children: /* @__PURE__ */ jsx(CopyUrlToClipboard, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Container, { maxWidth: "lg", disableGutters: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+          CostInsightsHeader,
+          {
+            groupId: pageFilters.group,
+            groups,
+            hasCostData: !!dailyCost.aggregation.length,
+            alerts: active.length
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Collapse, { in: isActionItemsDisplayed, enter: false, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { px: 3, py: 6, children: /* @__PURE__ */ jsx(
+            ActionItems,
+            {
+              active,
+              snoozed,
+              accepted,
+              dismissed
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(Divider, {})
+        ] }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(CostOverviewBanner, {}) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsxs(Box, { px: 3, py: 6, children: [
+          !!dailyCost.aggregation.length && /* @__PURE__ */ jsx(
+            CostOverviewCard,
+            {
+              dailyCostData: dailyCost,
+              metricData
+            }
+          ),
+          /* @__PURE__ */ jsx(WhyCostsMatter, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(Collapse, { in: isAlertInsightsDisplayed, enter: false, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { px: 6, py: 6, mx: -3, bgcolor: "alertBackground", children: /* @__PURE__ */ jsx(
+          AlertInsights,
+          {
+            group: pageFilters.group,
+            active,
+            snoozed,
+            accepted,
+            dismissed,
+            onChange: setAlerts
+          }
+        ) }) }) }),
+        !isAlertInsightsDisplayed && isProductsDisplayed && /* @__PURE__ */ jsx(Divider, {}),
+        isProductsDisplayed && /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Box, { px: 3, py: 6, children: /* @__PURE__ */ jsx(
+          ProductInsights,
+          {
+            group: pageFilters.group,
+            project: pageFilters.project,
+            products: config.products,
+            onLoaded: setProducts
+          }
+        ) }) })
+      ] }) })
+    ] })
+  ] }) });
 };
 
 export { CostInsightsPage };

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

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsPage.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPage.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, useMemo, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Container from '@material-ui/core/Container';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { default as MaterialAlert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ActionItems } from '../ActionItems';\nimport { AlertInsights } from '../AlertInsights';\nimport { CostInsightsLayout } from '../CostInsightsLayout';\nimport { CopyUrlToClipboard } from '../CopyUrlToClipboard';\nimport { CurrencySelect } from '../CurrencySelect';\nimport { WhyCostsMatter } from '../WhyCostsMatter';\nimport {\n  CostInsightsHeader,\n  CostInsightsHeaderNoGroups,\n} from '../CostInsightsHeader';\nimport { CostInsightsNavigation } from '../CostInsightsNavigation';\nimport { CostOverviewCard } from '../CostOverviewCard';\nimport { ProductInsights } from '../ProductInsights';\n/* https://github.com/backstage/backstage/issues/2574 */\n// import { CostInsightsSupportButton } from '../CostInsightsSupportButton';\nimport {\n  useConfig,\n  useCurrency,\n  useFilters,\n  useGroups,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { Alert } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  MetricData,\n  Product,\n  Project,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { mapLoadingToProps } from './selector';\nimport { ProjectSelect } from '../ProjectSelect';\nimport { intervalsOf } from '../../utils/duration';\nimport { useSubtleTypographyStyles } from '../../utils/styles';\nimport {\n  isAlertActive,\n  isAlertAccepted,\n  isAlertDismissed,\n  isAlertSnoozed,\n} from '../../utils/alerts';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const CostInsightsPage = () => {\n  const classes = useSubtleTypographyStyles();\n  const client = useApi(costInsightsApiRef);\n  const config = useConfig();\n  const groups = useGroups();\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [alerts, setAlerts] = useState<Alert[]>([]);\n  const [currency, setCurrency] = useCurrency();\n  const [projects, setProjects] = useState<Maybe<Project[]>>(null);\n  const [products, setProducts] = useState<Maybe<Product[]>>(null);\n  const [dailyCost, setDailyCost] = useState<Maybe<Cost>>(null);\n  const [metricData, setMetricData] = useState<Maybe<MetricData>>(null);\n  const [error, setError] = useState<Maybe<Error>>(null);\n\n  const { pageFilters, setPageFilters } = useFilters(p => p);\n\n  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);\n  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);\n  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);\n  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);\n\n  const isProductsDisplayed = !!config.products?.length;\n  const isActionItemsDisplayed = !!active.length;\n  const isAlertInsightsDisplayed = !!alerts.length;\n\n  const {\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    loadingInitial,\n    dispatchInitial,\n    dispatchInsights,\n    dispatchNone,\n    dispatchReset,\n  } = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // The dispatchLoading functions are derived from loading state using mapLoadingToProps, to\n  // provide nicer props for the component. These are re-derived whenever loading state changes,\n  // which causes an infinite loop as product panels load and re-trigger the useEffect below.\n  // Since the functions don't change, we can memoize - but we trigger the same loop if we satisfy\n  // exhaustive-deps by including the function itself in dependencies.\n\n  const dispatchLoadingInitial = useCallback(dispatchInitial, []);\n  const dispatchLoadingInsights = useCallback(dispatchInsights, []);\n  const dispatchLoadingNone = useCallback(dispatchNone, []);\n  const dispatchLoadingReset = useCallback(dispatchReset, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const setProject = (project: Maybe<string>) =>\n    setPageFilters({\n      ...pageFilters,\n      project: project === 'all' ? null : project,\n    });\n\n  useEffect(() => {\n    async function getInsights() {\n      setError(null);\n      try {\n        if (pageFilters.group) {\n          dispatchLoadingInsights(true);\n          const intervals = intervalsOf(\n            pageFilters.duration,\n            lastCompleteBillingDate,\n          );\n          const [\n            fetchedProjects,\n            fetchedAlerts,\n            fetchedMetricData,\n            fetchedDailyCost,\n          ] = await Promise.all([\n            client.getGroupProjects(pageFilters.group),\n            client.getAlerts(pageFilters.group),\n            pageFilters.metric\n              ? client.getDailyMetricData(pageFilters.metric, intervals)\n              : null,\n            pageFilters.project\n              ? client.getProjectDailyCost(pageFilters.project, intervals)\n              : client.getGroupDailyCost(pageFilters.group, intervals),\n          ]);\n          setProjects(fetchedProjects);\n          setAlerts(fetchedAlerts);\n          setMetricData(fetchedMetricData);\n          setDailyCost(fetchedDailyCost);\n        } else {\n          dispatchLoadingNone(loadingActions);\n        }\n      } catch (e) {\n        setError(e);\n        dispatchLoadingNone(loadingActions);\n      } finally {\n        dispatchLoadingInitial(false);\n        dispatchLoadingInsights(false);\n      }\n    }\n\n    // Wait for metadata to finish loading\n    if (!(loadingGroups && loadingBillingDate)) {\n      getInsights();\n    }\n  }, [\n    client,\n    pageFilters,\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    dispatchLoadingInsights,\n    dispatchLoadingInitial,\n    dispatchLoadingNone,\n    lastCompleteBillingDate,\n  ]);\n\n  if (loadingInitial) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <MaterialAlert severity=\"error\">{error.message}</MaterialAlert>;\n  }\n\n  // Loaded but no groups found for the user\n  if (!pageFilters.group) {\n    return (\n      <CostInsightsLayout groups={groups}>\n        <Box textAlign=\"right\">\n          <CopyUrlToClipboard />\n          {/* <CostInsightsSupportButton /> */}\n        </Box>\n        <Container maxWidth=\"lg\">\n          <CostInsightsHeaderNoGroups />\n        </Container>\n        <Divider />\n        <Container maxWidth=\"lg\">\n          <WhyCostsMatter />\n        </Container>\n      </CostInsightsLayout>\n    );\n  }\n\n  if (!dailyCost) {\n    return (\n      <MaterialAlert severity=\"error\">{`Error: Could not fetch cost insights data for team ${pageFilters.group}`}</MaterialAlert>\n    );\n  }\n\n  const onProjectSelect = (project: Maybe<string>) => {\n    setProject(project);\n    dispatchLoadingReset(loadingActions);\n  };\n\n  const CostOverviewBanner = () => (\n    <Box\n      px={3}\n      pt={6}\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      minHeight={40}\n    >\n      <Box>\n        <Typography variant=\"h4\">Cost Overview</Typography>\n        <Typography classes={classes}>\n          Billing data as of {lastCompleteBillingDate}\n        </Typography>\n      </Box>\n      <Box display=\"flex\">\n        <Box mr={1}>\n          <CurrencySelect\n            currency={currency}\n            currencies={config.currencies}\n            onSelect={setCurrency}\n          />\n        </Box>\n        <ProjectSelect\n          project={pageFilters.project}\n          projects={projects || []}\n          onSelect={onProjectSelect}\n        />\n      </Box>\n    </Box>\n  );\n\n  return (\n    <CostInsightsLayout groups={groups}>\n      <Grid container wrap=\"nowrap\">\n        {(isProductsDisplayed || isActionItemsDisplayed) && (\n          <Grid item>\n            <Box position=\"sticky\" top={20}>\n              <CostInsightsNavigation\n                products={products}\n                alerts={active.length}\n              />\n            </Box>\n          </Grid>\n        )}\n        <Grid item xs>\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            justifyContent=\"flex-end\"\n            mb={2}\n          >\n            <CopyUrlToClipboard />\n            {/* <CostInsightsSupportButton /> */}\n          </Box>\n          <Container maxWidth=\"lg\" disableGutters>\n            <Grid container direction=\"column\">\n              <Grid item xs>\n                <CostInsightsHeader\n                  groupId={pageFilters.group}\n                  groups={groups}\n                  hasCostData={!!dailyCost.aggregation.length}\n                  alerts={active.length}\n                />\n              </Grid>\n              <Collapse in={isActionItemsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ActionItems\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                    />\n                  </Box>\n                </Grid>\n                <Divider />\n              </Collapse>\n              <Grid item xs>\n                <CostOverviewBanner />\n              </Grid>\n              <Grid item xs>\n                <Box px={3} py={6}>\n                  {!!dailyCost.aggregation.length && (\n                    <CostOverviewCard\n                      dailyCostData={dailyCost}\n                      metricData={metricData}\n                    />\n                  )}\n                  <WhyCostsMatter />\n                </Box>\n              </Grid>\n              <Collapse in={isAlertInsightsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={6} py={6} mx={-3} bgcolor=\"alertBackground\">\n                    <AlertInsights\n                      group={pageFilters.group}\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                      onChange={setAlerts}\n                    />\n                  </Box>\n                </Grid>\n              </Collapse>\n              {!isAlertInsightsDisplayed && isProductsDisplayed && <Divider />}\n              {isProductsDisplayed && (\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ProductInsights\n                      group={pageFilters.group}\n                      project={pageFilters.project}\n                      products={config.products}\n                      onLoaded={setProducts}\n                    />\n                  </Box>\n                </Grid>\n              )}\n            </Grid>\n          </Container>\n        </Grid>\n      </Grid>\n    </CostInsightsLayout>\n  );\n};\n"],"names":["MaterialAlert"],"mappings":"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"}
+{"version":3,"file":"CostInsightsPage.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPage.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, useMemo, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Container from '@material-ui/core/Container';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { default as MaterialAlert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ActionItems } from '../ActionItems';\nimport { AlertInsights } from '../AlertInsights';\nimport { CostInsightsLayout } from '../CostInsightsLayout';\nimport { CopyUrlToClipboard } from '../CopyUrlToClipboard';\nimport { CurrencySelect } from '../CurrencySelect';\nimport { WhyCostsMatter } from '../WhyCostsMatter';\nimport {\n  CostInsightsHeader,\n  CostInsightsHeaderNoGroups,\n} from '../CostInsightsHeader';\nimport { CostInsightsNavigation } from '../CostInsightsNavigation';\nimport { CostOverviewCard } from '../CostOverviewCard';\nimport { ProductInsights } from '../ProductInsights';\n/* https://github.com/backstage/backstage/issues/2574 */\n// import { CostInsightsSupportButton } from '../CostInsightsSupportButton';\nimport {\n  useConfig,\n  useCurrency,\n  useFilters,\n  useGroups,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { Alert } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  MetricData,\n  Product,\n  Project,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { mapLoadingToProps } from './selector';\nimport { ProjectSelect } from '../ProjectSelect';\nimport { intervalsOf } from '../../utils/duration';\nimport { useSubtleTypographyStyles } from '../../utils/styles';\nimport {\n  isAlertActive,\n  isAlertAccepted,\n  isAlertDismissed,\n  isAlertSnoozed,\n} from '../../utils/alerts';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const CostInsightsPage = () => {\n  const classes = useSubtleTypographyStyles();\n  const client = useApi(costInsightsApiRef);\n  const config = useConfig();\n  const groups = useGroups();\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [alerts, setAlerts] = useState<Alert[]>([]);\n  const [currency, setCurrency] = useCurrency();\n  const [projects, setProjects] = useState<Maybe<Project[]>>(null);\n  const [products, setProducts] = useState<Maybe<Product[]>>(null);\n  const [dailyCost, setDailyCost] = useState<Maybe<Cost>>(null);\n  const [metricData, setMetricData] = useState<Maybe<MetricData>>(null);\n  const [error, setError] = useState<Maybe<Error>>(null);\n\n  const { pageFilters, setPageFilters } = useFilters(p => p);\n\n  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);\n  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);\n  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);\n  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);\n\n  const isProductsDisplayed = !!config.products?.length;\n  const isActionItemsDisplayed = !!active.length;\n  const isAlertInsightsDisplayed = !!alerts.length;\n\n  const {\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    loadingInitial,\n    dispatchInitial,\n    dispatchInsights,\n    dispatchNone,\n    dispatchReset,\n  } = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // The dispatchLoading functions are derived from loading state using mapLoadingToProps, to\n  // provide nicer props for the component. These are re-derived whenever loading state changes,\n  // which causes an infinite loop as product panels load and re-trigger the useEffect below.\n  // Since the functions don't change, we can memoize - but we trigger the same loop if we satisfy\n  // exhaustive-deps by including the function itself in dependencies.\n\n  const dispatchLoadingInitial = useCallback(dispatchInitial, []);\n  const dispatchLoadingInsights = useCallback(dispatchInsights, []);\n  const dispatchLoadingNone = useCallback(dispatchNone, []);\n  const dispatchLoadingReset = useCallback(dispatchReset, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const setProject = (project: Maybe<string>) =>\n    setPageFilters({\n      ...pageFilters,\n      project: project === 'all' ? null : project,\n    });\n\n  useEffect(() => {\n    async function getInsights() {\n      setError(null);\n      try {\n        if (pageFilters.group) {\n          dispatchLoadingInsights(true);\n          const intervals = intervalsOf(\n            pageFilters.duration,\n            lastCompleteBillingDate,\n          );\n          const [\n            fetchedProjects,\n            fetchedAlerts,\n            fetchedMetricData,\n            fetchedDailyCost,\n          ] = await Promise.all([\n            client.getGroupProjects(pageFilters.group),\n            client.getAlerts(pageFilters.group),\n            pageFilters.metric\n              ? client.getDailyMetricData(pageFilters.metric, intervals)\n              : null,\n            pageFilters.project\n              ? client.getProjectDailyCost(pageFilters.project, intervals)\n              : client.getGroupDailyCost(pageFilters.group, intervals),\n          ]);\n          setProjects(fetchedProjects);\n          setAlerts(fetchedAlerts);\n          setMetricData(fetchedMetricData);\n          setDailyCost(fetchedDailyCost);\n        } else {\n          dispatchLoadingNone(loadingActions);\n        }\n      } catch (e) {\n        setError(e);\n        dispatchLoadingNone(loadingActions);\n      } finally {\n        dispatchLoadingInitial(false);\n        dispatchLoadingInsights(false);\n      }\n    }\n\n    // Wait for metadata to finish loading\n    if (!(loadingGroups && loadingBillingDate)) {\n      getInsights();\n    }\n  }, [\n    client,\n    pageFilters,\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    dispatchLoadingInsights,\n    dispatchLoadingInitial,\n    dispatchLoadingNone,\n    lastCompleteBillingDate,\n  ]);\n\n  if (loadingInitial) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <MaterialAlert severity=\"error\">{error.message}</MaterialAlert>;\n  }\n\n  // Loaded but no groups found for the user\n  if (!pageFilters.group) {\n    return (\n      <CostInsightsLayout groups={groups}>\n        <Box textAlign=\"right\">\n          <CopyUrlToClipboard />\n          {/* <CostInsightsSupportButton /> */}\n        </Box>\n        <Container maxWidth=\"lg\">\n          <CostInsightsHeaderNoGroups />\n        </Container>\n        <Divider />\n        <Container maxWidth=\"lg\">\n          <WhyCostsMatter />\n        </Container>\n      </CostInsightsLayout>\n    );\n  }\n\n  if (!dailyCost) {\n    return (\n      <MaterialAlert severity=\"error\">{`Error: Could not fetch cost insights data for team ${pageFilters.group}`}</MaterialAlert>\n    );\n  }\n\n  const onProjectSelect = (project: Maybe<string>) => {\n    setProject(project);\n    dispatchLoadingReset(loadingActions);\n  };\n\n  const CostOverviewBanner = () => (\n    <Box\n      px={3}\n      pt={6}\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      minHeight={40}\n    >\n      <Box>\n        <Typography variant=\"h4\">Cost Overview</Typography>\n        <Typography classes={classes}>\n          Billing data as of {lastCompleteBillingDate}\n        </Typography>\n      </Box>\n      <Box display=\"flex\">\n        <Box mr={1}>\n          <CurrencySelect\n            currency={currency}\n            currencies={config.currencies}\n            onSelect={setCurrency}\n          />\n        </Box>\n        <ProjectSelect\n          project={pageFilters.project}\n          projects={projects || []}\n          onSelect={onProjectSelect}\n        />\n      </Box>\n    </Box>\n  );\n\n  return (\n    <CostInsightsLayout groups={groups}>\n      <Grid container wrap=\"nowrap\">\n        {(isProductsDisplayed || isActionItemsDisplayed) && (\n          <Grid item>\n            <Box position=\"sticky\" top={20}>\n              <CostInsightsNavigation\n                products={products}\n                alerts={active.length}\n              />\n            </Box>\n          </Grid>\n        )}\n        <Grid item xs>\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            justifyContent=\"flex-end\"\n            mb={2}\n          >\n            <CopyUrlToClipboard />\n            {/* <CostInsightsSupportButton /> */}\n          </Box>\n          <Container maxWidth=\"lg\" disableGutters>\n            <Grid container direction=\"column\">\n              <Grid item xs>\n                <CostInsightsHeader\n                  groupId={pageFilters.group}\n                  groups={groups}\n                  hasCostData={!!dailyCost.aggregation.length}\n                  alerts={active.length}\n                />\n              </Grid>\n              <Collapse in={isActionItemsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ActionItems\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                    />\n                  </Box>\n                </Grid>\n                <Divider />\n              </Collapse>\n              <Grid item xs>\n                <CostOverviewBanner />\n              </Grid>\n              <Grid item xs>\n                <Box px={3} py={6}>\n                  {!!dailyCost.aggregation.length && (\n                    <CostOverviewCard\n                      dailyCostData={dailyCost}\n                      metricData={metricData}\n                    />\n                  )}\n                  <WhyCostsMatter />\n                </Box>\n              </Grid>\n              <Collapse in={isAlertInsightsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={6} py={6} mx={-3} bgcolor=\"alertBackground\">\n                    <AlertInsights\n                      group={pageFilters.group}\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                      onChange={setAlerts}\n                    />\n                  </Box>\n                </Grid>\n              </Collapse>\n              {!isAlertInsightsDisplayed && isProductsDisplayed && <Divider />}\n              {isProductsDisplayed && (\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ProductInsights\n                      group={pageFilters.group}\n                      project={pageFilters.project}\n                      products={config.products}\n                      onLoaded={setProducts}\n                    />\n                  </Box>\n                </Grid>\n              )}\n            </Grid>\n          </Container>\n        </Grid>\n      </Grid>\n    </CostInsightsLayout>\n  );\n};\n"],"names":["MaterialAlert"],"mappings":"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"}

package/dist/components/CostInsightsPage/CostInsightsPageRoot.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { CostInsightsPage } from './CostInsightsPage.esm.js';
 import { FilterProvider } from '../../hooks/useFilters.esm.js';
 import { LoadingProvider } from '../../hooks/useLoading.esm.js';
@@ -9,7 +9,7 @@ import { ConfigProvider } from '../../hooks/useConfig.esm.js';
 import { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate.esm.js';
 import { CostInsightsThemeProvider } from './CostInsightsThemeProvider.esm.js';
 
-const CostInsightsPageRoot = () => /* @__PURE__ */ React.createElement(CostInsightsThemeProvider, null, /* @__PURE__ */ React.createElement(ConfigProvider, null, /* @__PURE__ */ React.createElement(LoadingProvider, null, /* @__PURE__ */ React.createElement(GroupsProvider, null, /* @__PURE__ */ React.createElement(BillingDateProvider, null, /* @__PURE__ */ React.createElement(FilterProvider, null, /* @__PURE__ */ React.createElement(ScrollProvider, null, /* @__PURE__ */ React.createElement(CurrencyProvider, null, /* @__PURE__ */ React.createElement(CostInsightsPage, null)))))))));
+const CostInsightsPageRoot = () => /* @__PURE__ */ jsx(CostInsightsThemeProvider, { children: /* @__PURE__ */ jsx(ConfigProvider, { children: /* @__PURE__ */ jsx(LoadingProvider, { children: /* @__PURE__ */ jsx(GroupsProvider, { children: /* @__PURE__ */ jsx(BillingDateProvider, { children: /* @__PURE__ */ jsx(FilterProvider, { children: /* @__PURE__ */ jsx(ScrollProvider, { children: /* @__PURE__ */ jsx(CurrencyProvider, { children: /* @__PURE__ */ jsx(CostInsightsPage, {}) }) }) }) }) }) }) }) });
 
 export { CostInsightsPageRoot };
 //# sourceMappingURL=CostInsightsPageRoot.esm.js.map

package/dist/components/CostInsightsPage/CostInsightsPageRoot.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsPageRoot.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPageRoot.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 { CostInsightsPage } from './CostInsightsPage';\nimport { FilterProvider } from '../../hooks/useFilters';\nimport { LoadingProvider } from '../../hooks/useLoading';\nimport { GroupsProvider } from '../../hooks/useGroups';\nimport { CurrencyProvider } from '../../hooks/useCurrency';\nimport { ScrollProvider } from '../../hooks/useScroll';\nimport { ConfigProvider } from '../../hooks/useConfig';\nimport { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate';\nimport { CostInsightsThemeProvider } from './CostInsightsThemeProvider';\n\nexport const CostInsightsPageRoot = () => (\n  <CostInsightsThemeProvider>\n    <ConfigProvider>\n      <LoadingProvider>\n        <GroupsProvider>\n          <BillingDateProvider>\n            <FilterProvider>\n              <ScrollProvider>\n                <CurrencyProvider>\n                  <CostInsightsPage />\n                </CurrencyProvider>\n              </ScrollProvider>\n            </FilterProvider>\n          </BillingDateProvider>\n        </GroupsProvider>\n      </LoadingProvider>\n    </ConfigProvider>\n  </CostInsightsThemeProvider>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA2Ba,MAAA,oBAAA,GAAuB,sBAClC,KAAA,CAAA,aAAA,CAAC,yBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,IAAA,CACpB,CACF,CACF,CACF,CACF,CACF,CACF,CACF;;;;"}
+{"version":3,"file":"CostInsightsPageRoot.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPageRoot.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 { CostInsightsPage } from './CostInsightsPage';\nimport { FilterProvider } from '../../hooks/useFilters';\nimport { LoadingProvider } from '../../hooks/useLoading';\nimport { GroupsProvider } from '../../hooks/useGroups';\nimport { CurrencyProvider } from '../../hooks/useCurrency';\nimport { ScrollProvider } from '../../hooks/useScroll';\nimport { ConfigProvider } from '../../hooks/useConfig';\nimport { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate';\nimport { CostInsightsThemeProvider } from './CostInsightsThemeProvider';\n\nexport const CostInsightsPageRoot = () => (\n  <CostInsightsThemeProvider>\n    <ConfigProvider>\n      <LoadingProvider>\n        <GroupsProvider>\n          <BillingDateProvider>\n            <FilterProvider>\n              <ScrollProvider>\n                <CurrencyProvider>\n                  <CostInsightsPage />\n                </CurrencyProvider>\n              </ScrollProvider>\n            </FilterProvider>\n          </BillingDateProvider>\n        </GroupsProvider>\n      </LoadingProvider>\n    </ConfigProvider>\n  </CostInsightsThemeProvider>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ba,MAAA,oBAAA,GAAuB,sBAClC,GAAA,CAAC,yBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,eACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,mBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA,EACpB,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA;;;;"}

package/dist/components/CostInsightsPage/CostInsightsThemeProvider.esm.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ThemeProvider, createTheme } from '@material-ui/core/styles';
 import { costInsightsDarkTheme, costInsightsLightTheme } from '../../utils/styles.esm.js';
 
 const CostInsightsThemeProvider = ({
   children
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ThemeProvider,
     {
       theme: (theme) => createTheme({
@@ -14,9 +14,9 @@ const CostInsightsThemeProvider = ({
           ...theme.palette,
           ...theme.palette.type === "dark" ? costInsightsDarkTheme.palette : costInsightsLightTheme.palette
         }
-      })
-    },
-    children
+      }),
+      children
+    }
   );
 };
 

package/dist/components/CostInsightsPage/CostInsightsThemeProvider.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostInsightsThemeProvider.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsThemeProvider.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 {\n  ThemeProvider,\n  createTheme as createMuiTheme,\n} from '@material-ui/core/styles';\nimport { Theme } from '@material-ui/core/styles';\nimport {\n  costInsightsDarkTheme,\n  costInsightsLightTheme,\n} from '../../utils/styles';\nimport { CostInsightsTheme } from '../../types';\n\nexport const CostInsightsThemeProvider = ({\n  children,\n}: PropsWithChildren<{}>) => {\n  return (\n    <ThemeProvider\n      theme={(theme: Theme) =>\n        createMuiTheme({\n          ...theme,\n          palette: {\n            ...theme.palette,\n            ...(theme.palette.type === 'dark'\n              ? costInsightsDarkTheme.palette\n              : costInsightsLightTheme.palette),\n          },\n        }) as CostInsightsTheme\n      }\n    >\n      {children}\n    </ThemeProvider>\n  );\n};\n"],"names":["createMuiTheme"],"mappings":";;;;AA4BO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,CAA6B,KAAA;AAC3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAC,KAAA,KACNA,WAAe,CAAA;AAAA,QACb,GAAG,KAAA;AAAA,QACH,OAAS,EAAA;AAAA,UACP,GAAG,KAAM,CAAA,OAAA;AAAA,UACT,GAAI,KAAM,CAAA,OAAA,CAAQ,SAAS,MACvB,GAAA,qBAAA,CAAsB,UACtB,sBAAuB,CAAA;AAAA;AAC7B,OACD;AAAA,KAAA;AAAA,IAGF;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"CostInsightsThemeProvider.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsThemeProvider.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 {\n  ThemeProvider,\n  createTheme as createMuiTheme,\n} from '@material-ui/core/styles';\nimport { Theme } from '@material-ui/core/styles';\nimport {\n  costInsightsDarkTheme,\n  costInsightsLightTheme,\n} from '../../utils/styles';\nimport { CostInsightsTheme } from '../../types';\n\nexport const CostInsightsThemeProvider = ({\n  children,\n}: PropsWithChildren<{}>) => {\n  return (\n    <ThemeProvider\n      theme={(theme: Theme) =>\n        createMuiTheme({\n          ...theme,\n          palette: {\n            ...theme.palette,\n            ...(theme.palette.type === 'dark'\n              ? costInsightsDarkTheme.palette\n              : costInsightsLightTheme.palette),\n          },\n        }) as CostInsightsTheme\n      }\n    >\n      {children}\n    </ThemeProvider>\n  );\n};\n"],"names":["createMuiTheme"],"mappings":";;;;AA4BO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,CAA6B,KAAA;AAC3B,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAC,KAAA,KACNA,WAAe,CAAA;AAAA,QACb,GAAG,KAAA;AAAA,QACH,OAAS,EAAA;AAAA,UACP,GAAG,KAAM,CAAA,OAAA;AAAA,UACT,GAAI,KAAM,CAAA,OAAA,CAAQ,SAAS,MACvB,GAAA,qBAAA,CAAsB,UACtB,sBAAuB,CAAA;AAAA;AAC7B,OACD,CAAA;AAAA,MAGF;AAAA;AAAA,GACH;AAEJ;;;;"}