diff --git a/.changeset/nice-bears-sparkle.md b/.changeset/cost-insights-sparkle.md similarity index 100% rename from .changeset/nice-bears-sparkle.md rename to .changeset/cost-insights-sparkle.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 3df1031034..d161a8e1a9 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx index e28626c6d1..e1e5a73358 100644 --- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx +++ b/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((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); diff --git a/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx b/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx index 8df1483eaa..33d037267d 100644 --- a/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx +++ b/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>(null); const { dispatchLoadingBillingDate } = useLoading(mapLoadingToProps); - const [lastCompleteBillingDate, setlastCompleteBillingDate] = useState< + const [lastCompleteBillingDate, setLastCompeteBillingDate] = useState< Maybe >(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 { diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index 1777d385f8..b20c601276 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -454,3 +454,12 @@ export const useBackdropStyles = makeStyles( }, }), ); + +export const useSubtleTypographyStyles = makeStyles( + (theme: BackstageTheme) => + createStyles({ + root: { + color: theme.palette.textSubtle, + }, + }), +);