Merge pull request #3115 from spotify/ryanv/cost-insights/prefer-named-exports

Ryanv/cost insights/prefer named exports
2020-10-27 13:36:48 -04:00
parent 68bea2e980 fd8384d7e6
commit df73c0645c
94 changed files with 183 additions and 269 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+prefer named exports
@@ -16,7 +16,7 @@

 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import AlertActionCard from './AlertActionCard';
+import { AlertActionCard } from './AlertActionCard';
 import { ProjectGrowthAlert, ProjectGrowthData } from '../../types';
 import { MockScrollProvider } from '../../utils/tests';

@@ -27,7 +27,7 @@ type AlertActionCardProps = {
  number: number;
 };

-const AlertActionCard = ({ alert, number }: AlertActionCardProps) => {
+export const AlertActionCard = ({ alert, number }: AlertActionCardProps) => {
  const { scrollIntoView } = useScroll(`alert-${number}`);
  const headerClasses = useHeaderStyles();
  const classes = useStyles();
@@ -43,5 +43,3 @@ const AlertActionCard = ({ alert, number }: AlertActionCardProps) => {
    </Card>
  );
 };
-
-export default AlertActionCard;
@@ -15,14 +15,14 @@
 */
 import React, { FC, Fragment } from 'react';
 import { Paper, Divider } from '@material-ui/core';
-import AlertActionCard from './AlertActionCard';
+import { AlertActionCard } from './AlertActionCard';
 import { Alert } from '../../types';

 type AlertActionCardList = {
  alerts: Array<Alert>;
 };

-const AlertActionCardList: FC<AlertActionCardList> = ({ alerts }) => (
+export const AlertActionCardList: FC<AlertActionCardList> = ({ alerts }) => (
  <Paper>
    {alerts.map((alert, index) => (
      <Fragment key={`alert-${index}`}>
@@ -32,5 +32,3 @@ const AlertActionCardList: FC<AlertActionCardList> = ({ alerts }) => (
    ))}
  </Paper>
 );
-
-export default AlertActionCardList;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './AlertActionCardList';
+export { AlertActionCardList } from './AlertActionCardList';
@@ -16,8 +16,8 @@

 import React from 'react';
 import { Grid } from '@material-ui/core';
-import AlertInsightsSection from './AlertInsightsSection';
-import AlertInsightsHeader from './AlertInsightsHeader';
+import { AlertInsightsSection } from './AlertInsightsSection';
+import { AlertInsightsHeader } from './AlertInsightsHeader';
 import { Alert } from '../../types';

 const title = "Your team's action items";
@@ -28,7 +28,7 @@ type AlertInsightsProps = {
  alerts: Array<Alert>;
 };

-const AlertInsights = ({ alerts }: AlertInsightsProps) => (
+export const AlertInsights = ({ alerts }: AlertInsightsProps) => (
  <Grid container direction="column" spacing={2}>
    <Grid item>
      <AlertInsightsHeader title={title} subtitle={subtitle} />
@@ -42,5 +42,3 @@ const AlertInsights = ({ alerts }: AlertInsightsProps) => (
    </Grid>
  </Grid>
 );
-
-export default AlertInsights;
@@ -25,7 +25,10 @@ type AlertInsightsHeaderProps = {
  subtitle: string;
 };

-const AlertInsightsHeader = ({ title, subtitle }: AlertInsightsHeaderProps) => {
+export const AlertInsightsHeader = ({
+  title,
+  subtitle,
+}: AlertInsightsHeaderProps) => {
  const classes = useStyles();
  const { ScrollAnchor } = useScroll(DefaultNavigation.AlertInsightsHeader);
  return (
@@ -43,5 +46,3 @@ const AlertInsightsHeader = ({ title, subtitle }: AlertInsightsHeaderProps) => {
    </Box>
  );
 };
-
-export default AlertInsightsHeader;
@@ -15,7 +15,7 @@
 */
 import React from 'react';
 import { Box, Button } from '@material-ui/core';
-import AlertInsightsSectionHeader from './AlertInsightsSectionHeader';
+import { AlertInsightsSectionHeader } from './AlertInsightsSectionHeader';
 import { Alert } from '../../types';

 type AlertInsightsSectionProps = {
@@ -23,7 +23,10 @@ type AlertInsightsSectionProps = {
  number: number;
 };

-const AlertInsightsSection = ({ alert, number }: AlertInsightsSectionProps) => {
+export const AlertInsightsSection = ({
+  alert,
+  number,
+}: AlertInsightsSectionProps) => {
  return (
    <Box display="flex" flexDirection="column">
      <AlertInsightsSectionHeader
@@ -41,5 +44,3 @@ const AlertInsightsSection = ({ alert, number }: AlertInsightsSectionProps) => {
    </Box>
  );
 };
-
-export default AlertInsightsSection;
@@ -25,7 +25,7 @@ type AlertInsightsSectionHeaderProps = {
  subtitle: string;
 };

-const AlertInsightsSectionHeader = ({
+export const AlertInsightsSectionHeader = ({
  number,
  title,
  subtitle,
@@ -47,5 +47,3 @@ const AlertInsightsSectionHeader = ({
    </Box>
  );
 };
-
-export default AlertInsightsSectionHeader;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './AlertInsights';
+export { AlertInsights } from './AlertInsights';
@@ -32,7 +32,7 @@ type AlertInstructionsLayoutProps = {
  title: string;
 };

-const AlertInstructionsLayout = ({
+export const AlertInstructionsLayout = ({
  title,
  children,
 }: PropsWithChildren<AlertInstructionsLayoutProps>) => {
@@ -65,5 +65,3 @@ const AlertInstructionsLayout = ({
    </CostInsightsThemeProvider>
  );
 };
-
-export default AlertInstructionsLayout;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './AlertInstructionsLayout';
+export { AlertInstructionsLayout } from './AlertInstructionsLayout';
@@ -17,7 +17,7 @@
 import React from 'react';
 import { TooltipPayload } from 'recharts';
 import { fireEvent } from '@testing-library/react';
-import BarChart, { BarChartProps } from './BarChart';
+import { BarChart, BarChartProps } from './BarChart';
 import { BarChartData, ResourceData } from '../../types';
 import { createMockEntity } from '../../utils/mockData';
 import { resourceSort } from '../../utils/sort';
@@ -28,8 +28,8 @@ import {
  TooltipPayload,
 } from 'recharts';
 import { Box, useTheme } from '@material-ui/core';
-import BarChartTick from './BarChartTick';
-import BarChartStepper from './BarChartStepper';
+import { BarChartTick } from './BarChartTick';
+import { BarChartStepper } from './BarChartStepper';
 import { Tooltip, TooltipItemProps } from '../Tooltip';

 import { currencyFormatter } from '../../utils/formatters';
@@ -52,7 +52,7 @@ export type BarChartProps = {
  resources: ResourceData[];
 };

-const BarChart = ({
+export const BarChart = ({
  responsive = true,
  displayAmount = 6,
  barChartData,
@@ -171,5 +171,3 @@ const BarChart = ({
    </Box>
  );
 };
-
-export default BarChart;
@@ -25,7 +25,7 @@ type BarChartLabel = {
  width: number;
 };

-const BarChartLabel = ({
+export const BarChartLabel = ({
  x,
  y,
  height,
@@ -52,5 +52,3 @@ const BarChartLabel = ({
    </foreignObject>
  );
 };
-
-export default BarChartLabel;
@@ -18,8 +18,8 @@ import React, { useEffect, useState } from 'react';
 import { Paper, Slide } from '@material-ui/core';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import BarChartStepperButton from './BarChartStepperButton';
-import BarChartSteps from './BarChartSteps';
+import { BarChartStepperButton } from './BarChartStepperButton';
+import { BarChartSteps } from './BarChartSteps';
 import { useBarChartStepperStyles } from '../../utils/styles';

 type BarChartStepperProps = {
@@ -28,7 +28,7 @@ type BarChartStepperProps = {
  onChange: (activeStep: number) => void;
 };

-const BarChartStepper = ({
+export const BarChartStepper = ({
  steps,
  disableScroll,
  onChange,
@@ -111,5 +111,3 @@ const BarChartStepper = ({
    </Paper>
  );
 };
-
-export default BarChartStepper;
@@ -22,7 +22,7 @@ interface BarChartStepperButtonProps extends ButtonBaseProps {
  name: string;
 }

-const BarChartStepperButton = forwardRef(
+export const BarChartStepperButton = forwardRef(
  (
    {
      name,
@@ -45,5 +45,3 @@ const BarChartStepperButton = forwardRef(
    );
  },
 );
-
-export default BarChartStepperButton;
@@ -24,7 +24,11 @@ export type BarChartSteps = {
  onClick: (index: number) => void;
 };

-const BarChartSteps = ({ steps, activeStep, onClick }: BarChartSteps) => {
+export const BarChartSteps = ({
+  steps,
+  activeStep,
+  onClick,
+}: BarChartSteps) => {
  const classes = useStyles();
  const handleOnClick = (index: number) => (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -48,5 +52,3 @@ const BarChartSteps = ({ steps, activeStep, onClick }: BarChartSteps) => {
    </div>
  );
 };
-
-export default BarChartSteps;
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import BarChartLabel from './BarChartLabel';
+import { BarChartLabel } from './BarChartLabel';

 type BarChartTickProps = {
  x: number;
@@ -44,5 +44,3 @@ export const BarChartTick = ({
    </BarChartLabel>
  );
 };
-
-export default BarChartTick;
@@ -14,4 +14,5 @@
 * limitations under the License.
 */

-export { default } from './BarChart';
+export { BarChart } from './BarChart';
+export type { BarChartProps } from './BarChart';
@@ -28,7 +28,7 @@ const ClipboardMessage = {
  error: "Couldn't copy to clipboard",
 };

-const CopyUrlToClipboard = () => {
+export const CopyUrlToClipboard = () => {
  const location = useLocation();
  const [state, copyToClipboard] = useCopyToClipboard();
  const [copied, setCopied] = useState(false);
@@ -66,5 +66,3 @@ const CopyUrlToClipboard = () => {
    </Tooltip>
  );
 };
-
-export default CopyUrlToClipboard;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CopyUrlToClipboard';
+export { CopyUrlToClipboard } from './CopyUrlToClipboard';
@@ -16,7 +16,7 @@

 import React, { PropsWithChildren } from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import CostGrowth from './CostGrowth';
+import { CostGrowth } from './CostGrowth';
 import {
  defaultCurrencies,
  Currency,
@@ -35,7 +35,7 @@ export type CostGrowthProps = {
  duration: Duration;
 };

-const CostGrowth = ({ change, duration }: CostGrowthProps) => {
+export const CostGrowth = ({ change, duration }: CostGrowthProps) => {
  const styles = useStyles();
  const { engineerCost } = useConfig();
  const [currency] = useCurrency();
@@ -70,5 +70,3 @@ const CostGrowth = ({ change, duration }: CostGrowthProps) => {

  return <span className={classes}>{cost}</span>;
 };
-
-export default CostGrowth;
@@ -14,4 +14,5 @@
 * limitations under the License.
 */

-export { default } from './CostGrowth';
+export { CostGrowth } from './CostGrowth';
+export type { CostGrowthProps } from './CostGrowth';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import CostInsightsHeader from './CostInsightsHeader';
+import { CostInsightsHeader } from './CostInsightsHeader';
 import { renderInTestApp } from '@backstage/test-utils';
 import {
  ApiProvider,
@@ -31,7 +31,7 @@ type CostInsightsHeaderProps = {
  alerts: number;
 };

-const CostInsightsHeader = (props: CostInsightsHeaderProps) => {
+export const CostInsightsHeader = (props: CostInsightsHeaderProps) => {
  if (!props.hasCostData) {
    return <CostInsightsHeaderNoData {...props} />;
  }
@@ -132,5 +132,3 @@ export const CostInsightsHeaderNoGroups = () => {
    </>
  );
 };
-
-export default CostInsightsHeader;
@@ -14,4 +14,7 @@
 * limitations under the License.
 */

-export { default, CostInsightsHeaderNoGroups } from './CostInsightsHeader';
+export {
+  CostInsightsHeader,
+  CostInsightsHeaderNoGroups,
+} from './CostInsightsHeader';
@@ -17,7 +17,7 @@ import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { Header, Page } from '@backstage/core';
 import { Group } from '../../types';
-import CostInsightsTabs from '../CostInsightsTabs';
+import { CostInsightsTabs } from '../CostInsightsTabs';

 const useStyles = makeStyles(theme => ({
  root: {
@@ -36,7 +36,7 @@ type CostInsightsLayoutProps = {
  groups: Group[];
 };

-const CostInsightsLayout = ({
+export const CostInsightsLayout = ({
  groups,
  children,
 }: PropsWithChildren<CostInsightsLayoutProps>) => {
@@ -56,5 +56,3 @@ const CostInsightsLayout = ({
    </Page>
  );
 };
-
-export default CostInsightsLayout;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostInsightsLayout';
+export { CostInsightsLayout } from './CostInsightsLayout';
@@ -17,7 +17,7 @@
 import React from 'react';
 import { default as HappyFace } from '@material-ui/icons/SentimentSatisfiedAlt';
 import { renderInTestApp } from '@backstage/test-utils';
-import CostInsightsNavigation from './CostInsightsNavigation';
+import { CostInsightsNavigation } from './CostInsightsNavigation';
 import { Product, Icon } from '../../types';
 import { MockConfigProvider, MockScrollProvider } from '../../utils/tests';
 import { getDefaultNavigationItems } from '../../utils/navigation';
@@ -36,7 +36,9 @@ type CostInsightsNavigationProps = {
  alerts: number;
 };

-const CostInsightsNavigation = ({ alerts }: CostInsightsNavigationProps) => {
+export const CostInsightsNavigation = ({
+  alerts,
+}: CostInsightsNavigationProps) => {
  const classes = useNavigationStyles();
  const { products, icons } = useConfig();

@@ -93,5 +95,3 @@ const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
    </MenuItem>
  );
 };
-
-export default CostInsightsNavigation;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostInsightsNavigation';
+export { CostInsightsNavigation } from './CostInsightsNavigation';
@@ -19,19 +19,20 @@ import { Box, Container, Divider, Grid, Typography } from '@material-ui/core';
 import { featureFlagsApiRef, Progress, useApi } from '@backstage/core';
 import { default as MaterialAlert } from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
-import AlertActionCardList from '../AlertActionCardList';
-import AlertInsights from '../AlertInsights';
-import CostInsightsLayout from '../CostInsightsLayout';
-import CopyUrlToClipboard from '../CopyUrlToClipboard';
-import CurrencySelect from '../CurrencySelect';
-import WhyCostsMatter from '../WhyCostsMatter';
-import CostInsightsHeader, {
+import { AlertActionCardList } from '../AlertActionCardList';
+import { AlertInsights } from '../AlertInsights';
+import { CostInsightsLayout } from '../CostInsightsLayout';
+import { CopyUrlToClipboard } from '../CopyUrlToClipboard';
+import { CurrencySelect } from '../CurrencySelect';
+import { WhyCostsMatter } from '../WhyCostsMatter';
+import {
+  CostInsightsHeader,
  CostInsightsHeaderNoGroups,
 } from '../CostInsightsHeader';
-import CostInsightsNavigation from '../CostInsightsNavigation';
-import CostOverviewCard from '../CostOverviewCard';
-import ProductInsights from '../ProductInsights';
-import CostInsightsSupportButton from '../CostInsightsSupportButton';
+import { CostInsightsNavigation } from '../CostInsightsNavigation';
+import { CostOverviewCard } from '../CostOverviewCard';
+import { ProductInsights } from '../ProductInsights';
+import { CostInsightsSupportButton } from '../CostInsightsSupportButton';
 import {
  useConfig,
  useCurrency,
@@ -49,10 +50,10 @@ import {
  Project,
 } from '../../types';
 import { mapLoadingToProps } from './selector';
-import ProjectSelect from '../ProjectSelect';
+import { ProjectSelect } from '../ProjectSelect';
 import { useSubtleTypographyStyles } from '../../utils/styles';

-const CostInsightsPage = () => {
+export const CostInsightsPage = () => {
  const classes = useSubtleTypographyStyles();
  const flags = useApi(featureFlagsApiRef).getFlags();
  // There is not currently a UI to set feature flags
@@ -300,5 +301,3 @@ const CostInsightsPage = () => {
    </CostInsightsLayout>
  );
 };
-
-export default CostInsightsPage;
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import CostInsightsPage from './CostInsightsPage';
+import { CostInsightsPage } from './CostInsightsPage';
 import { FilterProvider } from '../../hooks/useFilters';
 import { LoadingProvider } from '../../hooks/useLoading';
 import { GroupsProvider } from '../../hooks/useGroups';
@@ -25,7 +25,7 @@ import { ConfigProvider } from '../../hooks/useConfig';
 import { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate';
 import { CostInsightsThemeProvider } from './CostInsightsThemeProvider';

-const CostInsightsPageRoot = () => (
+export const CostInsightsPageRoot = () => (
  <CostInsightsThemeProvider>
    <ConfigProvider>
      <LoadingProvider>
@@ -44,5 +44,3 @@ const CostInsightsPageRoot = () => (
    </ConfigProvider>
  </CostInsightsThemeProvider>
 );
-
-export default CostInsightsPageRoot;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostInsightsPageRoot';
+export { CostInsightsPageRoot as CostInsightsPage } from './CostInsightsPageRoot';
@@ -17,12 +17,10 @@
 import React from 'react';
 import { SupportButton } from '@backstage/core';

-const CostInsightsSupportButton = () => {
+export const CostInsightsSupportButton = () => {
  return (
    <SupportButton>
      Insights into cloud costs for your organization
    </SupportButton>
  );
 };
-
-export default CostInsightsSupportButton;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostInsightsSupportButton';
+export { CostInsightsSupportButton } from './CostInsightsSupportButton';
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import CostInsightsTabs from './CostInsightsTabs';
+import { CostInsightsTabs } from './CostInsightsTabs';
 import UserEvent from '@testing-library/user-event';
 import { Group } from '../../types';
 import { MockFilterProvider, MockLoadingProvider } from '../../utils/tests';
@@ -26,7 +26,7 @@ export type CostInsightsTabsProps = {
  groups: Group[];
 };

-const CostInsightsTabs = ({ groups }: CostInsightsTabsProps) => {
+export const CostInsightsTabs = ({ groups }: CostInsightsTabsProps) => {
  const classes = useStyles();
  const [index] = useState(0); // index is fixed for now until other tabs are added
  const [groupMenuEl, setGroupMenuEl] = useState<Element | null>(null);
@@ -107,5 +107,3 @@ const CostInsightsTabs = ({ groups }: CostInsightsTabsProps) => {
    </>
  );
 };
-
-export default CostInsightsTabs;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostInsightsTabs';
+export { CostInsightsTabs } from './CostInsightsTabs';
@@ -16,12 +16,12 @@

 import React from 'react';
 import { Box, Card, CardContent, Divider, useTheme } from '@material-ui/core';
-import CostGrowth from '../CostGrowth';
-import CostOverviewChart from './CostOverviewChart';
-import CostOverviewHeader from './CostOverviewHeader';
-import LegendItem from '../LegendItem';
-import MetricSelect from '../MetricSelect';
-import PeriodSelect from '../PeriodSelect';
+import { CostGrowth } from '../CostGrowth';
+import { CostOverviewChart } from './CostOverviewChart';
+import { CostOverviewHeader } from './CostOverviewHeader';
+import { LegendItem } from '../LegendItem';
+import { MetricSelect } from '../MetricSelect';
+import { PeriodSelect } from '../PeriodSelect';
 import { useScroll, useFilters, useConfig } from '../../hooks';
 import { mapFiltersToProps } from './selector';
 import { DefaultNavigation } from '../../utils/navigation';
@@ -39,7 +39,7 @@ export type CostOverviewCardProps = {
  metricData: MetricData | null;
 };

-const CostOverviewCard = ({
+export const CostOverviewCard = ({
  dailyCostData,
  metricData,
 }: CostOverviewCardProps) => {
@@ -114,5 +114,3 @@ const CostOverviewCard = ({
    </Card>
  );
 };
-
-export default CostOverviewCard;
@@ -38,7 +38,7 @@ import {
  overviewGraphTickFormatter,
  formatGraphValue,
 } from '../../utils/graphs';
-import CostOverviewTooltip from './CostOverviewTooltip';
+import { CostOverviewTooltip } from './CostOverviewTooltip';
 import { TooltipItemProps } from '../Tooltip';
 import { useCostOverviewStyles as useStyles } from '../../utils/styles';
 import { groupByDate, toDataMax, trendFrom } from '../../utils/charts';
@@ -51,7 +51,7 @@ type CostOverviewChartProps = {
  responsive?: boolean;
 };

-const CostOverviewChart = ({
+export const CostOverviewChart = ({
  dailyCostData,
  metric,
  metricData,
@@ -181,5 +181,3 @@ const CostOverviewChart = ({
    </ResponsiveContainer>
  );
 };
-
-export default CostOverviewChart;
@@ -21,7 +21,7 @@ type CostOverviewHeaderProps = {
  subtitle?: string;
 };

-const CostOverviewHeader = ({
+export const CostOverviewHeader = ({
  title,
  subtitle,
  children,
@@ -48,5 +48,3 @@ const CostOverviewHeader = ({
    </Box>
  </Box>
 );
-
-export default CostOverviewHeader;
@@ -24,7 +24,7 @@ export type CostOverviewTooltipProps = TooltipProps & {
  format: (payload: TooltipPayload) => TooltipItemProps;
 };

-const CostOverviewTooltip = ({
+export const CostOverviewTooltip = ({
  label,
  payload,
  dataKeys,
@@ -36,5 +36,3 @@ const CostOverviewTooltip = ({
    .map(p => format(p));
  return <Tooltip label={tooltipLabel} items={items} />;
 };
-
-export default CostOverviewTooltip;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CostOverviewCard';
+export { CostOverviewCard } from './CostOverviewCard';
@@ -27,7 +27,7 @@ type CurrencySelectProps = {
  onSelect: (currency: Currency) => void;
 };

-const CurrencySelect = ({
+export const CurrencySelect = ({
  currency,
  currencies,
  onSelect,
@@ -71,5 +71,3 @@ const CurrencySelect = ({
    </Select>
  );
 };
-
-export default CurrencySelect;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './CurrencySelect';
+export { CurrencySelect } from './CurrencySelect';
@@ -17,9 +17,9 @@
 import React from 'react';
 import { Box, Typography } from '@material-ui/core';
 import { CodeSnippet } from '@backstage/core';
-import AlertInstructionsLayout from '../AlertInstructionsLayout';
+import { AlertInstructionsLayout } from '../AlertInstructionsLayout';

-const LabelDataflowInstructionsPage = () => {
+export const LabelDataflowInstructionsPage = () => {
  return (
    <AlertInstructionsLayout title="Investigating Growth">
      <Typography variant="h1">Labeling Dataflow Jobs</Typography>
@@ -92,5 +92,3 @@ sc.optionsAs[DataflowPipelineOptions].setLabels(Map("job-id" -> "my-dataflow-job
    </AlertInstructionsLayout>
  );
 };
-
-export default LabelDataflowInstructionsPage;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './LabelDataflowInstructionsPage';
+export { LabelDataflowInstructionsPage } from './LabelDataflowInstructionsPage';
@@ -20,13 +20,13 @@ import LensIcon from '@material-ui/icons/Lens';
 import HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';
 import { useCostGrowthLegendStyles } from '../../utils/styles';

-type LegendItemProps = {
+export type LegendItemProps = {
  title: string;
  tooltipText?: string;
  markerColor?: string;
 };

-const LegendItem = ({
+export const LegendItem = ({
  title,
  tooltipText,
  markerColor,
@@ -73,5 +73,3 @@ const LegendItem = ({
    </Box>
  );
 };
-
-export default LegendItem;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './LegendItem';
+export { LegendItem } from './LegendItem';
@@ -16,7 +16,7 @@
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import UserEvent from '@testing-library/user-event';
-import MetricSelect, { MetricSelectProps } from './MetricSelect';
+import { MetricSelect, MetricSelectProps } from './MetricSelect';
 import { renderInTestApp } from '@backstage/test-utils';

 describe('<MetricSelect />', () => {
@@ -25,7 +25,11 @@ export type MetricSelectProps = {
  onSelect: (metric: Maybe<string>) => void;
 };

-const MetricSelect = ({ metric, metrics, onSelect }: MetricSelectProps) => {
+export const MetricSelect = ({
+  metric,
+  metrics,
+  onSelect,
+}: MetricSelectProps) => {
  const classes = useStyles();

  function onChange(e: React.ChangeEvent<{ value: unknown }>) {
@@ -61,5 +65,3 @@ const MetricSelect = ({ metric, metrics, onSelect }: MetricSelectProps) => {
    </FormControl>
  );
 };
-
-export default MetricSelect;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './MetricSelect';
+export { MetricSelect } from './MetricSelect';
@@ -18,7 +18,7 @@ import React from 'react';
 import { getByRole, waitFor } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
 import UserEvent from '@testing-library/user-event';
-import PeriodSelect, { getDefaultOptions } from './PeriodSelect';
+import { PeriodSelect, getDefaultOptions } from './PeriodSelect';
 import { Duration, getDefaultPageFilters, Group } from '../../types';
 import { MockBillingDateProvider } from '../../utils/tests';

@@ -58,7 +58,11 @@ type PeriodSelectProps = {
  options?: PeriodOption[];
 };

-const PeriodSelect = ({ duration, onSelect, options }: PeriodSelectProps) => {
+export const PeriodSelect = ({
+  duration,
+  onSelect,
+  options,
+}: PeriodSelectProps) => {
  const classes = useStyles();
  const lastCompleteBillingDate = useLastCompleteBillingDate();
  const optionsOrDefault =
@@ -95,5 +99,3 @@ const PeriodSelect = ({ duration, onSelect, options }: PeriodSelectProps) => {
    </Select>
  );
 };
-
-export default PeriodSelect;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './PeriodSelect';
+export { PeriodSelect } from './PeriodSelect';
@@ -16,12 +16,11 @@

 import React from 'react';
 import { Box, Typography, Grid } from '@material-ui/core';
-import ProductInsightsCard from '../ProductInsightsCard';
+import { ProductInsightsCard } from '../ProductInsightsCard';
 import { useConfig } from '../../hooks';

-const ProductInsights = ({}) => {
-  const { products } = useConfig();
-
+export const ProductInsights = ({}) => {
+  const config = useConfig();
  return (
    <>
      <Box mt={0} mb={5} textAlign="center">
@@ -30,7 +29,7 @@ const ProductInsights = ({}) => {
        </Typography>
      </Box>
      <Grid container direction="column">
-        {products.map(product => (
+        {config.products.map(product => (
          <Grid item key={product.kind} style={{ position: 'relative' }}>
            <ProductInsightsCard product={product} />
          </Grid>
@@ -39,5 +38,3 @@ const ProductInsights = ({}) => {
    </>
  );
 };
-
-export default ProductInsights;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ProductInsights';
+export { ProductInsights } from './ProductInsights';
@@ -16,7 +16,7 @@

 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import ProductInsightsCard from './ProductInsightsCard';
+import { ProductInsightsCard } from './ProductInsightsCard';
 import { CostInsightsApi } from '../../api';
 import {
  createMockEntity,
@@ -19,9 +19,9 @@ import { InfoCard, useApi } from '@backstage/core';
 import { Box } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
-import PeriodSelect from '../PeriodSelect';
-import ResourceGrowthBarChart from '../ResourceGrowthBarChart';
-import ResourceGrowthBarChartLegend from '../ResourceGrowthBarChartLegend';
+import { PeriodSelect } from '../PeriodSelect';
+import { ResourceGrowthBarChart } from '../ResourceGrowthBarChart';
+import { ResourceGrowthBarChartLegend } from '../ResourceGrowthBarChartLegend';
 import {
  useFilters,
  useLastCompleteBillingDate,
@@ -38,7 +38,7 @@ type ProductInsightsCardProps = {
  product: Product;
 };

-const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
+export const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
  const client = useApi(costInsightsApiRef);
  const classes = useStyles();
  const { ScrollAnchor } = useScroll(product.kind);
@@ -166,5 +166,3 @@ const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
    </InfoCard>
  );
 };
-
-export default ProductInsightsCard;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ProductInsightsCard';
+export { ProductInsightsCard } from './ProductInsightsCard';
@@ -16,7 +16,7 @@

 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import ProjectGrowthAlertCard from './ProjectGrowthAlertCard';
+import { ProjectGrowthAlertCard } from './ProjectGrowthAlertCard';
 import { createMockProjectGrowthData } from '../../utils/mockData';
 import {
  MockCurrencyProvider,
@@ -18,8 +18,8 @@ import React from 'react';
 import moment from 'moment';
 import { Box } from '@material-ui/core';
 import { InfoCard } from '@backstage/core';
-import ResourceGrowthBarChart from '../ResourceGrowthBarChart';
-import ResourceGrowthBarChartLegend from '../ResourceGrowthBarChartLegend';
+import { ResourceGrowthBarChart } from '../ResourceGrowthBarChart';
+import { ResourceGrowthBarChartLegend } from '../ResourceGrowthBarChartLegend';
 import { Duration, ProjectGrowthData } from '../../types';
 import { pluralOf } from '../../utils/grammar';

@@ -27,7 +27,7 @@ type ProjectGrowthAlertProps = {
  alert: ProjectGrowthData;
 };

-const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
+export const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
  const [costStart, costEnd] = alert.aggregation;

  const subheader = `
@@ -64,5 +64,3 @@ const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
    </InfoCard>
  );
 };
-
-export default ProjectGrowthAlertCard;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ProjectGrowthAlertCard';
+export { ProjectGrowthAlertCard } from './ProjectGrowthAlertCard';
@@ -17,7 +17,7 @@
 import React from 'react';
 import { Box, Typography } from '@material-ui/core';
 import { InfoCard } from '@backstage/core';
-import AlertInstructionsLayout from '../AlertInstructionsLayout';
+import { AlertInstructionsLayout } from '../AlertInstructionsLayout';
 import {
  Alert,
  Duration,
@@ -26,10 +26,10 @@ import {
  ProjectGrowthAlert,
  ProjectGrowthData,
 } from '../../types';
-import ResourceGrowthBarChartLegend from '../ResourceGrowthBarChartLegend';
-import ResourceGrowthBarChart from '../ResourceGrowthBarChart';
+import { ResourceGrowthBarChartLegend } from '../ResourceGrowthBarChartLegend';
+import { ResourceGrowthBarChart } from '../ResourceGrowthBarChart';

-const ProjectGrowthInstructionsPage = () => {
+export const ProjectGrowthInstructionsPage = () => {
  const alertData: ProjectGrowthData = {
    project: 'example-project',
    periodStart: 'Q1 2020',
@@ -211,5 +211,3 @@ const ProjectGrowthInstructionsPage = () => {
    </AlertInstructionsLayout>
  );
 };
-
-export default ProjectGrowthInstructionsPage;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ProjectGrowthInstructionsPage';
+export { ProjectGrowthInstructionsPage } from './ProjectGrowthInstructionsPage';
@@ -17,7 +17,7 @@
 import React from 'react';
 import { getByRole, waitFor } from '@testing-library/react';
 import UserEvent from '@testing-library/user-event';
-import ProjectSelect from './ProjectSelect';
+import { ProjectSelect } from './ProjectSelect';
 import { MockFilterProvider } from '../../utils/tests';
 import { renderInTestApp } from '@backstage/test-utils';

@@ -24,7 +24,11 @@ type ProjectSelectProps = {
  onSelect: (project: Maybe<string>) => void;
 };

-const ProjectSelect = ({ project, projects, onSelect }: ProjectSelectProps) => {
+export const ProjectSelect = ({
+  project,
+  projects,
+  onSelect,
+}: ProjectSelectProps) => {
  const classes = useStyles();

  const projectOptions = [{ id: 'all' } as Project, ...projects]
@@ -66,5 +70,3 @@ const ProjectSelect = ({ project, projects, onSelect }: ProjectSelectProps) => {
    </Select>
  );
 };
-
-export default ProjectSelect;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ProjectSelect';
+export { ProjectSelect } from './ProjectSelect';
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import ResourceGrowthBarChart from './ResourceGrowthBarChart';
+import { ResourceGrowthBarChart } from './ResourceGrowthBarChart';
 import { renderInTestApp } from '@backstage/test-utils';
 import { createMockEntity } from '../../utils/mockData';

@@ -26,7 +26,7 @@ import {
  Maybe,
  ResourceData,
 } from '../../types';
-import BarChart from '../BarChart';
+import { BarChart } from '../BarChart';
 import { TooltipItemProps } from '../Tooltip';
 import { useTheme } from '@material-ui/core';

@@ -36,7 +36,7 @@ export type ResourceGrowthBarChartProps = {
  currentName: string;
 };

-const ResourceGrowthBarChart = ({
+export const ResourceGrowthBarChart = ({
  resources,
  previousName,
  currentName,
@@ -85,5 +85,3 @@ const ResourceGrowthBarChart = ({
    />
  );
 };
-
-export default ResourceGrowthBarChart;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ResourceGrowthBarChart';
+export { ResourceGrowthBarChart } from './ResourceGrowthBarChart';
@@ -16,7 +16,7 @@

 import React, { PropsWithChildren } from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import ResourceGrowthBarChartLegend from './ResourceGrowthBarChartLegend';
+import { ResourceGrowthBarChartLegend } from './ResourceGrowthBarChartLegend';
 import { defaultCurrencies, Duration, findAlways } from '../../types';
 import { MockConfigProvider, MockCurrencyProvider } from '../../utils/tests';

@@ -16,8 +16,8 @@

 import React from 'react';
 import { Box, useTheme } from '@material-ui/core';
-import LegendItem from '../LegendItem';
-import CostGrowth from '../CostGrowth';
+import { LegendItem } from '../LegendItem';
+import { CostGrowth } from '../CostGrowth';
 import { currencyFormatter } from '../../utils/formatters';
 import { ChangeStatistic, CostInsightsTheme, Duration } from '../../types';

@@ -30,7 +30,7 @@ export type ResourceGrowthBarChartLegendProps = {
  costEnd: number;
 };

-const ResourceGrowthBarChartLegend = ({
+export const ResourceGrowthBarChartLegend = ({
  change,
  duration,
  previousName,
@@ -58,5 +58,3 @@ const ResourceGrowthBarChartLegend = ({
    </Box>
  );
 };
-
-export default ResourceGrowthBarChartLegend;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './ResourceGrowthBarChartLegend';
+export { ResourceGrowthBarChartLegend } from './ResourceGrowthBarChartLegend';
@@ -16,7 +16,7 @@

 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';

 const mockTooltipItems = [
@@ -16,7 +16,7 @@

 import React from 'react';
 import { Box, Typography } from '@material-ui/core';
-import TooltipItem, { TooltipItemProps } from './TooltipItem';
+import { TooltipItem, TooltipItemProps } from './TooltipItem';
 import { useTooltipStyles } from '../../utils/styles';

 export type TooltipProps = {
@@ -24,7 +24,7 @@ export type TooltipProps = {
  items?: Array<TooltipItemProps>;
 };

-const Tooltip = ({ label, items }: TooltipProps) => {
+export const Tooltip = ({ label, items }: TooltipProps) => {
  const classes = useTooltipStyles();
  return (
    <Box
@@ -50,5 +50,3 @@ const Tooltip = ({ label, items }: TooltipProps) => {
    </Box>
  );
 };
-
-export default Tooltip;
@@ -25,7 +25,7 @@ export type TooltipItemProps = {
  fill: string;
 };

-const TooltipItem = ({ fill, label, value }: TooltipItemProps) => {
+export const TooltipItem = ({ fill, label, value }: TooltipItemProps) => {
  const classes = useStyles();
  const style = { fill: fill };
  return (
@@ -45,5 +45,3 @@ const TooltipItem = ({ fill, label, value }: TooltipItemProps) => {
    </Box>
  );
 };
-
-export default TooltipItem;
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-export { default as Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
-export { default as TooltipItem } from './TooltipItem';
+export { TooltipItem } from './TooltipItem';
 export type { TooltipItemProps } from './TooltipItem';
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import UnlabeledDataflowAlertCard from './UnlabeledDataflowAlertCard';
+import { UnlabeledDataflowAlertCard } from './UnlabeledDataflowAlertCard';
 import {
  createMockUnlabeledDataflowData,
  createMockUnlabeledDataflowAlertProject,
@@ -17,8 +17,8 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
 import { InfoCard } from '@backstage/core';
-import UnlabeledDataflowBarChart from '../UnlabeledDataflowBarChart';
-import UnlabeledDataflowBarChartLegend from '../UnlabeledDataflowBarChartLegend';
+import { UnlabeledDataflowBarChart } from './UnlabeledDataflowBarChart';
+import { UnlabeledDataflowBarChartLegend } from './UnlabeledDataflowBarChartLegend';
 import { UnlabeledDataflowData } from '../../types';
 import { pluralOf } from '../../utils/grammar';

@@ -26,7 +26,9 @@ type UnlabeledDataflowAlertProps = {
  alert: UnlabeledDataflowData;
 };

-const UnlabeledDataflowAlertCard = ({ alert }: UnlabeledDataflowAlertProps) => {
+export const UnlabeledDataflowAlertCard = ({
+  alert,
+}: UnlabeledDataflowAlertProps) => {
  const projects = pluralOf(alert.projects.length, 'project');
  const subheader = `
    Showing costs from ${alert.projects.length} ${projects} with unlabeled Dataflow jobs in the last 30 days.
@@ -47,5 +49,3 @@ const UnlabeledDataflowAlertCard = ({ alert }: UnlabeledDataflowAlertProps) => {
    </InfoCard>
  );
 };
-
-export default UnlabeledDataflowAlertCard;
@@ -16,7 +16,7 @@

 import React from 'react';
 import { TooltipPayload } from 'recharts';
-import BarChart from '../BarChart';
+import { BarChart } from '../BarChart';
 import { TooltipItemProps } from '../Tooltip';
 import {
  BarChartData,
@@ -69,5 +69,3 @@ export const UnlabeledDataflowBarChart = ({
    />
  );
 };
-
-export default UnlabeledDataflowBarChart;
@@ -15,7 +15,7 @@
 */

 import React from 'react';
-import UnlabeledDataflowBarChartLegend from './UnlabeledDataflowBarChartLegend';
+import { UnlabeledDataflowBarChartLegend } from './UnlabeledDataflowBarChartLegend';
 import { renderInTestApp } from '@backstage/test-utils';

 describe('<UnlabeledDataflowBarChartLegend />', () => {
@@ -16,7 +16,7 @@

 import React from 'react';
 import { Box, useTheme } from '@material-ui/core';
-import LegendItem from '../LegendItem';
+import { LegendItem } from '../LegendItem';
 import { currencyFormatter } from '../../utils/formatters';
 import { CostInsightsTheme } from '../../types';

@@ -25,7 +25,7 @@ type UnlabeledDataflowBarChartLegendProps = {
  unlabeledCost: number;
 };

-const UnlabeledDataflowBarChartLegend = ({
+export const UnlabeledDataflowBarChartLegend = ({
  unlabeledCost,
  labeledCost,
 }: UnlabeledDataflowBarChartLegendProps) => {
@@ -55,5 +55,3 @@ const UnlabeledDataflowBarChartLegend = ({
    </Box>
  );
 };
-
-export default UnlabeledDataflowBarChartLegend;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './UnlabeledDataflowAlertCard';
+export { UnlabeledDataflowAlertCard } from './UnlabeledDataflowAlertCard';
@@ -1,17 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default } from './UnlabeledDataflowBarChart';
@@ -1,17 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export { default } from './UnlabeledDataflowBarChartLegend';
@@ -17,7 +17,7 @@
 import React from 'react';
 import { Typography, Box, Grid, Container, Divider } from '@material-ui/core';

-const WhyCostsMatter = () => {
+export const WhyCostsMatter = () => {
  return (
    <Box mt={10} mb={4}>
      <Container maxWidth="md">
@@ -73,5 +73,3 @@ const WhyCostsMatter = () => {
    </Box>
  );
 };
-
-export default WhyCostsMatter;
@@ -14,4 +14,4 @@
 * limitations under the License.
 */

-export { default } from './WhyCostsMatter';
+export { WhyCostsMatter } from './WhyCostsMatter';
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-export { default as BarChart } from './BarChart';
-export { default as CostGrowth } from './CostGrowth';
-export { default as LegendItem } from './LegendItem';
+export * from './BarChart';
+export * from './CostGrowth';
+export * from './LegendItem';
 export * from './Tooltip';
@@ -15,9 +15,9 @@
 */

 import { createPlugin, createRouteRef, PluginConfig } from '@backstage/core';
-import CostInsightsPage from './components/CostInsightsPage';
-import ProjectGrowthInstructionsPage from './components/ProjectGrowthInstructionsPage';
-import LabelDataflowInstructionsPage from './components/LabelDataflowInstructionsPage';
+import { CostInsightsPage } from './components/CostInsightsPage';
+import { ProjectGrowthInstructionsPage } from './components/ProjectGrowthInstructionsPage';
+import { LabelDataflowInstructionsPage } from './components/LabelDataflowInstructionsPage';

 export const rootRouteRef = createRouteRef({
  path: '/cost-insights',
@@ -17,8 +17,8 @@
 import React from 'react';
 import { ChangeStatistic } from './ChangeStatistic';
 import { Maybe } from './Maybe';
-import UnlabeledDataflowAlertCard from '../components/UnlabeledDataflowAlertCard';
-import ProjectGrowthAlertCard from '../components/ProjectGrowthAlertCard';
+import { UnlabeledDataflowAlertCard } from '../components/UnlabeledDataflowAlertCard';
+import { ProjectGrowthAlertCard } from '../components/ProjectGrowthAlertCard';

 /**
 * Generic alert type with required fields for display. The `element` field will be rendered in