Merge pull request #8646 from backstage/feat/search-facet-by-type

[Search] Introduce a <SearchType.Accordion /> Variant
2021-12-29 13:58:29 +01:00
parent a0004d3451 20af5a701f
commit e35aff0d16
17 changed files with 729 additions and 287 deletions
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Introduces a `<SearchType.Accordion />` variant, which operates on the same part of a search query as the existing `<SearchType />`, but in a more opinionated way (as a single-select control surface suitable for faceted search UIs).
+
+Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchtype--accordion) to see how it can be used.
@@ -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"
+```