Switch ProjectGrowthAlertData to expect ISO 8601 quarter format

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,

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 () => {

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>

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,