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

package/dist/example/client.esm.js

@@ -0,0 +1,194 @@
+import { DateTime } from 'luxon';
+import '../types/Alert.esm.js';
+import { DEFAULT_DATE_FORMAT } from '../types/DateFormat.esm.js';
+import { KubernetesMigrationAlert } from './alerts/KubernetesMigrationAlert.esm.js';
+import { ProjectGrowthAlert } from '../alerts/ProjectGrowthAlert.esm.js';
+import { UnlabeledDataflowAlert } from '../alerts/UnlabeledDataflowAlert.esm.js';
+import '../testUtils/products.esm.js';
+import '../testUtils/filters.esm.js';
+import '../testUtils/loading.esm.js';
+import 'react';
+import '../hooks/useConfig.esm.js';
+import '../hooks/useCurrency.esm.js';
+import '../hooks/useFilters.esm.js';
+import '../hooks/useGroups.esm.js';
+import '../hooks/useLoading.esm.js';
+import '../hooks/useScroll.esm.js';
+import '../hooks/useLastCompleteBillingDate.esm.js';
+import '../utils/currency.esm.js';
+import { aggregationFor, changeOf, trendlineOf, getGroupedProducts, getGroupedProjects, entityOf } from '../testUtils/testUtils.esm.js';
+
+class ExampleCostInsightsClient {
+  request(_, res) {
+    return new Promise((resolve) => setTimeout(resolve, 0, res));
+  }
+  getLastCompleteBillingDate() {
+    return Promise.resolve(
+      DateTime.now().minus({ days: 1 }).toFormat(DEFAULT_DATE_FORMAT)
+    );
+  }
+  async getUserGroups(userId) {
+    const groups = await this.request({ userId }, [
+      { id: "group-a", name: "Group A" },
+      { id: "group-b", name: "Group B" }
+    ]);
+    return groups;
+  }
+  async getGroupProjects(group) {
+    const projects = await this.request({ group }, [
+      { id: "project-a" },
+      { id: "project-b" },
+      { id: "project-c" }
+    ]);
+    return projects;
+  }
+  async getDailyMetricData(metric, intervals) {
+    const aggregation = aggregationFor(intervals, 1e5).map((entry) => ({
+      ...entry,
+      amount: Math.round(entry.amount)
+    }));
+    const cost = await this.request(
+      { metric, intervals },
+      {
+        format: "number",
+        aggregation,
+        change: changeOf(aggregation),
+        trendline: trendlineOf(aggregation)
+      }
+    );
+    return cost;
+  }
+  async getCatalogEntityDailyCost(entityRef, intervals) {
+    const aggregation = aggregationFor(intervals, 8e3);
+    const groupDailyCost = await this.request(
+      { entityRef, intervals },
+      {
+        aggregation,
+        change: changeOf(aggregation),
+        trendline: trendlineOf(aggregation),
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily cost grouped by cloud product OR by project / billing account.
+        groupedCosts: {
+          product: getGroupedProducts(intervals),
+          project: getGroupedProjects(intervals)
+        }
+      }
+    );
+    return groupDailyCost;
+  }
+  async getGroupDailyCost(group, intervals) {
+    const aggregation = aggregationFor(intervals, 8e3);
+    const groupDailyCost = await this.request(
+      { group, intervals },
+      {
+        aggregation,
+        change: changeOf(aggregation),
+        trendline: trendlineOf(aggregation),
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily cost grouped by cloud product OR by project / billing account.
+        groupedCosts: {
+          product: getGroupedProducts(intervals),
+          project: getGroupedProjects(intervals)
+        }
+      }
+    );
+    return groupDailyCost;
+  }
+  async getProjectDailyCost(project, intervals) {
+    const aggregation = aggregationFor(intervals, 1500);
+    const projectDailyCost = await this.request(
+      { project, intervals },
+      {
+        id: "project-a",
+        aggregation,
+        change: changeOf(aggregation),
+        trendline: trendlineOf(aggregation),
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily project cost grouped by cloud product.
+        groupedCosts: {
+          product: getGroupedProducts(intervals)
+        }
+      }
+    );
+    return projectDailyCost;
+  }
+  async getProductInsights(options) {
+    const productInsights = await this.request(
+      options,
+      entityOf(options.product)
+    );
+    return productInsights;
+  }
+  async getAlerts(group) {
+    const projectGrowthData = {
+      project: "example-project",
+      periodStart: "2020-Q2",
+      periodEnd: "2020-Q3",
+      aggregation: [6e4, 12e4],
+      change: {
+        ratio: 1,
+        amount: 6e4
+      },
+      products: [
+        { id: "Compute Engine", aggregation: [58e3, 118e3] },
+        { id: "Cloud Dataflow", aggregation: [1200, 1500] },
+        { id: "Cloud Storage", aggregation: [800, 500] }
+      ]
+    };
+    const unlabeledDataflowData = {
+      periodStart: "2020-09-01",
+      periodEnd: "2020-09-30",
+      labeledCost: 6200,
+      unlabeledCost: 7e3,
+      projects: [
+        {
+          id: "example-project-1",
+          unlabeledCost: 5e3,
+          labeledCost: 3e3
+        },
+        {
+          id: "example-project-2",
+          unlabeledCost: 2e3,
+          labeledCost: 3200
+        }
+      ]
+    };
+    const today = DateTime.now();
+    const alerts = await this.request({ group }, [
+      new ProjectGrowthAlert(projectGrowthData),
+      new UnlabeledDataflowAlert(unlabeledDataflowData),
+      new KubernetesMigrationAlert(this, {
+        startDate: today.minus({ days: 30 }).toFormat(DEFAULT_DATE_FORMAT),
+        endDate: today.toFormat(DEFAULT_DATE_FORMAT),
+        change: {
+          ratio: 0,
+          amount: 0
+        },
+        services: [
+          {
+            id: "service-a",
+            aggregation: [2e4, 1e4],
+            change: {
+              ratio: -0.5,
+              amount: -1e4
+            },
+            entities: {}
+          },
+          {
+            id: "service-b",
+            aggregation: [3e4, 15e3],
+            change: {
+              ratio: -0.5,
+              amount: -15e3
+            },
+            entities: {}
+          }
+        ]
+      })
+    ]);
+    return alerts;
+  }
+}
+
+export { ExampleCostInsightsClient };
+//# sourceMappingURL=client.esm.js.map

