chore: remove explicit return

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -11,31 +11,30 @@ import {
 } from '@backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
-const ExampleComponent: FC<{}> = () => {
-  return (
-    <Page themeId="tool">
-      <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
-        <HeaderLabel label="Owner" value="Team X" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content>
-        <ContentHeader title="Plugin title">
-          <SupportButton>A description of your plugin goes here.</SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          <Grid item>
-            <InfoCard title="Information card">
-              <Typography variant="body1">
-                All content should be wrapped in a card like this.
-              </Typography>
-            </InfoCard>
-          </Grid>
-          <Grid item>
-            <ExampleFetchComponent />
-          </Grid>
+const ExampleComponent: FC<{}> = () => (
+  <Page themeId="tool">
+    <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
         </Grid>
-      </Content>
-    </Page>
-  );
-}
+        <Grid item>
+          <ExampleFetchComponent />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);
+  
 export default ExampleComponent;

packages/core/src/layout/Header/Header.tsx

@@ -22,76 +22,73 @@ import {
   Tooltip,
   makeStyles,
   Breadcrumbs,
-  useTheme,
 } from '@material-ui/core';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
-  theme => ({
-    header: {
-      gridArea: 'pageHeader',
-      padding: theme.spacing(3),
-      minHeight: 118,
-      width: '100%',
-      boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
-      position: 'relative',
-      zIndex: 100,
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-      backgroundImage: props => props.backgroundImage,
-      backgroundPosition: 'center',
-      backgroundSize: 'cover',
-    },
-    leftItemsBox: {
-      flex: '1 1 auto',
-    },
-    rightItemsBox: {
-      flex: '0 1 auto',
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      marginRight: theme.spacing(1),
-    },
-    title: {
-      color: theme.palette.bursts.fontColor,
-      lineHeight: '1.0em',
-      wordBreak: 'break-all',
-      fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
-      marginBottom: theme.spacing(1),
-    },
-    subtitle: {
-      color: 'rgba(255, 255, 255, 0.8)',
-      lineHeight: '1.0em',
-    },
-    type: {
-      textTransform: 'uppercase',
-      fontSize: 11,
-      opacity: 0.8,
-      marginBottom: theme.spacing(1),
-      color: theme.palette.bursts.fontColor,
-    },
-    breadcrumb: {
-      fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))',
-      color: theme.palette.bursts.fontColor,
-    },
-    breadcrumbType: {
-      fontSize: 'inherit',
-      opacity: 0.7,
-      marginRight: -theme.spacing(0.3),
-      marginBottom: theme.spacing(0.3),
-    },
-    breadcrumbTitle: {
-      fontSize: 'inherit',
-      marginLeft: -theme.spacing(0.3),
-      marginBottom: theme.spacing(0.3),
-    },
-  }),
-);
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  header: {
+    gridArea: 'pageHeader',
+    padding: theme.spacing(3),
+    minHeight: 118,
+    width: '100%',
+    boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
+    position: 'relative',
+    zIndex: 100,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundImage: theme.page.backgroundImage,
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+  },
+  leftItemsBox: {
+    flex: '1 1 auto',
+  },
+  rightItemsBox: {
+    flex: '0 1 auto',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    marginRight: theme.spacing(1),
+  },
+  title: {
+    color: theme.palette.bursts.fontColor,
+    lineHeight: '1.0em',
+    wordBreak: 'break-all',
+    fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
+    marginBottom: theme.spacing(1),
+  },
+  subtitle: {
+    color: 'rgba(255, 255, 255, 0.8)',
+    lineHeight: '1.0em',
+  },
+  type: {
+    textTransform: 'uppercase',
+    fontSize: 11,
+    opacity: 0.8,
+    marginBottom: theme.spacing(1),
+    color: theme.palette.bursts.fontColor,
+  },
+  breadcrumb: {
+    fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))',
+    color: theme.palette.bursts.fontColor,
+  },
+  breadcrumbType: {
+    fontSize: 'inherit',
+    opacity: 0.7,
+    marginRight: -theme.spacing(0.3),
+    marginBottom: theme.spacing(0.3),
+  },
+  breadcrumbTitle: {
+    fontSize: 'inherit',
+    marginLeft: -theme.spacing(0.3),
+    marginBottom: theme.spacing(0.3),
+  },
+}));
 
 type HeaderStyles = ReturnType<typeof useStyles>;
 
