From 60693368306d182536cf17e1d16d3364b8df3cb4 Mon Sep 17 00:00:00 2001
From: Ryan Vazquez <ryanv@spotify.com>
Date: Mon, 26 Oct 2020 18:10:47 -0400
Subject: [PATCH] formatting

---
 .../AlertInsights/AlertInsightsHeader.tsx     |  5 ++-
 .../AlertInsights/AlertInsightsSection.tsx    |  5 ++-
 .../src/components/BarChart/BarChartSteps.tsx | 11 +++--
 .../components/CostGrowth/CostGrowth.test.tsx |  8 ++--
 .../components/CostInsightsHeader/index.ts    |  5 ++-
 .../CostInsightsNavigation.tsx                | 12 +++---
 .../CostOverviewCard/CostOverviewHeader.tsx   | 40 +++++++++----------
 .../components/MetricSelect/MetricSelect.tsx  |  6 ++-
 .../components/PeriodSelect/PeriodSelect.tsx  |  6 ++-
 .../ProductInsights/ProductInsights.tsx       |  2 +-
 .../ProjectGrowthAlertCard.tsx                |  5 ++-
 .../ProjectSelect/ProjectSelect.tsx           |  6 ++-
 .../UnlabeledDataflowAlertCard.test.tsx       |  2 +-
 .../UnlabeledDataflowAlertCard.tsx            |  4 +-
 14 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
index 7a65010abf..b58f6973ae 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
@@ -25,7 +25,10 @@ type AlertInsightsHeaderProps = {
   subtitle: string;
 };
 
