From 66e503cea9053694cf26f7f6d97a3a3e0caa0136 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicush@spotify.com>
Date: Fri, 23 Oct 2020 12:54:52 -0600
Subject: [PATCH] Switch ProjectGrowthAlertData to expect ISO 8601 quarter
 format

---
 .../cost-insights/ExampleCostInsightsClient.ts      |  4 ++--
 .../ProjectGrowthAlertCard.test.tsx                 |  9 +++------
 .../ProjectGrowthAlertCard.tsx                      | 13 +++++++++----
 plugins/cost-insights/src/utils/mockData.ts         |  4 ++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts b/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts
index 42f010a645..799b9e1975 100644
--- a/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts
+++ b/packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts
@@ -278,8 +278,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
   async getAlerts(group: string): Promise<Alert[]> {
     const projectGrowthData: ProjectGrowthData = {
       project: 'example-project',
-      periodStart: 'Q2 2020',
-      periodEnd: 'Q3 2020',
+      periodStart: '2020-Q2',
+      periodEnd: '2020-Q3',
       aggregation: [60_000, 120_000],
       change: {
         ratio: 1,
diff --git a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx
index 49bcf4d465..dd70433003 100644
--- a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx
+++ b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx
@@ -62,12 +62,9 @@ describe('<ProjectGrowthAlertCard />', () => {
     );
     expect(rendered.getByText(title)).toBeInTheDocument();
     expect(rendered.getByText(subheader)).toBeInTheDocument();
-    expect(
-      rendered.getByText(MockProjectGrowthAlert.periodStart),
-    ).toBeInTheDocument();
-    expect(
-      rendered.getByText(MockProjectGrowthAlert.periodEnd),
-    ).toBeInTheDocument();
+    // ISO 8601 quarter format (YYYY-QX) should be transformed to QX YYYY
+    expect(rendered.getByText('Q4 2019')).toBeInTheDocument();
+    expect(rendered.getByText('Q1 2020')).toBeInTheDocument();
   });
 
   it('renders the correct title and subheader for a single service', async () => {
diff --git a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
index ed9450837f..1b37a5a131 100644
--- a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
+++ b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import moment from 'moment';
 import { Box } from '@material-ui/core';
 import { InfoCard } from '@backstage/core';
 import ResourceGrowthBarChart from '../ResourceGrowthBarChart';
@@ -33,6 +34,10 @@ const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
     ${alert.products.length} ${pluralOf(alert.products.length, 'product')}${
     alert.products.length > 1 ? ', sorted by cost' : ''
   }`;
+  const previousName = moment(alert.periodStart, 'YYYY-[Q]Q').format(
+    '[Q]Q YYYY',
+  );
+  const currentName = moment(alert.periodEnd, 'YYYY-[Q]Q').format('[Q]Q YYYY');
 
   return (
     <InfoCard
@@ -44,16 +49,16 @@ const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
           <ResourceGrowthBarChartLegend
             change={alert.change}
             duration={Duration.P3M}
-            previousName={alert.periodStart}
-            currentName={alert.periodEnd}
+            previousName={previousName}
+            currentName={currentName}
             costStart={costStart}
             costEnd={costEnd}
           />
         </Box>
         <ResourceGrowthBarChart
           resources={alert.products}
-          previousName={alert.periodStart}
-          currentName={alert.periodEnd}
+          previousName={previousName}
+          currentName={currentName}
         />
       </Box>
     </InfoCard>
diff --git a/plugins/cost-insights/src/utils/mockData.ts b/plugins/cost-insights/src/utils/mockData.ts
index b97815289b..a25f0dad20 100644
--- a/plugins/cost-insights/src/utils/mockData.ts
+++ b/plugins/cost-insights/src/utils/mockData.ts
@@ -78,8 +78,8 @@ export const createMockProjectGrowthData = (
 ): ProjectGrowthData => {
   const data: ProjectGrowthData = {
     project: 'test-project-growth-alert',
-    periodStart: 'Q4 2019',
-    periodEnd: 'Q1 2020',
+    periodStart: '2019-Q4',
+    periodEnd: '2020-Q1',
     aggregation: [670532.1, 970502.8],
     change: {
       ratio: 0.5,