feat(circleci): export router

plugins/circleci/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@backstage/core": "^0.1.1-alpha.21",
+    "@backstage/plugin-catalog-model": "^0.1.1-alpha.21",
     "@backstage/plugin-catalog": "^0.1.1-alpha.21",
     "@backstage/theme": "^0.1.1-alpha.21",
     "@material-ui/core": "^4.9.1",

plugins/circleci/src/components/Router.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Routes, Route } from 'react-router';
+import { circleCIRouteRef, circleCIBuildRouteRef } from '../route-refs';
+import { BuildWithStepsPage } from './BuildWithStepsPage/';
+import { BuildsPage } from './BuildsPage';
+import { CIRCLECI_ANNOTATION } from '../constants';
+import { Entity } from '@backstage/catalog-model';
+import { WarningPanel } from '@backstage/core';
+
+export const isPluginApplicableToEntity = (entity: Entity) =>
+  Boolean(entity.metadata.annotations?.[CIRCLECI_ANNOTATION]) &&
+  entity.metadata.annotations?.[CIRCLECI_ANNOTATION] !== '';
+
+export const Router = ({ entity }: { entity: Entity }) =>
+  !isPluginApplicableToEntity(entity) ? (
+    <WarningPanel title="CircleCI plugin:">
+      `entity.metadata.annotations['{CIRCLECI_ANNOTATION}']` key is missing on
+      the entity.
+    </WarningPanel>
+  ) : (
+    <Routes>
+      <Route path={`/${circleCIRouteRef.path}`} element={<BuildsPage />} />
+      <Route
+        path={`/${circleCIBuildRouteRef.path}`}
+        element={<BuildWithStepsPage />}
+      />
+    </Routes>
+  );

plugins/circleci/src/constants.ts

@@ -0,0 +1 @@
+export const CIRCLECI_ANNOTATION = 'circleci.com/project-slug';

plugins/circleci/src/index.ts

@@ -17,4 +17,5 @@
 export { plugin } from './plugin';
 export * from './api';
 export * from './route-refs';
-export { CircleCIWidget } from './components/CircleCIWidget';
+export { Router, isPluginApplicableToEntity } from './components/Router';
+export { CIRCLECI_ANNOTATION } from './constants';

plugins/circleci/src/plugin.ts

@@ -14,14 +14,7 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-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, BuildsPage);
-    router.addRoute(circleCIBuildRouteRef, BuildWithStepsPage);
-  },
 });

plugins/circleci/src/route-refs.tsx

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