@backstage-community/plugin-cost-insights 0.12.25 → 0.12.26

package/dist/esm/index-DaitkcPN.esm.js

@@ -1,1136 +0,0 @@
-import React, { Fragment, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import Box from '@material-ui/core/Box';
-import Collapse from '@material-ui/core/Collapse';
-import Container from '@material-ui/core/Container';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Alert from '@material-ui/lab/Alert';
-import { O as useActionItemCardStyles, f as useScroll, Q as AlertStatus, R as ScrollType, T as useAlertDialogStyles, U as choose, V as formOf, W as useAlertStatusSummaryButtonStyles, X as useCostInsightsStyles, J as DefaultNavigation, Y as useAlertInsightsSectionStyles, Z as isSnoozeEnabled, _ as isAcceptEnabled, $ as isDismissEnabled, u as useLoading, a0 as isStatusSnoozed, a1 as isStatusAccepted, a2 as isStatusDismissed, a3 as sumOfAllAlerts, K as DefaultLoadingAction, y as useSelectStyles, H as findAlways, a4 as useProductInsightsCardStyles, d as useLastCompleteBillingDate, a5 as findAnyKey, a6 as ProductInsightsChart, c as costInsightsApiRef, i as intervalsOf, a7 as DEFAULT_DURATION, a8 as settledResponseOf, a9 as initialStatesOf, aa as totalAggregationSort, ab as useSubtleTypographyStyles, n as useConfig, ac as useGroups, ad as useCurrency, e as useFilters, ae as isAlertActive, af as isAlertSnoozed, ag as isAlertAccepted, ah as isAlertDismissed, ai as CostInsightsLayout, aj as CostInsightsNavigation, C as CostInsightsThemeProvider, a as ConfigProvider, L as LoadingProvider, G as GroupsProvider, B as BillingDateProvider, F as FilterProvider, S as ScrollProvider, b as CurrencyProvider } from './index-BFM2mP6Z.esm.js';
-import Avatar from '@material-ui/core/Avatar';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import Badge from '@material-ui/core/Badge';
-import Paper from '@material-ui/core/Paper';
-import SnoozeIcon from '@material-ui/icons/AccessTime';
-import AcceptIcon from '@material-ui/icons/Check';
-import DismissIcon from '@material-ui/icons/Delete';
-import classnames from 'classnames';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import pluralize from 'pluralize';
-import Snackbar from '@material-ui/core/Snackbar';
-import { capitalize } from '@material-ui/core/utils';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import CloseIcon from '@material-ui/icons/Close';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { S as ScrollAnchor, P as PeriodSelect, C as CostOverviewCard, m as mapLoadingToProps$2 } from './selector-D7iXJwd9.esm.js';
-import { useLocation } from 'react-router-dom';
-import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
-import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
-import AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';
-import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import FormControl from '@material-ui/core/FormControl';
-import MenuItem from '@material-ui/core/MenuItem';
-import useAsync from 'react-use/esm/useAsync';
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { InfoCard, Progress } from '@backstage/core-components';
-import '@material-ui/core/styles';
-import '@material-ui/icons/MonetizationOn';
-import '@material-ui/icons/Whatshot';
-import '@material-ui/icons/Settings';
-import '@material-ui/icons/AccountTree';
-import '@material-ui/icons/Storage';
-import '@material-ui/icons/Search';
-import '@material-ui/icons/CloudQueue';
-import '@material-ui/icons/School';
-import '@material-ui/icons/ViewHeadline';
-import 'qs';
-import 'yup';
-import '@material-ui/core/Backdrop';
-import 'luxon';
-import '@material-ui/core/styles/colorManipulator';
-import '@backstage/catalog-model';
-import '@material-ui/core/Checkbox';
-import '@material-ui/core/FormControlLabel';
-import '@material-ui/core/RadioGroup';
-import '@material-ui/core/Radio';
-import '@material-ui/core/TextField';
-import '@material-ui/icons/ChevronLeft';
-import 'recharts';
-import '@material-ui/core/Slide';
-import '@material-ui/icons/ChevronRight';
-import '@material-ui/core/ButtonBase';
-import '@material-ui/icons/Lens';
-import '@material-ui/icons/HelpOutlineOutlined';
-import '@material-ui/icons/ArrowDropUp';
-import '@material-ui/icons/ArrowDropDown';
-import '@material-ui/core/Menu';
-import '@material-ui/core/Tab';
-import '@material-ui/core/Tabs';
-import '@material-ui/core/MenuList';
-import '@material-ui/core/ListItemIcon';
-import '@material-ui/core/ListItemText';
-import '@material-ui/core/CardContent';
-import '@material-ui/icons/Fullscreen';
-import '@material-ui/core/FormGroup';
-import 'regression';
-
-const ActionItemCard = ({
-  alert,
-  avatar,
-  number,
-  disableScroll = false
-}) => {
-  const classes = useActionItemCardStyles();
-  const rootClasses = classnames(classes.root, {
-    [classes.activeRoot]: !disableScroll
-  });
-  const [, setScroll] = useScroll();
-  const onActionItemClick = () => {
-    if (!disableScroll && number) {
-      setScroll(`alert-${number}`);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(Card, { className: classes.card, raised: false, onClick: onActionItemClick }, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      classes: {
-        root: rootClasses,
-        action: classes.action,
-        title: classes.title
-      },
-      title: alert.title,
-      subheader: alert.subtitle,
-      avatar
-    }
-  ));
-};
-
-const AlertStatusButton = ({
-  title,
-  amount,
-  icon,
-  onClick,
-  ...buttonProps
-}) => /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(
-  IconButton,
-  {
-    onClick,
-    role: "button",
-    "aria-hidden": false,
-    ...buttonProps
-  },
-  /* @__PURE__ */ React.createElement(Badge, { badgeContent: amount }, icon)
-));
-const ActionItems = ({
-  active,
-  snoozed,
-  accepted,
-  dismissed
-}) => {
-  const classes = useActionItemCardStyles();
-  const [, setScroll] = useScroll();
-  const isSnoozedButtonDisplayed = !!snoozed.length;
-  const isAcceptedButtonDisplayed = !!accepted.length;
-  const isDismissedButtonDisplayed = !!dismissed.length;
-  const isStatusButtonGroupDisplayed = !!active.length;
-  const onStatusButtonClick = () => setScroll(ScrollType.AlertSummary);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paper, null, active.map((alert, index) => /* @__PURE__ */ React.createElement(Fragment, { key: `alert-${index}` }, /* @__PURE__ */ React.createElement(
-    ActionItemCard,
-    {
-      alert,
-      number: index + 1,
-      avatar: /* @__PURE__ */ React.createElement(Avatar, { className: classes.avatar }, index + 1)
-    }
-  ), index < active.length - 1 && /* @__PURE__ */ React.createElement(Divider, null)))), isStatusButtonGroupDisplayed && /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end", mt: 2 }, isAcceptedButtonDisplayed && /* @__PURE__ */ React.createElement(
-    AlertStatusButton,
-    {
-      title: "Accepted",
-      "aria-label": AlertStatus.Accepted,
-      icon: /* @__PURE__ */ React.createElement(AcceptIcon, null),
-      amount: accepted.length,
-      onClick: onStatusButtonClick
-    }
-  ), isSnoozedButtonDisplayed && /* @__PURE__ */ React.createElement(
-    AlertStatusButton,
-    {
-      title: "Snoozed",
-      "aria-label": AlertStatus.Snoozed,
-      amount: snoozed.length,
-      icon: /* @__PURE__ */ React.createElement(SnoozeIcon, null),
-      onClick: onStatusButtonClick
-    }
-  ), isDismissedButtonDisplayed && /* @__PURE__ */ React.createElement(
-    AlertStatusButton,
-    {
-      title: "Dismissed",
-      "aria-label": AlertStatus.Dismissed,
-      icon: /* @__PURE__ */ React.createElement(DismissIcon, null),
-      amount: dismissed.length,
-      onClick: onStatusButtonClick
-    }
-  )));
-};
-
-const DEFAULT_FORM_ID = "alert-form";
-const AlertDialog = ({
-  open,
-  group,
-  alert,
-  status,
-  onClose,
-  onSubmit
-}) => {
-  const classes = useAlertDialogStyles();
-  const [isSubmitDisabled, setSubmitDisabled] = useState(true);
-  const formRef = useRef(null);
-  useEffect(() => {
-    setSubmitDisabled(open);
-  }, [open]);
-  function disableSubmit(isDisabled) {
-    setSubmitDisabled(isDisabled);
-  }
-  function onDialogClose() {
-    onClose();
-    setSubmitDisabled(true);
-  }
-  const [action, actioned] = choose(
-    status,
-    [
-      ["snooze", "snoozed"],
-      ["accept", "accepted"],
-      ["dismiss", "dismissed"]
-    ],
-    ["", ""]
-  );
-  const TransitionProps = {
-    mountOnEnter: true,
-    unmountOnExit: true,
-    onEntered() {
-      if (formRef.current) {
-        formRef.current.id = DEFAULT_FORM_ID;
-      }
-    }
-  };
-  const Form = formOf(alert, status);
-  return /* @__PURE__ */ React.createElement(
-    Dialog,
-    {
-      open,
-      onClose: onDialogClose,
-      scroll: "body",
-      maxWidth: "lg",
-      TransitionProps
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        className: classes.icon,
-        disableRipple: true,
-        "aria-label": "Close",
-        onClick: onDialogClose
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null)
-    )),
-    /* @__PURE__ */ React.createElement(DialogContent, { className: classes.content }, /* @__PURE__ */ React.createElement(Box, { mb: 1.5 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, /* @__PURE__ */ React.createElement("b", null, capitalize(action), " this action item?")), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", color: "textSecondary" }, /* @__PURE__ */ React.createElement("b", null, "This action item will be ", actioned, " for all of ", group, "."))), /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        display: "flex",
-        flexDirection: "column",
-        bgcolor: "alertBackground",
-        p: 2,
-        mb: 1.5,
-        borderRadius: 4
-      },
-      /* @__PURE__ */ React.createElement(Typography, null, /* @__PURE__ */ React.createElement("b", null, alert == null ? void 0 : alert.title)),
-      /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary" }, alert == null ? void 0 : alert.subtitle)
-    ), Form && /* @__PURE__ */ React.createElement(
-      Form,
-      {
-        ref: formRef,
-        alert,
-        onSubmit,
-        disableSubmit
-      }
-    )),
-    /* @__PURE__ */ React.createElement(Divider, null),
-    /* @__PURE__ */ React.createElement(DialogActions, { className: classes.actions, disableSpacing: true }, Form ? /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "submit",
-        color: "primary",
-        variant: "contained",
-        "aria-label": action,
-        form: DEFAULT_FORM_ID,
-        disabled: isSubmitDisabled
-      },
-      capitalize(action)
-    ) : /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        color: "primary",
-        variant: "contained",
-        "aria-label": action,
-        onClick: () => onSubmit(null)
-      },
-      capitalize(action)
-    ))
-  );
-};
-
-const AlertGroup = ({ alerts, status, title, icon }) => {
-  const classes = useActionItemCardStyles();
-  return /* @__PURE__ */ React.createElement(Box, { p: 1 }, alerts.map((alert, index) => /* @__PURE__ */ React.createElement(Fragment, { key: `alert-${status}-${index}` }, /* @__PURE__ */ React.createElement(
-    ActionItemCard,
-    {
-      disableScroll: true,
-      alert,
-      avatar: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.avatar }, icon))
-    }
-  ), index < alerts.length - 1 && /* @__PURE__ */ React.createElement(Divider, null))));
-};
-const AlertStatusSummary = ({
-  open,
-  snoozed,
-  accepted,
-  dismissed
-}) => {
-  const isSnoozedListDisplayed = !!snoozed.length;
-  const isAcceptedListDisplayed = !!accepted.length;
-  const isDismissedListDisplayed = !!dismissed.length;
-  return /* @__PURE__ */ React.createElement(Collapse, { in: open }, isAcceptedListDisplayed && /* @__PURE__ */ React.createElement(
-    AlertGroup,
-    {
-      title: "Accepted",
-      alerts: accepted,
-      status: AlertStatus.Accepted,
-      icon: /* @__PURE__ */ React.createElement(
-        AcceptIcon,
-        {
-          role: "img",
-          "aria-hidden": false,
-          "aria-label": AlertStatus.Accepted
-        }
-      )
-    }
-  ), isSnoozedListDisplayed && /* @__PURE__ */ React.createElement(
-    AlertGroup,
-    {
-      title: "Snoozed",
-      alerts: snoozed,
-      status: AlertStatus.Snoozed,
-      icon: /* @__PURE__ */ React.createElement(
-        SnoozeIcon,
-        {
-          role: "img",
-          "aria-hidden": false,
-          "aria-label": AlertStatus.Snoozed
-        }
-      )
-    }
-  ), isDismissedListDisplayed && /* @__PURE__ */ React.createElement(
-    AlertGroup,
-    {
-      title: "Dismissed",
-      alerts: dismissed,
-      status: AlertStatus.Dismissed,
-      icon: /* @__PURE__ */ React.createElement(
-        DismissIcon,
-        {
-          role: "img",
-          "aria-hidden": false,
-          "aria-label": AlertStatus.Dismissed
-        }
-      )
-    }
-  ));
-};
-
-const AlertStatusSummaryButton = ({
-  children,
-  onClick
-}) => {
-  const classes = useAlertStatusSummaryButtonStyles();
-  const [clicked, setClicked] = useState(false);
-  const iconClassName = classnames(classes.icon, {
-    [classes.clicked]: clicked
-  });
-  const handleOnClick = (e) => {
-    setClicked((prevClicked) => !prevClicked);
-    onClick(e);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "text",
-      color: "primary",
-      disableElevation: true,
-      "aria-label": "expand",
-      endIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { className: iconClassName }),
-      onClick: handleOnClick
-    },
-    children
-  );
-};
-
-const AlertInsightsHeader = ({
-  title,
-  subtitle
-}) => {
-  const classes = useCostInsightsStyles();
-  return /* @__PURE__ */ React.createElement(Box, { mb: 6, position: "relative" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: DefaultNavigation.AlertInsightsHeader }), /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center" }, title, " ", /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "direct-hit" }, "\u{1F3AF}")), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, subtitle));
-};
-
-const AlertInsightsSectionHeader = ({
-  alert,
-  number
-}) => {
-  const classes = useAlertInsightsSectionStyles();
-  const isViewInstructionsButtonDisplayed = !!alert.url;
-  return /* @__PURE__ */ React.createElement(Box, { position: "relative", mb: 3, textAlign: "left" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: `alert-${number}` }), /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      container: true,
-      spacing: 2,
-      justifyContent: "space-between",
-      alignItems: "center"
-    },
-    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(Box, { mr: 2 }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.button }, number)), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, alert.title), /* @__PURE__ */ React.createElement(Typography, { gutterBottom: true }, alert.subtitle)))),
-    isViewInstructionsButtonDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Button, { variant: "text", color: "primary", href: alert.url }, alert.buttonText || "View Instructions"))
-  ));
-};
-
-const AlertInsightsSection = ({
-  alert,
-  number,
-  onSnooze,
-  onAccept,
-  onDismiss
-}) => {
-  const isSnoozeButtonDisplayed = isSnoozeEnabled(alert);
-  const isAcceptButtonDisplayed = isAcceptEnabled(alert);
-  const isDismissButtonDisplayed = isDismissEnabled(alert);
-  const isButtonGroupDisplayed = isSnoozeButtonDisplayed || isAcceptButtonDisplayed || isDismissButtonDisplayed;
-  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", mb: 6 }, /* @__PURE__ */ React.createElement(AlertInsightsSectionHeader, { alert, number }), isButtonGroupDisplayed && /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", mb: 4 }, isAcceptButtonDisplayed && /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      color: "primary",
-      variant: "contained",
-      "aria-label": "accept",
-      onClick: () => onAccept(alert),
-      startIcon: /* @__PURE__ */ React.createElement(AcceptIcon, null)
-    },
-    "Accept"
-  )), isSnoozeButtonDisplayed && /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      color: "default",
-      variant: "outlined",
-      "aria-label": "snooze",
-      disableElevation: true,
-      onClick: () => onSnooze(alert),
-      startIcon: /* @__PURE__ */ React.createElement(SnoozeIcon, null)
-    },
-    "Snooze"
-  )), isDismissButtonDisplayed && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      color: "secondary",
-      variant: "outlined",
-      "aria-label": "dismiss",
-      disableElevation: true,
-      onClick: () => onDismiss(alert),
-      startIcon: /* @__PURE__ */ React.createElement(DismissIcon, null)
-    },
-    "Dismiss"
-  )), alert.element);
-};
-
-const mapLoadingToAlerts = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsAlerts]: isLoading });
-const AlertInsights = ({
-  group,
-  active,
-  snoozed,
-  accepted,
-  dismissed,
-  onChange
-}) => {
-  const [scroll] = useScroll();
-  const [alert, setAlert] = useState(null);
-  const dispatchLoadingAlerts = useLoading(mapLoadingToAlerts);
-  const [status, setStatus] = useState(null);
-  const [data, setData] = useState(void 0);
-  const [error, setError] = useState(null);
-  const [isDialogOpen, setDialogOpen] = useState(false);
-  const [isSummaryOpen, setSummaryOpen] = useState(false);
-  const [isSnackbarOpen, setSnackbarOpen] = useState(false);
-  useEffect(() => {
-    var _a, _b, _c;
-    async function callAlertHook(options2, callback) {
-      setAlert(null);
-      setStatus(null);
-      setData(void 0);
-      setDialogOpen(false);
-      dispatchLoadingAlerts(true);
-      try {
-        const alerts = await callback(options2);
-        onChange(alerts);
-      } catch (e) {
-        setError(e);
-      } finally {
-        dispatchLoadingAlerts(false);
-      }
-    }
-    const options = { data, group };
-    const onSnoozed = (_a = alert == null ? void 0 : alert.onSnoozed) == null ? void 0 : _a.bind(alert);
-    const onAccepted = (_b = alert == null ? void 0 : alert.onAccepted) == null ? void 0 : _b.bind(alert);
-    const onDismissed = (_c = alert == null ? void 0 : alert.onDismissed) == null ? void 0 : _c.bind(alert);
-    if (data !== void 0) {
-      if (isStatusSnoozed(status) && onSnoozed) {
-        callAlertHook(options, onSnoozed);
-      } else if (isStatusAccepted(status) && onAccepted) {
-        callAlertHook(options, onAccepted);
-      } else if (isStatusDismissed(status) && onDismissed) {
-        callAlertHook(options, onDismissed);
-      }
-    }
-  }, [group, data, alert, status, onChange, dispatchLoadingAlerts]);
-  useEffect(() => {
-    if (scroll === ScrollType.AlertSummary) {
-      setSummaryOpen(true);
-    }
-  }, [scroll]);
-  useEffect(() => {
-    setDialogOpen(!!status);
-  }, [status]);
-  useEffect(() => {
-    setSnackbarOpen(!!error);
-  }, [error]);
-  function onSnooze(alertToSnooze) {
-    setAlert(alertToSnooze);
-    setStatus(AlertStatus.Snoozed);
-  }
-  function onAccept(alertToAccept) {
-    setAlert(alertToAccept);
-    setStatus(AlertStatus.Accepted);
-  }
-  function onDismiss(alertToDismiss) {
-    setAlert(alertToDismiss);
-    setStatus(AlertStatus.Dismissed);
-  }
-  function onSnackbarClose() {
-    setError(null);
-  }
-  function onDialogClose() {
-    setAlert(null);
-    setStatus(null);
-  }
-  function onDialogFormSubmit(formData) {
-    setData(formData);
-  }
-  function onSummaryButtonClick() {
-    setSummaryOpen((prevOpen) => !prevOpen);
-  }
-  const total = [accepted, snoozed, dismissed].reduce(sumOfAllAlerts, 0);
-  const isAlertStatusSummaryDisplayed = !!total;
-  const isAlertInsightSectionDisplayed = !!active.length;
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column", spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    AlertInsightsHeader,
-    {
-      title: "Your team's action items",
-      subtitle: isAlertInsightSectionDisplayed ? "This section outlines suggested action items your team can address to improve cloud costs." : "All of your team's action items are hidden. Maybe it's time to give them another look?"
-    }
-  )), isAlertInsightSectionDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true, container: true, direction: "column", spacing: 4 }, active.map((activeAlert, index) => /* @__PURE__ */ React.createElement(Grid, { item: true, key: `alert-insights-section-${index}` }, /* @__PURE__ */ React.createElement(
-    AlertInsightsSection,
-    {
-      alert: activeAlert,
-      number: index + 1,
-      onSnooze,
-      onAccept,
-      onDismiss
-    }
-  )))), isAlertStatusSummaryDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { position: "relative", display: "flex", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: ScrollType.AlertSummary }), /* @__PURE__ */ React.createElement(AlertStatusSummaryButton, { onClick: onSummaryButtonClick }, pluralize("Hidden Action Item", total))), /* @__PURE__ */ React.createElement(
-    AlertStatusSummary,
-    {
-      open: isSummaryOpen,
-      snoozed,
-      accepted,
-      dismissed
-    }
-  )), /* @__PURE__ */ React.createElement(
-    AlertDialog,
-    {
-      group,
-      open: isDialogOpen,
-      alert,
-      status,
-      onClose: onDialogClose,
-      onSubmit: onDialogFormSubmit
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Snackbar,
-    {
-      open: isSnackbarOpen,
-      autoHideDuration: 6e3,
-      anchorOrigin: { vertical: "top", horizontal: "center" },
-      onClose: onSnackbarClose
-    },
-    /* @__PURE__ */ React.createElement(Alert, { onClose: onSnackbarClose, severity: "error" }, error == null ? void 0 : error.message)
-  ));
-};
-
-const ClipboardMessage = {
-  default: "Copy URL to clipboard",
-  success: "Copied!",
-  error: "Couldn't copy to clipboard"
-};
-const CopyUrlToClipboard = () => {
-  const location = useLocation();
-  const [state, copyToClipboard] = useCopyToClipboard();
-  const [copied, setCopied] = useState(false);
-  const origin = window.location.origin;
-  const pathname = location.pathname;
-  const search = location.search;
-  const url = `${origin}${pathname}${search}`;
-  useEffect(() => {
-    if (state.error) {
-      setCopied(false);
-    } else if (state.value) {
-      setCopied(true);
-      setTimeout(setCopied, 1500, false);
-    }
-  }, [state]);
-  let text = ClipboardMessage.default;
-  let Icon = AssignmentOutlinedIcon;
-  if (state.error) {
-    text = ClipboardMessage.error;
-    Icon = SentimentVeryDissatisfiedIcon;
-  } else if (copied) {
-    text = ClipboardMessage.success;
-    Icon = AssignmentTurnedInOutlinedIcon;
-  }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: text, arrow: true }, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => copyToClipboard(url) }, /* @__PURE__ */ React.createElement(Icon, null)));
-};
-
-function useDisplayName() {
-  var _a;
-  const identityApi = useApi(identityApiRef);
-  const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]);
-  return state.loading ? "" : ((_a = state.value) == null ? void 0 : _a.displayName) || "Mysterious Stranger";
-}
-const CostInsightsHeaderNoData = ({
-  groupId,
-  groups
-}) => {
-  var _a, _b;
-  const displayName = useDisplayName();
-  const classes = useCostInsightsStyles();
-  const hasMultipleGroups = groups.length > 1;
-  const ownerName = (_b = (_a = groups.find(({ id }) => id === groupId)) == null ? void 0 : _a.name) != null ? _b : groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " doesn't seem to have any cloud costs."), hasMultipleGroups && /* @__PURE__ */ React.createElement(Typography, { align: "center", gutterBottom: true }, "Maybe we picked the wrong team, choose another from the menu above?"));
-};
-const CostInsightsHeaderAlerts = ({
-  groupId,
-  groups,
-  alerts
-}) => {
-  var _a, _b;
-  const displayName = useDisplayName();
-  const classes = useCostInsightsStyles();
-  const ownerName = (_b = (_a = groups.find(({ id }) => id === groupId)) == null ? void 0 : _a.name) != null ? _b : groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass" }, "\u{1F50E}"), " ", "You have ", alerts, " thing", alerts > 1 && "s", " to look into"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " We've identified", " ", alerts > 1 ? "a few things " : "one thing ", /* @__PURE__ */ React.createElement("b", null, ownerName), " should look into next."));
-};
-const CostInsightsHeaderNoAlerts = ({
-  groupId,
-  groups
-}) => {
-  var _a, _b;
-  const displayName = useDisplayName();
-  const classes = useCostInsightsStyles();
-  const ownerName = (_b = (_a = groups.find(({ id }) => id === groupId)) == null ? void 0 : _a.name) != null ? _b : groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true, align: "center" }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "thumbs-up" }, "\u{1F44D}"), " ", "Your team is doing great"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " is doing well. No major changes this month."));
-};
-const CostInsightsHeaderNoGroups = () => {
-  const displayName = useDisplayName();
-  const classes = useCostInsightsStyles();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " It doesn't look like you belong to any teams."));
-};
-const CostInsightsHeader = (props) => {
-  if (!props.hasCostData) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoData, { ...props });
-  }
-  if (props.alerts) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderAlerts, { ...props });
-  }
-  return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoAlerts, { ...props });
-};
-
-const NULL_VALUE = "engineers";
-const CurrencySelect = ({
-  currency,
-  currencies,
-  onSelect
-}) => {
-  const classes = useSelectStyles();
-  const getOption = (value) => {
-    const kind = value === NULL_VALUE ? null : value;
-    return findAlways(currencies, (c) => c.kind === kind);
-  };
-  const handleOnChange = (e) => {
-    const option = getOption(e.target.value);
-    onSelect(option);
-  };
-  const renderValue = (value) => {
-    const option = getOption(value);
-    return /* @__PURE__ */ React.createElement("b", null, option.label);
-  };
-  return /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined" }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true }, "Convert to:"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: classes.select,
-      variant: "outlined",
-      labelWidth: 100,
-      onChange: handleOnChange,
-      value: currency.kind || NULL_VALUE,
-      renderValue
-    },
-    currencies.map((c) => /* @__PURE__ */ React.createElement(
-      MenuItem,
-      {
-        className: classes.menuItem,
-        key: c.kind || NULL_VALUE,
-        value: c.kind || NULL_VALUE
-      },
-      /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": c.label }, c.label)
-    ))
-  ));
-};
-
-const WhyCostsMatter = () => {
-  return /* @__PURE__ */ React.createElement(Box, { mt: 10, mb: 4 }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "md" }, /* @__PURE__ */ React.createElement(Box, { mt: 2, mb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", align: "center", gutterBottom: true }, "Why cloud costs matter")), /* @__PURE__ */ React.createElement(Grid, { container: true, alignContent: "space-around", spacing: 3, wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Sustainability", " ", /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "globe" }, "\u{1F30E}")), /* @__PURE__ */ React.createElement(Typography, null, "Reducing cloud usage improves our carbon footprint.")), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Revenue", " ", /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      component: "span",
-      role: "img",
-      "aria-label": "money-with-wings"
-    },
-    "\u{1F4B8}"
-  )), /* @__PURE__ */ React.createElement(Typography, null, "Keeping cloud costs well-tuned prevents infrastructure from eating into revenue.")), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Innovation", " ", /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "medal" }, "\u{1F947}")), /* @__PURE__ */ React.createElement(Typography, null, "The more we save, the more we can reinvest in speed and innovation.")))));
-};
-
-const mapLoadingToProps$1 = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });
-const ProductInsightsCard = ({
-  initialState,
-  product,
-  onSelectAsync
-}) => {
-  const classes = useProductInsightsCardStyles();
-  const mountedRef = useRef(false);
-  const [error, setError] = useState(null);
-  const dispatchLoading = useLoading(mapLoadingToProps$1);
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const [entity, setEntity] = useState(initialState.entity);
-  const [duration, setDuration] = useState(initialState.duration);
-  const dispatchLoadingProduct = useCallback(dispatchLoading, []);
-  useEffect(() => {
-    async function handleOnSelectAsync() {
-      dispatchLoadingProduct(true);
-      try {
-        const e = await onSelectAsync(product, duration);
-        setEntity(e);
-      } catch (e) {
-        setEntity(null);
-        setError(e);
-      } finally {
-        dispatchLoadingProduct(false);
-      }
-    }
-    if (mountedRef.current) {
-      handleOnSelectAsync();
-    } else {
-      mountedRef.current = true;
-    }
-  }, [product, duration, onSelectAsync, dispatchLoadingProduct]);
-  const entityKey = findAnyKey(entity == null ? void 0 : entity.entities);
-  const entities = entityKey ? entity.entities[entityKey] : [];
-  const subheader = entityKey && entities.length ? `${pluralize(entityKey, entities.length, true)}, sorted by cost` : null;
-  const headerProps = {
-    classes,
-    action: /* @__PURE__ */ React.createElement(PeriodSelect, { duration, onSelect: setDuration })
-  };
-  if (error || !entity) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { title: product.name, headerProps }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: product.kind }), /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error ? error.message : `Error: Could not fetch product insights for ${product.name}`));
-  }
-  return /* @__PURE__ */ React.createElement(
-    InfoCard,
-    {
-      title: product.name,
-      subheader,
-      headerProps
-    },
-    /* @__PURE__ */ React.createElement(ScrollAnchor, { id: product.kind }),
-    entities.length ? /* @__PURE__ */ React.createElement(
-      ProductInsightsChart,
-      {
-        entity,
-        duration,
-        billingDate: lastCompleteBillingDate
-      }
-    ) : /* @__PURE__ */ React.createElement(Typography, null, "There are no ", product.name, " costs within this time frame for your team's projects.")
-  );
-};
-
-const ProductInsightsCardList = ({
-  initialStates,
-  onSelectAsync
-}) => {
-  if (!initialStates.length) {
-    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-around", alignItems: "center" }, /* @__PURE__ */ React.createElement(CircularProgress, null));
-  }
-  return /* @__PURE__ */ React.createElement(Collapse, { in: true, timeout: 1e3 }, initialStates.map(({ product, entity, duration }) => /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      key: product.kind,
-      mb: 6,
-      position: "relative",
-      "data-testid": `product-list-item-${product.kind}`
-    },
-    /* @__PURE__ */ React.createElement(
-      ProductInsightsCard,
-      {
-        product,
-        onSelectAsync,
-        initialState: { entity, duration }
-      }
-    )
-  )));
-};
-
-const mapLoadingToProps = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });
-const ProductInsights = ({
-  group,
-  project,
-  products,
-  onLoaded
-}) => {
-  const client = useApi(costInsightsApiRef);
-  const onceRef = useRef(false);
-  const [initialStates, setStates] = useState([]);
-  const [error, setError] = useState(null);
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const dispatchLoading = useLoading(mapLoadingToProps);
-  const dispatchLoadingProducts = useCallback(dispatchLoading, []);
-  const onSelectAsyncMemo = useCallback(
-    async function onSelectAsync(product, duration) {
-      return client.getProductInsights({
-        group,
-        project,
-        product: product.kind,
-        intervals: intervalsOf(duration, lastCompleteBillingDate)
-      });
-    },
-    [client, group, project, lastCompleteBillingDate]
-  );
-  useEffect(() => {
-    async function getAllProductInsights() {
-      try {
-        dispatchLoadingProducts(true);
-        const responses = await Promise.allSettled(
-          products.map(
-            (product) => client.getProductInsights({
-              group,
-              project,
-              product: product.kind,
-              intervals: intervalsOf(DEFAULT_DURATION, lastCompleteBillingDate)
-            })
-          )
-        ).then(settledResponseOf);
-        const updatedInitialStates = initialStatesOf(products, responses).sort(
-          totalAggregationSort
-        );
-        setStates(updatedInitialStates);
-      } catch (e) {
-        setError(e);
-      } finally {
-        dispatchLoadingProducts(false);
-      }
-    }
-    getAllProductInsights();
-  }, [
-    client,
-    group,
-    project,
-    products,
-    lastCompleteBillingDate,
-    dispatchLoadingProducts
-  ]);
-  useEffect(
-    function handleOnLoaded() {
-      if (onceRef.current) {
-        const initialProducts = initialStates.map((state) => state.product);
-        onLoaded(initialProducts);
-      } else {
-        onceRef.current = true;
-      }
-    },
-    [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
-    }
-  ));
-};
-
-const ProjectSelect = ({
-  project,
-  projects,
-  onSelect
-}) => {
-  const classes = useSelectStyles();
-  const projectOptions = projects.filter((p) => p.id).sort(
-    (a, b) => {
-      var _a, _b;
-      return ((_a = a.name) != null ? _a : a.id).localeCompare((_b = b.name) != null ? _b : b.id);
-    }
-  );
-  const handleOnChange = (e) => {
-    onSelect(e.target.value);
-  };
-  const renderValue = (value) => {
-    var _a;
-    const proj = value;
-    const projectObj = projects.find((p) => p.id === proj);
-    return /* @__PURE__ */ React.createElement("b", { "data-testid": `selected-${proj}` }, proj === "all" ? "All Projects" : (_a = projectObj == null ? void 0 : projectObj.name) != null ? _a : proj);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: classes.select,
-      variant: "outlined",
-      value: project != null ? project : "all",
-      renderValue,
-      onChange: handleOnChange,
-      "data-testid": "project-filter-select"
-    },
-    [{ id: "all" }, ...projectOptions].map((proj) => {
-      var _a;
-      return /* @__PURE__ */ React.createElement(
-        MenuItem,
-        {
-          className: `${classes.menuItem} compact`,
-          key: proj.id,
-          value: proj.id,
-          "data-testid": `option-${proj.id}`
-        },
-        proj.id === "all" ? "All Projects" : (_a = proj.name) != null ? _a : proj.id
-      );
-    })
-  );
-};
-
-const CostInsightsPage = () => {
-  var _a;
-  const classes = useSubtleTypographyStyles();
-  const client = useApi(costInsightsApiRef);
-  const config = useConfig();
-  const groups = useGroups();
-  const lastCompleteBillingDate = useLastCompleteBillingDate();
-  const [alerts, setAlerts] = useState([]);
-  const [currency, setCurrency] = useCurrency();
-  const [projects, setProjects] = useState(null);
-  const [products, setProducts] = useState(null);
-  const [dailyCost, setDailyCost] = useState(null);
-  const [metricData, setMetricData] = useState(null);
-  const [error, setError] = useState(null);
-  const { pageFilters, setPageFilters } = useFilters((p) => p);
-  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);
-  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);
-  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);
-  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);
-  const isProductsDisplayed = !!((_a = config.products) == null ? void 0 : _a.length);
-  const isActionItemsDisplayed = !!active.length;
-  const isAlertInsightsDisplayed = !!alerts.length;
-  const {
-    loadingActions,
-    loadingGroups,
-    loadingBillingDate,
-    loadingInitial,
-    dispatchInitial,
-    dispatchInsights,
-    dispatchNone,
-    dispatchReset
-  } = useLoading(mapLoadingToProps$2);
-  const dispatchLoadingInitial = useCallback(dispatchInitial, []);
-  const dispatchLoadingInsights = useCallback(dispatchInsights, []);
-  const dispatchLoadingNone = useCallback(dispatchNone, []);
-  const dispatchLoadingReset = useCallback(dispatchReset, []);
-  const setProject = (project) => setPageFilters({
-    ...pageFilters,
-    project: project === "all" ? null : project
-  });
-  useEffect(() => {
-    async function getInsights() {
-      setError(null);
-      try {
-        if (pageFilters.group) {
-          dispatchLoadingInsights(true);
-          const intervals = intervalsOf(
-            pageFilters.duration,
-            lastCompleteBillingDate
-          );
-          const [
-            fetchedProjects,
-            fetchedAlerts,
-            fetchedMetricData,
-            fetchedDailyCost
-          ] = await Promise.all([
-            client.getGroupProjects(pageFilters.group),
-            client.getAlerts(pageFilters.group),
-            pageFilters.metric ? client.getDailyMetricData(pageFilters.metric, intervals) : null,
-            pageFilters.project ? client.getProjectDailyCost(pageFilters.project, intervals) : client.getGroupDailyCost(pageFilters.group, intervals)
-          ]);
-          setProjects(fetchedProjects);
-          setAlerts(fetchedAlerts);
-          setMetricData(fetchedMetricData);
-          setDailyCost(fetchedDailyCost);
-        } else {
-          dispatchLoadingNone(loadingActions);
-        }
-      } catch (e) {
-        setError(e);
-        dispatchLoadingNone(loadingActions);
-      } finally {
-        dispatchLoadingInitial(false);
-        dispatchLoadingInsights(false);
-      }
-    }
-    if (!(loadingGroups && loadingBillingDate)) {
-      getInsights();
-    }
-  }, [
-    client,
-    pageFilters,
-    loadingActions,
-    loadingGroups,
-    loadingBillingDate,
-    dispatchLoadingInsights,
-    dispatchLoadingInitial,
-    dispatchLoadingNone,
-    lastCompleteBillingDate
-  ]);
-  if (loadingInitial) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, 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)));
-  }
-  if (!dailyCost) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, `Error: Could not fetch cost insights data for team ${pageFilters.group}`);
-  }
-  const onProjectSelect = (project) => {
-    setProject(project);
-    dispatchLoadingReset(loadingActions);
-  };
-  const CostOverviewBanner = () => /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      px: 3,
-      pt: 6,
-      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,
-      {
-        project: pageFilters.project,
-        projects: projects || [],
-        onSelect: onProjectSelect
-      }
-    ))
-  );
-  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
-    }
-  ))))))));
-};
-
-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)))))))));
-
-export { CostInsightsPageRoot as CostInsightsPage };
-//# sourceMappingURL=index-DaitkcPN.esm.js.map