package/dist/example/client.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.esm.js","sources":["../../src/example/client.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/* eslint-disable no-restricted-imports */\n\nimport { DateTime } from 'luxon';\nimport { CostInsightsApi, ProductInsightsOptions } from '../api';\nimport {\n  Alert,\n  DEFAULT_DATE_FORMAT,\n  ProjectGrowthData,\n  UnlabeledDataflowData,\n} from '../types';\nimport {\n  Entity,\n  Group,\n  MetricData,\n  Project,\n  Cost,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { KubernetesMigrationAlert } from './alerts';\nimport { ProjectGrowthAlert, UnlabeledDataflowAlert } from '../alerts';\nimport {\n  aggregationFor,\n  changeOf,\n  entityOf,\n  getGroupedProducts,\n  getGroupedProjects,\n  trendlineOf,\n} from '../testUtils';\n\n/** @public */\nexport class ExampleCostInsightsClient implements CostInsightsApi {\n  private request(_: any, res: any): Promise<any> {\n    return new Promise(resolve => setTimeout(resolve, 0, res));\n  }\n\n  getLastCompleteBillingDate(): Promise<string> {\n    return Promise.resolve(\n      DateTime.now().minus({ days: 1 }).toFormat(DEFAULT_DATE_FORMAT),\n    );\n  }\n\n  async getUserGroups(userId: string): Promise<Group[]> {\n    const groups: Group[] = await this.request({ userId }, [\n      { id: 'group-a', name: 'Group A' },\n      { id: 'group-b', name: 'Group B' },\n    ]);\n\n    return groups;\n  }\n\n  async getGroupProjects(group: string): Promise<Project[]> {\n    const projects: Project[] = await this.request({ group }, [\n      { id: 'project-a' },\n      { id: 'project-b' },\n      { id: 'project-c' },\n    ]);\n\n    return projects;\n  }\n\n  async getDailyMetricData(\n    metric: string,\n    intervals: string,\n  ): Promise<MetricData> {\n    const aggregation = aggregationFor(intervals, 100_000).map(entry => ({\n      ...entry,\n      amount: Math.round(entry.amount),\n    }));\n\n    const cost: MetricData = await this.request(\n      { metric, intervals },\n      {\n        format: 'number',\n        aggregation: aggregation,\n        change: changeOf(aggregation),\n        trendline: trendlineOf(aggregation),\n      },\n    );\n\n    return cost;\n  }\n\n  async getCatalogEntityDailyCost(\n    entityRef: string,\n    intervals: string,\n  ): Promise<Cost> {\n    const aggregation = aggregationFor(intervals, 8_000);\n    const groupDailyCost: Cost = await this.request(\n      { entityRef, intervals },\n      {\n        aggregation: aggregation,\n        change: changeOf(aggregation),\n        trendline: trendlineOf(aggregation),\n        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,\n        // daily cost grouped by cloud product OR by project / billing account.\n        groupedCosts: {\n          product: getGroupedProducts(intervals),\n          project: getGroupedProjects(intervals),\n        },\n      },\n    );\n\n    return groupDailyCost;\n  }\n\n  async getGroupDailyCost(group: string, intervals: string): Promise<Cost> {\n    const aggregation = aggregationFor(intervals, 8_000);\n    const groupDailyCost: Cost = await this.request(\n      { group, intervals },\n      {\n        aggregation: aggregation,\n        change: changeOf(aggregation),\n        trendline: trendlineOf(aggregation),\n        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,\n        // daily cost grouped by cloud product OR by project / billing account.\n        groupedCosts: {\n          product: getGroupedProducts(intervals),\n          project: getGroupedProjects(intervals),\n        },\n      },\n    );\n\n    return groupDailyCost;\n  }\n\n  async getProjectDailyCost(project: string, intervals: string): Promise<Cost> {\n    const aggregation = aggregationFor(intervals, 1_500);\n    const projectDailyCost: Cost = await this.request(\n      { project, intervals },\n      {\n        id: 'project-a',\n        aggregation: aggregation,\n        change: changeOf(aggregation),\n        trendline: trendlineOf(aggregation),\n        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,\n        // daily project cost grouped by cloud product.\n        groupedCosts: {\n          product: getGroupedProducts(intervals),\n        },\n      },\n    );\n\n    return projectDailyCost;\n  }\n\n  async getProductInsights(options: ProductInsightsOptions): Promise<Entity> {\n    const productInsights: Entity = await this.request(\n      options,\n      entityOf(options.product),\n    );\n\n    return productInsights;\n  }\n\n  async getAlerts(group: string): Promise<Alert[]> {\n    const projectGrowthData: ProjectGrowthData = {\n      project: 'example-project',\n      periodStart: '2020-Q2',\n      periodEnd: '2020-Q3',\n      aggregation: [60_000, 120_000],\n      change: {\n        ratio: 1,\n        amount: 60_000,\n      },\n      products: [\n        { id: 'Compute Engine', aggregation: [58_000, 118_000] },\n        { id: 'Cloud Dataflow', aggregation: [1200, 1500] },\n        { id: 'Cloud Storage', aggregation: [800, 500] },\n      ],\n    };\n\n    const unlabeledDataflowData: UnlabeledDataflowData = {\n      periodStart: '2020-09-01',\n      periodEnd: '2020-09-30',\n      labeledCost: 6_200,\n      unlabeledCost: 7_000,\n      projects: [\n        {\n          id: 'example-project-1',\n          unlabeledCost: 5_000,\n          labeledCost: 3_000,\n        },\n        {\n          id: 'example-project-2',\n          unlabeledCost: 2_000,\n          labeledCost: 3_200,\n        },\n      ],\n    };\n\n    const today = DateTime.now();\n    const alerts: Alert[] = await this.request({ group }, [\n      new ProjectGrowthAlert(projectGrowthData),\n      new UnlabeledDataflowAlert(unlabeledDataflowData),\n      new KubernetesMigrationAlert(this, {\n        startDate: today.minus({ days: 30 }).toFormat(DEFAULT_DATE_FORMAT),\n        endDate: today.toFormat(DEFAULT_DATE_FORMAT),\n        change: {\n          ratio: 0,\n          amount: 0,\n        },\n        services: [\n          {\n            id: 'service-a',\n            aggregation: [20_000, 10_000],\n            change: {\n              ratio: -0.5,\n              amount: -10_000,\n            },\n            entities: {},\n          },\n          {\n            id: 'service-b',\n            aggregation: [30_000, 15_000],\n            change: {\n              ratio: -0.5,\n              amount: -15_000,\n            },\n            entities: {},\n          },\n        ],\n      }),\n    ]);\n\n    return alerts;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.esm.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import { KubernetesMigrationBarChartLegend } from './KubernetesMigrationBarChartLegend.esm.js';
+import { KubernetesMigrationBarChart } from './KubernetesMigrationBarChart.esm.js';
+import { InfoCard } from '@backstage/core-components';
+
+const KubernetesMigrationAlertCard = ({
+  data,
+  title,
+  subheader,
+  currentProduct,
+  comparedProduct
+}) => {
+  return /* @__PURE__ */ React.createElement(InfoCard, { title, subheader }, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { paddingY: 1 }, /* @__PURE__ */ React.createElement(
+    KubernetesMigrationBarChartLegend,
+    {
+      startDate: data.startDate,
+      change: data.change,
+      currentProduct,
+      comparedProduct
+    }
+  )), /* @__PURE__ */ React.createElement(Box, { paddingY: 1 }, /* @__PURE__ */ React.createElement(
+    KubernetesMigrationBarChart,
+    {
+      services: data.services,
+      currentProduct,
+      comparedProduct
+    }
+  ))));
+};
+
+export { KubernetesMigrationAlertCard };
+//# sourceMappingURL=KubernetesMigrationAlertCard.esm.js.map

package/dist/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KubernetesMigrationAlertCard.esm.js","sources":["../../../../src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Box from '@material-ui/core/Box';\nimport { KubernetesMigrationBarChartLegend } from './KubernetesMigrationBarChartLegend';\nimport { KubernetesMigrationBarChart } from './KubernetesMigrationBarChart';\nimport { KubernetesMigrationData } from '../../alerts';\nimport { InfoCard } from '@backstage/core-components';\n\ntype KubernetesMigrationAlertProps = {\n  data: KubernetesMigrationData;\n  title: string;\n  subheader: string;\n  currentProduct: string;\n  comparedProduct: string;\n};\n\nexport const KubernetesMigrationAlertCard = ({\n  data,\n  title,\n  subheader,\n  currentProduct,\n  comparedProduct,\n}: KubernetesMigrationAlertProps) => {\n  return (\n    <InfoCard title={title} subheader={subheader}>\n      <Box display=\"flex\" flexDirection=\"column\">\n        <Box paddingY={1}>\n          <KubernetesMigrationBarChartLegend\n            startDate={data.startDate}\n            change={data.change}\n            currentProduct={currentProduct}\n            comparedProduct={comparedProduct}\n          />\n        </Box>\n        <Box paddingY={1}>\n          <KubernetesMigrationBarChart\n            services={data.services}\n            currentProduct={currentProduct}\n            comparedProduct={comparedProduct}\n          />\n        </Box>\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AACF,CAAqC,KAAA;AACnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAc,EAAA,SAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,aAAc,EAAA,QAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAU,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iCAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAK,CAAA,SAAA;AAAA,MAChB,QAAQ,IAAK,CAAA,MAAA;AAAA,MACb,cAAA;AAAA,MACA,eAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAU,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,2BAAA;AAAA,IAAA;AAAA,MACC,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,cAAA;AAAA,MACA,eAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/{esm/index-BTIHr4n_.esm.js → example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.esm.js}

@@ -1,14 +1,9 @@
-export { P as ProjectGrowthInstructionsPage } from './index-BFM2mP6Z.esm.js';
-import '@backstage/core-plugin-api';
-import 'react';
-import 'pluralize';
-import '@material-ui/core/Typography';
-import '@material-ui/core/Box';
-import '@material-ui/core/styles';
+import React from 'react';
 import '@material-ui/core/Avatar';
 import '@material-ui/core/Tooltip';
 import '@material-ui/core/IconButton';
 import '@material-ui/core/Badge';
+import '@material-ui/core/Box';
 import '@material-ui/core/Paper';
 import '@material-ui/core/Divider';
 import '@material-ui/icons/AccessTime';
@@ -17,67 +12,93 @@ import '@material-ui/icons/Delete';
 import 'classnames';
 import '@material-ui/core/Card';
 import '@material-ui/core/CardHeader';
-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 '@material-ui/lab/Alert';
-import 'react-router-dom';
-import 'qs';
-import 'yup';
-import '@material-ui/core/Backdrop';
-import '@material-ui/core/CircularProgress';
-import 'luxon';
-import '@material-ui/core/styles/colorManipulator';
-import '@backstage/catalog-model';
+import '../../../hooks/useConfig.esm.js';
+import '../../../hooks/useCurrency.esm.js';
+import '../../../hooks/useFilters.esm.js';
+import '../../../hooks/useGroups.esm.js';
+import '../../../hooks/useLoading.esm.js';
+import '../../../hooks/useScroll.esm.js';
+import '../../../hooks/useLastCompleteBillingDate.esm.js';
+import '../../../utils/styles.esm.js';
+import '../../../types/Alert.esm.js';
+import 'pluralize';
 import '@material-ui/core/Grid';
 import '@material-ui/core/Snackbar';
+import '@material-ui/lab/Alert';
 import '@material-ui/core/utils';
 import '@material-ui/core/Button';
 import '@material-ui/core/Dialog';
 import '@material-ui/core/DialogActions';
 import '@material-ui/core/DialogContent';
+import '@material-ui/core/Typography';
 import '@material-ui/icons/Close';
-import '@material-ui/core/Checkbox';
-import '@material-ui/core/FormControl';
-import '@material-ui/core/FormControlLabel';
-import '@material-ui/core/RadioGroup';
-import '@material-ui/core/Radio';
+import '../../../utils/alerts.esm.js';
 import '@material-ui/core/Collapse';
-import '@material-ui/core/TextField';
 import '@material-ui/icons/ExpandMore';
-import '@material-ui/core/Container';
-import '@material-ui/icons/ChevronLeft';
-import '@backstage/core-components';
-import 'recharts';
-import '@material-ui/core/Slide';
-import '@material-ui/icons/ChevronRight';
-import '@material-ui/core/ButtonBase';
+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 '../../../utils/duration.esm.js';
+import '../../../components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js';
+import { BarChart } from '../../../components/BarChart/BarChart.esm.js';
+import { useTheme } from '@material-ui/core/styles';
 import '@material-ui/icons/Lens';
 import '@material-ui/icons/HelpOutlineOutlined';
+import 'luxon';
+import 'react-router-dom';
 import 'react-use/esm/useCopyToClipboard';
 import '@material-ui/icons/AssignmentOutlined';
 import '@material-ui/icons/AssignmentTurnedInOutlined';
 import '@material-ui/icons/SentimentVeryDissatisfied';
+import '../../../utils/currency.esm.js';
 import '@material-ui/icons/ArrowDropUp';
 import '@material-ui/icons/ArrowDropDown';
 import 'react-use/esm/useAsync';
-import '@material-ui/core/Menu';
-import '@material-ui/core/MenuItem';
-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 '@backstage/core-plugin-api';
+import '../../../components/CostInsightsLayout/CostInsightsLayout.esm.js';
+import '../../../components/CostInsightsNavigation/CostInsightsNavigation.esm.js';
+import '@material-ui/core/Container';
+import '../../../api/CostInsightsApi.esm.js';
 import '@material-ui/core/InputLabel';
 import '@material-ui/core/Select';
+import '@material-ui/core/FormControl';
+import '@material-ui/core/MenuItem';
 import '@material-ui/core/CardContent';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import 'recharts';
+import '@material-ui/core/styles/colorManipulator';
 import '@material-ui/icons/Fullscreen';
-import '@material-ui/core/FormGroup';
-import 'regression';
-//# sourceMappingURL=index-BTIHr4n_.esm.js.map
+import '@material-ui/core/CircularProgress';
+import '@backstage/core-components';
+import '@material-ui/core/Menu';
+import '../../../components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.esm.js';
+
+const KubernetesMigrationBarChart = ({
+  currentProduct,
+  comparedProduct,
+  services
+}) => {
+  const theme = useTheme();
+  const options = {
+    previousFill: theme.palette.magenta,
+    currentFill: theme.palette.yellow,
+    previousName: comparedProduct,
+    currentName: currentProduct
+  };
+  const resources = services.map((service) => ({
+    name: service.id,
+    previous: service.aggregation[0],
+    current: service.aggregation[1]
+  }));
+  return /* @__PURE__ */ React.createElement(BarChart, { resources, options });
+};
+
+export { KubernetesMigrationBarChart };
+//# sourceMappingURL=KubernetesMigrationBarChart.esm.js.map

package/dist/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KubernetesMigrationBarChart.esm.js","sources":["../../../../src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.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 { BarChart } from '../../../components';\nimport {\n  BarChartOptions,\n  CostInsightsTheme,\n  ResourceData,\n} from '../../../types';\nimport { Entity } from '@backstage-community/plugin-cost-insights-common';\nimport { useTheme } from '@material-ui/core/styles';\n\ntype MigrationBarChartProps = {\n  currentProduct: string;\n  comparedProduct: string;\n  services: Array<Entity>;\n};\n\nexport const KubernetesMigrationBarChart = ({\n  currentProduct,\n  comparedProduct,\n  services,\n}: MigrationBarChartProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n\n  const options: BarChartOptions = {\n    previousFill: theme.palette.magenta,\n    currentFill: theme.palette.yellow,\n    previousName: comparedProduct,\n    currentName: currentProduct,\n  };\n\n  const resources: ResourceData[] = services.map(service => ({\n    name: service.id,\n    previous: service.aggregation[0],\n    current: service.aggregation[1],\n  }));\n\n  return <BarChart resources={resources} options={options} />;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,8BAA8B,CAAC;AAAA,EAC1C,cAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,QAAQ,QAA4B,EAAA,CAAA;AAE1C,EAAA,MAAM,OAA2B,GAAA;AAAA,IAC/B,YAAA,EAAc,MAAM,OAAQ,CAAA,OAAA;AAAA,IAC5B,WAAA,EAAa,MAAM,OAAQ,CAAA,MAAA;AAAA,IAC3B,YAAc,EAAA,eAAA;AAAA,IACd,WAAa,EAAA,cAAA;AAAA,GACf,CAAA;AAEA,EAAM,MAAA,SAAA,GAA4B,QAAS,CAAA,GAAA,CAAI,CAAY,OAAA,MAAA;AAAA,IACzD,MAAM,OAAQ,CAAA,EAAA;AAAA,IACd,QAAA,EAAU,OAAQ,CAAA,WAAA,CAAY,CAAC,CAAA;AAAA,IAC/B,OAAA,EAAS,OAAQ,CAAA,WAAA,CAAY,CAAC,CAAA;AAAA,GAC9B,CAAA,CAAA,CAAA;AAEF,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAsB,OAAkB,EAAA,CAAA,CAAA;AAC3D;;;;"}

package/dist/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.esm.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
+import '@material-ui/core/Avatar';
+import '@material-ui/core/Tooltip';
+import '@material-ui/core/IconButton';
+import '@material-ui/core/Badge';
+import '@material-ui/core/Paper';
+import '@material-ui/core/Divider';
+import '@material-ui/icons/AccessTime';
+import '@material-ui/icons/Check';
+import '@material-ui/icons/Delete';
+import 'classnames';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardHeader';
+import '../../../hooks/useConfig.esm.js';
+import '../../../hooks/useCurrency.esm.js';
+import '../../../hooks/useFilters.esm.js';
+import '../../../hooks/useGroups.esm.js';
+import '../../../hooks/useLoading.esm.js';
+import '../../../hooks/useScroll.esm.js';
+import '../../../hooks/useLastCompleteBillingDate.esm.js';
+import '../../../utils/styles.esm.js';
+import '../../../types/Alert.esm.js';
+import { Duration } from '../../../types/Duration.esm.js';
+import 'pluralize';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Snackbar';
+import '@material-ui/lab/Alert';
+import '@material-ui/core/utils';
+import '@material-ui/core/Button';
+import '@material-ui/core/Dialog';
+import '@material-ui/core/DialogActions';
+import '@material-ui/core/DialogContent';
+import '@material-ui/core/Typography';
+import '@material-ui/icons/Close';
+import '../../../utils/alerts.esm.js';
+import '@material-ui/core/Collapse';
+import '@material-ui/icons/ExpandMore';
+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 '../../../utils/duration.esm.js';
+import '../../../components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js';
+import 'recharts';
+import '@material-ui/core/Slide';
+import '@material-ui/icons/ChevronLeft';
+import '@material-ui/icons/ChevronRight';
+import '../../../components/BarChart/BarChartStepperButton.esm.js';
+import '@material-ui/core/ButtonBase';
+import '@material-ui/icons/Lens';
+import { monthOf } from '../../../utils/formatters.esm.js';
+import { LegendItem } from '../../../components/LegendItem/LegendItem.esm.js';
+import 'react-router-dom';
+import 'react-use/esm/useCopyToClipboard';
+import '@material-ui/icons/AssignmentOutlined';
+import '@material-ui/icons/AssignmentTurnedInOutlined';
+import '@material-ui/icons/SentimentVeryDissatisfied';
+import { CostGrowth } from '../../../components/CostGrowth/CostGrowth.esm.js';
+import '@material-ui/icons/ArrowDropUp';
+import '@material-ui/icons/ArrowDropDown';
+import 'luxon';
+import 'react-use/esm/useAsync';
+import '@backstage/core-plugin-api';
+import '../../../components/CostInsightsLayout/CostInsightsLayout.esm.js';
+import '../../../components/CostInsightsNavigation/CostInsightsNavigation.esm.js';
+import '@material-ui/core/Container';
+import '../../../api/CostInsightsApi.esm.js';
+import '@material-ui/core/InputLabel';
+import '@material-ui/core/Select';
+import '@material-ui/core/FormControl';
+import '@material-ui/core/MenuItem';
+import '@material-ui/core/CardContent';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import '@material-ui/core/styles/colorManipulator';
+import '@material-ui/icons/Fullscreen';
+import '@material-ui/core/CircularProgress';
+import '@backstage/core-components';
+import '@material-ui/core/Menu';
+import '../../../components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.esm.js';
+
+const KubernetesMigrationBarChartLegend = ({
+  currentProduct,
+  comparedProduct,
+  change,
+  startDate
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(
+    LegendItem,
+    {
+      title: monthOf(startDate),
+      markerColor: theme.palette.magenta
+    },
+    currentProduct
+  )), /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(LegendItem, { title: "Estimated Cost", markerColor: theme.palette.yellow }, comparedProduct)), /* @__PURE__ */ React.createElement(LegendItem, { title: "Total Savings" }, /* @__PURE__ */ React.createElement(CostGrowth, { change, duration: Duration.P30D })));
+};
+
+export { KubernetesMigrationBarChartLegend };
+//# sourceMappingURL=KubernetesMigrationBarChartLegend.esm.js.map

package/dist/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KubernetesMigrationBarChartLegend.esm.js","sources":["../../../../src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { CostGrowth, LegendItem } from '../../../components';\nimport { CostInsightsTheme, Duration } from '../../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { monthOf } from '../../../utils/formatters';\n\nexport type MigrationBarChartLegendProps = {\n  change: ChangeStatistic;\n  startDate: string;\n  currentProduct: string;\n  comparedProduct: string;\n};\n\nexport const KubernetesMigrationBarChartLegend = ({\n  currentProduct,\n  comparedProduct,\n  change,\n  startDate,\n}: MigrationBarChartLegendProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n  return (\n    <Box display=\"flex\" flexDirection=\"row\">\n      <Box marginRight={2}>\n        <LegendItem\n          title={monthOf(startDate)}\n          markerColor={theme.palette.magenta}\n        >\n          {currentProduct}\n        </LegendItem>\n      </Box>\n      <Box marginRight={2}>\n        <LegendItem title=\"Estimated Cost\" markerColor={theme.palette.yellow}>\n          {comparedProduct}\n        </LegendItem>\n      </Box>\n      <LegendItem title=\"Total Savings\">\n        <CostGrowth change={change} duration={Duration.P30D} />\n      </LegendItem>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,oCAAoC,CAAC;AAAA,EAChD,cAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,QAAQ,QAA4B,EAAA,CAAA;AAC1C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,KAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAa,CAChB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,QAAQ,SAAS,CAAA;AAAA,MACxB,WAAA,EAAa,MAAM,OAAQ,CAAA,OAAA;AAAA,KAAA;AAAA,IAE1B,cAAA;AAAA,GAEL,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,WAAa,EAAA,CAAA,EAAA,kBACf,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,KAAM,EAAA,gBAAA,EAAiB,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,EAAA,EAC3D,eACH,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,eAChB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAgB,QAAU,EAAA,QAAA,CAAS,IAAM,EAAA,CACvD,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/example/forms/KubernetesMigrationDismissForm.esm.js

@@ -0,0 +1,57 @@
+import React, { forwardRef, useState, useEffect } from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import Typography from '@material-ui/core/Typography';
+import { findAlways } from '../../utils/assert.esm.js';
+
+const KubernetesMigrationDismissForm = forwardRef(({ onSubmit, disableSubmit, alert }, ref) => {
+  const [services, setServices] = useState(alert.data.services);
+  const onFormSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({ services });
+  };
+  const onCheckboxChange = (e, checked) => {
+    if (checked) {
+      const service = findAlways(
+        alert.data.services,
+        (s) => s.id === e.target.value
+      );
+      setServices((prevServices) => prevServices.concat(service));
+    } else {
+      setServices(
+        (prevServices) => prevServices.filter((p) => p.id !== e.target.value)
+      );
+    }
+  };
+  useEffect(() => {
+    if (services.length) {
+      disableSubmit(false);
+    } else {
+      disableSubmit(true);
+    }
+  }, [services, disableSubmit]);
+  return (
+    /* All custom forms must accept a ref and implement an onSubmit handler. */
+    /* @__PURE__ */ React.createElement("form", { ref, onSubmit: onFormSubmit }, /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset", fullWidth: true }, /* @__PURE__ */ React.createElement(Typography, { color: "textPrimary" }, /* @__PURE__ */ React.createElement("b", null, "Or choose which services to dismiss this alert for.")), /* @__PURE__ */ React.createElement(FormGroup, null, alert.data.services.map((service, index) => /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        key: `example-option-${index}`,
+        label: service.id,
+        value: service.id,
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            color: "primary",
+            checked: services.some((p) => p.id === service.id),
+            onChange: onCheckboxChange
+          }
+        )
+      }
+    )))))
+  );
+});
+
+export { KubernetesMigrationDismissForm };
+//# sourceMappingURL=KubernetesMigrationDismissForm.esm.js.map

