From da97e5058000923a0d15e973eb8c696d32345a8a Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 9 Jul 2021 12:17:38 +0200 Subject: [PATCH 1/7] move default styles into components instead of searchpage Signed-off-by: Emma Indal --- .../app/src/components/search/SearchPage.tsx | 9 +-- .../src/components/SearchBar/SearchBar.tsx | 64 ++++++++++++------- .../components/SearchFilter/SearchFilter.tsx | 14 ++-- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 6fe02de837..2818351f41 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -30,9 +30,6 @@ import { DocsResultListItem } from '@backstage/plugin-techdocs'; import { SearchResultSet } from '@backstage/search-common'; const useStyles = makeStyles((theme: Theme) => ({ - bar: { - padding: theme.spacing(1, 0), - }, filters: { padding: theme.spacing(2), }, @@ -100,9 +97,7 @@ const SearchPage = () => { - - - + @@ -112,12 +107,10 @@ const SearchPage = () => { defaultValue="software-catalog" /> diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index a1db818488..e011dcbfec 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -16,7 +16,14 @@ import React, { ChangeEvent, useState } from 'react'; import { useDebounce } from 'react-use'; -import { InputBase, InputAdornment, IconButton } from '@material-ui/core'; +import { + Paper, + InputBase, + InputAdornment, + IconButton, + Theme, + makeStyles, +} from '@material-ui/core'; import SearchIcon from '@material-ui/icons/Search'; import ClearButton from '@material-ui/icons/Clear'; @@ -27,7 +34,14 @@ type Props = { debounceTime?: number; }; +const useStyles = makeStyles((theme: Theme) => ({ + searchBar: { + padding: theme.spacing(1, 0), + }, +})); + export const SearchBar = ({ className, debounceTime = 0 }: Props) => { + const classes = useStyles(); const { term, setTerm } = useSearch(); const [value, setValue] = useState(term); @@ -40,28 +54,30 @@ export const SearchBar = ({ className, debounceTime = 0 }: Props) => { const handleClear = () => setValue(''); return ( - - - - - - } - endAdornment={ - - - - - - } - /> + + + + + + + } + endAdornment={ + + + + + + } + /> + ); }; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx index 52b03c785b..d9da3c4dbd 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx @@ -24,15 +24,21 @@ import { Select, MenuItem, FormLabel, + Theme, } from '@material-ui/core'; import { useSearch } from '../SearchContext'; -const useStyles = makeStyles({ +const useStyles = makeStyles((theme: Theme) => ({ label: { textTransform: 'capitalize', }, -}); + filter: { + '& + &': { + marginTop: theme.spacing(2.5), + }, + }, +})); export type Component = { className?: string; @@ -80,7 +86,7 @@ const CheckboxFilter = ({ return ( @@ -138,7 +144,7 @@ const SelectFilter = ({ return ( Date: Fri, 9 Jul 2021 12:19:15 +0200 Subject: [PATCH 2/7] remove component=li from Divider in DefaultResultListItem as it gives a marker pseudo-element (bullet) to the divider Signed-off-by: Emma Indal --- .../components/DefaultResultListItem/DefaultResultListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx index 8cb560b7e5..ed508aa671 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -33,7 +33,7 @@ export const DefaultResultListItem = ({ result }: Props) => { secondary={result.text} /> - + ); }; From 70fe17ce6cd04fb4dfc37cc0eb850aa5d812355b Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 9 Jul 2021 12:20:04 +0200 Subject: [PATCH 3/7] export SearchContext to be able to use in storybook as SearchContextProvider requires searchApiRef Signed-off-by: Emma Indal --- .../search/src/components/SearchContext/SearchContext.tsx | 4 +++- plugins/search/src/components/SearchContext/index.tsx | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/plugins/search/src/components/SearchContext/SearchContext.tsx b/plugins/search/src/components/SearchContext/SearchContext.tsx index eee72d9fc5..619471d490 100644 --- a/plugins/search/src/components/SearchContext/SearchContext.tsx +++ b/plugins/search/src/components/SearchContext/SearchContext.tsx @@ -45,7 +45,9 @@ type SettableSearchContext = Omit< 'result' | 'setTerm' | 'setTypes' | 'setFilters' | 'setPageCursor' >; -const SearchContext = createContext(undefined); +export const SearchContext = createContext( + undefined, +); export const SearchContextProvider = ({ initialState = { diff --git a/plugins/search/src/components/SearchContext/index.tsx b/plugins/search/src/components/SearchContext/index.tsx index 895e66a9e5..682ade916f 100644 --- a/plugins/search/src/components/SearchContext/index.tsx +++ b/plugins/search/src/components/SearchContext/index.tsx @@ -14,4 +14,8 @@ * limitations under the License. */ -export { SearchContextProvider, useSearch } from './SearchContext'; +export { + SearchContextProvider, + SearchContext, + useSearch, +} from './SearchContext'; From c47bb87c39d06c8bb4fc4c17d71e78f681490a3e Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 9 Jul 2021 12:21:19 +0200 Subject: [PATCH 4/7] add stories to storybook for reusable search components Signed-off-by: Emma Indal --- .../DefaultResultListItem.stories.tsx | 43 +++++++++ .../SearchBar/SearchBar.stories.tsx | 45 +++++++++ .../SearchFilter/SearchFilter.stories.tsx | 69 ++++++++++++++ .../SearchResult/SearchResult.stories.tsx | 95 +++++++++++++++++++ 4 files changed, 252 insertions(+) create mode 100644 plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx create mode 100644 plugins/search/src/components/SearchBar/SearchBar.stories.tsx create mode 100644 plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx create mode 100644 plugins/search/src/components/SearchResult/SearchResult.stories.tsx diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx new file mode 100644 index 0000000000..34436f9f93 --- /dev/null +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx @@ -0,0 +1,43 @@ +/* + * 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 from 'react'; +import { Grid } from '@material-ui/core'; +import { DefaultResultListItem } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/DefaultResultListItem', + component: DefaultResultListItem, +}; + +export const Default = () => { + return ( + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000000..16da352ece --- /dev/null +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,45 @@ +/* + * 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 from 'react'; +import { Grid } from '@material-ui/core'; +import { SearchBar, SearchContext } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchBar', + component: SearchBar, +}; + +const defaultValue = { + term: '', + setTerm: () => {}, +}; + +export const Default = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx new file mode 100644 index 0000000000..190856fca8 --- /dev/null +++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx @@ -0,0 +1,69 @@ +/* + * 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 from 'react'; +import { Grid, Paper } from '@material-ui/core'; +import { SearchFilter, SearchContext } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchFilter', + component: SearchFilter, +}; + +const defaultValue = { + filters: {}, +}; + +export const CheckBoxFilter = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; + +export const SelectFilter = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx new file mode 100644 index 0000000000..bf83b8b1ad --- /dev/null +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -0,0 +1,95 @@ +/* + * 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 from 'react'; +import { List, Link, ListItem } from '@material-ui/core'; +import { SearchResult, SearchContext, DefaultResultListItem } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchResult', + component: SearchResult, +}; + +const defaultValue = { + result: { + loading: false, + error: '', + value: { + results: [ + { + type: 'custom-result-item', + document: { + location: 'search/search-result-1', + title: 'Search Result 1', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-2', + title: 'Search Result 2', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-3', + title: 'Search Result 3', + text: 'some text from the search result', + }, + }, + ], + }, + }, +}; + +export const Default = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + {({ results }) => ( + + {results.map(({ type, document }) => { + switch (type) { + case 'custom-result-item': + return ( + + ); + default: + return ( + + + {document.title} - {document.text} + + + ); + } + })} + + )} + + + + ); +}; From c31fd98a4f9f321d496943093ad5587e067f5f6c Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 9 Jul 2021 15:15:20 +0200 Subject: [PATCH 5/7] remove changes to components Signed-off-by: Emma Indal --- .../app/src/components/search/SearchPage.tsx | 14 +++- .../SearchBar/SearchBar.stories.tsx | 6 +- .../src/components/SearchBar/SearchBar.tsx | 64 +++++++------------ .../components/SearchFilter/SearchFilter.tsx | 14 ++-- 4 files changed, 45 insertions(+), 53 deletions(-) diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 2818351f41..37717ed158 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -30,6 +30,14 @@ import { DocsResultListItem } from '@backstage/plugin-techdocs'; import { SearchResultSet } from '@backstage/search-common'; const useStyles = makeStyles((theme: Theme) => ({ + bar: { + padding: theme.spacing(1, 0), + }, + filter: { + '& + &': { + marginTop: theme.spacing(2.5), + }, + }, filters: { padding: theme.spacing(2), }, @@ -97,7 +105,9 @@ const SearchPage = () => { - + + + @@ -107,10 +117,12 @@ const SearchPage = () => { defaultValue="software-catalog" /> diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 16da352ece..fa2ba0d94e 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Grid } from '@material-ui/core'; +import { Paper, Grid } from '@material-ui/core'; import { SearchBar, SearchContext } from '../index'; import { MemoryRouter } from 'react-router'; @@ -36,7 +36,9 @@ export const Default = () => { - + + + diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index e011dcbfec..a1db818488 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -16,14 +16,7 @@ import React, { ChangeEvent, useState } from 'react'; import { useDebounce } from 'react-use'; -import { - Paper, - InputBase, - InputAdornment, - IconButton, - Theme, - makeStyles, -} from '@material-ui/core'; +import { InputBase, InputAdornment, IconButton } from '@material-ui/core'; import SearchIcon from '@material-ui/icons/Search'; import ClearButton from '@material-ui/icons/Clear'; @@ -34,14 +27,7 @@ type Props = { debounceTime?: number; }; -const useStyles = makeStyles((theme: Theme) => ({ - searchBar: { - padding: theme.spacing(1, 0), - }, -})); - export const SearchBar = ({ className, debounceTime = 0 }: Props) => { - const classes = useStyles(); const { term, setTerm } = useSearch(); const [value, setValue] = useState(term); @@ -54,30 +40,28 @@ export const SearchBar = ({ className, debounceTime = 0 }: Props) => { const handleClear = () => setValue(''); return ( - - - - - - - } - endAdornment={ - - - - - - } - /> - + + + + + + } + endAdornment={ + + + + + + } + /> ); }; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx index d9da3c4dbd..52b03c785b 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx @@ -24,21 +24,15 @@ import { Select, MenuItem, FormLabel, - Theme, } from '@material-ui/core'; import { useSearch } from '../SearchContext'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles({ label: { textTransform: 'capitalize', }, - filter: { - '& + &': { - marginTop: theme.spacing(2.5), - }, - }, -})); +}); export type Component = { className?: string; @@ -86,7 +80,7 @@ const CheckboxFilter = ({ return ( @@ -144,7 +138,7 @@ const SelectFilter = ({ return ( Date: Mon, 2 Aug 2021 14:23:43 +0200 Subject: [PATCH 6/7] chore; fixing up the search stuff Signed-off-by: blam --- packages/app/src/components/search/SearchPage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 37717ed158..cf4e610b80 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -41,9 +41,6 @@ const useStyles = makeStyles((theme: Theme) => ({ filters: { padding: theme.spacing(2), }, - filter: { - marginTop: theme.spacing(2.5), - }, })); // TODO: Move this into the search plugin once pagination is natively supported. From b0e8a24217545a266f9ec4314027bf320f10a911 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 2 Aug 2021 14:28:38 +0200 Subject: [PATCH 7/7] chore: updating search report\ Signed-off-by: blam --- plugins/search/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 525136713d..e3075a448d 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -167,7 +167,7 @@ export const useSearch: () => SearchContextValue; // Warnings were encountered during analysis: // -// src/components/SearchContext/SearchContext.d.ts:18:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts +// src/components/SearchContext/SearchContext.d.ts:19:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts