fix(circleci): unbreak plugin

plugins/circleci/src/components/CircleCIWidget.tsx

@@ -15,25 +15,11 @@
  */
 import React from 'react';
 import { Route, MemoryRouter, Routes } from 'react-router';
-import { BuildsPage, Builds } from '../pages/BuildsPage';
-import { DetailedViewPage, BuildWithSteps } from '../pages/BuildWithStepsPage';
+import { Builds } from '../pages/BuildsPage';
+import { BuildWithSteps } from '../pages/BuildWithStepsPage';
 import { AppStateProvider } from '../state';
 import { Settings } from './Settings';
 
-export const App = () => {
-  return (
-    <AppStateProvider>
-      <>
-        <Routes>
-          <Route path="*" element={<BuildsPage />} />
-          <Route path="/build/:buildId" element={<DetailedViewPage />} />
-        </Routes>
-        <Settings />
-      </>
-    </AppStateProvider>
-  );
-};
-
 // TODO: allow pass in settings as props
 // When some shared settings workflow
 // will be established

plugins/circleci/src/index.ts

@@ -17,4 +17,4 @@
 export { plugin } from './plugin';
 export * from './api';
 export * from './route-refs';
-export { CircleCIWidget } from './components/App';
+export { CircleCIWidget } from './components/CircleCIWidget';

plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -25,6 +25,8 @@ import { Layout } from '../../components/Layout';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { useSettings } from '../../state/useSettings';
 import { useBuildWithSteps } from '../../state/useBuildWithSteps';
+import { AppStateProvider } from '../../state';
+import { Settings } from '../../components/Settings';
 
 const IconLink = IconButton as typeof Link;
 const BuildName: FC<{ build?: BuildWithSteps }> = ({ build }) => (
@@ -93,11 +95,14 @@ const pickClassName = (
 };
 
 const Page = () => (
-  <Layout>
-    <Content>
-      <BuildWithStepsView />
-    </Content>
-  </Layout>
+  <AppStateProvider>
+    <Layout>
+      <Content>
+        <BuildWithStepsView />
+        <Settings />
+      </Content>
+    </Layout>
+  </AppStateProvider>
 );
 
 const BuildWithStepsView: FC<{}> = () => {

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

@@ -19,13 +19,18 @@ import { Grid } from '@material-ui/core';
 import { Builds as BuildsComp } from './lib/Builds';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
+import { AppStateProvider } from '../../state/AppState';
+import { Settings } from '../../components/Settings';
 
 const BuildsPage: FC<{}> = () => (
-  <Layout>
-    <Content>
-      <Builds />
-    </Content>
-  </Layout>
+  <AppStateProvider>
+    <Layout>
+      <Content>
+        <Builds />
+        <Settings />
+      </Content>
+    </Layout>
+  </AppStateProvider>
 );
 
 const Builds = () => (

plugins/circleci/src/plugin.ts

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import { App } from './components/App';
-import { circleCIRouteRef } from './route-refs';
+import { circleCIRouteRef, circleCIBuildRouteRef } from './route-refs';
+import BuildsPage from './pages/BuildsPage/BuildsPage';
+import BuildWithStepsPage from './pages/BuildWithStepsPage/BuildWithStepsPage';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.addRoute(circleCIRouteRef, App, { exact: false });
+    router.addRoute(circleCIRouteRef, BuildsPage);
+    router.addRoute(circleCIBuildRouteRef, BuildWithStepsPage);
   },
 });

plugins/circleci/src/route-refs.tsx

@@ -34,5 +34,10 @@ const CircleCIIcon: FC<SvgIconProps> = props => (
 export const circleCIRouteRef = createRouteRef({
   icon: CircleCIIcon,
   path: '/circleci',
-  title: 'CircleCI',
+  title: 'CircleCI | All builds',
+});
+
+export const circleCIBuildRouteRef = createRouteRef({
+  path: '/circleci/build/:buildId',
+  title: 'CircleCI | Build info',
 });

plugins/circleci/src/state/useBuilds.ts

@@ -70,7 +70,6 @@ export const transform = (
 
 export function useBuilds() {
   const [{ repo, owner, token }] = useSettings();
-
   const api = useApi(circleCIApiRef);
   const errorApi = useApi(errorApiRef);