diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 5d977807bd..4579491961 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/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,
diff --git a/plugins/search/src/components/SearchBarNext/SearchBarNext.test.tsx b/plugins/search/src/components/SearchBar/SearchBar.test.tsx
similarity index 94%
rename from plugins/search/src/components/SearchBarNext/SearchBarNext.test.tsx
rename to plugins/search/src/components/SearchBar/SearchBar.test.tsx
index a5075c5593..c4b4ea7f93 100644
--- a/plugins/search/src/components/SearchBarNext/SearchBarNext.test.tsx
+++ b/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(
-
+
,
);
@@ -60,7 +60,7 @@ describe('SearchBarNext', () => {
it('Renders based on initial search', async () => {
render(
-
+
,
);
@@ -72,7 +72,7 @@ describe('SearchBarNext', () => {
it('Updates term state when text is entered', async () => {
render(
-
+
,
);
@@ -94,7 +94,7 @@ describe('SearchBarNext', () => {
it('Clear button clears term state', async () => {
render(
-
+
,
);
@@ -120,7 +120,7 @@ describe('SearchBarNext', () => {
render(
-
+
,
);
diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index 9aa48e7284..483ea0ed28 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/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(term);
+
+ useDebounce(() => setTerm(value), debounceTime, [value]);
+
+ const handleQuery = (e: ChangeEvent) => {
+ setValue(e.target.value);
+ };
+
+ const handleClear = () => setValue('');
return (
- handleSearch(e)}
- className={classes.root}
- >
-
-
-
- handleSearch(e)}
- inputProps={{ 'aria-label': 'search backstage' }}
- />
- handleClearSearchBar()}>
-
-
-
+
+
+
+
+
+ }
+ endAdornment={
+
+
+
+
+
+ }
+ />
);
};
diff --git a/plugins/search/src/components/SearchBar/index.tsx b/plugins/search/src/components/SearchBar/index.tsx
index e2b8af1946..065e3aaaa1 100644
--- a/plugins/search/src/components/SearchBar/index.tsx
+++ b/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.
diff --git a/plugins/search/src/components/SearchBarNext/SearchBarNext.tsx b/plugins/search/src/components/SearchBarNext/SearchBarNext.tsx
deleted file mode 100644
index 76bc9bf4f9..0000000000
--- a/plugins/search/src/components/SearchBarNext/SearchBarNext.tsx
+++ /dev/null
@@ -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(term);
-
- useDebounce(() => setTerm(value), debounceTime, [value]);
-
- const handleQuery = (e: ChangeEvent) => {
- setValue(e.target.value);
- };
-
- const handleClear = () => setValue('');
-
- return (
-
-
-
-
-
- }
- endAdornment={
-
-
-
-
-
- }
- />
- );
-};
diff --git a/plugins/search/src/components/SearchBarNext/index.tsx b/plugins/search/src/components/SearchBarNext/index.tsx
deleted file mode 100644
index 5f46a6dda6..0000000000
--- a/plugins/search/src/components/SearchBarNext/index.tsx
+++ /dev/null
@@ -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';
diff --git a/plugins/search/src/components/index.tsx b/plugins/search/src/components/index.tsx
index 3032cda0b7..6bfb430f29 100644
--- a/plugins/search/src/components/index.tsx
+++ b/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';
diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts
index 24eb049d42..fb187d4840 100644
--- a/plugins/search/src/plugin.ts
+++ b/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
+ * 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),
},
}),
);