From 298851b31240fabcc1ba20bb126fb9f4e806c291 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Mon, 7 Sep 2020 23:03:33 +0200
Subject: [PATCH] feat(plugin-explore): migrate to new routing api

---
 packages/app/src/App.tsx                               |  4 +++-
 .../templates/default-app/packages/app/src/App.tsx     |  5 ++++-
 plugins/explore/package.json                           |  3 ++-
 plugins/explore/src/components/ExplorePluginPage.tsx   |  6 ++----
 plugins/explore/src/components/Router.tsx              | 10 ++++++++++
 plugins/explore/src/index.ts                           |  1 +
 plugins/explore/src/plugin.ts                          |  7 ++-----
 7 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 plugins/explore/src/components/Router.tsx

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 8ddf53783d..759901c11e 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -28,6 +28,7 @@ import { hot } from 'react-hot-loader/root';
 import { providers } from './identityProviders';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
 import { Router as DocsRouter } from '@backstage/plugin-techdocs';
+import { Router as ExploreRouter } from '@backstage/plugin-explore';
 import { Route, Routes, Navigate } from 'react-router';
 
 import { EntityPage } from './components/catalog/EntityPage';
@@ -55,12 +56,13 @@ const deprecatedAppRoutes = app.getRoutes();
 
 const AppRoutes = () => (
   <Routes>
+    <Navigate key="/" to="/catalog" />
     <Route
       path="/catalog/*"
       element={<CatalogRouter EntityPage={EntityPage} />}
     />
     <Route path="/docs/*" element={<DocsRouter />} />
-    <Navigate key="/" to="/catalog" />
+    <Route path="/explore/*" element={<ExploreRouter />} />
     {...deprecatedAppRoutes}
   </Routes>
 );
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 3e6a0ef00e..cd03e20f06 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -11,6 +11,8 @@ import { AppSidebar } from './sidebar';
 import { Route, Routes, Navigate } from 'react-router';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
 import { Router as DocsRouter } from '@backstage/plugin-techdocs';
+import { Router as ExploreRouter } from '@backstage/plugin-explore';
+
 import { EntityPage } from './components/catalog/EntityPage';
 
 const app = createApp({
@@ -30,12 +32,13 @@ const App: FC<{}> = () => (
       <SidebarPage>
         <AppSidebar />
         <Routes>
+          <Navigate key="/" to="/catalog" />
           <Route
             path="/catalog/*"
             element={<CatalogRouter EntityPage={EntityPage} />}
           />
           <Route path="/docs/*" element={<DocsRouter />} />
-          <Navigate key="/" to="/catalog" />
+          <Route path="/explore/*" element={<ExploreRouter />} />
           {deprecatedAppRoutes}
         </Routes>
       </SidebarPage>
diff --git a/plugins/explore/package.json b/plugins/explore/package.json
index 42176c45cf..1a4a44b9cd 100644
--- a/plugins/explore/package.json
+++ b/plugins/explore/package.json
@@ -29,7 +29,8 @@
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-use": "^15.3.3"
+    "react-use": "^15.3.3",
+    "react-router": "6.0.0-beta.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.1.1-alpha.21",
diff --git a/plugins/explore/src/components/ExplorePluginPage.tsx b/plugins/explore/src/components/ExplorePluginPage.tsx
index 3e073ad322..4365157f62 100644
--- a/plugins/explore/src/components/ExplorePluginPage.tsx
+++ b/plugins/explore/src/components/ExplorePluginPage.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React from 'react';
 import { makeStyles, Typography } from '@material-ui/core';
 import {
   Content,
@@ -107,7 +107,7 @@ const toolsCards = [
   },
 ];
 
-const ExplorePluginPage: FC<{}> = () => {
+export const ExplorePluginPage = () => {
   const classes = useStyles();
   return (
     <Page theme={pageTheme.home}>
@@ -130,5 +130,3 @@ const ExplorePluginPage: FC<{}> = () => {
     </Page>
   );
 };
-
-export default ExplorePluginPage;
diff --git a/plugins/explore/src/components/Router.tsx b/plugins/explore/src/components/Router.tsx
new file mode 100644
index 0000000000..f2556b75ed
--- /dev/null
+++ b/plugins/explore/src/components/Router.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route, Routes } from 'react-router';
+import { ExplorePluginPage } from './ExplorePluginPage';
+import { rootRouteRef } from '../plugin';
+
+export const Router = () => (
+  <Routes>
+    <Route path={`/${rootRouteRef.path}`} element={<ExplorePluginPage />} />
+  </Routes>
+);
diff --git a/plugins/explore/src/index.ts b/plugins/explore/src/index.ts
index 3a0a0fe2d3..ff7857cacd 100644
--- a/plugins/explore/src/index.ts
+++ b/plugins/explore/src/index.ts
@@ -15,3 +15,4 @@
  */
 
 export { plugin } from './plugin';
+export { Router } from './components/Router';
diff --git a/plugins/explore/src/plugin.ts b/plugins/explore/src/plugin.ts
index 66e48a9b15..75ea892242 100644
--- a/plugins/explore/src/plugin.ts
+++ b/plugins/explore/src/plugin.ts
@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
-import ExplorePluginPage from './components/ExplorePluginPage';
+import { createPlugin, createRouteRef } from '@backstage/core';
 
+export const rootRouteRef = createRouteRef({ path: '', title: 'Explore' });
 export const plugin = createPlugin({
   id: 'explore',
-  register({ router }) {
-    router.registerRoute('/explore', ExplorePluginPage);
-  },
 });