-export const AlertInsightsHeader = ({ title, subtitle }: AlertInsightsHeaderProps) => {
+export const AlertInsightsHeader = ({
+  title,
+  subtitle,
+}: AlertInsightsHeaderProps) => {
   const classes = useStyles();
   const { ScrollAnchor } = useScroll(DefaultNavigation.AlertInsightsHeader);
   return (
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
index fe5425a937..426e943092 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
@@ -23,7 +23,10 @@ type AlertInsightsSectionProps = {
   number: number;
 };
 
-export const AlertInsightsSection = ({ alert, number }: AlertInsightsSectionProps) => {
+export const AlertInsightsSection = ({
+  alert,
+  number,
+}: AlertInsightsSectionProps) => {
   return (
     <Box display="flex" flexDirection="column">
       <AlertInsightsSectionHeader
diff --git a/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx b/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx
index 7e3d40b476..11a295965e 100644
--- a/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx
+++ b/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx
@@ -24,7 +24,11 @@ export type BarChartSteps = {
   onClick: (index: number) => void;
 };
 
-export 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>,
@@ -39,8 +43,9 @@ export const BarChartSteps = ({ steps, activeStep, onClick }: BarChartSteps) =>
         <ButtonBase key={index} centerRipple onClick={handleOnClick(index)}>
           <div
             data-testid="bar-chart-step"
-            className={`${classes.step} ${index === activeStep ? classes.stepActive : ''
-              }`}
+            className={`${classes.step} ${
+              index === activeStep ? classes.stepActive : ''
+            }`}
           />
         </ButtonBase>
       ))}
diff --git a/plugins/cost-insights/src/components/CostGrowth/CostGrowth.test.tsx b/plugins/cost-insights/src/components/CostGrowth/CostGrowth.test.tsx
index 3a49ba4626..ed81f657c5 100644
--- a/plugins/cost-insights/src/components/CostGrowth/CostGrowth.test.tsx
+++ b/plugins/cost-insights/src/components/CostGrowth/CostGrowth.test.tsx
@@ -41,10 +41,10 @@ const MockContext = ({
   currency: Currency;
   engineerCost: number;
 }>) => (
-    <MockConfigProvider engineerCost={engineerCost}>
-      <MockCurrencyProvider currency={currency}>{children}</MockCurrencyProvider>
-    </MockConfigProvider>
-  );
+  <MockConfigProvider engineerCost={engineerCost}>
+    <MockCurrencyProvider currency={currency}>{children}</MockCurrencyProvider>
+  </MockConfigProvider>
+);
 
 describe.each`
   engineerCost | ratio           | amount     | expected
diff --git a/plugins/cost-insights/src/components/CostInsightsHeader/index.ts b/plugins/cost-insights/src/components/CostInsightsHeader/index.ts
index f5099aa19d..f6eebef604 100644
--- a/plugins/cost-insights/src/components/CostInsightsHeader/index.ts
+++ b/plugins/cost-insights/src/components/CostInsightsHeader/index.ts
@@ -14,4 +14,7 @@
  * limitations under the License.
  */
 
-export { CostInsightsHeader, CostInsightsHeaderNoGroups } from './CostInsightsHeader';
+export {
+  CostInsightsHeader,
+  CostInsightsHeaderNoGroups,
+} from './CostInsightsHeader';
diff --git a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
index 62482c3323..f190fa88bb 100644
--- a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
@@ -36,7 +36,9 @@ type CostInsightsNavigationProps = {
   alerts: number;
 };
 
-export const CostInsightsNavigation = ({ alerts }: CostInsightsNavigationProps) => {
+export const CostInsightsNavigation = ({
+  alerts,
+}: CostInsightsNavigationProps) => {
   const classes = useNavigationStyles();
   const { products, icons } = useConfig();
 
@@ -64,10 +66,10 @@ export const CostInsightsNavigation = ({ alerts }: CostInsightsNavigationProps)
                 })}
               </Badge>
             ) : (
-                React.cloneElement(item.icon, {
-                  className: classes.navigationIcon,
-                })
-              )
+              React.cloneElement(item.icon, {
+                className: classes.navigationIcon,
+              })
+            )
           }
           title={item.title}
         />
diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx
index c01eabfa53..e46b0c3a78 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx
@@ -26,25 +26,25 @@ export const CostOverviewHeader = ({
   subtitle,
   children,
 }: PropsWithChildren<CostOverviewHeaderProps>) => (
-    <Box
-      marginY={1}
-      display="flex"
-      flexDirection="row"
-      justifyContent="space-between"
-      alignItems="center"
-    >
-      <Box minHeight={40} paddingRight={5}>
-        <Typography variant="h5" gutterBottom>
-          {title}
+  <Box
+    marginY={1}
+    display="flex"
+    flexDirection="row"
+    justifyContent="space-between"
+    alignItems="center"
+  >
+    <Box minHeight={40} paddingRight={5}>
+      <Typography variant="h5" gutterBottom>
+        {title}
+      </Typography>
+      {!!subtitle && (
+        <Typography variant="subtitle2" color="textSecondary" component="div">
+          {subtitle}
         </Typography>
-        {!!subtitle && (
-          <Typography variant="subtitle2" color="textSecondary" component="div">
-            {subtitle}
-          </Typography>
-        )}
-      </Box>
-      <Box minHeight={40} maxHeight={60} display="flex">
-        {children}
-      </Box>
+      )}
     </Box>
-  );
+    <Box minHeight={40} maxHeight={60} display="flex">
+      {children}
+    </Box>
+  </Box>
+);
diff --git a/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx b/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx
index f91070271f..a8197fd7e9 100644
--- a/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx
+++ b/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx
@@ -25,7 +25,11 @@ export type MetricSelectProps = {
   onSelect: (metric: Maybe<string>) => void;
 };
 
-export const MetricSelect = ({ metric, metrics, onSelect }: MetricSelectProps) => {
+export const MetricSelect = ({
+  metric,
+  metrics,
+  onSelect,
+}: MetricSelectProps) => {
   const classes = useStyles();
 
   function onChange(e: React.ChangeEvent<{ value: unknown }>) {
diff --git a/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx b/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx
index 0088830471..07365c32eb 100644
--- a/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx
+++ b/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx
@@ -58,7 +58,11 @@ type PeriodSelectProps = {
   options?: PeriodOption[];
 };
 
-export const PeriodSelect = ({ duration, onSelect, options }: PeriodSelectProps) => {
+export const PeriodSelect = ({
+  duration,
+  onSelect,
+  options,
+}: PeriodSelectProps) => {
   const classes = useStyles();
   const lastCompleteBillingDate = useLastCompleteBillingDate();
   const optionsOrDefault =
diff --git a/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx b/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx
index 7420c8d82c..16146cb045 100644
--- a/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx
+++ b/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx
@@ -19,7 +19,7 @@ import { Box, Typography, Grid } from '@material-ui/core';
 import { ProductInsightsCard } from '../ProductInsightsCard';
 import { useConfig } from '../../hooks';
 
-export const ProductInsights = ({ }) => {
+export const ProductInsights = ({}) => {
   const config = useConfig();
   return (
     <>
diff --git a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
index 18f7fa151d..4311bcc1bf 100644
--- a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
+++ b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.tsx
@@ -31,8 +31,9 @@ export const ProjectGrowthAlertCard = ({ alert }: ProjectGrowthAlertProps) => {
   const [costStart, costEnd] = alert.aggregation;
 
   const subheader = `
-    ${alert.products.length} ${pluralOf(alert.products.length, 'product')}${alert.products.length > 1 ? ', sorted by cost' : ''
-    }`;
+    ${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',
   );
diff --git a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx b/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
index 29169d1f5f..ee4641a4eb 100644
--- a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
+++ b/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
@@ -24,7 +24,11 @@ type ProjectSelectProps = {
   onSelect: (project: Maybe<string>) => void;
 };
 
-export const ProjectSelect = ({ project, projects, onSelect }: ProjectSelectProps) => {
+export const ProjectSelect = ({
+  project,
+  projects,
+  onSelect,
+}: ProjectSelectProps) => {
   const classes = useStyles();
 
   const projectOptions = [{ id: 'all' } as Project, ...projects]
diff --git a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.test.tsx b/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.test.tsx
index 6edd4ed637..df38c78a03 100644
--- a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.test.tsx
+++ b/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.test.tsx
@@ -44,7 +44,7 @@ describe('<UnlabeledDataflowAlertCard />', () => {
   it('renders the correct subheader for multiple projects', async () => {
     const subheader = new RegExp(
       `Showing costs from ${MockUnlabeledDataflowAlertMultipleProjects.projects.length} ` +
-      'projects with unlabeled Dataflow jobs in the last 30 days.',
+        'projects with unlabeled Dataflow jobs in the last 30 days.',
     );
     const rendered = await renderInTestApp(
       <UnlabeledDataflowAlertCard
diff --git a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx b/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx
index 7a01d65c40..8bc5ebfb6e 100644
--- a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx
+++ b/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx
@@ -26,7 +26,9 @@ type UnlabeledDataflowAlertProps = {
   alert: UnlabeledDataflowData;
 };
 
-export 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.