package/dist/example/forms/KubernetesMigrationDismissForm.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KubernetesMigrationDismissForm.esm.js","sources":["../../../src/example/forms/KubernetesMigrationDismissForm.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, {\n  useEffect,\n  useState,\n  forwardRef,\n  FormEventHandler,\n  ChangeEvent,\n} from 'react';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport Typography from '@material-ui/core/Typography';\nimport { AlertFormProps } from '../../types';\nimport { Entity } from '@backstage-community/plugin-cost-insights-common';\nimport { KubernetesMigrationAlert } from '../alerts';\nimport { findAlways } from '../../utils/assert';\n\nexport type KubernetesMigrationDismissFormData = {\n  services: Entity[];\n};\n\nexport type KubernetesMigrationDismissFormProps = AlertFormProps<\n  KubernetesMigrationAlert,\n  KubernetesMigrationDismissFormData\n>;\n\nexport const KubernetesMigrationDismissForm = forwardRef<\n  HTMLFormElement,\n  KubernetesMigrationDismissFormProps\n>(({ onSubmit, disableSubmit, alert }, ref) => {\n  const [services, setServices] = useState<Entity[]>(alert.data.services);\n\n  const onFormSubmit: FormEventHandler = e => {\n    /* Remember to prevent default form behavior */\n    e.preventDefault();\n    onSubmit({ services: services });\n  };\n\n  const onCheckboxChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n  ) => {\n    if (checked) {\n      const service = findAlways(\n        alert.data.services,\n        s => s.id === e.target.value,\n      );\n      setServices(prevServices => prevServices.concat(service));\n    } else {\n      setServices(prevServices =>\n        prevServices.filter(p => p.id !== e.target.value),\n      );\n    }\n  };\n\n  /* Submit button is disabled by default. Use props.disableSubmit to toggle disabled state. */\n  useEffect(() => {\n    if (services.length) {\n      disableSubmit(false);\n    } else {\n      disableSubmit(true);\n    }\n  }, [services, disableSubmit]);\n\n  return (\n    /* All custom forms must accept a ref and implement an onSubmit handler. */\n    <form ref={ref} onSubmit={onFormSubmit}>\n      <FormControl component=\"fieldset\" fullWidth>\n        <Typography color=\"textPrimary\">\n          <b>Or choose which services to dismiss this alert for.</b>\n        </Typography>\n        <FormGroup>\n          {alert.data.services.map((service, index) => (\n            <FormControlLabel\n              key={`example-option-${index}`}\n              label={service.id}\n              value={service.id}\n              control={\n                <Checkbox\n                  color=\"primary\"\n                  checked={services.some(p => p.id === service.id)}\n                  onChange={onCheckboxChange}\n                />\n              }\n            />\n          ))}\n        </FormGroup>\n      </FormControl>\n    </form>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AA0Ca,MAAA,8BAAA,GAAiC,WAG5C,CAAC,EAAE,UAAU,aAAe,EAAA,KAAA,IAAS,GAAQ,KAAA;AAC7C,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAI,QAAmB,CAAA,KAAA,CAAM,KAAK,QAAQ,CAAA,CAAA;AAEtE,EAAA,MAAM,eAAiC,CAAK,CAAA,KAAA;AAE1C,IAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,IAAS,QAAA,CAAA,EAAE,UAAoB,CAAA,CAAA;AAAA,GACjC,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CACvB,CAAA,EACA,OACG,KAAA;AACH,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,MAAM,OAAU,GAAA,UAAA;AAAA,QACd,MAAM,IAAK,CAAA,QAAA;AAAA,QACX,CAAK,CAAA,KAAA,CAAA,CAAE,EAAO,KAAA,CAAA,CAAE,MAAO,CAAA,KAAA;AAAA,OACzB,CAAA;AACA,MAAA,WAAA,CAAY,CAAgB,YAAA,KAAA,YAAA,CAAa,MAAO,CAAA,OAAO,CAAC,CAAA,CAAA;AAAA,KACnD,MAAA;AACL,MAAA,WAAA;AAAA,QAAY,CAAA,YAAA,KACV,aAAa,MAAO,CAAA,CAAA,CAAA,KAAK,EAAE,EAAO,KAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,OAClD,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,MAAQ,EAAA;AACnB,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,KACd,MAAA;AACL,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,KACpB;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,aAAa,CAAC,CAAA,CAAA;AAE5B,EAAA;AAAA;AAAA,oBAEG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,GAAU,EAAA,QAAA,EAAU,YACxB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAU,UAAW,EAAA,SAAA,EAAS,IACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,aAChB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAE,EAAA,IAAA,EAAA,qDAAmD,CACxD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EACE,KAAM,CAAA,IAAA,CAAK,QAAS,CAAA,GAAA,CAAI,CAAC,OAAA,EAAS,KACjC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,kBAAkB,KAAK,CAAA,CAAA;AAAA,QAC5B,OAAO,OAAQ,CAAA,EAAA;AAAA,QACf,OAAO,OAAQ,CAAA,EAAA;AAAA,QACf,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,SAAA;AAAA,YACN,SAAS,QAAS,CAAA,IAAA,CAAK,OAAK,CAAE,CAAA,EAAA,KAAO,QAAQ,EAAE,CAAA;AAAA,YAC/C,QAAU,EAAA,gBAAA;AAAA,WAAA;AAAA,SACZ;AAAA,OAAA;AAAA,KAGL,CACH,CACF,CACF,CAAA;AAAA,IAAA;AAEJ,CAAC;;;;"}

package/dist/forms/AlertAcceptForm.esm.js

@@ -0,0 +1,27 @@
+import React, { forwardRef, useState } from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const AlertAcceptForm = forwardRef(({ onSubmit, disableSubmit }, ref) => {
+  const [checked, setChecked] = useState(false);
+  const onFormSubmit = (e) => {
+    e.preventDefault();
+    onSubmit(null);
+  };
+  const onChecked = (_, isChecked) => {
+    setChecked(isChecked);
+    disableSubmit(!isChecked);
+  };
+  return /* @__PURE__ */ React.createElement("form", { ref, onSubmit: onFormSubmit }, /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset", fullWidth: true }, /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      label: "My team can commit to making this change soon, or has already.",
+      value: checked,
+      control: /* @__PURE__ */ React.createElement(Checkbox, { color: "primary", checked, onChange: onChecked })
+    }
+  )));
+});
+
+export { AlertAcceptForm };
+//# sourceMappingURL=AlertAcceptForm.esm.js.map