move search-next page from app to plugin-search

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

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 = (
     <Route path="/gcp-projects" element={<GcpProjectsPage />} />
     <Route path="/newrelic" element={<NewRelicPage />} />
     <Route path="/search" element={<SearchPage />} />
-    <Route path="/search-next" element={<SearchPageNext />} />
+    <Route
+      path="/search-next"
+      element={<SearchPageNext /* TODO: illustrate customization */ />}
+    />
     <Route path="/cost-insights" element={<CostInsightsPage />} />
     <Route
       path="/cost-insights/investigating-growth"

plugins/search/src/components/SearchPageNext/SearchPageNext.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Spotify AB
+ * 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.
@@ -20,15 +20,13 @@ import {
   Page,
   useQueryParamState,
 } from '@backstage/core';
-import { SearchBar, SearchResult } from '@backstage/plugin-search';
 import { Grid } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
+import { SearchBar } from '../SearchBar';
+import { SearchResult } from '../SearchResult';
 
-// TODO: Simplify / remove as much state handling here. The goal is for this to
-// more or less use the publicly exposed components from the search plugin and
-// not much else.
-export const SearchPage = () => {
+export const SearchPageNext = () => {
   const [queryString, setQueryString] = useQueryParamState<string>('query');
   const [searchQuery, setSearchQuery] = useState(queryString ?? '');
 

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';

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';

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,

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,
+  }),
+);