Fix ProjectGrowthAlert period display

Wait for lastCompleteBillingData

plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx

@@ -73,6 +73,7 @@ const CostInsightsPage = () => {
   const {
     loadingActions,
     loadingGroups,
+    loadingBillingDate,
     loadingInitial,
     dispatchInitial,
     dispatchInsights,
@@ -140,8 +141,8 @@ const CostInsightsPage = () => {
       }
     }
 
-    // Wait for user groups to finish loading
-    if (!loadingGroups) {
+    // Wait for metadata to finish loading
+    if (!(loadingGroups && loadingBillingDate)) {
       getInsights();
     }
   }, [
@@ -149,6 +150,7 @@ const CostInsightsPage = () => {
     pageFilters,
     loadingActions,
     loadingGroups,
+    loadingBillingDate,
     dispatchLoadingInsights,
     dispatchLoadingInitial,
     dispatchLoadingNone,

plugins/cost-insights/src/components/CostInsightsPage/selector.tsx

@@ -23,6 +23,7 @@ import {
 type CostInsightsPageLoadingProps = {
   loadingActions: Array<string>;
   loadingGroups: boolean;
+  loadingBillingDate: boolean;
   loadingInitial: boolean;
   dispatchInitial: (isLoading: boolean) => void;
   dispatchInsights: (isLoading: boolean) => void;
@@ -37,6 +38,7 @@ export const mapLoadingToProps: MapLoadingToProps<CostInsightsPageLoadingProps>
 }) => ({
   loadingActions: actions,
   loadingGroups: state[DefaultLoadingAction.UserGroups],
+  loadingBillingDate: state[DefaultLoadingAction.LastCompleteBillingDate],
   loadingInitial: state[DefaultLoadingAction.CostInsightsInitial],
   dispatchInitial: (isLoading: boolean) =>
     dispatch({ [DefaultLoadingAction.CostInsightsInitial]: isLoading }),

plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx

@@ -62,6 +62,12 @@ describe('<ProjectGrowthAlertCard />', () => {
     );
     expect(rendered.getByText(title)).toBeInTheDocument();
     expect(rendered.getByText(subheader)).toBeInTheDocument();
+    expect(
+      rendered.getByText(MockProjectGrowthAlert.periodStart),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByText(MockProjectGrowthAlert.periodEnd),
+    ).toBeInTheDocument();
   });
 
   it('renders the correct title and subheader for a single service', async () => {

plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx

@@ -21,7 +21,6 @@ import ResourceGrowthBarChart from '../ResourceGrowthBarChart';
 import ResourceGrowthBarChartLegend from '../ResourceGrowthBarChartLegend';
 import { Duration, ProjectGrowthData } from '../../types';
 import { pluralOf } from '../../utils/grammar';
-import { formatPeriod } from '../../utils/formatters';
 
 type ProjectGrowthAlertProps = {
   alert: ProjectGrowthData;
@@ -34,8 +33,6 @@ const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
     ${alert.products.length} ${pluralOf(alert.products.length, 'product')}${
     alert.products.length > 1 ? ', sorted by cost' : ''
   }`;
-  const previousName = formatPeriod(Duration.P3M, alert.periodStart, false);
-  const currentName = formatPeriod(Duration.P3M, alert.periodEnd, true);
 
   return (
     <InfoCard
@@ -47,16 +44,16 @@ const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
           <ResourceGrowthBarChartLegend
             change={alert.change}
             duration={Duration.P3M}
-            previousName={previousName}
-            currentName={currentName}
+            previousName={alert.periodStart}
+            currentName={alert.periodEnd}
             costStart={costStart}
             costEnd={costEnd}
           />
         </Box>
         <ResourceGrowthBarChart
           resources={alert.products}
-          previousName={previousName}
-          currentName={currentName}
+          previousName={alert.periodStart}
+          currentName={alert.periodEnd}
         />
       </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: '2019-10-01',
-    periodEnd: '2020-03-31',
+    periodStart: 'Q4 2019',
+    periodEnd: 'Q1 2020',
     aggregation: [670532.1, 970502.8],
     change: {
       ratio: 0.5,