@@ -200,10 +197,7 @@ export const Header: FC<Props> = ({
   type,
   typeLink,
 }) => {
-  const backstageTheme = useTheme<BackstageTheme>();
-  const classes = useStyles({
-    backgroundImage: backstageTheme.page.backgroundImage,
-  });
+  const classes = useStyles();
   const documentTitle = pageTitleOverride || title;
   const pageTitle = title || pageTitleOverride;
   const titleTemplate = `${documentTitle} | %s | Backstage`;

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx

@@ -21,15 +21,13 @@ type Props = {
   children?: React.ReactNode;
 };
 
-export const ApiExplorerLayout = ({ children }: Props) => {
-  return (
-    <Page themeId="home">
-      <Header
-        title="APIs"
-        subtitle="Backstage API Explorer"
-        pageTitleOverride="APIs"
-      />
-      {children}
-    </Page>
-  );
-};
+export const ApiExplorerLayout = ({ children }: Props) => (
+  <Page themeId="home">
+    <Header
+      title="APIs"
+      subtitle="Backstage API Explorer"
+      pageTitleOverride="APIs"
+    />
+    {children}
+  </Page>
+);

plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx

@@ -110,20 +110,18 @@ const labels = (
   </>
 );
 
-export const NewProjectPage = () => {
-  return (
-    <Page themeId="service">
-      <Header title="New GCP Project" type="tool">
-        {labels}
-      </Header>
-      <Content>
-        <ContentHeader title="">
-          <SupportButton>
-            This plugin allows you to view and interact with your gcp projects.
-          </SupportButton>
-        </ContentHeader>
-        <Project />
-      </Content>
-    </Page>
-  );
-};
+export const NewProjectPage = () => (
+  <Page themeId="service">
+    <Header title="New GCP Project" type="tool">
+      {labels}
+    </Header>
+    <Content>
+      <ContentHeader title="">
+        <SupportButton>
+          This plugin allows you to view and interact with your gcp projects.
+        </SupportButton>
+      </ContentHeader>
+      <Project />
+    </Content>
+  </Page>
+);

plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -145,18 +145,16 @@ const labels = (
   </>
 );
 
-export const ProjectDetailsPage = () => {
-  return (
-    <Page themeId="service">
-      <Header title="GCP Project Details" type="other">
-        {labels}
-      </Header>
-      <Content>
-        <ContentHeader title="">
-          <SupportButton>Support Button</SupportButton>
-        </ContentHeader>
-        <DetailsPage />
-      </Content>
-    </Page>
-  );
-};
+export const ProjectDetailsPage = () => (
+  <Page themeId="service">
+    <Header title="GCP Project Details" type="other">
+      {labels}
+    </Header>
+    <Content>
+      <ContentHeader title="">
+        <SupportButton>Support Button</SupportButton>
+      </ContentHeader>
+      <DetailsPage />
+    </Content>
+  </Page>
+);

plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx

@@ -132,21 +132,19 @@ const PageContents = () => {
   );
 };
 
-export const ProjectListPage = () => {
-  return (
-    <Page themeId="service">
-      <Header title="GCP Projects" type="tool">
-        {labels}
-      </Header>
-      <Content>
-        <ContentHeader title="">
-          <Button variant="contained" color="primary" href="/gcp-projects/new">
-            New Project
-          </Button>
-          <SupportButton>All your software catalog entities</SupportButton>
-        </ContentHeader>
-        <PageContents />
-      </Content>
-    </Page>
-  );
-};
+export const ProjectListPage = () => (
+  <Page themeId="service">
+    <Header title="GCP Projects" type="tool">
+      {labels}
+    </Header>
+    <Content>
+      <ContentHeader title="">
+        <Button variant="contained" color="primary" href="/gcp-projects/new">
+          New Project
+        </Button>
+        <SupportButton>All your software catalog entities</SupportButton>
+      </ContentHeader>
+      <PageContents />
+    </Content>
+  </Page>
+);

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -191,20 +191,16 @@ export const AuditViewContent: FC<{}> = () => {
   );
 };
 
