<SearchFilterNext /> -> <SearchFilter />, with deprecation warning.

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

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

@@ -21,7 +21,7 @@ import { Content, Header, Lifecycle, Page } from '@backstage/core';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
   SearchBar,
-  SearchFilterNext as SearchFilter,
+  SearchFilter,
   SearchResult,
   DefaultResultListItem,
 } from '@backstage/plugin-search';

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

@@ -19,7 +19,7 @@ import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useApi } from '@backstage/core';
 
-import { SearchFilterNext } from './SearchFilterNext';
+import { SearchFilter } from './SearchFilter';
 import { SearchContextProvider } from '../SearchContext';
 
 jest.mock('@backstage/core', () => ({
@@ -27,7 +27,7 @@ jest.mock('@backstage/core', () => ({
   useApi: jest.fn().mockReturnValue({}),
 }));
 
-describe('SearchFilterNext', () => {
+describe('SearchFilter', () => {
   const initialState = {
     term: '',
     filters: {},
@@ -49,7 +49,7 @@ describe('SearchFilterNext', () => {
   it('Check that element was rendered and received props', async () => {
     const CustomFilter = (props: { name: string }) => <h6>{props.name}</h6>;
 
-    render(<SearchFilterNext name={name} component={CustomFilter} />);
+    render(<SearchFilter name={name} component={CustomFilter} />);
 
     expect(screen.getByRole('heading', { name })).toBeInTheDocument();
   });
@@ -58,7 +58,7 @@ describe('SearchFilterNext', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -84,7 +84,7 @@ describe('SearchFilterNext', () => {
             },
           }}
         >
-          <SearchFilterNext.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -101,7 +101,7 @@ describe('SearchFilterNext', () => {
     it('Renders correctly based on defaultValue', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Checkbox
+          <SearchFilter.Checkbox
             name={name}
             values={values}
             defaultValue={[values[0]]}
@@ -122,7 +122,7 @@ describe('SearchFilterNext', () => {
     it('Checking / unchecking a value sets filter state', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -152,7 +152,7 @@ describe('SearchFilterNext', () => {
     it('Checking / unchecking a value maintains unrelated filter state', async () => {
       render(
         <SearchContextProvider initialState={{ ...initialState, filters }}>
-          <SearchFilterNext.Checkbox name={name} values={values} />
+          <SearchFilter.Checkbox name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -186,7 +186,7 @@ describe('SearchFilterNext', () => {
     it('Renders field name and values when provided as props', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Select name={name} values={values} />
+          <SearchFilter.Select name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -218,7 +218,7 @@ describe('SearchFilterNext', () => {
             },
           }}
         >
-          <SearchFilterNext.Select name={name} values={values} />
+          <SearchFilter.Select name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -247,7 +247,7 @@ describe('SearchFilterNext', () => {
     it('Renders correctly based on defaultValue', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Select
+          <SearchFilter.Select
             name={name}
             values={values}
             defaultValue={values[0]}
@@ -280,7 +280,7 @@ describe('SearchFilterNext', () => {
     it('Selecting a value sets filter state', async () => {
       render(
         <SearchContextProvider initialState={initialState}>
-          <SearchFilterNext.Select name={name} values={values} />
+          <SearchFilter.Select name={name} values={values} />
         </SearchContextProvider>,
       );
 
@@ -331,7 +331,7 @@ describe('SearchFilterNext', () => {
             filters,
           }}
         >
-          <SearchFilterNext.Select name={name} values={values} />
+          <SearchFilter.Select name={name} values={values} />
         </SearchContextProvider>,
       );
 

plugins/search/src/components/SearchFilter/SearchFilter.tsx

@@ -164,16 +164,24 @@ const SelectFilter = ({
   );
 };
 
-const SearchFilterNext = ({ component: Element, ...props }: Props) => (
+const SearchFilter = ({ component: Element, ...props }: Props) => (
   <Element {...props} />
 );
 
-SearchFilterNext.Checkbox = (props: Omit<Props, 'component'> & Component) => (
-  <SearchFilterNext {...props} component={CheckboxFilter} />
+SearchFilter.Checkbox = (props: Omit<Props, 'component'> & Component) => (
+  <SearchFilter {...props} component={CheckboxFilter} />
 );
 
-SearchFilterNext.Select = (props: Omit<Props, 'component'> & Component) => (
-  <SearchFilterNext {...props} component={SelectFilter} />
+SearchFilter.Select = (props: Omit<Props, 'component'> & Component) => (
+  <SearchFilter {...props} component={SelectFilter} />
 );
 
-export { SearchFilterNext };
+/**
+ * @deprecated This component was used for rapid prototyping of the Backstage
+ * Search platform. Now that the API has stabilized, you should use the
+ * <SearchFilter /> component instead. This component will be removed in an
+ * upcoming release.
+ */
+const SearchFilterNext = SearchFilter;
+
+export { SearchFilter, SearchFilterNext };

plugins/search/src/components/SearchFilter/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { SearchFilterNext } from './SearchFilterNext';
+export { SearchFilter, SearchFilterNext } from './SearchFilter';

plugins/search/src/components/index.tsx

@@ -15,7 +15,7 @@
  */
 
 export * from './Filters';
-export * from './SearchFilterNext';
+export * from './SearchFilter';
 export * from './SearchBar';
 export * from './SearchPage';
 export * from './SearchResult';

plugins/search/src/index.ts

@@ -31,6 +31,7 @@ export {
   SearchContextProvider,
   useSearch,
   SearchPage as Router,
+  SearchFilter,
   SearchFilterNext,
   SidebarSearch,
 } from './components';