Add lastCompleteBillingDate validation

Move style to utils/styles
Add CODEOWNERS rule for changesets

.github/CODEOWNERS

@@ -14,3 +14,4 @@
 /packages/techdocs-container                @spotify/techdocs-core
 /.github/workflows/techdocs.yml             @spotify/techdocs-core
 /.github/workflows/techdocs-pypi.yml        @spotify/techdocs-core
+/.changeset/cost-insights-*                 @spotify/silver-lining

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

@@ -15,17 +15,8 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  Box,
-  Container,
-  createStyles,
-  Divider,
-  Grid,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import { Box, Container, Divider, Grid, Typography } from '@material-ui/core';
 import { featureFlagsApiRef, Progress, useApi } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
 import { default as MaterialAlert } from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
 import AlertActionCardList from '../AlertActionCardList';
@@ -59,17 +50,10 @@ import {
 } from '../../types';
 import { mapLoadingToProps } from './selector';
 import ProjectSelect from '../ProjectSelect';
-
-const useTextStyles = makeStyles<BackstageTheme>((theme: BackstageTheme) =>
-  createStyles({
-    root: {
-      color: theme.palette.textSubtle,
-    },
-  }),
-);
+import { useSubtleTypographyStyles } from '../../utils/styles';
 
 const CostInsightsPage = () => {
-  const classes = useTextStyles();
+  const classes = useSubtleTypographyStyles();
   const flags = useApi(featureFlagsApiRef).getFlags();
   // There is not currently a UI to set feature flags
   // flags.set('cost-insights-currencies', FeatureFlagState.On);

plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx

@@ -20,6 +20,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
+import * as yup from 'yup';
 import { Alert } from '@material-ui/lab';
 import { useApi } from '@backstage/core';
 import { costInsightsApiRef } from '../api';
@@ -45,12 +46,19 @@ export const BillingDateContext = React.createContext<
   BillingDateContextProps | undefined
 >(undefined);
 
+export const dateRegex: RegExp = /^\d{4}-\d{2}-\d{2}$/;
+const dateFormatSchema = yup.string().matches(dateRegex, {
+  message:
+    'Unsupported billing date format: ${value}. Date should be in YYYY-MM-DD format.',
+  excludeEmptyString: true,
+});
+
 export const BillingDateProvider = ({ children }: PropsWithChildren<{}>) => {
   const client = useApi(costInsightsApiRef);
   const [error, setError] = useState<Maybe<Error>>(null);
   const { dispatchLoadingBillingDate } = useLoading(mapLoadingToProps);
 
-  const [lastCompleteBillingDate, setlastCompleteBillingDate] = useState<
+  const [lastCompleteBillingDate, setLastCompeteBillingDate] = useState<
     Maybe<string>
   >(null);
 
@@ -60,7 +68,8 @@ export const BillingDateProvider = ({ children }: PropsWithChildren<{}>) => {
     async function getLastCompleteBillingDate() {
       try {
         const d = await client.getLastCompleteBillingDate();
-        setlastCompleteBillingDate(d);
+        const validDate = await dateFormatSchema.validate(d);
+        if (validDate) setLastCompeteBillingDate(validDate);
       } catch (e) {
         setError(e);
       } finally {

plugins/cost-insights/src/utils/styles.ts

@@ -454,3 +454,12 @@ export const useBackdropStyles = makeStyles<BackstageTheme>(
       },
     }),
 );
+
+export const useSubtleTypographyStyles = makeStyles<BackstageTheme>(
+  (theme: BackstageTheme) =>
+    createStyles({
+      root: {
+        color: theme.palette.textSubtle,
+      },
+    }),
+);