Refactor to new routing api

packages/app/src/App.tsx

@@ -30,6 +30,7 @@ import { Router as CatalogRouter } from '@backstage/plugin-catalog';
 import { Router as DocsRouter } from '@backstage/plugin-techdocs';
 import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql';
 import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
+import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse';
 import { Route, Routes, Navigate } from 'react-router';
 
 import { EntityPage } from './components/catalog/EntityPage';
@@ -68,6 +69,8 @@ const AppRoutes = () => (
       element={<TechRadarRouter width={1500} height={800} />}
     />
     <Route path="/graphiql" element={<GraphiQLRouter />} />
+    <Route path="/lighthouse/*" element={<LighthouseRouter />} />
+    <Navigate key="/" to="/catalog" />
     {...deprecatedAppRoutes}
   </Routes>
 );

plugins/lighthouse/src/Router.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { rootRouteRef, viewAuditRouteRef, createAuditRouteRef } from './plugin';
+import AuditList from './components/AuditList';
+import AuditView from './components/AuditView';
+import CreateAudit from './components/CreateAudit';
+
+export const Router = () => (
+  <Routes>
+    <Route path={`/${rootRouteRef.path}`} element={<AuditList />} />
+    <Route path={`/${viewAuditRouteRef.path}`} element={<AuditView />} />
+    <Route path={`/${createAuditRouteRef.path}`} element={<CreateAudit />} />
+  </Routes>
+);

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -23,7 +23,7 @@ import {
   CATEGORY_LABELS,
   buildSparklinesDataForItem,
 } from '../../utils';
-import { Link } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 import AuditStatusIcon from '../AuditStatusIcon';
 
 const columns: TableColumn[] = [
@@ -94,9 +94,7 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => {
 
     return {
       websiteUrl: (
-        <Link href={`/lighthouse/audit/${website.lastAudit.id}`}>
-          {website.url}
-        </Link>
+        <Link to={`audit/${website.lastAudit.id}`}>{website.url}</Link>
       ),
       ...trendlines,
       lastReport: (

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

@@ -16,8 +16,8 @@
 
 import React, { useState, useMemo, FC, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
-import { useNavigate } from 'react-router-dom';
-import { Grid, Button } from '@material-ui/core';
+import { useNavigate, Link } from 'react-router-dom';
+import { Grid, Button, Typography } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import Pagination from '@material-ui/lab/Pagination';
 import {
@@ -37,6 +37,7 @@ import { useQuery } from '../../utils';
 import LighthouseSupportButton from '../SupportButton';
 import LighthouseIntro, { LIGHTHOUSE_INTRO_LOCAL_STORAGE } from '../Intro';
 import AuditListTable from './AuditListTable';
+import { createAuditRouteRef } from '../../plugin';
 
 export const LIMIT = 10;
 
@@ -77,7 +78,7 @@ const AuditList: FC<{}> = () => {
             page={page}
             count={pageCount}
             onChange={(_event: Event, newPage: number) => {
-              navigate(`/lighthouse?page=${newPage}`);
+              navigate(`?page=${newPage}`);
             }}
           />
         )}
@@ -111,7 +112,7 @@ const AuditList: FC<{}> = () => {
           <Button
             variant="contained"
             color="primary"
-            href="/lighthouse/create-audit"
+            onClick={() => navigate(createAuditRouteRef.path)}
           >
             Create Audit
           </Button>

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState, useEffect, ReactNode, FC } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, generatePath, useParams, useNavigate } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import {
   makeStyles,
@@ -75,7 +75,7 @@ const AuditLinkList: FC<AuditLinkListProps> = ({
         button
         component={Link}
         replace
-        to={`/lighthouse/audit/${audit.id}`}
+        to={`audit/${audit.id}`}
       >
         <ListItemIcon>
           <AuditStatusIcon audit={audit} />
@@ -116,6 +116,7 @@ const ConnectedAuditView: FC<{}> = () => {
   const lighthouseApi = useApi(lighthouseApiRef);
   const params = useParams() as { id: string };
   const classes = useStyles();
+  const navigate = useNavigate();
 
   const { loading, error, value: nextValue } = useAsync(
     async () => await lighthouseApi.getWebsiteForAuditId(params.id),
@@ -154,7 +155,7 @@ const ConnectedAuditView: FC<{}> = () => {
     );
   }
 
-  let createAuditButtonUrl = '/lighthouse/create-audit';
+  let createAuditButtonUrl = 'create-audit';
   if (value?.url) {
     createAuditButtonUrl += `?url=${encodeURIComponent(value.url)}`;
   }
@@ -176,9 +177,9 @@ const ConnectedAuditView: FC<{}> = () => {
           <Button
             variant="contained"
             color="primary"
-            href={createAuditButtonUrl}
+            onClick={() => navigate(`../../${createAuditButtonUrl}`)}
           >
-            Create Audit
+            Create New Audit
           </Button>
           <LighthouseSupportButton />
         </ContentHeader>

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

@@ -78,7 +78,7 @@ const CreateAudit: FC<{}> = () => {
           },
         },
       });
-      navigate('/lighthouse');
+      navigate('..');
     } catch (err) {
       errorApi.post(err);
     } finally {
@@ -154,7 +154,7 @@ const CreateAudit: FC<{}> = () => {
                     <Button
                       variant="outlined"
                       color="primary"
-                      href="/lighthouse"
+                      onClick={() => navigate('..')}
                       disabled={submitting}
                     >
                       Cancel

plugins/lighthouse/src/index.ts

@@ -15,4 +15,5 @@
  */
 
 export { plugin } from './plugin';
+export { Router } from './Router';
 export * from './api';

plugins/lighthouse/src/plugin.ts

@@ -14,12 +14,29 @@
  * limitations under the License.
  */
 
-import { createPlugin, createApiFactory, configApiRef } from '@backstage/core';
-import AuditList from './components/AuditList';
-import AuditView from './components/AuditView';
-import CreateAudit from './components/CreateAudit';
+import {
+  createPlugin,
+  createRouteRef,
+  createApiFactory,
+  configApiRef,
+} from '@backstage/core';
 import { lighthouseApiRef, LighthouseRestApi } from './api';
 
+export const rootRouteRef = createRouteRef({
+  path: '',
+  title: 'Lighthouse',
+});
+
+export const viewAuditRouteRef = createRouteRef({
+  path: 'audit/:id',
+  title: 'View Lighthouse Audit',
+});
+
+export const createAuditRouteRef = createRouteRef({
+  path: 'create-audit',
+  title: 'Create Lighthouse Audit',
+});
+
 export const plugin = createPlugin({
   id: 'lighthouse',
   apis: [
@@ -29,9 +46,4 @@ export const plugin = createPlugin({
       factory: ({ configApi }) => LighthouseRestApi.fromConfig(configApi),
     }),
   ],
-  register({ router }) {
-    router.registerRoute('/lighthouse', AuditList);
-    router.registerRoute('/lighthouse/audit/:id', AuditView);
-    router.registerRoute('/lighthouse/create-audit', CreateAudit);
-  },
 });