Merge pull request #8697 from backstage/search/filter-autocomplete

Introduce a <SearchFilter.Autocomplete /> Component

.changeset/search-crying-in-hmart.md

@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-search': minor
+---
+
+The way labels are controlled on both the `<SearchFilter.Checkbox />` and
+`<SearchFilter.Select />` components has changed. Previously, the string passed
+on the `name` prop (which controls the field being filtered on) was also
+rendered as the field label. Now, if you want a label rendered, it must be
+passed on the new `label` prop. If no `label` is provided, no label will be
+rendered.

.changeset/search-something-new.md

@@ -0,0 +1,76 @@
+---
+'@backstage/create-app': patch
+---
+
+An example instance of a `<SearchFilter.Select />` with asynchronously loaded values was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
+
+This is an entirely optional change; if you wish to adopt it, 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
+@@ -2,6 +2,10 @@ import React from 'react';
+ import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
+
+ import { CatalogResultListItem } from '@backstage/plugin-catalog';
++import {
++  catalogApiRef,
++  CATALOG_FILTER_EXISTS,
++} from '@backstage/plugin-catalog-react';
+ import { DocsResultListItem } from '@backstage/plugin-techdocs';
+
+ import {
+@@ -10,6 +14,7 @@ import {
+   SearchResult,
+   SearchType,
+   DefaultResultListItem,
++  useSearch,
+ } from '@backstage/plugin-search';
+ import {
+   CatalogIcon,
+@@ -18,6 +23,7 @@ import {
+   Header,
+   Page,
+ } from '@backstage/core-components';
++import { useApi } from '@backstage/core-plugin-api';
+
+ const useStyles = makeStyles((theme: Theme) => ({
+   bar: {
+@@ -36,6 +42,8 @@ const useStyles = makeStyles((theme: Theme) => ({
+
+ const SearchPage = () => {
+   const classes = useStyles();
++  const { types } = useSearch();
++  const catalogApi = useApi(catalogApiRef);
+
+   return (
+     <Page themeId="home">
+@@ -65,6 +73,27 @@ const SearchPage = () => {
+               ]}
+             />
+             <Paper className={classes.filters}>
++              {types.includes('techdocs') && (
++                <SearchFilter.Select
++                  className={classes.filter}
++                  label="Entity"
++                  name="name"
++                  values={async () => {
++                    // Return a list of entities which are documented.
++                    const { items } = await catalogApi.getEntities({
++                      fields: ['metadata.name'],
++                      filter: {
++                        'metadata.annotations.backstage.io/techdocs-ref':
++                          CATALOG_FILTER_EXISTS,
++                      },
++                    });
++
++                    const names = items.map(entity => entity.metadata.name);
++                    names.sort();
++                    return names;
++                  }}
++                />
++              )}
+               <SearchFilter.Select
+                 className={classes.filter}
+                 name="kind"
+```

.changeset/search-the-things.md

@@ -0,0 +1,27 @@
+---
+'@backstage/create-app': patch
+---
+
+A `label` prop was added to `<SearchFilter.* />` components in order to allow
+user-friendly label strings (as well as the option to omit a label). In order
+to maintain labels on your existing filters, add a `label` prop to them in your
+`SearchPage.tsx`.
+
+```diff
+--- a/packages/app/src/components/search/SearchPage.tsx
++++ b/packages/app/src/components/search/SearchPage.tsx
+@@ -96,11 +96,13 @@ const SearchPage = () => {
+               )}
+               <SearchFilter.Select
+                 className={classes.filter}
++                label="Kind"
+                 name="kind"
+                 values={['Component', 'Template']}
+               />
+               <SearchFilter.Checkbox
+                 className={classes.filter}
++                label="Lifecycle"
+                 name="lifecycle"
+                 values={['experimental', 'production']}
+               />
+```

.changeset/search-under-the-sun.md

@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete filter.
+
+This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously by passing a function that resolves the list of values to the `values` prop. (An optional `valuesDebounceMs` prop may also be provided to control the debounce time).
+
+Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.