feat: routing -> plugin routing

plugins/circleci/src/components/Layout/Layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Header, Page, pageTheme, HeaderLabel } from '@backstage/core';
+
+export const Layout: React.FC = ({ children }) => (
+  <Page theme={pageTheme.tool}>
+    <Header title="Welcome to circleci!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    {children}
+  </Page>
+);

plugins/circleci/src/components/Layout/index.ts

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

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

@@ -9,25 +9,28 @@ import {
 import { Button, Grid } from '@material-ui/core';
 import { CircleCIFetch } from 'components/CircleCIFetch';
 import { Settings as SettingsIcon } from '@material-ui/icons';
+import { Layout } from 'components/Layout';
 
 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>
+  <Layout>
+    <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>
-    </Grid>
-  </Content>
+    </Content>
+  </Layout>
 );

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

@@ -1,44 +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.
- */
-
-import React, { FC } from 'react';
-import { Route } from 'react-router';
-import {
-  Header,
-  Page,
-  pageTheme,
-  HeaderLabel,
-} from '@backstage/core';
-import { SettingsPage } from '../SettingsPage';
-import { BuildsPage } from '../BuildsPage';
-import { DetailedViewPage } from '../DetailedViewPage';
-export const CircleCIPage: FC<{}> = () => {
-  return (
-    <>
-      <Page theme={pageTheme.tool}>
-        <Header title="Welcome to circleci!" subtitle="Optional subtitle">
-          <HeaderLabel label="Owner" value="Team X" />
-          <HeaderLabel label="Lifecycle" value="Alpha" />
-        </Header>
-        <Route path="/circleci/settings" component={SettingsPage} />
-        <Route path="/circleci/build/:buildId" component={DetailedViewPage} />
-        <Route exact path="/circleci" component={BuildsPage} />
-      </Page>
-    </>
-  );
-};
-
-export default CircleCIPage;

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

@@ -1 +0,0 @@
-export { CircleCIPage } from './CircleCIPage';

plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx

@@ -6,6 +6,7 @@ import { BuildWithSteps, BuildStepAction } from 'circleci-api';
 import { circleCIApiRef } from 'api';
 import { useParams } from 'react-router-dom';
 import { ActionOutput } from '../../components/ActionOutput/ActionOutput';
+import { Layout } from 'components/Layout';
 
 export const DetailedViewPage: FC<{}> = () => {
   let { buildId = '' } = useParams();
@@ -30,20 +31,22 @@ export const DetailedViewPage: FC<{}> = () => {
     getBuildAsync();
   }, [authed, buildId]);
   return (
-    <Content>
-      <PluginHeader />
-      {!api.authed ? (
-        <div>Not authenticated</div>
-      ) : (
-        <Grid container spacing={3} direction="column">
-          <Grid item>
-            <InfoCard title="Pipelines">
-            <BuildsList build={build} />
-            </InfoCard>
+    <Layout>
+      <Content>
+        <PluginHeader />
+        {!api.authed ? (
+          <div>Not authenticated</div>
+        ) : (
+          <Grid container spacing={3} direction="column">
+            <Grid item>
+              <InfoCard title="Pipelines">
+                <BuildsList build={build} />
+              </InfoCard>
+            </Grid>
           </Grid>
-        </Grid>
-      )}
-    </Content>
+        )}
+      </Content>
+    </Layout>
   );
 };
 
@@ -53,16 +56,23 @@ const BuildsList: FC<{ build: BuildWithSteps | null }> = ({ build }) => (
       build.steps &&
       build.steps.map(
         ({ name, actions }: { name: string; actions: BuildStepAction[] }) => (
-            <ActionsList name={name} actions={actions} />
+          <ActionsList name={name} actions={actions} />
         ),
       )}
   </Box>
 );
 
-const ActionsList: FC<{ actions: BuildStepAction[], name: string }> = ({ actions, name }) => (
+const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
+  actions,
+  name,
+}) => (
   <Box key={name}>
     {actions.map((action: BuildStepAction) => (
-        <ActionOutput action={action} name={action.name} url={action.output_url || ''} />
+      <ActionOutput
+        action={action}
+        name={action.name}
+        url={action.output_url || ''}
+      />
     ))}
   </Box>
 );

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

@@ -4,14 +4,13 @@ import { circleCIApiRef } from 'api';
 import {
   InfoCard,
   useApi,
-  Page,
-  pageTheme,
   Content,
   ContentHeader,
   SupportButton,
 } from '@backstage/core';
 import { ProjectInput } from 'components/ProjectInput/ProjectInput';
 import { Link as RouterLink } from 'react-router-dom';
+import { Layout } from 'components/Layout';
 
 export const SettingsPage = () => {
   const api = useApi(circleCIApiRef);
@@ -27,7 +26,7 @@ export const SettingsPage = () => {
   }, []);
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Layout>
       <Content>
         <ContentHeader title="Settings">
           <Button component={RouterLink} to="/circleci">
@@ -35,7 +34,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>
@@ -84,6 +83,6 @@ export const SettingsPage = () => {
           </Grid>
         </Grid>
       </Content>
-    </Page>
+    </Layout>
   );
 };

plugins/circleci/src/plugin.ts

@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import { CircleCIPage } from './pages/CircleCIPage';
+import { BuildsPage } from './pages/BuildsPage';
 import { SettingsPage } from './pages/SettingsPage';
+import { DetailedViewPage } from './pages/DetailedViewPage';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.registerRoute('/circleci', CircleCIPage);
+    router.registerRoute('/circleci', BuildsPage);
+    router.registerRoute('/circleci/build/:buildId', DetailedViewPage);
     router.registerRoute('/circleci/settings', SettingsPage);
   },
 });