From 20af5a701f6954314ec468c8d1ff06022f9e2f39 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Wed, 29 Dec 2021 12:10:23 +0100
Subject: [PATCH] Update create-app with search accordion component.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .changeset/search-over-tysta-skogor.md        | 58 +++++++++++++++++++
 .../app/src/components/search/SearchPage.tsx  | 30 ++++++++--
 2 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/search-over-tysta-skogor.md

diff --git a/.changeset/search-over-tysta-skogor.md b/.changeset/search-over-tysta-skogor.md
new file mode 100644
index 0000000000..5398ae7f5f
--- /dev/null
+++ b/.changeset/search-over-tysta-skogor.md
@@ -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"
+```
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index 95c8c64c62..cf380b6f5c 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -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"