From 298851b31240fabcc1ba20bb126fb9f4e806c291 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Mon, 7 Sep 2020 23:03:33 +0200 Subject: [PATCH 1/3] 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 = () => ( + } /> } /> - + } /> {...deprecatedAppRoutes} ); 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<{}> = () => ( + } /> } /> - + } /> {deprecatedAppRoutes} 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 ( @@ -130,5 +130,3 @@ const ExplorePluginPage: FC<{}> = () => { ); }; - -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 = () => ( + + } /> + +); 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); - }, }); From 1486990b9100a03a7210052c6ee31d6339c7d80b Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Mon, 7 Sep 2020 23:28:00 +0200 Subject: [PATCH 2/3] fix: missing header --- plugins/explore/src/components/Router.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/plugins/explore/src/components/Router.tsx b/plugins/explore/src/components/Router.tsx index f2556b75ed..becb2522d0 100644 --- a/plugins/explore/src/components/Router.tsx +++ b/plugins/explore/src/components/Router.tsx @@ -1,3 +1,19 @@ +/* + * 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 { Route, Routes } from 'react-router'; import { ExplorePluginPage } from './ExplorePluginPage'; From 2371529edda0e84d6fe50a21245166e7a04120f5 Mon Sep 17 00:00:00 2001 From: Ivan Shmidt Date: Tue, 8 Sep 2020 09:53:34 +0200 Subject: [PATCH 3/3] feat: remove explore plugin from app --- packages/app/src/App.tsx | 2 -- .../create-app/templates/default-app/packages/app/src/App.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 759901c11e..187ee27e3e 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -28,7 +28,6 @@ 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'; @@ -62,7 +61,6 @@ const AppRoutes = () => ( element={} /> } /> - } /> {...deprecatedAppRoutes} ); 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 cd03e20f06..ba43c351b2 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,7 +11,6 @@ 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'; @@ -38,7 +37,6 @@ const App: FC<{}> = () => ( element={} /> } /> - } /> {deprecatedAppRoutes}