Add feature flag + app-based search page.

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

packages/app/src/App.tsx

@@ -17,6 +17,7 @@
 import {
   AlertDisplay,
   createApp,
+  LocalStorageFeatureFlags,
   FlatRoutes,
   OAuthRequestDialog,
   SignInPage,
@@ -50,6 +51,7 @@ import { Navigate, Route } from 'react-router';
 import { apis } from './apis';
 import { EntityPage } from './components/catalog/EntityPage';
 import Root from './components/Root';
+import { SearchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
 
@@ -87,6 +89,7 @@ const app = createApp({
 
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
+const featureFlags = new LocalStorageFeatureFlags();
 
 const routes = (
   <FlatRoutes>
@@ -100,6 +103,9 @@ const routes = (
     </Route>
     <Route path="/catalog-import" element={<CatalogImportPage />} />
     <Route path="/docs" element={<TechdocsPage />} />
+    {featureFlags.isActive('use-search-platform') && (
+      <Route path="/search" element={<SearchPage />} />
+    )}
     <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/explore" element={<ExplorePage />} />
     <Route

packages/app/src/components/search/SearchPage.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021 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, 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';
+
+// @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 = () => {
+  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 (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/plugin.ts

@@ -27,8 +27,9 @@ export const rootRouteRef = createRouteRef({
 
 export const searchPlugin = createPlugin({
   id: 'search',
-  register({ router }) {
+  register({ router, featureFlags }) {
     router.addRoute(rootRouteRef, SearchPageComponent);
+    featureFlags.register('use-search-platform');
   },
   routes: {
     root: rootRouteRef,