From 9ba282f7c7bd402a64dcc79c5287c824df0505e6 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicush@spotify.com>
Date: Mon, 25 Jan 2021 20:15:50 -0700
Subject: [PATCH] Update comments, use MUI's capitalize

---
 plugins/cost-insights/src/client.ts                       | 8 ++++----
 .../src/components/CostOverviewCard/CostOverviewCard.tsx  | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/plugins/cost-insights/src/client.ts b/plugins/cost-insights/src/client.ts
index c43deba6ae..fa9a1d23f5 100644
--- a/plugins/cost-insights/src/client.ts
+++ b/plugins/cost-insights/src/client.ts
@@ -100,8 +100,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
         aggregation: aggregation,
         change: changeOf(aggregation),
         trendline: trendlineOf(aggregation),
-        // Optional field on Cost which needs to be supplied in order to see
-        // the product breakdown view in the top panel.
+        // 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),
@@ -121,8 +121,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
         aggregation: aggregation,
         change: changeOf(aggregation),
         trendline: trendlineOf(aggregation),
-        // Optional field on Cost which needs to be supplied in order to see
-        // the product breakdown view in the top panel.
+        // Optional field providing cost groupings / breakdowns keyed by the type. In this example,
+        // daily project cost grouped by cloud product.
         groupedCosts: {
           product: getGroupedProducts(intervals),
         },
diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
index 614e045b20..56414c9a0e 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx
@@ -17,6 +17,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   Box,
+  capitalize,
   Card,
   CardContent,
   Divider,
@@ -72,7 +73,7 @@ export const CostOverviewCard = ({
     key => ({
       id: key,
       label: `Breakdown by ${key}`,
-      title: `Cloud Cost By ${key.charAt(0).toUpperCase() + key.slice(1)}`,
+      title: `Cloud Cost By ${capitalize(key)}`,
     }),
   );
   const tabs = [