Update search plugin API report and add changesets.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
2021-12-30 15:12:47 +01:00
parent 86164e96ce
commit 4aca2a5307
3 changed files with 128 additions and 8 deletions
@@ -0,0 +1,76 @@
+---
+'@backstage/create-app': patch
+---
+
+An example instance of the new `<SearchFilter.Autocomplete />` 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.Autocomplete
+                  className={classes.filter}
+                  label="Entity"
+                  name="name"
+                  asyncValues={async partial => {
+                    // Return a list of entitis which are documented.
+                    const { items } = await catalogApi.getEntities({
+                      fields: ['metadata.name'],
+                      filter: {
+                        'metadata.annotations.backstage.io/techdocs-ref':
+                          CATALOG_FILTER_EXISTS,
+                      },
+                    });
+
+                    return items
+                      .map(entity => entity.metadata.name)
+                      .filter(name => name.includes(partial));
+                  }}
+                />
+              )}
+               <SearchFilter.Select
+                 className={classes.filter}
+                 name="kind"
+```
@@ -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.
+
+This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously with a new `asyncValues` prop, which takes an asynchronous function that resolves to the list of values (an optional `asyncDebounce` prop may also be provided).
+
+Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.