-const ConnectedAuditView = () => {
-  return (
-    <Page themeId="tool">
-      <Header
-        title="Lighthouse"
-        subtitle="Website audits powered by Lighthouse"
-      >
-        <HeaderLabel label="Owner" value="Spotify" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content stretch>
-        <AuditViewContent />
-      </Content>
-    </Page>
-  );
-};
+const ConnectedAuditView = () => (
+  <Page themeId="tool">
+    <Header title="Lighthouse" subtitle="Website audits powered by Lighthouse">
+      <HeaderLabel label="Owner" value="Spotify" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content stretch>
+      <AuditViewContent />
+    </Content>
+  </Page>
+);
+
 export default ConnectedAuditView;

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -168,21 +168,16 @@ export const CreateAuditContent: FC<{}> = () => {
   );
 };
 
-const CreateAudit = () => {
-  return (
-    <Page themeId="tool">
-      <Header
-        title="Lighthouse"
-        subtitle="Website audits powered by Lighthouse"
-      >
-        <HeaderLabel label="Owner" value="Spotify" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content>
-        <CreateAuditContent />
-      </Content>
-    </Page>
-  );
-};
+const CreateAudit = () => (
+  <Page themeId="tool">
+    <Header title="Lighthouse" subtitle="Website audits powered by Lighthouse">
+      <HeaderLabel label="Owner" value="Spotify" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <CreateAuditContent />
+    </Content>
+  </Page>
+);
 
 export default CreateAudit;

plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx

@@ -26,25 +26,24 @@ import {
 } from '@backstage/core';
 import NewRelicFetchComponent from '../NewRelicFetchComponent';
 
-const NewRelicComponent: FC<{}> = () => {
-  return (
-    <Page themeId="tool">
-      <Header title="New Relic">
-        <HeaderLabel label="Owner" value="Engineering" />
-      </Header>
-      <Content>
-        <ContentHeader title="New Relic">
-          <SupportButton>
-            New Relic Application Performance Monitoring
-          </SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          <Grid item>
-            <NewRelicFetchComponent />
-          </Grid>
+const NewRelicComponent: FC<{}> = () => (
+  <Page themeId="tool">
+    <Header title="New Relic">
+      <HeaderLabel label="Owner" value="Engineering" />
+    </Header>
+    <Content>
+      <ContentHeader title="New Relic">
+        <SupportButton>
+          New Relic Application Performance Monitoring
+        </SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <NewRelicFetchComponent />
         </Grid>
-      </Content>
-    </Page>
-  );
-};
+      </Grid>
+    </Content>
+  </Page>
+);
+
 export default NewRelicComponent;

plugins/tech-radar/src/components/RadarPage.tsx

@@ -38,30 +38,29 @@ export const RadarPage = ({
   subtitle,
   pageTitle,
   ...props
-}: TechRadarPageProps): JSX.Element => {
-  return (
-    <Page themeId="tool">
-      <Header title={title} subtitle={subtitle}>
-        <HeaderLabel label="Owner" value="Spotify" />
-        <HeaderLabel label="Lifecycle" value="Beta" />
-      </Header>
-      <Content>
-        <ContentHeader title={pageTitle}>
-          <SupportButton>
-            This is used for visualizing the official guidelines of different
-            areas of software development such as languages, frameworks,
-            infrastructure and processes.
-          </SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="row">
-          <Grid item xs={12} sm={6} md={4}>
-            <RadarComponent {...props} />
-          </Grid>
+}: TechRadarPageProps): JSX.Element => (
+  <Page themeId="tool">
+    <Header title={title} subtitle={subtitle}>
+      <HeaderLabel label="Owner" value="Spotify" />
+      <HeaderLabel label="Lifecycle" value="Beta" />
+    </Header>
+    <Content>
+      <ContentHeader title={pageTitle}>
+        <SupportButton>
+          This is used for visualizing the official guidelines of different
+          areas of software development such as languages, frameworks,
+          infrastructure and processes.
+        </SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="row">
+        <Grid item xs={12} sm={6} md={4}>
+          <RadarComponent {...props} />
         </Grid>
-      </Content>
-    </Page>
-  );
-};
+      </Grid>
+    </Content>
+  </Page>
+);
+
 RadarPage.defaultProps = {
   title: 'Tech Radar',
   subtitle: 'Pick the recommended technologies for your projects',