diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 0e874e64e0..f5ad0337ee 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -39,7 +39,7 @@ import { GraphiQLPage } from '@backstage/plugin-graphiql'; import { LighthousePage } from '@backstage/plugin-lighthouse'; import { NewRelicPage } from '@backstage/plugin-newrelic'; import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; -import { SearchPage } from '@backstage/plugin-search'; +import { SearchPage, SearchPageNext } from '@backstage/plugin-search'; import { TechRadarPage } from '@backstage/plugin-tech-radar'; import { TechdocsPage } from '@backstage/plugin-techdocs'; import { UserSettingsPage } from '@backstage/plugin-user-settings'; @@ -50,7 +50,6 @@ import { Navigate, Route } from 'react-router'; import { apis } from './apis'; import { EntityPage } from './components/catalog/EntityPage'; import Root from './components/Root'; -import { SearchPage as SearchPageNext } from './components/search/SearchPage'; import { providers } from './identityProviders'; import * as plugins from './plugins'; @@ -113,7 +112,10 @@ const routes = ( } /> } /> } /> - } /> + } + /> } /> { +export const SearchPageNext = () => { const [queryString, setQueryString] = useQueryParamState('query'); const [searchQuery, setSearchQuery] = useState(queryString ?? ''); diff --git a/plugins/search/src/components/SearchPageNext/index.tsx b/plugins/search/src/components/SearchPageNext/index.tsx new file mode 100644 index 0000000000..464ba28750 --- /dev/null +++ b/plugins/search/src/components/SearchPageNext/index.tsx @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { SearchPageNext } from './SearchPageNext'; diff --git a/plugins/search/src/components/index.tsx b/plugins/search/src/components/index.tsx index ac47860dc2..f571c61373 100644 --- a/plugins/search/src/components/index.tsx +++ b/plugins/search/src/components/index.tsx @@ -17,5 +17,6 @@ export * from './Filters'; export * from './SearchBar'; export * from './SearchPage'; +export * from './SearchPageNext'; export * from './SearchResult'; export * from './SidebarSearch'; diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts index 268de25a00..519d7fcf66 100644 --- a/plugins/search/src/index.ts +++ b/plugins/search/src/index.ts @@ -15,7 +15,12 @@ */ // TODO: export searchApiRef from ./apis once interface is stable and settled. -export { searchPlugin, searchPlugin as plugin, SearchPage } from './plugin'; +export { + searchPlugin, + searchPlugin as plugin, + SearchPage, + SearchPageNext, +} from './plugin'; export { Filters, FiltersButton, diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts index e21ad934a0..e3e953e07d 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -23,12 +23,18 @@ import { import { SearchClient, searchApiRef } from './apis'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { SearchPage as SearchPageComponent } from './components/SearchPage'; +import { SearchPageNext as SearchPageNextComponent } from './components/SearchPageNext'; export const rootRouteRef = createRouteRef({ path: '/search', title: 'search', }); +export const rootNextRouteRef = createRouteRef({ + path: '/search-next', + title: 'search', +}); + export const searchPlugin = createPlugin({ id: 'search', apis: [ @@ -42,9 +48,11 @@ export const searchPlugin = createPlugin({ ], register({ router }) { router.addRoute(rootRouteRef, SearchPageComponent); + router.addRoute(rootNextRouteRef, SearchPageNextComponent); }, routes: { root: rootRouteRef, + nextRoot: rootNextRouteRef, }, }); @@ -54,3 +62,11 @@ export const SearchPage = searchPlugin.provide( mountPoint: rootRouteRef, }), ); + +export const SearchPageNext = searchPlugin.provide( + createRoutableExtension({ + component: () => + import('./components/SearchPageNext').then(m => m.SearchPageNext), + mountPoint: rootNextRouteRef, + }), +);