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