formatting

2020-10-26 18:10:47 -04:00
parent 023d514206
commit 6069336830
14 changed files with 74 additions and 43 deletions
@@ -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 (
@@ -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
@@ -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>
      ))}
@@ -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
@@ -14,4 +14,7 @@
 * limitations under the License.
 */

-export { CostInsightsHeader, CostInsightsHeaderNoGroups } from './CostInsightsHeader';
+export {
+  CostInsightsHeader,
+  CostInsightsHeaderNoGroups,
+} from './CostInsightsHeader';
@@ -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}
        />
@@ -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>
+);
@@ -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 }>) {
@@ -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 =
@@ -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 (
    <>
@@ -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',
  );
@@ -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]
@@ -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
@@ -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.