<SearchBarNext /> -> <SearchBar />, with deprecation warning.

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

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

@@ -20,7 +20,7 @@ import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
 import { Content, Header, Lifecycle, Page } from '@backstage/core';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
-  SearchBarNext as SearchBar,
+  SearchBar,
   SearchFilterNext as SearchFilter,
   SearchResult,
   DefaultResultListItem,

plugins/search/src/components/SearchBar/SearchBar.test.tsx

@@ -20,14 +20,14 @@ import userEvent from '@testing-library/user-event';
 import { useApi } from '@backstage/core';
 
 import { SearchContextProvider } from '../SearchContext';
-import { SearchBarNext } from './SearchBarNext';
+import { SearchBar } from './SearchBar';
 
 jest.mock('@backstage/core', () => ({
   ...jest.requireActual('@backstage/core'),
   useApi: jest.fn().mockReturnValue({}),
 }));
 
-describe('SearchBarNext', () => {
+describe('SearchBar', () => {
   const initialState = {
     term: '',
     pageCursor: '',
@@ -48,7 +48,7 @@ describe('SearchBarNext', () => {
   it('Renders without exploding', async () => {
     render(
       <SearchContextProvider initialState={initialState}>
-        <SearchBarNext />
+        <SearchBar />
       </SearchContextProvider>,
     );
 
@@ -60,7 +60,7 @@ describe('SearchBarNext', () => {
   it('Renders based on initial search', async () => {
     render(
       <SearchContextProvider initialState={{ ...initialState, term }}>
-        <SearchBarNext />
+        <SearchBar />
       </SearchContextProvider>,
     );
 
@@ -72,7 +72,7 @@ describe('SearchBarNext', () => {
   it('Updates term state when text is entered', async () => {
     render(
       <SearchContextProvider initialState={initialState}>
-        <SearchBarNext />
+        <SearchBar />
       </SearchContextProvider>,
     );
 
@@ -94,7 +94,7 @@ describe('SearchBarNext', () => {
   it('Clear button clears term state', async () => {
     render(
       <SearchContextProvider initialState={{ ...initialState, term }}>
-        <SearchBarNext />
+        <SearchBar />
       </SearchContextProvider>,
     );
 
@@ -120,7 +120,7 @@ describe('SearchBarNext', () => {
 
     render(
       <SearchContextProvider initialState={initialState}>
-        <SearchBarNext debounceTime={debounceTime} />
+        <SearchBar debounceTime={debounceTime} />
       </SearchContextProvider>,
     );
 

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 Spotify AB
+ * 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.
@@ -14,56 +14,54 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Paper } from '@material-ui/core';
-import InputBase from '@material-ui/core/InputBase';
-import IconButton from '@material-ui/core/IconButton';
+import React, { ChangeEvent, useState } from 'react';
+import { useDebounce } from 'react-use';
+import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  input: {
-    flex: 1,
-  },
-}));
+import { useSearch } from '../SearchContext';
 
-type SearchBarProps = {
-  searchQuery: string;
-  handleSearch: any;
-  handleClearSearchBar: any;
+type Props = {
+  className?: string;
+  debounceTime?: number;
 };
 
-export const SearchBar = ({
-  searchQuery,
-  handleSearch,
-  handleClearSearchBar,
-}: SearchBarProps) => {
-  const classes = useStyles();
+export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
+  const { term, setTerm } = useSearch();
+  const [value, setValue] = useState<string>(term);
+
+  useDebounce(() => setTerm(value), debounceTime, [value]);
+
+  const handleQuery = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleClear = () => setValue('');
 
   return (
-    <Paper
-      component="form"
-      onSubmit={e => handleSearch(e)}
-      className={classes.root}
-    >
-      <IconButton disabled type="submit" aria-label="search">
-        <SearchIcon />
-      </IconButton>
-      <InputBase
-        className={classes.input}
-        placeholder="Search in Backstage"
-        value={searchQuery}
-        onChange={e => handleSearch(e)}
-        inputProps={{ 'aria-label': 'search backstage' }}
-      />
-      <IconButton aria-label="search" onClick={() => handleClearSearchBar()}>
-        <ClearButton />
-      </IconButton>
-    </Paper>
+    <InputBase
+      className={className}
+      data-testid="search-bar-next"
+      fullWidth
+      placeholder="Search in Backstage"
+      value={value}
+      onChange={handleQuery}
+      inputProps={{ 'aria-label': 'Search term' }}
+      startAdornment={
+        <InputAdornment position="start">
+          <IconButton aria-label="Query term" disabled>
+            <SearchIcon />
+          </IconButton>
+        </InputAdornment>
+      }
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton aria-label="Clear term" onClick={handleClear}>
+            <ClearButton />
+          </IconButton>
+        </InputAdornment>
+      }
+    />
   );
 };

plugins/search/src/components/SearchBar/index.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 Spotify AB
+ * 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.

plugins/search/src/components/SearchBarNext/SearchBarNext.tsx

@@ -1,67 +0,0 @@
-/*
- * 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 React, { ChangeEvent, useState } from 'react';
-import { useDebounce } from 'react-use';
-import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import ClearButton from '@material-ui/icons/Clear';
-
-import { useSearch } from '../SearchContext';
-
-type Props = {
-  className?: string;
-  debounceTime?: number;
-};
-
-export const SearchBarNext = ({ className, debounceTime = 0 }: Props) => {
-  const { term, setTerm } = useSearch();
-  const [value, setValue] = useState<string>(term);
-
-  useDebounce(() => setTerm(value), debounceTime, [value]);
-
-  const handleQuery = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const handleClear = () => setValue('');
-
-  return (
-    <InputBase
-      className={className}
-      data-testid="search-bar-next"
-      fullWidth
-      placeholder="Search in Backstage"
-      value={value}
-      onChange={handleQuery}
-      inputProps={{ 'aria-label': 'Search term' }}
-      startAdornment={
-        <InputAdornment position="start">
-          <IconButton aria-label="Query term" disabled>
-            <SearchIcon />
-          </IconButton>
-        </InputAdornment>
-      }
-      endAdornment={
-        <InputAdornment position="end">
-          <IconButton aria-label="Clear term" onClick={handleClear}>
-            <ClearButton />
-          </IconButton>
-        </InputAdornment>
-      }
-    />
-  );
-};

plugins/search/src/components/SearchBarNext/index.tsx

@@ -1,17 +0,0 @@
-/*
- * 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.
- */
-
-export { SearchBarNext } from './SearchBarNext';

plugins/search/src/components/index.tsx

@@ -17,7 +17,6 @@
 export * from './Filters';
 export * from './SearchFilterNext';
 export * from './SearchBar';
-export * from './SearchBarNext';
 export * from './SearchPage';
 export * from './SearchResult';
 export * from './DefaultResultListItem';

plugins/search/src/plugin.ts

@@ -71,11 +71,24 @@ export const SearchPageNext = searchPlugin.provide(
   }),
 );
 
+export const SearchBar = searchPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () => import('./components/SearchBar').then(m => m.SearchBar),
+    },
+  }),
+);
+
+/**
+ * @deprecated This component was used for rapid prototyping of the Backstage
+ * Search platform. Now that the API has stabilized, you should use the
+ * <SearchBar /> component instead. This component will be removed in an
+ * upcoming release.
+ */
 export const SearchBarNext = searchPlugin.provide(
   createComponentExtension({
     component: {
-      lazy: () =>
-        import('./components/SearchBarNext').then(m => m.SearchBarNext),
+      lazy: () => import('./components/SearchBar').then(m => m.SearchBar),
     },
   }),
 );