move search-next page from app to plugin-search

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

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

@@ -0,0 +1,71 @@
+/*
+ * 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 {
+  Content,
+  Header,
+  Lifecycle,
+  Page,
+  useQueryParamState,
+} from '@backstage/core';
+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';
+
+export const SearchPageNext = () => {
+  const [queryString, setQueryString] = useQueryParamState<string>('query');
+  const [searchQuery, setSearchQuery] = useState(queryString ?? '');
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    setSearchQuery(event.target.value);
+  };
+
+  useEffect(() => setSearchQuery(queryString ?? ''), [queryString]);
+
+  useDebounce(
+    () => {
+      setQueryString(searchQuery);
+    },
+    200,
+    [searchQuery],
+  );
+
+  const handleClearSearchBar = () => {
+    setSearchQuery('');
+  };
+
+  return (
+    <Page themeId="home">
+      <Header title="Search" subtitle={<Lifecycle alpha />} />
+      <Content>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <SearchBar
+              handleSearch={handleSearch}
+              handleClearSearchBar={handleClearSearchBar}
+              searchQuery={searchQuery}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <SearchResult searchQuery={(queryString ?? '').toLowerCase()} />
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};

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