Restructure pages

plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import {
+  Content,
+  ContentHeader,
+  SupportButton,
+  InfoCard,
+} from '@backstage/core';
+import { Button, Grid } from '@material-ui/core';
+import { CircleCIFetch } from 'components/CircleCIFetch';
+import { Settings as SettingsIcon } from '@material-ui/icons';
+
+export const BuildsPage: FC<{}> = () => (
+  <Content>
+    <ContentHeader title="Circle CI">
+      <Button
+        component={RouterLink}
+        to="/circleci/settings"
+        startIcon={<SettingsIcon />}
+      >
+        Settings
+      </Button>
+      <SupportButton>A description of your plugin goes here.</SupportButton>
+    </ContentHeader>
+    <Grid container spacing={3} direction="column">
+      <Grid item>
+        <InfoCard title="Pipelines">
+          <CircleCIFetch />
+        </InfoCard>
+      </Grid>
+    </Grid>
+  </Content>
+);

plugins/circleci/src/pages/BuildsPage/index.ts

@@ -0,0 +1 @@
+export * from './BuildsPage';

plugins/circleci/src/pages/CircleCIPage/CircleCIPage.tsx

@@ -16,51 +16,25 @@
 
 import React, { FC } from 'react';
 import { Route } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
-import { Grid, Button } from '@material-ui/core';
-import { Settings as SettingsIcon } from '@material-ui/icons';
 import {
-  InfoCard,
   Header,
   Page,
   pageTheme,
-  Content,
-  ContentHeader,
   HeaderLabel,
-  SupportButton,
 } from '@backstage/core';
-import { CircleCIFetch } from '../CircleCIFetch';
 import { SettingsPage } from '../SettingsPage';
+import { BuildsPage } from '../BuildsPage/BuildsPage';
 export const CircleCIPage: FC<{}> = () => {
   return (
     <>
-      <Route path="/circleci/settings" component={SettingsPage} />
       <Page theme={pageTheme.tool}>
         <Header title="Welcome to circleci!" subtitle="Optional subtitle">
           <HeaderLabel label="Owner" value="Team X" />
           <HeaderLabel label="Lifecycle" value="Alpha" />
         </Header>
-        <Content>
-          <ContentHeader title="Circle CI">
-            <Button
-              component={RouterLink}
-              to="/circleci/settings"
-              startIcon={<SettingsIcon />}
-            >
-              Settings
-            </Button>
-            <SupportButton>
-              A description of your plugin goes here.
-            </SupportButton>
-          </ContentHeader>
-          <Grid container spacing={3} direction="column">
-            <Grid item>
-              <InfoCard title="Pipelines">
-                <CircleCIFetch />
-              </InfoCard>
-            </Grid>
-          </Grid>
-        </Content>
+        <Route path="/circleci/settings" component={SettingsPage} />
+        <Route exact path="/circleci" component={BuildsPage}>
+        </Route>
       </Page>
     </>
   );

plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx

@@ -4,12 +4,10 @@ import { circleCIApiRef } from 'api';
 import {
   InfoCard,
   useApi,
-  Header,
   Page,
   pageTheme,
   Content,
   ContentHeader,
-  HeaderLabel,
   SupportButton,
 } from '@backstage/core';
 import { ProjectInput } from 'components/ProjectInput/ProjectInput';
@@ -30,10 +28,6 @@ export const SettingsPage = () => {
 
   return (
     <Page theme={pageTheme.tool}>
-      <Header title="Circle CI" subtitle="Settings">
-        <HeaderLabel label="Owner" value="Team X" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
       <Content>
         <ContentHeader title="Settings">
           <Button component={RouterLink} to="/circleci">
@@ -41,7 +35,7 @@ export const SettingsPage = () => {
           </Button>
           <SupportButton>A description of your plugin goes here.</SupportButton>
         </ContentHeader>
-        <Grid container spacing={3}>
+        <Grid container spacing={3} >
           <Grid item xs={6}>
             <InfoCard title="Authentication">
               <List>

plugins/circleci/src/plugin.ts

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import { CircleCIPage } from './components/CircleCIPage';
-
+import { CircleCIPage } from './pages/CircleCIPage';
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {