paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Update create-app with search accordion component.

Browse Source 
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
This commit is contained in:
Eric Peterson
2021-12-29 12:10:23 +01:00
parent a6bc757a45
commit 20af5a701f
2 changed files with 82 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/search-over-tysta-skogor.md
+58
View File
@@ -0,0 +1,58 @@
---
'@backstage/create-app': patch
---
The `<SearchType />` filter in the composed `SearchPage.tsx` was replaced with the `<SearchType.Accordion />` variant.
This is an entirely optional change; if you wish to display a control surface for search `types` as a single-select accordion (as opposed to the current multi-select of checkboxes), you can make the following (or similar) changes to your search page layout:
```diff
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -11,7 +11,7 @@ import {
SearchType,
DefaultResultListItem,
} from '@backstage/plugin-search';
-import { Content, Header, Page } from '@backstage/core-components';
+import { CatalogIcon, Content, DocsIcon, Header, Page } from '@backstage/core-components';
const useStyles = makeStyles((theme: Theme) => ({
bar: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
filters: {
padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
},
filter: {
'& + &': {
@@ -41,12 +42,23 @@ const SearchPage = () => {
</Paper>
</Grid>
<Grid item xs={3}>
+ <SearchType.Accordion
+ name="Result Type"
+ defaultValue="software-catalog"
+ types={[
+ {
+ value: 'software-catalog',
+ name: 'Software Catalog',
+ icon: <CatalogIcon />,
+ },
+ {
+ value: 'techdocs',
+ name: 'Documentation',
+ icon: <DocsIcon />,
+ },
+ ]}
+ />
<Paper className={classes.filters}>
- <SearchType
- values={['techdocs', 'software-catalog']}
- name="type"
- defaultValue="software-catalog"
- />
<SearchFilter.Select
className={classes.filter}
name="kind"
```
packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+24 -6
View File
@@ -11,7 +11,13 @@ import {
SearchType,
DefaultResultListItem,
} from '@backstage/plugin-search';
import { Content, Header, Page } from '@backstage/core-components';
import {
CatalogIcon,
Content,
DocsIcon,
Header,
Page,
} from '@backstage/core-components';
const useStyles = makeStyles((theme: Theme) => ({
bar: {
@@ -19,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
filters: {
padding: theme.spacing(2),
marginTop: theme.spacing(2),
},
filter: {
'& + &': {
@@ -41,12 +48,23 @@ const SearchPage = () => {
</Paper>
</Grid>
<Grid item xs={3}>
<SearchType.Accordion
name="Result Type"
defaultValue="software-catalog"
types={[
{
value: 'software-catalog',
name: 'Software Catalog',
icon: <CatalogIcon />,
},
{
value: 'techdocs',
name: 'Documentation',
icon: <DocsIcon />,
},
]}
/>
<Paper className={classes.filters}>
<SearchType
values={['techdocs', 'software-catalog']}
name="type"
defaultValue="software-catalog"
/>
<SearchFilter.Select
className={classes.filter}
name="kind"